Webdesign - Das Handbuch zur Webgestaltung

Webdesign - Das Handbuch zur Webgestaltung

von: Martin Hahn

Rheinwerk Design, 2020

ISBN: 9783836272186

Sprache: Deutsch

694 Seiten, Download: 115888 KB

 
Format:  PDF, auch als Online-Lesen

geeignet für: Apple iPad, Android Tablet PC's Online-Lesen PC, MAC, Laptop


 

eBook anfordern

▸

Mehr zum Inhalt

Webdesign - Das Handbuch zur Webgestaltung



  Vorwort 19  
  1 Der Status quo im Webdesign 23  
     1.1 Die Entwicklung des Webdesigns 23  
     1.2 Aspekte modernen Webdesigns 27  
        1.2.1 Gute Seiten, schlechte Seiten 27  
        1.2.2 Mehr als hübsch – das Design 28  
        1.2.3 Übersichtlich und lesbar 29  
        1.2.4 Struktur, Inhalte und Verhalten 31  
        1.2.5 Guter Quellcode – Webstandards 33  
        1.2.6 Webseiten für alle – Zugänglichkeit und Barrierefreiheit 34  
     1.3 Modernes Webdesign ist flexibel 36  
        1.3.1 Flexible und anpassungsfähige Webseiten 36  
        1.3.2 Benutzerfreundlich und bedienbar 38  
        1.3.3 Moderne Workflows 38  
     1.4 Das Webdesign und sein Umfeld 39  
        1.4.1 Die Märkte und der Wettbewerb 39  
        1.4.2 Content-Marketing und die Informationsüberflutung der Konsumenten 40  
        1.4.3 Werteveränderung in der Gesellschaft 41  
     1.5 Webdesign ist Coden, und Code ist Design 42  
     1.6 Der Kontext zählt 44  
  2 Projektmanagement 47  
     2.1 Das Projekt 47  
        2.1.1 Was macht ein Projekt zu einem Projekt? 47  
        2.1.2 Die Online-Branche 48  
        2.1.3 Das Projektdreieck 50  
        2.1.4 Die Aufgaben des Projektmanagers 51  
     2.2 Projektphasen 52  
        2.2.1 Der Projektstart 53  
        2.2.2 Das Lastenheft – die Sicht des Auftraggebers 53  
        2.2.3 Das Angebot 54  
        2.2.4 Alternative Leistungen 55  
        2.2.5 Projekte kalkulieren 56  
        2.2.6 Das Pflichtenheft – der Plan des Auftragnehmers 58  
        2.2.7 Der Zeitplan 59  
        2.2.8 Umsetzung 60  
        2.2.9 Spätere Änderungswünsche 61  
        2.2.10 Projektabschluss und Auswertung 61  
        2.2.11 Rechnung stellen 62  
     2.3 Projektkommunikation – wie sag ich es dem Kunden? 63  
        2.3.1 Erwartungshaltung an den Kunden 63  
        2.3.2 Erwartungshaltung des Kunden – Wünsche und Vorstellungen 64  
        2.3.3 Erstkontakt – Beratung vs. Verkauf 65  
        2.3.4 Präsentation 67  
        2.3.5 Externe/freie Mitarbeiter 68  
        2.3.6 Der Projektabschluss 68  
     2.4 Erfolg oder Misserfolg 68  
        2.4.1 Erfolgsfaktoren 69  
        2.4.2 Risikomanagement 69  
  3 Konzeption und Strategie 71  
     3.1 Briefing und Recherche 71  
        3.1.1 Das Briefing 72  
        3.1.2 Die Recherche 73  
        3.1.3 Briefing 74  
        3.1.4 Das Grobkonzept 75  
        3.1.5 Ziele und Strategie 75  
     3.2 Unternehmens- und Kundenanalyse 76  
        3.2.1 Produkte und Dienstleistungen 77  
        3.2.2 Die Vermarktung 77  
        3.2.3 Der Kundenkreis 78  
        3.2.4 Branche und Umfeld 78  
     3.3 Konkurrenten und Vorbilder 79  
        3.3.1 Vorbilder 79  
     3.4 Eine Strategie fürs Webprojekt entwickeln 80  
        3.4.1 Rahmenbedingungen für die strategische Ausrichtung 80  
        3.4.2 Mehr als Anfang und Ende 81  
        3.4.3 Corporate Identity und Image 81  
        3.4.4 Positionierung 82  
        3.4.5 Alleinstellungsmerkmal 83  
        3.4.6 Die Rolle des Webauftritts im Marketing-Mix 84  
        3.4.7 Fazit: Warum eine Strategie so wichtig ist 85  
     3.5 Ziele der Webseite 86  
        3.5.1 Ziele formulieren 87  
        3.5.2 Aus Zielvorgaben Maßnahmen ableiten 87  
        3.5.3 Den Anwender nicht aus den Augen verlieren 88  
     3.6 Zielgruppenanalyse 90  
        3.6.1 Zielgruppenanalyse mit Fingerspitzengefühl 91  
        3.6.2 Verschiedene Zielgruppen 93  
        3.6.3 Es menschelt – die Personas 94  
        3.6.4 Nutzungsszenarien für Personas 96  
     3.7 Anforderungen Design 97  
        3.7.1 Design vs. Content 97  
        3.7.2 Look & 98  
     3.8 Anforderungen an die Inhalte 99  
        3.8.1 Inhaltsarten: Texte, Bilder und Videos 100  
        3.8.2 Inhaltserstellung 101  
        3.8.3 Der Qualitätsanspruch 102  
     3.9 Anforderungen an Technik und Funktionalitäten 104  
        3.9.1 Content-Management-Systeme 104  
        3.9.2 Funktionalitäten 105  
     3.10 Fazit 106  
  4 Responsive Webdesign 107  
     4.1 Einleitung – und sie bewegen sich doch 107  
        4.1.1 Neue Geräte und Bildschirmgrößen 108  
        4.1.2 Zurück in die Zukunft – von flexibel zu statisch zu flexibel 109  
        4.1.3 Ganzheitliche Flexibilität – es betrifft alle 110  
     4.2 Responsive Strategie – Mobile first und Content first 111  
        4.2.1 Adaptive Layout vs. Responsive Layout 112  
        4.2.2 Mobile oder Content – wer ist der Erste? 113  
        4.2.3 Graceful Degradation vs. Progressive Enhancement 114  
     4.3 Ein neuer Workflow 115  
        4.3.1 Der alte Workflow 116  
        4.3.2 Der responsive Workflow 117  
     4.4 Wireframes erstellen 120  
        4.4.1 Papier-Wireframes 121  
        4.4.2 Gezeichnete Wireframes 121  
        4.4.3 Digitale Wireframes 122  
        4.4.4 Die Graue-Box-Methode 124  
        4.4.5 Vorteile und Grenzen von Wireframes 125  
     4.5 Das Design – der Gestaltungsprozess 126  
        4.5.1 Der kreative Prozess 126  
        4.5.2 Moodboards 131  
        4.5.3 Style Tiles 134  
        4.5.4 Design-Feedback 136  
        4.5.5 Die Arbeit mit Design-Programmen 137  
     4.6 Vom Design zur Umsetzung 138  
        4.6.1 Modulares Design 138  
        4.6.2 Interaktive Prototypen 141  
        4.6.3 Design-Styleguide 142  
        4.6.4 Design-Tools 146  
        4.6.5 Testen und Debuggen 149  
        4.6.6 Code-Feintuning 152  
     4.7 Bestandteile einer responsiven Webseite 155  
        4.7.1 Flexible Raster 156  
        4.7.2 Media Queries 158  
        4.7.3 Flexible Bilder, Typografie und Weiteres 166  
  5 Informationsarchitektur 169  
     5.1 Einführung 169  
        5.1.1 Ein Alltagsbeispiel und sein Webseitenpendant 170  
        5.1.2 Darum geht es 172  
     5.2 Die Bedeutung der Informationsarchitektur 172  
        5.2.1 Die drei Aspekte – Inhalte, Nutzer, Kontext 173  
        5.2.2 User first 174  
        5.2.3 Pageflow 175  
        5.2.4 Findability – vom Suchen und Finden von Informationen 176  
     5.3 Die Bedeutung der Navigation 177  
        5.3.1 Aufgaben einer gelungenen Navigation 177  
     5.4 Content-Strategie 179  
        5.4.1 Guter Content 179  
        5.4.2 Guter Content und die Rolle des Webdesigners 180  
        5.4.3 Sammeln und Strukturieren 182  
        5.4.4 Produktion und Aktualität 184  
        5.4.5 Storytelling 185  
     5.5 Inhaltsstruktur entwickeln 187  
        5.5.1 Methoden und Tools 188  
        5.5.2 Wording 191  
        5.5.3 Case Studies 192  
        5.5.4 Navigationsprinzipien – den Erwartungen entsprechen 195  
     5.6 Durch Inhalte navigieren 199  
        5.6.1 Navigationsmenüs 199  
        5.6.2 Alternative Navigationswege 201  
     5.7 Fazit 207  
  6 Screendesign und User Interface Design 209  
     6.1 Grundlagen Screendesign 209  
        6.1.1 Aufgaben eines Screendesigns 210  
     6.2 Webdesign und die menschliche Wahrnehmung 215  
        6.2.1 Sehen statt Lesen 216  
        6.2.2 Zwei Personen, zwei Meinungen 219  
        6.2.3 Selektive Wahrnehmung 220  
     6.3 Wahrnehmungs- und Gestaltgesetze 221  
        6.3.1 Das Gesetz der Nähe 222  
        6.3.2 Das Gesetz der Geschlossenheit 224  
        6.3.3 Gesetz der Ähnlichkeit 226  
        6.3.4 Gesetz der Erfahrung 229  
        6.3.5 Gesetz der Kontinuität 230  
        6.3.6 Gesetz der Gleichzeitigkeit 231  
     6.4 User Interface Gestaltung 231  
        6.4.1 Die Leserichtung 231  
        6.4.2 Der Rhythmus 232  
        6.4.3 Visuelles Gewicht und Kontrast 234  
        6.4.4 Symmetrie und Asymmetrie 239  
     6.5 Gute Webgestaltung 241  
        6.5.1 Einheit 242  
        6.5.2 Angemessenheit 243  
        6.5.3 Einfachheit 244  
        6.5.4 Die Liebe zum Detail 245  
        6.5.5 Design-Prinzipien 246  
        6.5.6 Die Design-Prinzipien der »Großen« 250  
  7 Usability und User Experience 253  
     7.1 Alles beginnt mit Usability 253  
        7.1.1 Don’t make me think 253  
        7.1.2 Effektivität, Effizienz und Zufriedenheit 254  
        7.1.3 Usability in allen Bereichen 255  
        7.1.4 Usability-Tests und -Tools 256  
        7.1.5 Technische Analyse 262  
     7.2 User Experience 263  
        7.2.1 Die Website als Erlebnis 264  
        7.2.2 Look & 264  
        7.2.3 Psychologische Trigger 266  
  8 Layout und Raster 271  
     8.1 Anatomie einer Webseite 271  
        8.1.1 Der Header-Bereich 272  
        8.1.2 Der Inhaltsbereich 274  
        8.1.3 Die Fußleiste 276  
        8.1.4 Der umgebende Block 277  
     8.2 Layouts gestalten 277  
        8.2.1 Erwartungskonforme Websites 278  
        8.2.2 Komposition und Hierarchie 281  
        8.2.3 Weißraum 282  
        8.2.4 Layoutprinzipien 283  
        8.2.5 Card Design 287  
        8.2.6 Das Raster brechen – out of the Box 288  
        8.2.7 Above the Fold 291  
     8.3 Scrollen 293  
     8.4 Raster erstellen 299  
        8.4.1 Bedeutung 299  
        8.4.2 Layoutgrundlagen 301  
        8.4.3 Rastersysteme 309  
     8.5 Ein eigenes Raster anlegen 312  
        8.5.1 Spalten und Spaltenabstand 313  
        8.5.2 Rastergestaltung in Photoshop 314  
        8.5.3 Raster mit HTML und CSS umsetzen 318  
        8.5.4 Eigene Webseitenlayouts 328  
        8.5.5 Das Flexbox-Model 330  
        8.5.6 Raster mit CSS Grids 332  
  9 Farbe im Webdesign 337  
     9.1 Welche Rolle spielt die Farbe? 337  
        9.1.1 Farbe und Webdesign 338  
     9.2 Farbe: eine Wissenschaft für sich 339  
        9.2.1 Licht und Farbe 339  
        9.2.2 Wie unsere Farbwahrnehmung funktioniert 340  
        9.2.3 Farbpsychologie 340  
     9.3 Farbsysteme 342  
        9.3.1 Farbkreise 342  
        9.3.2 RGB – das additive Farbmodell 344  
        9.3.3 CMYK – das subtraktive Farbmodell 345  
        9.3.4 Farbtiefe 346  
        9.3.5 Farbdefinition 347  
        9.3.6 Farbton, Sättigung, Helligkeit 351  
     9.4 Das Web-Farbmanagement 357  
        9.4.1 Mit Farbräumen & 357  
     9.5 Farbwirkung 358  
        9.5.1 Warme Farben 359  
        9.5.2 Rot 360  
        9.5.3 Orange 365  
        9.5.4 Gelb 369  
        9.5.5 Kalte Farben 372  
        9.5.6 Blau 373  
        9.5.7 Grün 376  
        9.5.8 Violett/Lila 379  
        9.5.9 Neutrale Farben 381  
        9.5.10 Schwarz 383  
        9.5.11 Weiß 385  
        9.5.12 Grau 387  
        9.5.13 Grell, greller, Neon 389  
        9.5.14 Zusammenfassung Farbwirkung 389  
     9.6 Farbkontraste 390  
        9.6.1 Farbe-an-sich-Kontrast 390  
        9.6.2 Hell-Dunkel-Kontrast 392  
        9.6.3 Kalt-Warm-Kontrast 393  
        9.6.4 Komplementärkontrast 394  
        9.6.5 Quantitätskontrast 395  
        9.6.6 Qualitätskontrast 396  
        9.6.7 Simultankontrast 397  
        9.6.8 Bunt-Unbunt-Kontrast 397  
     9.7 Tool-Empfehlung: Unterstützung bei der Farbfindung 398  
     9.8 Gelungener Farbeinsatz im Webdesign 400  
        9.8.1 Farbe, Corporate Design & Identität 400  
        9.8.2 Farbverläufe 403  
     9.9 Farbe und Usability 407  
        9.9.1 Hürden bei der Farbwahrnehmung 408  
     9.10 Ein eigenes Farbschema entwickeln 410  
        9.10.1 Inspiration sammeln und Vorbilder finden 410  
        9.10.2 Praktische Umsetzung: Farbschemata selbst gestalten 410  
     9.11 Fazit 416  
  10 Typografie 417  
     10.1 Typografie im Web 417  
        10.1.1 Neue Möglichkeiten 418  
        10.1.2 Was ist gute Typografie? 418  
     10.2 Leseverhalten im Web 420  
        10.2.1 Prozess des Lesens 421  
        10.2.2 Lesen am Bildschirm 422  
     10.3 Schriftarten 423  
        10.3.1 Serifenschriften 424  
        10.3.2 Serifenlose Schriften 427  
        10.3.3 Andere Schriften 429  
     10.4 Schriftdarstellung im Web 431  
        10.4.1 Fontrendering – das Runde muss ins Eckige 432  
        10.4.2 Websichere Schriften 434  
        10.4.3 Webfonts 436  
        10.4.4 Webfonts-Anbieter 438  
        10.4.5 Text als Bild 442  
     10.5 Makrotypografie 443  
        10.5.1 Liniensystem 444  
        10.5.2 Schriftschnitte 445  
        10.5.3 Schriftgröße 448  
        10.5.4 Zeilenabstand 453  
        10.5.5 Schriftfarbe – Text- und Hintergrundkontrast 457  
        10.5.6 Zeilenlänge 459  
        10.5.7 Textausrichtung und Silbentrennung 461  
        10.5.8 Abstände und Leerraum 464  
        10.5.9 Schriftdefinition mit CSS 465  
     10.6 Mikrotypografie 467  
        10.6.1 Buchstaben- und Wortabstand 467  
        10.6.2 Anführungszeichen 468  
        10.6.3 Texteinzug 469  
        10.6.4 Versalien und Kapitälchen 470  
        10.6.5 Zahlengliederung 471  
        10.6.6 Sonderzeichen 473  
     10.7 Gelungene Webtypografie – Textformatierungen und Gestaltungstipps 473  
        10.7.1 Die Schriftauswahl 474  
        10.7.2 Die Gestaltung von Überschriften 479  
        10.7.3 Fließtext 481  
        10.7.4 Links 482  
        10.7.5 Listen 483  
        10.7.6 Tabellen 484  
        10.7.7 Zitate 485  
        10.7.8 Kaufmanns-Und 486  
        10.7.9 »Text-shadow« 487  
        10.7.10 Typografische HTML-Elemente 489  
     10.8 Typografische Inspiration: Best Cases 489  
        10.8.1 Minimalistisch 490  
        10.8.2 Bold Typo 491  
        10.8.3 Verspielt/künstlerisch 492  
  11 Bilder und Grafiken 495  
     11.1 Einführung: Die Macht der Bilder 495  
        11.1.1 Bilderauswahl 496  
        11.1.2 Bilder im Einsatz 498  
     11.2 Bilder im Web 500  
        11.2.1 Bilder als Layoutelemente 500  
        11.2.2 Bilder als Orientierungselemente 501  
        11.2.3 Bilder als Inhaltselemente 502  
        11.2.4 Bilder als emotionale Elemente 503  
     11.3 Bilderquellen 504  
        11.3.1 Urheberrecht 504  
        11.3.2 Creative-Commons-Bilder 505  
        11.3.3 Bilder vom Kunden 506  
        11.3.4 Fotos und Grafiken selbst erstellen 506  
        11.3.5 Fotoagenturen 508  
        11.3.6 Fotografen beauftragen 512  
     11.4 Motive und Bildstimmung 512  
        11.4.1 Menschen, Mitarbeiter und das Team 512  
        11.4.2 Porträts 516  
        11.4.3 Profilbilder 519  
        11.4.4 Räumlichkeiten 519  
        11.4.5 Inszenierung von Produktfotos 520  
        11.4.6 Austauschbare Bilderwelten 522  
     11.5 Bildgestaltung 524  
        11.5.1 Bildausschnitt und -perspektive 524  
        11.5.2 »Out of the Box« 526  
        11.5.3 Graustufen/Duplexfarben 526  
        11.5.4 Montagen/Collagen 528  
        11.5.5 Großformatige Bilder/Hintergrundbilder 530  
     11.6 Icons 530  
        11.6.1 Icons bringen Inhalte auf den Punkt 531  
        11.6.2 Aufmerksamkeit steuern und Struktur geben 532  
     11.7 Icon-Fonts 533  
        11.7.1 Vor- und Nachteile von Icon-Fonts 534  
     11.8 Illustrationen 535  
     11.9 Bildbearbeitung 537  
        11.9.1 Die nicht destruktive Bildbearbeitung 538  
     11.10 Bildformate 539  
        11.10.1 Die Bildgröße 540  
        11.10.2 Die Bildkomprimierung 540  
        11.10.3 Die Auswahl des richtigen Bildformats 541  
     11.11 Bilder in HTML und CSS 543  
        11.11.1 Bilder in HTML 544  
        11.11.2 Bilder in CSS 546  
        11.11.3 Responsive Bilder 547  
        11.11.4 Retina-Displays 550  
     11.12 Weitere Bilder-Tools 553  
     11.13 Fazit 554  
  12 Navigations- und Interaktionsdesign 557  
     12.1 Die Gestaltung der Hauptnavigation 557  
        12.1.1 Position 558  
        12.1.2 Umsetzung 563  
        12.1.3 Gestaltung 567  
        12.1.4 Dropdown-Menü 568  
        12.1.5 Mega-Dropdown-Menü 570  
        12.1.6 Kreative Navigationen 572  
        12.1.7 Feste Navigation 576  
     12.2 Die Gestaltung der Subnavigation 579  
     12.3 Die Gestaltung der Metanavigation 580  
     12.4 Die Gestaltung der Footer-Navigation 581  
     12.5 Navigation auf mobilen Endgeräten – responsive Navigation 583  
        12.5.1 Top-Nav – alles so lassen 584  
        12.5.2 Footer-Navigation – ganz ans Ende 586  
        12.5.3 Einfaches Toggle-Menü – Ein- und Ausblenden 588  
        12.5.4 Multi-Toggle 591  
        12.5.5 Off-Canvas-Menü – Rein- und Rausfahren 593  
        12.5.6 Navigation am unteren Rand 594  
        12.5.7 Weitere allgemeine Gestaltungstipps für eine mobile Navigation 595  
     12.6 Weitere Navigationsmittel 599  
        12.6.1 Links 599  
        12.6.2 Individuelle Linkunterstriche 599  
        12.6.3 Buttons 602  
        12.6.4 Die Suchfeld-Navigation 607  
        12.6.5 Weitere Navigationselemente 611  
     12.7 Formulare 613  
        12.7.1 Die Komponenten eines Formulars 614  
        12.7.2 Eingabefelder 615  
        12.7.3 Rückmeldungen 616  
        12.7.4 Validierung 617  
        12.7.5 Die User Experience bei Formularen 617  
        12.7.6 Formulare mit HTML5 618  
  13 Animationen 621  
     13.1 Animationen mit CSS 621  
        13.1.1 »hover«-Effekte mit CSS3-Transitions 621  
        13.1.2 CSS3-Transform – Verzerren, Skalieren und Drehen 626  
     13.2 Animationen und Interaktivität mit JavaScript 629  
        13.2.1 JavaScript-Bibliotheken 630  
     13.3 Interaktive Elemente 631  
        13.3.1 Bildergalerie 631  
        13.3.2 Tabs 632  
        13.3.3 Accordion 635  
        13.3.4 Content-Slider 636  
        13.3.5 Header-Slideshow 637  
        13.3.6 Modalboxen 638  
        13.3.7 Tooltip 639  
        13.3.8 Preloader & Ladebalken 641  
        13.3.9 Weitere Animationen und Effekte 642  
     13.4 Audiovisuelle Elemente 642  
        13.4.1 Das HTML5-Videoelement 642  
        13.4.2 Das HTML5-Audioelement 644  
     13.5 Fazit 645  
  14 Website-Typen und -Stile 647  
     14.1 Website-Typen 647  
        14.1.1 Corporate Website 647  
        14.1.2 Portfolio 653  
        14.1.3 Shop 656  
        14.1.4 Blog 662  
        14.1.5 Landing Page 667  
        14.1.6 Microsite 670  
        14.1.7 Web-Apps 671  
        14.1.8 Newsletter 672  
     14.2 Webdesign-Stile und -Trends 674  
        14.2.1 Skeuomorphismus 677  
        14.2.2 Flat-Design 678  
        14.2.3 Material-Design 681  
  Index 685  

Kategorien

Service

Info/Kontakt