Auf einen Blick. 1 Die richtige Ausrüstung Grundlagen von gutem Webdesign Konzeption & Design Layout und Komposition...

Transkript

1 Auf einen Blick 1 Die richtige Ausrüstung Grundlagen von gutem Webdesign Konzeption & Design Layout und Komposition Typografie im Web Navigationen & Interaktionen Farbe im Web Grafiken, Bilder und Multimedia Testen und optimieren Beispielprojekt

2 Vorwort Die richtige Ausrüstung 1.1 Was Sie für diesen Kurs brauchen Stift und Papier Software und Tools zum Visualisieren und Entwickeln Browser zum Testen FTP-Software Für Fortgeschrittene: Arbeitsschritte automatisieren Denken Sie wie ein Webdesigner! Webdesigner sind kreativ Webdesigner kennen das Web Die wichtigsten Technologien e mit HTML Gestaltung mit CSS Verhalten mit JavaScript Dynamische e mit PHP und anderen Sprachen Zusammenfassung Grundlagen von gutem Webdesign 2.1 Usability und User Experience Konventionen und Faustregeln für gute Usability Usability und e Mehr als Usability: User Experience Accessibility Zugänglichkeit und Barrierefreiheit Warum Accessibility wichtig ist immer Hilfsmittel für behinderte Menschen Barrierefreiheit per Gesetz Initiativen für Barrierefreiheit Accessibility und Webstandards ARIA Roles Accessibility und e Responsive Webdesign Möglichkeiten für mobile Websites

3 Mobile First und Desktop First Technische Grundlagen von Responsive Webdesign Meta-Viewport-Element Media Queries Die Entstehung einer Website Das Was: Websites als lebendige Design-Systeme Das Wie: neue Workflows für Websites Grundlagen für modernes Webdesign Konzeption & Design 3.1 Phasen von Konzeption und Kreation Zielgruppe definieren und Nutzer kennenlernen Nutzer kennenlernen Personas Das Konzept entwickeln: Analysephase Recherche Richtung der Gestaltung festlegen Marktanalyse Design-Sprachen und -Stile recherchieren Zielformulierung Der Weg zur richtigen Idee Kreativitätstechniken Brainstorming Morphologische Matrix The Four R s Gegensatzpaare Kreativität und Druck Content-Strategie e sammeln und bewerten Informationsarchitektur festlegen Struktur von en festlegen Seitentypen festlegen Content-Prototypen Ideen ausarbeiten und visualisieren Scribbles: schnelle Skizzen Papier-Prototypen: Mehr Low-Budget geht nicht Moodboards Style Tiles Element Collages Ideen bewerten Wireframes: strukturelle Skizzen Prototypen: Interaktionen testen Pattern Library & Styleguides Konzeption mit einer Projektmatrix auf den Punkt bringen Ideen bewerten Umsetzung und Ausarbeitung Design-Entwürfe oder Mockups HiFi-Prototypen: im Browser entscheiden Layout und Komposition 4.1 Die Grundlagen moderner Gestaltung Wahrnehmungsgesetze Formen Gestaltungsregeln für das Web Klassische Gestaltungsregeln Erkenntnisse aus der Nutzerforschung Psychologische Effekte Das Box Model in CSS Maßeinheiten in CSS Breite und Höhe Innenabstand Rahmen Außenabstand Das Box Model steuern Box Model bei Inline-Elementen Umgang mit zu viel Layouts mit CSS Elemente per float links und rechts fließen lassen Elemente frei mit»position«anordnen Anzeige mit»display«steuern Raster e im Layout anordnen Pro und Kontra von Rastern e im Raster verteilen Aus Rastern ausbrechen Exkurs: Grundlinienraster

4 4.6 Layout im Responsive Web Typen von Layouts Der Breakpoint, das (noch) unbekannte Wesen Breite ist nicht alles Strategien für responsive Darstellungen Raster in CSS Statische Raster in CSS Einfaches responsives Raster in CSS Frontend-Frameworks und fertige Grids Flexbox Grid Layouts Typografie im Web 5.1 Was ist Typografie? Anatomie einer Schrift Kategorien von Schriften Antiqua-Schriften oder Serifen-Schriften Grotesk oder serifenlose Linear-Antiqua Schreibschriften Schriften für Lifestyle und Postmoderne Computerlesbare Schriften Hybridschriften oder moderne Klassiker Websichere Schriften Webfonts Kleine Geschichte der Webfonts Aktuelle Lizenzmodelle für Webfonts Webfonts einbinden Angriff des FO(U/I)T Die richtige Schrift auswählen Die Funktionen von Schrift Auf die richtigen Assoziationen achten Recherche zur gewählten Schrift Schriftfamilien Performance Visuelle Effekte Texte in HTML und CSS gestalten Typografische Auszeichnungen Schriftgröße Laufweite Zeilenlänge Textschatten Textspalten Textausrichtung Zeilenabstand Mikro-Weißraum Detailtypografie Sonderzeichen in HTML Sonderzeichen in deutscher Sprache Sonderzeichen auf der Tastatur Typografische Anführungszeichen Gedankenstrich, Apostroph und Ellipse Silbentrennung und geschützte Leerzeichen Gliedern von Zahlen Fortgeschrittene Detailtypografie Navigationen & Interaktionen 6.1 Grundlagen nutzerfreundlicher Interaktionen Usability und Interaktionen Accessibility und Interaktionen Links Usability- und Accessibility-Konventionen von Links Buttons Usability und Accessibility gewährleisten Buttons gestalten Navigationen Visuelle Gestaltung und Positionierung von Navigationen Interaktionen Responsive Navigationen Grundregeln responsiver Navigationen Responsive Navigation mit stets sichtbaren Menüs Responsive Navigation mit versteckten Menüs Lösungsstrategien responsiver Navigationen mit versteckten Menüs Responsive Navigationen, die sich anpassen

