Video-Training: Modernes Webdesign mit Jonas Hellwig
Neue Workflows, Techniken und Designideen inkl. Rapid Prototyping, Responsive Design und Sass
Produktbeschreibung

Sie möchten attraktive und zukunftsfähige Websites gestalten? Dann sollten Sie sich dringend dieses Training anschauen! Webdesign-Experte Jonas Hellwig erklärt, wie Sie im Zeitalter des mobilen Webs überzeugende Websites konzipieren und umsetzen, die auf jedem Gerät perfekt funktionieren. Mit modernen Gestaltungskonzepten, zahlreichen Praxistipps und aktuellen Designtrends wie Flat Design, Rapid Prototyping und Responsive Design erhalten Sie mit diesem Training außerdem eine Fülle an Inspirationen für Ihre Projekte.
Moderne Webtechnologien richtig anwenden
Rapid Prototyping, Responsive Design, Mobile First – in diesem Video-Training sehen Sie die neuen Workflows und Techniken der Webentwickler live in der Praxis und erfahren, wie Sie sie optimal anwenden.
Multi-Screen-Layouts entwerfen
Entwickeln Sie Webseiten, die auf allen Geräten und Auflösungen gut aussehen. Jonas Hellwig zeigt Ihnen, wie Sie nach den Regeln des Responsiven Designs gestalten. Machen Sie mit bei einem umfangreichen Praxisprojekt und lernen Sie, wie Sie Ihre Webseiten für die Zukunft fit machen.
Webseiten planen und konzipieren
Vom Briefing zum Designkonzept – Der Webexperte zeigt Ihnen, wie Sie ein professionelles Webprojekt mit modernen Mitteln umsetzen. Sie entwickeln blitzschnell Prototypen, erarbeiten das Layout, nutzen Web-Schriften, und optimieren Ihr Design für Retina-Displays.
Trailer & Demo-Videos

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Inhaltsverzeichnis
Moderne Arbeitsabläufe im Webdesign
- Einleitung
- Der Workflow für das responsive Webdesign
- Aktuelle Design-Trends
- Testen und optimieren mit Rapid Prototyping
- Modulare Websites entwickeln
- Kreative Entscheidungsfindung mit Style Tiles
- Orientierung durch Style Guides
- Im Browser gestalten
- Graceful Degradation und Progressive Enhancement
- Verfügbare Funktionen ermitteln mit »Modernizr«
- Mobile First und Content First
Vom Briefing zum Design-Konzept
- Einleitung
- Flexible Layouts fehlerfrei planen
- Inhalte choreografieren
- Die Sitemap planen
- Navigationskonzepte im Überblick
- Der Inhalt im Fokus
- Die Hardware im Blick – Touchscreens & Co.
- Das Beispielprojekt planen
Die Weichen stellen mit Media Queries
- Einleitung
- Die klassischen Layouttypen
- Breakpoints intelligent setzen
- Multi-Screen-Layouts
- Media Types und Media Queries
- Das Mobile-First-Konzept technisch umsetzen
Gestaltungsraster und Prototypen
- Einleitung
- Klassische Gestaltungsraster
- Gestaltungsraster für responsive Websites planen
- Responsive Gestaltungsraster ausarbeiten
- Das Box-Modell von CSS
- Frameworks und Code-Vorlagen
- Rapid Prototyping mit Bootstrap und Foundation
- Prototypen erstellen mit Adobe Edge Reflow
Den Prototypen des Beispiel-Projekts entwickeln
- Einleitung
- Die Basis-Dateien anlegen
- Inhalte einfügen und strukturieren
- Das Raster planen
- Das Raster mit CSS konstruieren
- Die Smartphone-Ansicht erstellen
- Das Layout zentrieren
- Details und Abstände einbauen
- Die Navigation gestalten
- Den Navigations-Slider umsetzen
- Fehler suchen und beheben
Typografie im Webdesign
- Einleitung
- Webfonts einbinden
- Schriftgrößen definieren
- Schrifteffekte mit CSS3
- Anpassungsfähige Typografie
- Webfont-Icons verwenden
- Die Typografie des Beispielprojekts
Stil und Farbe
- Einleitung
- Farbkonzepte entwickeln
- Den Stil des Beispielprojekts entwickeln
- Weißraum und Gestaltgesetze
- Verläufe verwenden
- Muster mit CSS3 umsetzen
- Mehrere Hintergrundgrafiken verwenden
- Flexible Hintergrundelemente gestalten
Layout und Einzelgrafiken
- Einleitung
- Schaltflächen mit Schlagschatten gestalten
- Verknüpfte Smartobjekte in Photoshop
- CSS-Export aus Photoshop, Illustrator & Co.
- Photoshop und Reflow CC
- Vektorgrafiken mit Illustrator erstellen
- SVG-Grafiken verwenden
- Webfont-Grafiken erzeugen
Web-Grafiken ausgeben
- Einleitung
- Farbraum und Dateiformat
- Der Photoshop-Generator
- Vektorgrafiken mit dem Generator exportieren
- Die Performance verbessern mit CSS-Sprites
- Bilder als Code einbetten
- Bilder verlustfrei komprimieren
Das Design des Beispiel-Projekts
- Einleitung
- Der Navigationsbereich
- Das Titel-Element
- Schaltflächen und Teaser
- Der Seitenkopf
- Eine Designvorlage erstellen
- Die Illustrationen skizzieren
- Die Illustrationen ausarbeiten
Grafiken für hochauflösende Bildschirme optimieren
- Einleitung
- Das Retina-Problem
- Pixelgrafiken optimieren und ausgeben
- Grafiken richtig skalieren und komprimieren
- Bildalternativen per CSS bereitstellen
- Bilder automatisch austauschen
Einführung in Sass und SCSS
- Einleitung
- Die Konzepte DRY und OOCSS
- Sass verstehen und einsetzen
- Verschachtelung und Eltern-Selektoren
- Die verschiedenen Ausgabestile
- Variablen verwenden
- Code wiederverwenden mit Mixins
- Selektoren erweitern mit Extends
Kunden-Feedback zu diesem Video-Training
[…] mit Begeisterung habe ich Ihr Video Modernes Webdesign mit Jonas Hellwig gesehen. Es hat richtig Lust auf Webdesign gemacht […]
April 2015, Sandra Basse
Ich habe mir vor einigen Tagen die DVD "Modernes Webdesign" gekauft und diese in den letzten beiden Tagen regelrecht verschlungen. Ein großes Lob hierfür an Dich, wirklich toll gemacht.
November 2014, Thomas Geber
Ich habe jetzt mal deine Demo-Site in TYPO3 und WordPress umgesetzt. Das klappt hervorragend. Das einzige, was ich nicht in den Griff bekomen habe, ist die class=“active“ der aktuellen Site. Warum auch immer. Möglicherweise weißt du die Lösung.
Meine Baustellen:
[Links redaktionell entfernt]
Gruß. Petra
P.S.: Und da würde ich dann die JavaScript-Version des Sliders bevorzugen.
WordPress fügt Menüeinträgen automatisch CSS-Klassen hinzu, mit denen du das gewünschte Styling erreichen kannst. Siehe: Menu Item CSS Classes
Super, dein Link. Bei TYPO ist das ja kein Problem, da kann die Navigation genauso bleiben, wie sie ist. Bei WordPress ist da schon wesentlich mehr Anpassung erforderlich.
Hallo, bin Anfänger. Unsre Zeit ist so schnell lebig. Ich wollte daher fragen, ob da eine Überarbeitung kommt, weil es von 2014 schon ist. Oder ob ich damit immer noch einsteigen kann. Danke.
Hallo Sabine, vielen Dank für dein Interesse am Training. Die allermeisten konzeptionellen, gestalterischen und technischen Themen des Trainings sind auch heute noch gültig und umsetzbar. Was sich stark verändert hat sind die verwendeten Programme. Reflow existiert gar nicht mehr. In Photoshop und Illustrator hat sich recht viel verändert.
Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: