Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Modernes Webdesign
mit Jonas Hellwig

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

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

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

Feedback & Ergänzungen – 28 Kommentare

  1. Sabine Engelhardt
    schrieb am 24.07.2019 um 10:40 Uhr:

    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.

    Antworten
    • Jonas Hellwig
      schrieb am 24.07.2019 um 14:03 Uhr:

      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.

      Antworten
  2. 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.

    Antworten
    • 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

      Antworten
      • 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.

  3. Petra
    schrieb am 25.02.2015 um 12:05 Uhr:

    Hallo Jonas,
    mal wieder eine Frage von mir. Zum Verständnis: Was bewirkt eigentlich, dass der Inhalt nach unten verschoben wird, wenn die mobile Navigation aufklappt?
    Gruß. Petra

    Antworten
    • Jonas Hellwig
      schrieb am 25.02.2015 um 17:57 Uhr:

      Ich bin nicht sicher, ob ich deine Frage richtig verstehe. Wenn die Navigation den Inhalt nach unten verschiebt, muss der Anwender nicht klicken um den Inhalt lesen zu können. Er scrolled einfach runter.

      Antworten
      • Petra
        schrieb am 25.02.2015 um 19:19 Uhr:

        Ist vielleicht wirklich missverständlich meine Frage. Wodurch wird der Inhalt nach unten verschoben? Durch JavaScript?

      • Jonas Hellwig
        schrieb am 25.02.2015 um 19:46 Uhr:

        Hier ist beides möglich. Schau dir dazu mal folgende Beispiele von mir an:
        Slider mit JavaScript
        Slider mit CSS (:target)

      • Petra
        schrieb am 28.02.2015 um 23:37 Uhr:

        Jepp. Das mit JavaScript ist wesentlich eleganter, finde ich. Danke für Input.

  4. Petra
    schrieb am 05.12.2014 um 09:01 Uhr:

    Hallo Jonas,
    ich bräuchte da mal einen Tipp im Zusammenhang mit diesem Beispielprojekt von dir. Wie kann ich in dem Gridsystem die jQuery Lightbox anwenden. Sie öffnet sich ja leider innerhalb des Grids und nicht über den gesamten Screen. Gibt´s da eine Kombinationsmöglichkeit?
    Gruß. Petra
    P.S.: …übrigens ein tolles Training. Danke dafür.

    Antworten
    • Jonas Hellwig
      schrieb am 08.12.2014 um 11:15 Uhr:

      Hallo Petra,

      vielen Dank für deinen Kommentar. Ich habe soeben eine Lightbox im Code des Beispielprojekts eingebunden und kann das von dir beschriebene Problem leider nicht nachvollziehen. Die Lightbox öffnet sich wie erwartet vor der Seite. Bitte teste es noch einmal mit der oben verlinkten Lightbox. Sie verwendet die gleiche Ordnerstruktur wie das Beispielprojekt, so dass du die CSS-Dateien, die JavaScripte und die Bilder sehr einfach auf dein Projekt übernehmen kannst.

      Antworten
      • Petra
        schrieb am 16.12.2014 um 17:24 Uhr:

        Vielen Dank Jonas, dass du dir die Mühe gemacht hast. Damit klappt das jetzt auch bei mir auf Anhieb hervorragend.
        Gruß. Petra

  5. Sabrina
    schrieb am 25.10.2014 um 19:06 Uhr:

    Hallo Jonas,
    ich hab mir dein Training angesehn und war sehr begeistert.
    Du erklärst echt super und man bekommt gleich Lust sofort alles auszuprobieren und anzuwenden.

    Es war sehr gut wieder einen aktuellen Überblick über die Webtrends und neuen Arbeitsabläufe zu bekommen. Es ist heutzutage schwer einen Überblick zu behalten, ohne zu denken: Kenn ich jetzt alles oder hab ich was übersehn? Es tut gut zu hörn das man nicht alles wissen kann. Danke dafür.

    Wo hältst du dich denn auf dem laufenden über neue Trends, Prozesse und holst dir Tips und Tricks?

    Vielen Dank für dein Video weiter so!

    Viele Grüße
    Sabrina

    Antworten
    • Jonas Hellwig
      schrieb am 26.10.2014 um 18:27 Uhr:

      Hallo Sabrina, vielen Dank! Ich selbst halte mich mit Blogs und Websites auf dem neuesten Stand. Ich speichere interessante Artikel in Pocket ab und lese die Beiträge dann unterwegs im Zug. RSS-Feeds nutze ich nicht mehr so stark wie früher, dafür sind Newsletter für mich wieder wichtiger geworden. Die Bücher und Video-Trainings von Kollegen schaue ich mir natürlich auch recht regelmäßig an.

      Antworten
  6. Ralf
    schrieb am 23.08.2014 um 11:43 Uhr:

    Hallo Jonas,
    ich habe mir die DVD „Responsive Webdesign“ gekauft und mir hat das Kapitel 10.4 mir „Edge Reflow“ sehr gut gefallen. Ich denke mal das ich mir „Moderenes Webdesign“ auch noch kaufen werde. Wird in der DVD „Modernes Webdesign“ die Integration vom erstellten HTML-Layout zu WordPress erklärt? Kannst du zu diesem Thema, „Edge Reflow“ > „WordPress“ (oder evtl. Joomla) eine Literatur/DVD-Empfehlung geben?

    Gruß Ralf

    Antworten
    • Jonas Hellwig
      schrieb am 29.08.2014 um 14:25 Uhr:

      Hallo Ralf, die DVD »Modernes Webdesign« behandelt in erster Linie moderne Ansätze wie Rapid Prototyping, flexible Raster usw. Es steht der Workflow im Vordergrund. WordPress wird in diesem Training nicht behandelt, dazu habe ich ein separates Training am Markt: WordPress 3 – Das umfassende Training. Zu Reflow kann ich dir im Moment leider keine Empfehlung aussprechen. Ich gehe auf das Tool zwar auch im Training »Modernes Webdesign« kurz ein, aber nur in einer Lektion. Es ist ein Werkzeug von vielen und soll daher in diesem Training keinen besonderen Stellenwert einnehmen. Anders als beim Training »Responsive Webdesign«.

      Antworten
  7. Aline
    schrieb am 21.08.2014 um 15:01 Uhr:

    Hallo,

    habe Deine vorherige DVD gekauft und sehr gerne angeschaut. Wollte wissen, ob die aktuelle eine Art Relaunch ist, oder neues Wissen präsentiert. Ist das sinnvoll die aktuelle zu kaufen?

    Liebe Grüße

    Antworten
    • Jonas Hellwig
      schrieb am 22.08.2014 um 09:56 Uhr:

      Hallo Aline, welche DVD hast du gekauft? Ich habe verschiedene Trainings aufgenommen, es ist allerdings kein Training der direkte Vorgänger. Das in diesem Beitrag vorgestellte Training behandelt stark den neuen Workflow, die Verbindung von Code und Design, sowie flexible Raster, Frameworks etc.
      Da das Thema »Modernes Webdesign« lautet, gibt es auch einige kleine inhaltliche Überschneidungen mit den Trainings »Responsive Webdesign« bzw. »Webdesign mit Photoshop«, wobei ich versuche Dopplungen jeder Art zu vermeiden. Ich habe selbstverständlich ein Interesse daran, dass man die Trainings kombinieren kann. Abgesehen davon sind die Entwicklungen im Bereich Webdesign recht rasant. Auch aus diesem Grund sind die anderen Trainings inhaltlich nur in einzelnen Lektionen vergleichbar. Das übergeordnete Thema ist ein anderes.

      Ich hoffe dir weitergeholfen zu haben.

      Antworten
      • Aline
        schrieb am 23.08.2014 um 11:43 Uhr:

        Vielen Dank für Deine Antwort! Die DVD war „Responsive Design“. Die „kleinen Überschneidungen“ schaden nicht, Deine Antwort war hilfreich. Ich habe mir nun die neue „Modernes Webdesign“ auch bestellt. Nochmals danke!

  8. Ar0ma
    schrieb am 08.08.2014 um 06:27 Uhr:

    Hallo Jan,
    sehr tolles Training vielen Dank dafür.
    Ich bin noch nicht komplett durch aber was mir gleich aufgefallen ist, das du nicht mit Edge Code (bracket) arbeitetst der doch eine Live Vorschau mitbringt. Das finde ich bischen schade. Aber ansonsten wirklich toll. Und vor allen Dingen Du redest flüssig und man hört Dir gerne zu.
    Viele Grüße

    Antworten
    • Ar0ma
      schrieb am 11.08.2014 um 21:39 Uhr:

      Natürlich meine ich Jonas, sorry ;)

      Antworten
      • Jonas Hellwig
        schrieb am 11.08.2014 um 22:57 Uhr:

        Hallo Ar0ma,
        bei Code-Editoren ist viel Gewohnheit und Geschmacksache im Spiel – Edge Code ist mir noch nicht in Fleisch und Blut übergegangen, daher nutze ich den Code-Editor nicht.
        Bei Schulungsvideos die mit Adobe-Produkten in Zusammenhang stehen, wird i.d.R. Dreamweaver genutzt, da Dreamweaver in diesem Zusammenhang der größten Anwendergruppe bekannt ist. Zwar hat Dreamweaver einen eher schlechten Ruf, mit der Code-Ansicht, die in diesem Video-Training ja ausschließlich zum Einsatz kommt, lässt sich jedoch sehr gut arbeiten. Ich persönlich schreibe meinen Code meistens in Sublime Text (wird im Video ja auch ab und zu verwende0), aber auch gelegentlich in Dreamweaver oder Textwrangler.

  9. Robert
    schrieb am 01.08.2014 um 17:13 Uhr:

    Bestellt es einfach bei Galileo selbst und fertig, Amazon ist der letzte Mist.

    Antworten
  10. Jan
    schrieb am 01.08.2014 um 15:11 Uhr:

    Hallo Jonas,

    ich hatte deine DVD bei Amazon sogar schon vorbestellt, jedoch scheinen die Lieferschwierigkeiten zu haben. Ich bekomme daher mein Exemplar frühestens am 16. August. Weißt du was von Problemen in diese Richtung?

    Beste Grüße
    Jan

    Antworten
    • Jonas Hellwig
      schrieb am 01.08.2014 um 15:32 Uhr:

      Hallo Jan, ich kann dir leider keine Infos zu den Lieferzeiten von Amazon geben.

      Antworten
  11. Bogdan Gewald
    schrieb am 01.08.2014 um 14:25 Uhr:

    schon gekauft. super training

    Antworten
  12. Andreas Breitenlohner
    schrieb am 01.08.2014 um 07:31 Uhr:

    Hi,

    also die Probelektionen aus Deiner YouTube Playliste geben schon mal einen super Vorgeschmack auf Dein Training ab. Ist auch bereits zu meiner Amazon Wunschliste hinzugefügt. Weiter so.

    Vg
    Andi

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.