5 6.6 Formulare Formulare in HTML Formulare, die man gerne ausfüllt Animationen Bessere User Experience durch Animationen Gestaltungstipps für Animationen der Benutzeroberfläche Animationen als inhaltliches Gestaltungsmittel Umsetzung in CSS Zugängliche Animationen Farbe im Web 7.1 Kleine Farblehre Grundbegriffe: Farbton, Helligkeit, Sättigung Farbtemperatur Primär-, Sekundär- und Tertiärfarben Farbkontraste Simultankontrast Komplementärkontrast Hell-Dunkel-Kontrast Grey-Box-Methode Bunt-Unbunt-Kontrast Quantitätskontrast Warm-Kalt-Kontrast Farbassoziationen Die Farben im Detail Farbharmonien Nur eine Farbe Mehrere Farben kombinieren Farben und Farbschemata für Webseiten Erste Schritte zu einem Farbschema Der Winkelkontrast Farben im Farbkreis Die Methode der maximalen Kontraste Stile und Vorbilder nutzen Mit Assoziationen zu einem Farbschema Farben am Monitor und im Web Additive und subtraktive Farbmischung Farben in CSS angeben Verläufe in CSS3 angeben Barrierefreiheit und Usability auch bei der Farbwahl Grafiken, Bilder und Multimedia 8.1 Tipps für Bildwahl und Bildgestaltung Fotografie oder Illustration? Mit Bildern informieren Bilder mit Texten kombinieren Aufmerksamkeit mit Bildern steuern Emotionalität über Bilder herstellen Hero-Images Bildwirkung Perspektiven Fotografische Ästhetik Freie Grafiken und Bilder verwenden Bilder als Zitate verwenden Portale mit freien Bildern Gemeinfreiheit und Public Domain Creative-Commons-e verwenden Grafiken und Bilder einkaufen Bilder für das Web optimieren Export-Dialoge fürs Web Das GIF-Format Das JPG-Format Das PNG-Format Bilder optimieren Das SVG-Format srgb: den richtigen Farbraum einstellen Bilder in Websites einbauen liche Bilder per HTML einfügen Schmückende Bilder per CSS einfügen Ein Pixel ist ein Pixel Oder? Geräte- und CSS-Pixel Hochauflösende Retina-Monitore und Pixeldichte Pixeldichte bei Bildern

6 8.7 Lösungen für responsive Bilder in der Praxis Downsampling von inhaltlichen Bildern Bilder flexibel machen Bilder mit»img«und»srcset«responsiv machen Icons einsetzen und gestalten Wichtiges über Symbole Wichtiges über Metaphern Icons und Usability Stile von Zeichen Fertige Icons Grundregeln für die Gestaltung von Icons Favicons und Touch-Icons Icon-Fonts Icons als SVGs einbinden Grafik-Vermeidungsstrategien Schatten mit CSS Runde Ecken erzeugen Video und Audio Webdesign mit bewegten Bildern Video und Audio in HTML einbinden Zugänglichkeit von Video- und Audio-en Testen und optimieren 9.1 Funktionalitäten sicherstellen Browser-Statistiken abfragen Testumgebung vorbereiten Feature-Unterstützung prüfen und reagieren Usability und Accessibility testen Accessibility mit Tools testen Websites ohne CSS und Bilder analysieren Analytics Usability überprüfen HTML und CSS validieren Performance: Ladezeiten im Griff Performance als Design-Entscheidung Eine Frage des Protokolls Speed-Tests nutzen Ungenutzten Code entfernen Requests reduzieren Dateigröße optimieren Webseiten so schnell wie möglich rendern Beispielprojekt 10.1 Konzeption Analyse Schwerpunkte und Ansätze für die Gestaltung Zielformulierung Ideensuche Content-Strategie Layout Stimmige Helligkeiten und Makro-Weißraum mit der Grey-Box-Methode Typografie Auswahl der Schriften Webfonts in Content-Prototyp einbinden Schriften einbetten und beurteilen Typografie in CSS Styleguide Farben Bilder Logo und Header-Gestaltung Interaktionen Usability-Verbesserungen in der Hauptnavigation Responsives Menü Gestaltung von Links Optimieren Layout testen Styleguide und Projektmatrix prüfen Performance prüfen Index