Im Rheinwerk-Shop stöbernVorwort
Die Beispielmaterialien zum Buch
1 Prinzipien des modernen Webdesigns
1.1 Aspekte modernen Webdesigns
1.1.1 Die Entwicklung des Webdesigns
1.1.2 Gute Seiten, schlechte Seiten
1.1.3 Mehr als hübsch – das Design
1.1.4 Übersichtlich und lesbar
1.1.5 Struktur, Inhalte und Verhalten
1.2 Guter Quellcode – Webstandards
1.3 Webseiten für alle – Zugänglichkeit und Barrierefreiheit
1.3.1 Zugänglichkeit und Technik
1.3.2 Zugänglichkeit und Inhalte
1.3.3 Zugänglichkeit und Design
1.4 Modernes Webdesign ist flexibel
1.4.1 Flexible und anpassungsfähige Webseiten
1.4.2 Benutzerfreundlich und bedienbar
1.4.3 Moderne Workflows
1.5 Das Webdesign und sein Umfeld
1.5.1 Die Märkte und der Wettbewerb
1.5.2 Content Marketing und die Informationsüberflutung der Konsumenten
1.5.3 Werteveränderung in der Gesellschaft
1.6 Fazit: Webdesign ist Coden, und Code ist Design
2 Projektmanagement
2.1 Das Projekt
2.1.1 Was macht ein Projekt zu einem Projekt?
2.1.2 Die Online-Branche
2.1.3 Das Projektdreieck
2.1.4 Die Aufgaben des Projektmanagers
2.2 Projektphasen
2.2.1 Der Projektstart
2.2.2 Das Lastenheft – die Sicht des Auftraggebers
2.2.3 Das Angebot
2.2.4 Alternative Leistungen
2.2.5 Projekte kalkulieren
2.2.6 Das Pflichtenheft – der Plan des Auftragnehmers
2.2.7 Der Zeitplan
2.2.8 Umsetzung
2.2.9 Spätere Änderungswünsche
2.2.10 Projektabschluss und Auswertung
2.2.11 Rechnung stellen
2.3 Projektkommunikation – wie sag ich es dem Kunden?
2.3.1 Erwartungshaltung an den Kunden
2.3.2 Erwartungshaltung des Kunden – Wünsche und Vorstellungen
2.3.3 Erstkontakt – Beratung vs. Verkauf
2.3.4 Präsentation
2.3.5 Externe/freie Mitarbeiter
2.3.6 Der Projektabschluss
2.4 Erfolg oder Misserfolg
2.4.1 Erfolgsfaktoren
2.4.2 Risikomanagement
2.4.3 Gründe für ein erfolgloses Webprojekt
3 Konzeption und Strategie
3.1 Briefing und Recherche
3.1.1 Das Briefing
3.1.2 Die Recherche
3.1.3 Briefing und Angebot
3.1.4 Das Treffen mit dem Kunden
3.1.5 Das Grobkonzept
3.1.6 Ziele und Strategie
3.2 Unternehmens- und Kundenanalyse
3.2.1 Produkte und Dienstleistungen
3.2.2 Die Vermarktung
3.2.3 Der Kundenkreis
3.2.4 Branche und Umfeld
3.3 Konkurrenten und Vorbilder
3.3.1 Vorbilder
3.4 Eine Strategie fürs Webprojekt entwickeln
3.4.1 Rahmenbedingungen für die strategische Ausrichtung
3.4.2 Mehr als Anfang und Ende
3.4.3 Corporate Identity und Image
3.4.4 Positionierung
3.4.5 Alleinstellungsmerkmal
3.4.6 Die Rolle des Webauftritts im Marketing-Mix
3.4.7 Fazit: Warum eine Strategie so wichtig ist
3.5 Webdesign ist Kommunikation
3.5.1 Das Kommunikationsmodell
3.5.2 Kommunikationsmodell für das Webdesign
3.6 Ziele der Webseite
3.6.1 Ziele formulieren
3.6.2 Aus Zielvorgaben Maßnahmen ableiten
3.6.3 Den Anwender nicht aus den Augen verlieren
3.7 Zielgruppenanalyse
3.7.1 Zielgruppenanalyse mit Fingerspitzengefühl
3.7.2 Sinus-Milieus
3.7.3 Verschiedene Zielgruppen
3.7.4 Es menschelt – die Personas
3.7.5 Nutzungsszenarien für Personas
3.8 Anforderungen Design
3.8.1 Design vs. Content
3.8.2 Look & Feel
3.9 Anforderungen an die Inhalte
3.9.1 Inhaltsarten: Texte, Bilder und Videos
3.9.2 Inhaltserstellung
3.9.3 Der Qualitätsanspruch
3.10 Anforderungen an Technik und Funktionalitäten
3.10.1 Content-Management-Systeme
3.10.2 Funktionalitäten
3.11 Usability im Webdesign
3.11.1 Don’t make me think
3.11.2 Effektivität, Effizienz und Zufriedenheit
3.11.3 Usability in allen Bereichen
3.11.4 Usability-Tests und -Tools
3.11.5 Technische Analyse
3.12 User Experience
3.12.1 Die Website als Erlebnis
3.12.2 Look & Feel, Joy of Use und die Usability
3.12.3 Emotionen wirken
3.12.4 Glaubwürdigkeit und Vertrauen
3.13 Fazit
4 Responsive Webdesign
4.1 Einleitung – und sie bewegen sich doch
4.1.1 Neue Geräte und Bildschirmgrößen
4.1.2 Zurück in die Zukunft – von flexibel zu statisch zu flexibel
4.1.3 Ganzheitliche Flexibilität – es betrifft alle
4.2 Responsive Strategie – Mobile first und Content first
4.2.1 Adaptive Layout vs. Responsive Layout
4.2.2 Mobile oder Content – wer ist der Erste?
4.2.3 Graceful Degradation vs. Progressive Enhancement
4.3 Ein neuer Workflow
4.3.1 Der traditionelle Workflow
4.3.2 Der responsive Workflow
4.4 Bestandteile einer responsiven Webseite
4.4.1 Flexible Raster
4.4.2 Media Queries
4.4.3 Flexible Bilder, Typografie und Weiteres
4.5 Tipps zur Umsetzung
4.5.1 HTML-Prototyping
4.5.2 Testen
5 Informationsarchitektur
5.1 Einführung
5.1.1 Ein Alltagsbeispiel und sein Webseitenpendant
5.1.2 Darum geht es
5.2 Die Bedeutung der Informationsarchitektur
5.2.1 Die drei Aspekte – Inhalte, Nutzer, Kontext
5.2.2 User first
5.2.3 Pageflow
5.2.4 Findability – vom Suchen und Finden von Informationen
5.3 Die Bedeutung der Navigation
5.3.1 Aufgaben einer gelungenen Navigation
5.4 Content-Strategie
5.4.1 Guter Content
5.4.2 Guter Content und die Rolle des Webdesigners
5.4.3 Sammeln und Strukturieren
5.4.4 Produktion und Aktualität
5.4.5 Storytelling
5.5 Inhaltsstruktur entwickeln
5.5.1 Methoden und Tools
5.5.2 Wording
5.5.3 Case Studies
5.5.4 Navigationsprinzipien – den Erwartungen entsprechen
5.6 Durch Inhalte navigieren
5.6.1 Navigationsmenüs
5.6.2 Alternative Navigationswege
5.7 Fazit
6 Gestaltungsgrundlagen
6.1 Webdesign und die menschliche Wahrnehmung
6.1.1 Sehen statt Lesen
6.1.2 Zwei Personen, zwei Meinungen
6.1.3 Selektive Wahrnehmung
6.2 Die äußere Form
6.2.1 Das Format
6.2.2 Formen
6.2.3 Die gute Gestalt
6.2.4 Texturen
6.2.5 Proportionen
6.3 Anordnung und Gewichtung
6.3.1 Das Gesetz der Nähe
6.3.2 Das Gesetz der Geschlossenheit
6.3.3 Symmetrie und Asymmetrie
6.3.4 Goldener Schnitt
6.3.5 Die Drittel-Regel
6.3.6 Der Rhythmus
6.3.7 Die Leserichtung
6.3.8 Visuelles Gewicht und Kontrast
6.4 Wahrnehmung und Gestaltung
6.4.1 Gesetz der Ähnlichkeit
6.4.2 Gesetz der Erfahrung
6.4.3 Gesetz der Kontinuität
6.4.4 Figur-Umfeld-Beziehung
6.4.5 Schwerkraft
6.4.6 Gesetz der Gleichzeitigkeit
6.5 Gute Webgestaltung
6.5.1 Einheit
6.5.2 Angemessenheit
6.5.3 Einfachheit
6.5.4 Die Liebe zum Detail
7 Screendesign
7.1 Grundlagen Screendesign
7.1.1 Aufgaben eines Screendesigns
7.1.2 Elemente eines Screendesigns
7.1.3 Screendesign-Prinzipien
7.1.4 Die Design-Prinzipien der »Großen«
7.2 Der Gestaltungsprozess
7.2.1 Der kreative Prozess
7.2.2 Moodboards
7.2.3 Style Tiles
7.2.4 Die Arbeit mit Design-Programmen
7.2.5 Design-Feedback
7.3 Vom Design zur Umsetzung
7.3.1 Modulares Design
7.3.2 Design-Styleguide
8 Layout und Raster
8.1 Anatomie einer Webseite
8.1.1 Der Header-Bereich
8.1.2 Der Inhaltsbereich
8.1.3 Die Fußleiste
8.1.4 Der umgebende Block
8.2 Wireframes erstellen
8.2.1 Papier-Wireframes
8.2.2 Gezeichnete Wireframes
8.2.3 Digitale Wireframes
8.2.4 Die Graue-Box-Methode
8.2.5 Vorteile und Grenzen von Wireframes
8.3 Raster – Grundlagen
8.3.1 Bedeutung
8.3.2 Layoutgrundlagen
8.3.3 Rastersysteme
8.4 Ein eigenes Raster anlegen
8.4.1 Spalten und Spaltenabstand
8.4.2 Rastergestaltung in Photoshop
8.4.3 Raster mit HTML und CSS umsetzen
8.4.4 Eigene Webseitenlayouts
8.4.5 Interaktive Prototypen
8.5 Layouts gestalten
8.5.1 Komposition und Hierarchie
8.5.2 Layoutstrukturen
8.5.3 Weißraum
8.5.4 Above the Fold
8.5.5 Scrollen oder klicken – das ist hier die Frage
8.5.6 Das Raster brechen – out of the Box
8.5.7 Layoutprinzipien
9 Farbe im Webdesign
9.1 Welche Rolle spielt die Farbe?
9.1.1 Farbe und Webdesign
9.2 Farbe: eine Wissenschaft für sich
9.2.1 Licht und Farbe
9.2.2 Wie unsere Farbwahrnehmung funktioniert
9.2.3 Farbpsychologie
9.3 Farbsysteme
9.3.1 Farbkreise
9.3.2 RGB – das additive Farbmodell
9.3.3 CMYK – das subtraktive Farbmodell
9.3.4 Farbtiefe
9.3.5 Farbdefinition
9.3.6 Farbton, Sättigung, Helligkeit
9.4 Das Web-Farbmanagement
9.4.1 Mit Farbräumen & Farbprofilen arbeiten
9.5 Farbwirkung
9.5.1 Warme Farben
9.5.2 Rot
9.5.3 Orange
9.5.4 Gelb
9.5.5 Kalte Farben
9.5.6 Blau
9.5.7 Grün
9.5.8 Violett/Lila
9.5.9 Neutrale Farben
9.5.10 Schwarz
9.5.11 Weiß
9.5.12 Grau
9.5.13 Grell, greller, Neon
9.5.14 Zusammenfassung Farbwirkung
9.6 Farbkontraste
9.6.1 Farbe-an-sich-Kontrast
9.6.2 Hell-Dunkel-Kontrast
9.6.3 Kalt-Warm-Kontrast
9.6.4 Komplementärkontrast
9.6.5 Quantitätskontrast
9.6.6 Qualitätskontrast
9.6.7 Simultankontrast
9.6.8 Bunt-Unbunt-Kontrast
9.7 Farbschemata
9.7.1 Monochromes Farbschema
9.7.2 Analoges Farbschema
9.7.3 Komplementäres Farbschema
9.7.4 Teilkomplementäre, triadische und tetradische Farbschemata
9.7.5 Tool-Empfehlung: Unterstützung bei der Farbfindung
9.8 Gelungener Farbeinsatz im Webdesign
9.8.1 Farbe, Corporate Design & Identität
9.8.2 Farbverläufe
9.9 Farbe und Usability
9.9.1 Hürden bei der Farbwahrnehmung
9.10 Ein eigenes Farbschema entwickeln
9.10.1 Inspiration sammeln und Vorbilder finden
9.10.2 Farbtrends und Inspirationsquellen
9.10.3 Tools, um Farbkombinationen zu erzeugen
9.10.4 Praktische Umsetzung: Farbschemata selbst gestalten
9.11 Fazit
10 Typografie
10.1 Typografie im Web
10.1.1 Neue Möglichkeiten
10.1.2 Und was ist gute Typografie?
10.2 Leseverhalten im Web
10.2.1 Prozess des Lesens
10.2.2 Lesen am Bildschirm
10.3 Schriftarten
10.3.1 Serifenschriften
10.3.2 Serifenlose Schriften
10.3.3 Andere Schriften
10.4 Schriftdarstellung im Web
10.4.1 Fontrendering – das Runde muss ins Eckige
10.4.2 Websichere Schriften
10.4.3 Webfonts
10.4.4 Webfonts-Anbieter
10.4.5 Text als Bild
10.5 Makrotypografie
10.5.1 Liniensystem
10.5.2 Schriftschnitte
10.5.3 Schriftgröße
10.5.4 Zeilenabstand
10.5.5 Schriftfarbe – Text- & Hintergrundkontrast
10.5.6 Zeilenlänge
10.5.7 Grundlinienraster
10.5.8 Textausrichtung & Silbentrennung
10.5.9 Abstände & Leerraum
10.5.10 Schriftdefinition mit CSS
10.6 Mikrotypografie
10.6.1 Buchstaben- & Wortabstand
10.6.2 Anführungszeichen
10.6.3 Trenn- und Gedankenstriche
10.6.4 Einrückungen Texteinzug
10.6.5 Versalien & Kapitälchen
10.6.6 Zahlengliederung
10.6.7 Sonderzeichen
10.7 Gelungene Webtypografie – Textformatierungen und Gestaltungstipps
10.7.1 Die Schriftauswahl
10.7.2 Die Gestaltung von Überschriften
10.7.3 Fließtext
10.7.4 Links
10.7.5 Listen
10.7.6 Tabellen
10.7.7 Zitate
10.7.8 Kaufmanns-Und
10.7.9 »Text-shadow«
10.7.10 Typografische HTML-Elemente
10.8 Typografische Inspiration: Best Cases
10.8.1 Minimalistisch
10.8.2 Bold Typo
10.8.3 Verspielt
11 Bilder und Grafiken
11.1 Einführung: Die Macht der Bilder
11.1.1 Eigenschaften von Bildern
11.1.2 Konsequenzen für die Auswahl von Bildern
11.1.3 Bilder im Einsatz
11.2 Bilder im Web
11.2.1 Bilder als Layoutelemente
11.2.2 Bilder als Orientierungselemente
11.2.3 Bilder als Inhaltselemente
11.2.4 Bilder als emotionale Elemente
11.3 Bilderquellen
11.3.1 Urheberrecht
11.3.2 Creative-Commons-Bilder
11.3.3 Bilder vom Kunden
11.3.4 Fotos und Grafiken selbst erstellen
11.3.5 Fotoagenturen
11.3.6 Fotografen beauftragen
11.4 Motive & Bildstimmung
11.4.1 Menschen, Mitarbeiter und das Team
11.4.2 Porträts
11.4.3 Profilbilder
11.4.4 Räumlichkeiten
11.4.5 Inszenierung von Produktfotos
11.4.6 Austauschbare Bilderwelten
11.5 Bildgestaltung
11.5.1 Der Bildausschnitt
11.5.2 »Unrechteckige« Formate und andere geometrische Formen
11.5.3 »Out of the Box«
11.5.4 Graustufen/Duplexfarben
11.5.5 Montagen/Collagen
11.5.6 Großformatige Bilder/Hintergrundbilder
11.6 Icons
11.6.1 Icons bringen Inhalte auf den Punkt
11.6.2 Aufmerksamkeit steuern und Struktur geben
11.7 Icon-Fonts
11.7.1 Vor- und Nachteile von Icon-Fonts
11.8 Illustrationen
11.8.1 Thematische Illustrationen
11.8.2 Dekorative Illustrationen
11.8.3 Illustrativer Text
11.8.4 Informative Illustrationen (Infografiken)
11.9 Bildbearbeitung
11.9.1 Die nicht destruktive Bildbearbeitung
11.10 Bildformate
11.10.1 Die Bildgröße
11.10.2 Die Bildkomprimierung
11.10.3 Die Auswahl des richtigen Bildformats
11.10.4 Für Web speichern
11.10.5 Bildgrößen optimieren
11.11 Bilder in HTML und CSS
11.11.1 Bilder in HTML
11.11.2 Bilder in CSS
11.11.3 Responsive Bilder
11.11.4 Retina-Displays
11.12 Weitere Bilder-Tools
11.13 Fazit
12 Navigations- und Interaktionsdesign
12.1 Die Gestaltung der Hauptnavigation
12.1.1 Position
12.1.2 Umsetzung
12.1.3 Gestaltung
12.1.4 Dropdown-Menü
12.1.5 Mega-Dropdown-Menü
12.1.6 Kreative Navigationen
12.1.7 Feste Navigation
12.2 Die Gestaltung der Subnavigation
12.3 Die Gestaltung der Metanavigation
12.4 Die Gestaltung der Footer-Navigation
12.5 Navigation auf mobilen Endgeräten – responsive Navigation
12.5.1 Top-Nav – alles so lassen
12.5.2 Footer-Navigation – ganz ans Ende
12.5.3 Einfaches Toggle-Menü – Ein- und Ausblenden
12.5.4 Multi-Toggle
12.5.5 Off-Canvas-Menü – Rein- und Rausfahren
12.5.6 Weitere allgemeine Gestaltungstipps für eine mobile Navigation
12.6 Weitere Navigationsmittel
12.6.1 Links
12.6.2 Individuelle Linkunterstriche
12.6.3 Buttons
12.6.4 Die Suchfeld-Navigation
12.6.5 Weitere Navigationselemente
12.7 Formulare
12.7.1 Die Komponenten eines Formulars
12.7.2 Eingabefelder
12.7.3 Rückmeldungen
12.7.4 Validierung
12.7.5 Die User Experience bei Formularen
12.7.6 Formulare mit HTML5
13 Webdesign-Stile und -Trends
13.1 Die Webdesign-Stile
13.1.1 Frühere Webdesign-Stile
13.1.2 Skeuomorphismus
13.1.3 Flat-Design
13.1.4 Material-Design
13.1.5 Minimalismus
13.1.6 Typografie
13.1.7 Illustrationen
13.1.8 Der Vintage- oder auch Retro-Stil
13.1.9 Fazit
13.2 Webdesign-Trends
13.2.1 Scrollen
13.2.2 Versteckte Navigation
13.2.3 Grafische Effekte
14 Animationen
14.1 Animationen mit CSS
14.1.1 »hover«-Effekte mit CSS3-Transitions
14.1.2 CSS3-Transform – Verzerren, Skalieren und Drehen
14.2 Animationen und Interaktivität mit JavaScript
14.2.1 JavaScript-Bibliotheken
14.3 Interaktive Elemente
14.3.1 Bildergalerie
14.3.2 Tabs
14.3.3 Accordion
14.3.4 Content-Slider
14.3.5 Header-Slideshow
14.3.6 Modalboxen
14.3.7 Tooltip
14.3.8 Weitere Animationen und Effekte
14.4 Audiovisuelle Elemente
14.4.1 Das HTML5-Videoelement
14.4.2 Das HTML5-Audioelement
14.5 Fazit
15 Website-Typen
15.1 Corporate Website
15.1.1 Die Corporate Website als Türöffner
15.1.2 Analyse einer Corporate Website
15.1.3 Das Website-Branding
15.2 Portfolio
15.2.1 Der Ausdruck von Persönlichkeit
15.2.2 Präsentation der eigenen Arbeit
15.3 Shop
15.3.1 Vertrauen schaffen
15.3.2 Konkurrenz und Shop-Vielfalt
15.4 Blog
15.4.1 Das Corporate Blog
15.4.2 Das Infoblog
15.4.3 Aufbau eines Blogs
15.5 Landing Page
15.5.1 Aufbau einer Landing Page
15.6 Microsite
15.7 Web-Apps
15.8 Newsletter
16 Tipps, Tricks und Tools
16.1 Wichtiger »Kleinkram«
16.1.1 Zum Ausdrucken – Print-Stylesheet
16.1.2 Das Webseitensymbol – Favicon
16.1.3 Webseite nicht gefunden – die 404-Meldung
16.2 Code-Feintuning
16.2.1 Responsibility
16.2.2 Performance
16.2.3 Testen und Debuggen
16.3 In Kontakt bleiben
16.3.1 Weiterbildung
16.3.2 Netzwerk
16.3.3 Lesenswert
Webdesign
