Video-Training: Modernes Webdesign mit Jonas Hellwig

Moderne Arbeitsabläufe im Webdesign

1. Einleitung
2. Der Workflow für das responsive Webdesign
3. Aktuelle Design-Trends
4. Testen und optimieren mit Rapid Prototyping
5. Modulare Websites entwickeln
6. Kreative Entscheidungsfindung mit Style Tiles
7. Orientierung durch Style Guides
8. Im Browser gestalten
9. Graceful Degradation und Progressive Enhancement
10. Verfügbare Funktionen ermitteln mit »Modernizr«
11. Mobile First und Content First

Vom Briefing zum Design-Konzept

1. Einleitung
2. Flexible Layouts fehlerfrei planen
3. Inhalte choreografieren
4. Die Sitemap planen
5. Navigationskonzepte im Überblick
6. Der Inhalt im Fokus
7. Die Hardware im Blick – Touchscreens & Co.
8. Das Beispielprojekt planen

Die Weichen stellen mit Media Queries

1. Einleitung
2. Die klassischen Layouttypen
3. Breakpoints intelligent setzen
4. Multi-Screen-Layouts
5. Media Types und Media Queries
6. Das Mobile-First-Konzept technisch umsetzen

Gestaltungsraster und Prototypen

1. Einleitung
2. Klassische Gestaltungsraster
3. Gestaltungsraster für responsive Websites planen
4. Responsive Gestaltungsraster ausarbeiten
5. Das Box-Modell von CSS
6. Frameworks und Code-Vorlagen
7. Rapid Prototyping mit Bootstrap und Foundation
8. Prototypen erstellen mit Adobe Edge Reflow

Den Prototypen des Beispiel-Projekts entwickeln

1. Einleitung
2. Die Basis-Dateien anlegen
3. Inhalte einfügen und strukturieren
4. Das Raster planen
5. Das Raster mit CSS konstruieren
6. Die Smartphone-Ansicht erstellen
7. Das Layout zentrieren
8. Details und Abstände einbauen
9. Die Navigation gestalten
10. Den Navigations-Slider umsetzen
11. Fehler suchen und beheben

Typografie im Webdesign

1. Einleitung
2. Webfonts einbinden
3. Schriftgrößen definieren
4. Schrifteffekte mit CSS3
5. Anpassungsfähige Typografie
6. Webfont-Icons verwenden
7. Die Typografie des Beispielprojekts

Stil und Farbe

1. Einleitung
2. Farbkonzepte entwickeln
3. Den Stil des Beispielprojekts entwickeln
4. Weißraum und Gestaltgesetze
5. Verläufe verwenden
6. Muster mit CSS3 umsetzen
7. Mehrere Hintergrundgrafiken verwenden
8. Flexible Hintergrundelemente gestalten

Layout und Einzelgrafiken

1. Einleitung
2. Schaltflächen mit Schlagschatten gestalten
3. Verknüpfte Smartobjekte in Photoshop
4. CSS-Export aus Photoshop, Illustrator & Co.
5. Photoshop und Reflow CC
6. Vektorgrafiken mit Illustrator erstellen
7. SVG-Grafiken verwenden
8. Webfont-Grafiken erzeugen

Web-Grafiken ausgeben

1. Einleitung
2. Farbraum und Dateiformat
3. Der Photoshop-Generator
4. Vektorgrafiken mit dem Generator exportieren
5. Die Performance verbessern mit CSS-Sprites
6. Bilder als Code einbetten
7. Bilder verlustfrei komprimieren

Das Design des Beispiel-Projekts

1. Einleitung
2. Der Navigationsbereich
3. Das Titel-Element
4. Schaltflächen und Teaser
5. Der Seitenkopf
6. Eine Designvorlage erstellen
7. Die Illustrationen skizzieren
8. Die Illustrationen ausarbeiten

Grafiken für hochauflösende Bildschirme optimieren

1. Einleitung
2. Das Retina-Problem
3. Pixelgrafiken optimieren und ausgeben
4. Grafiken richtig skalieren und komprimieren
5. Bildalternativen per CSS bereitstellen
6. Bilder automatisch austauschen

Einführung in Sass und SCSS

1. Einleitung
2. Die Konzepte DRY und OOCSS
3. Sass verstehen und einsetzen
4. Verschachtelung und Eltern-Selektoren
5. Die verschiedenen Ausgabestile
6. Variablen verwenden
7. Code wiederverwenden mit Mixins
8. Selektoren erweitern mit Extends