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

Inhaltsverzeichnis

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

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

Diskussion zu diesem Produkt

  1. Petra
    schrieb am 11.03.2015 um 11:57 Uhr:

    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.

    • Jonas Hellwig
      schrieb am 01.03.2015 um 10:49 Uhr:

      WordPress fügt Menüeinträgen automatisch CSS-Klassen hinzu, mit denen du das gewünschte Styling erreichen kannst. Siehe: Menu Item CSS Classes

      • Petra
        schrieb am 01.03.2015 um 11:57 Uhr:

        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.

Ihr Kommentar zu diesem Termin

Bei Fragen oder Kritik zu diesem Produkt, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

Mit diesen Kunden haben wir bereits erfolgreich zusammengearbeitet.