Webdesign

Alles zum gelungenen Designprozess einer Website! 150 Millisekunden wenn Sie einen Nutzer in dieser Zeit nicht überzeugt haben, wird er Ihre Webseite verlassen. Die Gestaltung Ihrer Webseite spielt die Hauptrolle, damit sich Ihre Besucher wohlfühlen und Ihre Seiten gar nicht mehr verlassen wollen. Grafik, Animation, Typografie, Farbwahl: Dieses Buch zeigt Ihnen, mit welchen Techniken und Tools Sie Ihre Website-Besucher begeistern. Martin Hahn kennt die Herausforderungen, denen sich Webdesigner heute stellen müssen. Und noch wichtiger: Er weiß, wie Sie positiv auffallen, sich von den Mitbewerbern abheben und Designs umsetzen, die auf allen Geräten überzeugen. Machen Sie sich mit den Designprinzipien vertraut und erfahren Sie, was wirklich funktioniert. Dieses Handbuch bietet Ihnen auf über 700 Seiten schnelle Hilfe und Lösungen bei allen Fragen, die sich Ihnen bei der Gestaltung stellen: Zielgruppengenaue Auswahl von Schrift, Farbschema und Layout, gute Konzeption von Anfang an, Barrierefreiheit, individuelle Gestaltung, Responsive Design und mehr. Immer mit dabei: Anschauliche Beispiele mit zahlreichen Aha-Effekten. So geht gute, moderne Gestaltung im Web. Attraktive Websites gestalten: Layouts, Typografie, Farbe, Bilder Website-Konzeption, Usability und Responsive WebdesignMit vielen inspirierenden Website-Beispielen Aus dem Inhalt:Konzeption und PlanungIdeenfindungWebsite-KonzeptionProjektmanagement, BriefingMoodboards, Wireframes, interaktive PrototypenPrinzipien guter GestaltungDesign-PrinzipienFarbenlehre & FarbwirkungFarbe im Web, Retina-DisplaysProportionen, WeißraumTypografie und WebfontsGrafiken, Bilder, IconsWebdesign-Stile, WebtrendsLayout und RasterInformationsarchitekturCSS-Layout und RastersystemePositionierung und GewichtungGoldener Schnitt, Above the FoldNavigation und InteraktionHaupt-, Sub-, MetanavigationenHeader, Footer, Buttons, LinksMobile Navigation, Off-CanvasUsability, User Experience, BarrierefreiheitDie Technik im GriffResponsive WebdesignWebstandards und Best PracticesHTML5 und CSS3Frameworks, CMS

Vorwort . . . 19
1. Der Status quo im Webdesign . . . 23

1. 1 . . . Die Entwicklung des Webdesigns . . . 23
1. 2 . . . Aspekte modernen Webdesigns . . . 27
1. 3 . . . Modernes Webdesign ist flexibel . . . 36
1. 4 . . . Das Webdesign und sein Umfeld . . . 41
1. 5 . . . Webdesign ist Coden, und Code ist Design . . . 44
1. 6 . . . Der Kontext zählt . . . 46

2. Webdesign-Projektmanagement . . . 49

2. 1 . . . Das Projekt . . . 49
2. 2 . . . Projektphasen . . . 55
2. 3 . . . Projektkommunikation -- wie sag ich es dem Kunden? . . . 65
2. 4 . . . Erfolg oder Misserfolg . . . 70

3. Konzeption und Strategie . . . 73

3. 1 . . . Briefing und Recherche . . . 73
3. 2 . . . Die Analysephase . . . 77
3. 3 . . . Eine Strategie fürs Webprojekt entwickeln . . . 81
3. 4 . . . Ziele der Website . . . 86
3. 5 . . . Zielgruppenanalyse . . . 90
3. 6 . . . Anforderungen an das Design . . . 97
3. 7 . . . Anforderungen an die Inhalte . . . 100
3. 8 . . . Anforderungen an Technik und Funktionalitäten . . . 103
3. 9 . . . Fazit zur Konzeption . . . 106

4. Responsive Webdesign . . . 107

