Modernes Webdesign
mit Jonas Hellwig
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.
Mehr erfahren
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
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.
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 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
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.
Ist vielleicht wirklich missverständlich meine Frage. Wodurch wird der Inhalt nach unten verschoben? Durch JavaScript?
Hier ist beides möglich. Schau dir dazu mal folgende Beispiele von mir an:
Slider mit JavaScript
Slider mit CSS (:target)
Jepp. Das mit JavaScript ist wesentlich eleganter, finde ich. Danke für Input.
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.
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.
Vielen Dank Jonas, dass du dir die Mühe gemacht hast. Damit klappt das jetzt auch bei mir auf Anhieb hervorragend.
Gruß. Petra
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
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.
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
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«.
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
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.
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!
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
Natürlich meine ich Jonas, sorry ;)
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.
Bestellt es einfach bei Galileo selbst und fertig, Amazon ist der letzte Mist.
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
Hallo Jan, ich kann dir leider keine Infos zu den Lieferzeiten von Amazon geben.
schon gekauft. super training
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