4. 1 . . . Einleitung -- und sie bewegen sich doch . . . 107
4. 2 . . . Responsive Strategie -- Mobile first und Content first . . . 111
4. 3 . . . Ein neuer Workflow . . . 115
4. 4 . . . Die Arbeit mit Wireframes . . . 119
4. 5 . . . Das Design -- der Gestaltungsprozess . . . 124
4. 6 . . . Die Umsetzung . . . 135
4. 7 . . . Bestandteile einer responsiven Website . . . 150

5. Informationsarchitektur . . . 163

5. 1 . . . Einführung . . . 163
5. 2 . . . Aufgaben einer gelungenen Navigation . . . 170
5. 3 . . . Content-Strategie . . . 172
5. 4 . . . Inhaltsstruktur entwickeln . . . 179
5. 5 . . . Durch Inhalte navigieren . . . 187
5. 6 . . . Fazit . . . 195

6. Screendesign und User Interface Design . . . 197

6. 1 . . . Die Aufgaben eines Screendesigns . . . 197
6. 2 . . . Webdesign und die Wahrnehmung . . . 203
6. 3 . . . User-Interface-Gestaltung . . . 218
6. 4 . . . Die Prinzipien guter Webgestaltung . . . 227

7. Usability und User Experience . . . 239

7. 1 . . . Alles beginnt mit Usability . . . 239
7. 2 . . . User Experience . . . 247

8. Layout und Raster . . . 255

8. 1 . . . Anatomie einer Website . . . 255
8. 2 . . . Layouts gestalten . . . 264
8. 3 . . . Scrollen . . . 278
8. 4 . . . Raster . . . 283
8. 5 . . . Ein eigenes Raster anlegen . . . 294

9. Farbe im Webdesign . . . 317

9. 1 . . . Welche Rolle spielt die Farbe? . . . 317
9. 2 . . . Farbe: eine Wissenschaft für sich . . . 319
9. 3 . . . Farbsysteme . . . 321
9. 4 . . . Farbmanagement für das Web . . . 336
9. 5 . . . Farbwirkung . . . 337
9. 6 . . . Farbkontraste . . . 364
9. 7 . . . Gelungener Farbeinsatz im Webdesign . . . 372
9. 8 . . . Farbe und Usability . . . 379
9. 9 . . . Ein eigenes Farbschema entwickeln . . . 381
9. 10 . . . Fazit . . . 387

10. Typografie im Web . . . 389

10. 1 . . . Grundlagen . . . 389
10. 2 . . . Leseverhalten im Web . . . 392
10. 3 . . . Schriftarten . . . 395
10. 4 . . . Schriftdarstellung im Web . . . 403
10. 5 . . . Makrotypografie . . . 414
10. 6 . . . Mikrotypografie . . . 436
10. 7 . . . Gelungene Webtypografie -- Textformatierungen und Gestaltungstipps . . . 443
10. 8 . . . Typografische Auszeichnungen und Inspirationen . . . 459

11. Bilder und Grafiken . . . 465

11. 1 . . . Einführung: Die Macht der Bilder . . . 465
11. 2 . . . Bildquellen . . . 473
11. 3 . . . Motive und Bildstimmung . . . 484
11. 4 . . . Bildgestaltung . . . 493
11. 5 . . . Icons . . . 501
11. 6 . . . Illustrationen . . . 505
11. 7 . . . Dateiformate . . . 507
11. 8 . . . Bilder in HTML und CSS . . . 511
11. 9 . . . Fazit . . . 521

12. Navigations- und Interaktionsdesign . . . 523

12. 1 . . . Die Hauptnavigation . . . 523
12. 2 . . . Die Subnavigation . . . 541
12. 3 . . . Die Metanavigation . . . 542
12. 4 . . . Die Footer-Navigation . . . 543
12. 5 . . . Navigation auf mobilen Endgeräten -- responsive Navigation . . . 545
12. 6 . . . Links, Buttons und die Suche . . . 558
12. 7 . . . Formulare . . . 571

13. Animationen . . . 579

13. 1 . . . Animationen mit CSS . . . 579
13. 2 . . . Animationen und Interaktivität mit JavaScript . . . 586
13. 3 . . . Interaktive Elemente . . . 587
13. 4 . . . Audiovisuelle Elemente . . . 597
13. 5 . . . Fazit . . . 600

14. Websitetypen und -stile . . . 601

14. 1 . . . Websitetypen . . . 601
14. 2 . . . Webdesign-Stile und -Trends . . . 626

Index . . . 637