Inhalt. 1 Prinzipien des modernen Webdesigns. 2 Projektmanagement. Inhalt. Vorwort... 19

Transkript

1

2 Auf einen Blick 1 Prinzipien des modernen Webdesigns Projektmanagement Konzeption und Strategie Responsive Webdesign Informationsarchitektur Gestaltungsgrundlagen Screendesign Layout und Raster Farbe im Webdesign Typografie Bilder und Grafiken Navigations- und Interaktionsdesign Webdesignstile und -trends Animationen Websitetypen Tipps, Tricks und Tools

3 Inhalt Vorwort Prinzipien des modernen Webdesigns 1.1 Aspekte modernen Webdesigns Die Entwicklung des Webdesigns Gute Seiten, schlechte Seiten Mehr als hübsch das Design Übersichtlich und lesbar Struktur, Inhalte und Verhalten Guter Quellcode Webstandards Webseiten für alle Zugänglichkeit und Barrierefreiheit Zugänglichkeit und Technik Zugänglichkeit und Inhalte Zugänglichkeit und Design Modernes Webdesign ist flexibel Flexibel und anpassungsfähige Webseiten Benutzerfreundlich und bedienbar Moderne Workflows Das Webdesign und sein Umfeld Die Märkte und der Wettbewerb Informationsüberflutung der Konsumenten Werteveränderung in der Gesellschaft Fazit: Webdesign ist Coden und Code ist Design 43 2 Projektmanagement 2.1 Das Projekt Was macht ein Projekt zu einem Projekt? Die Online-Branche Das Projektdreieck Die Aufgaben des Projektmanagers

4 2.2 Projektphasen Der Projektstart Das Lastenheft die Sicht des Auftraggebers Das Angebot Alternative Leistungen Projekte kalkulieren Das Pflichtenheft der Plan des Auftrag nehmers Der Zeitplan Umsetzung Spätere Änderungswünsche Projektabschluss und Auswertung Rechnung stellen Projektkommunikation wie sag ich es dem Kunden? Erwartungshaltung an den Kunden Erwartungshaltung des Kunden Wünsche und Vorstellungen Erstkontakt Beratung vs. Verkauf Präsentation Externe/freie Mitarbeiter Der Projektabschluss Erfolg oder Misserfolg Erfolgsfaktoren Risikomanagement Gründe für ein erfolgloses Webprojekt Konzeption und Strategie 3.1 Briefing und Recherche Das Briefing Die Recherche Briefing und Angebot Das Treffen mit dem Kunden Das Grobkonzept Ziele und Strategie Unternehmens- und Kundenanalyse Produkte und Dienstleistungen Die Vermarktung

5 3.2.3 Der Kundenkreis Branche und Umfeld Konkurrenten und Vorbilder Vorbilder Eine Strategie fürs Webprojekt entwickeln Rahmenbedingungen für die strategische Ausrichtung Mehr als Anfang und Ende Corporate Identity und Image Positionierung Alleinstellungsmerkmal Die Rolle des Webauftritts im Marketing-Mix Fazit: Warum eine Strategie so wichtig ist Webdesign ist Kommunikation Das Kommunikationsmodell Kommunikationsmodell für das Webdesign Ziele der Webseite Ziele formulieren Aus Zielvorgaben Maßnahmen ableiten Den Anwender nicht aus den Augen verlieren Zielgruppenanalyse Zielgruppenanalyse mit Fingerspitzengefühl Sinus-Milieus Verschiedene Zielgruppen Es menschelt die Personas Nutzungsszenarien für Personas Anforderungen Design Design vs. Content Look & Feel Anforderungen an die Inhalte Inhaltsarten: Texte, Bilder und Videos Inhaltserstellung Der Qualitätsanspruch

6 3.10 Anforderungen an Technik und Funktionalitäten Content-Management-Systeme Funktionalitäten Usability im Webdesign Don t make me think Effektivität, Effizienz und Zufriedenheit Usability in allen Bereichen Usabilty-Tests und -Tools Testaufgaben erstellen Technische Analyse User Experience Die Website als Erlebnis Look & Feel, Joy of Use und die Usability Emotionen wirken Glaubwürdigkeit und Vertrauen Fazit Responsive Webdesign 4.1 Einleitung und sie bewegen sich doch Neue Geräte und Bildschirmgrößen Zurück in die Zukunft von flexibel zu statisch zu flexibel Ganzheitliche Flexibilität es betrifft alle Responsive Strategie»Mobile first«und»content first« Adaptive Layout vs. Responsive Layout Mobile oder Content wer ist der Erste? Graceful Degradation vs. Progressive Enhancement Ein neuer Workflow Der traditionelle Workflow Der responsive Workflow Bestandteile einer responsiven Webseite Flexible Raster Media Queries Flexible Bilder, Typografie und Weiteres

7 4.5 Tipps zur Umsetzung HTML-Prototpying Testen Informationsarchitektur 5.1 Einführung Ein Alltagsbeispiel und sein Webseiten- Pendant Darum geht es Die Bedeutung der Informationsarchitektur Die drei Aspekte Inhalte, Nutzer, Kontext User first Pageflow Findability vom Suchen und Finden von Informationen Die Bedeutung der Navigation Aufgaben einer gelungenen Navigation Content-Strategie Guter Content Guter Content und die Rolle des Web designers Sammeln und strukturieren Produktion und Aktualität Storytelling Inhaltsstruktur entwickeln Methoden und Tools Wording Case Studies Navigations-Prinzipien den Erwartungen entsprechen Durch Inhalte navigieren Navigationsmenüs Alternative Navigationswege Fazit

8 6 Gestaltungsgrundlagen 6.1 Webdesign und die menschliche Wahrnehmung Sehen statt Lesen Zwei Personen, zwei Meinungen Selektive Wahrnehmung Die äußere Form Das Format Formen Die gute Gestalt Texturen Proportionen Anordnung und Gewichtung Das Gesetz der Nähe Das Gesetz der Geschlossenheit Symmetrie und Asymmetrie Goldener Schnitt Die Drittel-Regel Der Rhythmus Die Leserichtung Visuelles Gewicht und Kontrast Wahrnehmung und Gestaltung Gesetz der Ähnlichkeit Gesetz der Erfahrung Gesetz der Kontinuität Figur-Umfeld-Beziehung Schwerkraft Gesetz der Gleichzeitigkeit Gute Webgestaltung Einheit Angemessenheit Einfachheit Die Liebe zum Detail Screendesign 7.1 Grundlagen Screendesign Aufgaben eines Screendesigns Elemente eines Screendesigns Screendesign-Prinzipien Die Design-Prinzipien der»großen«

9 7.2 Der Gestaltungsprozess Der kreative Prozess Moodboards Style Tiles Die Arbeit mit Designprogrammen Design-Feedback Vom Design zur Umsetzung Modulares Design Design-Styleguide Layout und Raster 8.1 Anatomie einer Webseite Der Header-Bereich Der Inhaltsbereich Die Fußleiste Der umgebende Block Wireframes erstellen Papier-Wireframes Gezeichnete Wireframes Digitale Wireframes Die Graue-Boxen-Methode Vorteile und Grenzen von Wireframes Raster Grundlagen Bedeutung Layout-Grundlagen Rastersysteme Ein eigenes Raster anlegen Spalten und Spaltenabstand Rastergestaltung in Photoshop Raster mit HTML und CSS umsetzen Eigene Webseiten-Layouts Interaktive Prototypen Layouts gestalten Komposition und Hierarchie Layout-Strukturen Weißraum Above the Fold Scrollen oder klicken das ist hier die Frage

10 8.5.6 Das Raster brechen out of the Box Layout-Prinzipien Farbe im Webdesign 9.1 Welche Rolle spielt die Farbe? Farbe und Webdesign Farbe: eine Wissenschaft für sich Licht und Farbe Wie unsere Farbwahrnehmung funktioniert Farbpsychologie Farbsysteme Farbkreise RGB das additive Farbmodell CMYK das subtraktive Farbmodell Farbtiefe Farbdefinition Farbton, Sättigung, Helligkeit Das Web-Farbmanagement Mit Farbräumen & Farbprofilen arbeiten Farbwirkung Warme Farben Rot Orange Gelb Kalte Farben Blau Grün Violett/Lila Neutrale Farben Schwarz Weiß Grau Grell, greller, Neon Zusammenfassung Farbwirkung Farbkontraste Farbe-an-sich-Kontrast Hell-Dunkel-Kontrast Kalt-Warm-Kontrast

11 9.6.4 Komplementärkontrast Quantitätskontrast Qualitätskontrast Simultankontrast Bunt-Unbunt-Kontrast Farbschemata Monochromes Farbschema Analoges Farbschema Komplementäres Farbschema Teilkomplementäre, triadische und tetradische Farbschemata Tool-Empfehlung: Unterstützung bei der Farbfindung Gelungener Farbeinsatz im Webdesign Farbe, Corporate Design & Identität Farbverläufe Farbe und Usability Hürden bei der Farbwahrnehmung Ein eigenes Farbschema entwickeln Inspiration sammeln und Vorbilder finden Farbtrends und Inspirationsquellen Tools, um Farbkombinationen zu erzeugen Praktische Umsetzung: Farbschemata selbst gestalten Fazit Typografie 10.1 Typografie im Web Neue Möglichkeiten Und was ist gute Typografie? Leseverhalten im Web Prozess des Lesens Lesen am Bildschirm Schriftarten Serifenschriften Serifenlose Schriften Andere Schriften

12 10.4 Schriftdarstellung im Web Fontrendering das Runde muss ins Eckige Websichere Schriften Webfonts Webfonts-Anbieter Text als Bild Makrotypografie Liniensystem Schriftschnitte Schriftgröße Zeilenabstand Schriftfarbe Text- & Hintergrundkontrast Zeilenlänge Grundlinienraster Textausrichtung & Silbentrennung Abstände & Leerraum Schriftdefinition mit CSS Mikrotypografie Buchstaben- & Wortabstand Anführungszeichen Trenn- und Gedankenstriche Einrückungen Texteinzug Versalien & Kapitälchen Zahlengliederung Sonderzeichen Gelungene Webtypografie Textformatierungen und Gestaltungstipps Die Schriftauswahl Die Gestaltung von Überschriften Fließtext Links Listen Tabellen Zitate Kaufmanns-Und Text-shadow Typografische HTML-Elemente Typografische Inspiration: Best Cases Minimalistisch

13 Bold Typo Verspielt Bilder und Grafiken 11.1 Einführung: Die Macht der Bilder Eigenschaften von Bildern Konsequenzen für die Auswahl von Bildern Bilder im Einsatz Bilder im Web Bilder als Layoutelemente Bilder als Orientierungselemente Bilder als Inhaltselemente Bilder als emotionale Elemente Bilderquellen Urheberrecht Creative-Commons-Bilder Bilder vom Kunden Fotos und Grafiken selbst erstellen Fotoagenturen Fotografen beauftragen Motive & Bildstimmung Austauschbare Bilderwelten Räumlichkeiten Menschen, Mitarbeiter und das Team Porträts Profilbilder Inszenierung von Produktfotos Bildgestaltung Der Bildausschnitt »Unrechteckige«Formate Graustufen/Duplexfarben Montagen/Collagen Großformatige Bilder/Hintergrundbilder Bildtrends Icons Icons bringen Inhalte auf den Punkt Aufmerksamkeit steuern und Struktur geben

14 11.7 Icon-Fonts Vor- und Nachteile von Icon-Fonts Illustrationen Thematische Illustrationen Dekorative Illustrationen Illustrativer Text Informative Illustrationen (Infografiken) Bildbearbeitung Die nicht destruktive Bildbearbeitung Bildformate Die Bildgröße Die Bildkomprimierung Die Auswahl des richtigen Bildformats Für Web speichern Bildgrößen optimieren Bilder in HTML und CSS Bilder in HTML Bilder in CSS Responsive Bilder Retina-Displays Weitere Bilder-Tools Zusammenfassung Bilder Navigations- und Interaktionsdesign 12.1 Die Gestaltung der Hauptnavigation Position Umsetzung Gestaltung Dropdown-Menü Mega-Dropdown-Menü Kreative Navigationen Feste Navigation Die Gestaltung der Subnavigation Die Gestaltung der Metanavigation Die Gestaltung der Footer- Navigation Navigation auf mobilen End geräten responsive Navigation Top-Nav alles so lassen

15 Footer-Navigation ganz ans Ende Einfaches Toggle-Menü Ein- und Ausblenden Multi-Toggle Off-Canvas-Menü Rein- und Rausfahren Weitere allgemeine Gestaltungstipps für eine mobile Navigation Weitere Navigationsmittel Links Individuelle Linkunterstriche Buttons Die Suchfeld-Navigation Weitere Navigationselemente Formulare Die Komponenten eines Formulars Eingabefelder Rückmeldungen Validierung Die User Experience bei Formularen Formulare mit HTML Webdesignstile und -trends 13.1 Die Webdesignstile Frühere Webdesignstile Skeuomorphismus Flat-Design Minimalismus Typografie Illustrationen Der Vintage- oder auch Retro-Stil Fazit Webdesigntrends Scrollen Grafische Effekte Transparenz

16 14 Animationen 14.1 Animationen mit CSS »hover«-Effekte mit CSS3-Transitions CSS3-Transform Verzerren, Skalieren und Drehen Animationen und Interaktivität mit JavaScript JavaScript-Bibliotheken Interaktive Elemente Bildergalerie Tabs Accordion Content-Slider Header-Slideshow Modalboxen Tooltip Weitere Animationen und Effekte Audiovisuelle Elemente Das HTML5-Videoelement Das HTML5-Audioelement Websitetypen 15.1 Corporate Website Die Corporate Website als Türöffner Analyse einer Corporate Website Das Website-Branding Portfolio Der Ausdruck von Persönlichkeit Präsentation der eigenen Arbeit Shop Vertrauen schaffen Konkurrenz und Shop-Vielfalt Blog Das Corporate Blog Das Info-Blog Aufbau eines Blogs Landing Page Aufbau einer Landing Page

17 15.6 Microsite Web-Apps Newsletter Tipps, Tricks und Tools 16.1 Wichtiger»Kleinkram« Zum Ausdrucken Print-Stylesheet Das Webseiten-Symbol Favicon Webseite nicht gefunden die 404-Meldung Code-Feintuning Responsibility Performance Testen und Debuggen In Kontakt bleiben Weiterbildung Netzwerk Lesenswert Die DVD zum Buch Index

18 Kapitel 1 Prinzipien des modernen Webdesigns Kapitel 1 Prinzipien des modernen Webdesigns Das Internet ist in einem steten Wandel und mit ihm das Webdesign. So sind beispielsweise Responsive Webdesign,»Content first«oder Flat-Design Begrifflichkeiten, die vor wenigen Jahren nur Insidern bekannt waren und aktuell für viel Gesprächsstoff sorgen. Diese drei stehen aber exemplarisch für die Ganzheitlichkeit, die eine moderne Webseite auszeichnet. Aspekte wie Design, Technik und Inhalte spielen zusammen, aber gerade die Optik, das Erscheinungsbild im Browser ist das, was den Betrachter ansprechen und überzeugen muss. 1.1 Aspekte modernen Webdesigns Modernes Webdesign ist nicht immer einfach zu definieren. Viele Aspekte spielen eine Rolle, die je nach Projekt oder eigenen Vorstellungen auch unterschiedlich gewichtet sein können. Im folgenden ein erster Überblick über die Aspekte, die eine Webseite zu einer modernen machen Die Entwicklung des Webdesigns In den gut 20 Jahren, die uns das Internet nun erfreut, hat sich einiges getan, nicht nur außerhalb des World Wide Web. Früher waren Tabellenlayouts mit 1 1-Pixel-Bildern, animierte Logo- Gifs, Flash -Intros und Web-2.0 -Glossy-Buttons angesagt. Heute präsentiert sich das Web in einer vor wenigen Jahren noch ungeahnten Flexibilität und Mobilität, und ebenso die Webseiten in Bezug auf Design, Technik und Inhalte. Neue technische Möglichkeiten wie die Cascading Stylesheets, JavaScript Frameworks wie jquery, dazu neue Geräte wie Smartphones und Tablets haben die technischen Anforderungen und Möglichkeiten in den letzten Jahren grundlegend verändert. Einzig HTML ist geblieben, während das früher auch sehr beliebte Flash in der reinen Webseitengestaltung nur noch selten eine Rolle mehr spielt. G Abbildung 1.1 Wurde früher Flash für Animationen eingesetzt, so ist es heute jquery wie bei ok-studios.de. 23

19 Kapitel 1 Prinzipien des modernen Webdesigns G Abbildung 1.2 Am Anfang war das Webdesign wüst und leer: Webseiten von BMW und Bündnis90/Die Grünen Mitte der 1990er Jahre. Abbildung 1.3 E So flach wie bei wallmob.com sind Webseiten heutzutage häufig. In der Gestaltung sind Trends gekommen und gegangen, und heute haben wir ein buntes Potpourri an verschiedenen Stilen, die nebeneinander existieren können und oft auch kombiniert werden. Während bis vor wenigen Jahren Web-2.0-Designs angesagt waren und Elemente gar nicht haptisch genug aussehen konnten, ist inzwischen alles ganz flach geworden und nennt sich dementsprechend Flat-Design. Mehr zu den aktuellen Webdesignstilen und -trends lesen Sie Kapitel

20 1.1 Aspekte modernen Webdesigns Auch die Konzeption einer Webseite hat endlich eine größere Bedeutung bekommen. Der Ansatz»Content first «zeigt, dass es nicht mehr reicht, die Texte der Imagebroschüre in die Webseite zu kopieren, sondern dass das Webtexten eine eigene Disziplin ist, die den Nutzer wie die Suchmaschinen glücklich machen soll. Apro pos Nutzer : Dieser ist nun in den Mittelpunkt gerückt. Er ist nicht mehr nur Kunde, sondern hat Mitspracherecht und nutzt diese Macht auch fleißig in Form von Bewertungen, Austausch in sozialen Netzwerken und der Veröffentlichung seiner Gedanken und Meinungen auf eigenen Webseiten und Blogs. Dazu wird er inzwischen auch immer mehr in seinem Nutzungserlebnis umworben. Er soll richtige»erfahrungen«machen beim Surfen. Die User Experience (siehe Abschnitt 3.12,»User Experience«) soll ihn glücklich machen, so dass er ein zufriedener Kunde wird, der gerne wiederkommt und der von seinen positiven Erlebnissen privat und auch öffentlich im Netz berichtet. H Abbildung 1.4 Und so sehen Webseiten knapp 20 Jahre später aus: bmw.de und gruene.de im Jahr Und vor allem hat sich sein Nutzungsverhalten geändert. Der gemeine User sitzt nicht mehr abends am Schreibtisch vor einem grauen»desktop«-pc und wartet erst einmal 2 Minuten, bis sein Betriebssystem startbereit ist. Der moderne User nutzt das Internet immer und vor allem überall: mit dem Tablet auf dem Sofa, mit dem Smartphone in der Bahn, bei der Arbeit und, ja, auch immer noch zu Hause am Schreibtisch, aber dort vermutlich inzwischen mit einem Laptop. Mobil und flexibel ist das Internet geworden kaum ein Lebensbereich, der davon nicht beeinflusst wird: Einkaufen, Partner finden, Musik hören, Fernsehen, Filme schauen und streamen, lernen, kommunizieren, informieren, amüsieren, ablenken Das Internet hat sehr vieles geändert, und wird auch in Zukunft weitere Änderungen mit sich bringen. Zeitmaschine Wollen Sie auch einmal sehen, wie Webseiten früher aussahen? Die Wayback Machine hat alte Zustände von Webseiten abgespeichert: web.archive.org. 25

21 Kapitel 1 Prinzipien des modernen Webdesigns»A designer who does not write markup and css is not designing for the web, but drawing pictures.«webdesigner Andy Rutledge, andyrutledge.com Und die Webdesigner? Die stecken irgendwie mittendrin und versuchen, den fast täglich neuen Entwicklungen zu folgen. RWD, SASS, dribble, Sketch, Off-Canvas, Storytelling, SVG, Git usw. heißen die aktuellen Entwicklungen, die man sicherlich nicht alle einsetzen muss, aber über die man zwangsläufig stolpert, wenn man sich einigermaßen aktiv mit der Webdesign-Branche beschäftigt. Moderne Webdesigner zeichnet aber vor allem eines aus: ein Gespür für gute Gestaltung, für die Benutzung der Webseite durch die Anwender und die Möglichkeiten der Frontend-Umsetzung mit HTML und CSS (und vielleicht sogar noch JavaScript). Gehen wir also auf den nächsten 783 Seiten auf die spannende Suche, was modernes und attraktiv gestaltetes Webdesign auszeichnet und wie man es selber umsetzen kann. Kriterien für eine gute Webseite Im Laufe des Buches werden viele Aspekte der einzelnen Kriterien näher erläutert, mit praktischen Tipps versehen und hilfreiche Tools vorgestellt. Ab und an überschneiden sich die Punkte dabei. Denn so sorgt beispielsweise Text, der gut lesbar ist, häufig auch für eine gute Übersichtlichkeit der Inhalte Gute Seiten, schlechte Seiten Es gibt da draußen in den Weiten des World Wide Web jede Menge Webseiten gute Webseiten und schlechte Webseiten. Die Einteilung fällt vermutlich oft auf den ersten Blick, kann sich aber von Betrachter zu Betrachter unterscheiden. Wonach trifft man aber eine fundierte Entscheidung, ob eine Webseite gut oder schlecht (oder irgendwas dazwischen) ist? Gibt es Qualitätsmerkmale, nach denen man eine Webseite beurteilen kann? Jeder mag die Qualitätsfrage anders beantworten. Für einen Onlineshop-Betreiber ist seine Seite gut, wenn er genügend darüber verkauft. Für den Webdesigner ist sein Portfolio gut, wenn es ihm neue Kunden verschafft. Dabei behilflich ist ein professionelles Design, das den»wert«der Seite, der angebotenen Produkte oder Leistungen (re)präsentiert. Um zu einem professionellen Design zu kommen, gibt es beispielsweise einige grundlegende Gestaltungsaspekte zu beachten (siehe Kapitel 6,»Gestaltungsgrundlagen«) oder auch die Aufgaben und Elemente eines Screendesigns (siehe Kapitel 7,»Screendesign«). Unabhängig von den individuellen Zielen lassen sich einige allgemeingültige Kriterien festlegen, was eine gute Webseite ausmacht, Kriterien, an denen sich sowohl der Webdesigner als auch der Webseitenbetreiber/Kunde orientieren können. Gute Webseiten E haben validen und semantischen Code. E haben lesbaren Text. E sind schnell geladen. E sind suchmaschinenoptimiert. E sind ästhetisch ansprechend. 26

22 1.1 Aspekte modernen Webdesigns E E E E E E E E sind auf unterschiedlichen Bildschirmauflösungen und Endgeräten gut bedienbar. setzen Technik nicht als Selbstzweck ein, sondern um die Funktionalität und die Bedienung zu erleichtern. haben einen Wiedererkennungswert. sind einfach zu bedienen. Die Kriterien klingen alle selbstverständlich? Sind sie aber nicht! Das fängt schon damit an, dass einige Kriterien nicht zwangsläufig eindeutig sind. Wo beginnt Übersichtlichkeit genau, und ab wann ist eine Seite nicht mehr lesbar? Im folgenden Abschnitt werden die einzelnen Kriterien noch näher beleuchtet. Nicht alle müssen zwangsläufig bei jedem Projekt voll erfüllt sein, dies hängt auch von den zu Projektbeginn definierten Bedingungen ab (siehe Kapitel 3,»Konzeption und Strategie«). Es mag Projekte geben, da spielt beispielsweise die Suchmaschinenoptimierung keine so große Rolle. Um die Kriterien weitgehend zu erfüllen, sind viele Aspekte zu beachten. Als Oberbegriffe lassen sich vier Punkte herausstellen, die grundlegend mit dafür sorgen, dass eine Webseite gut, also erfolgreich ist: Gute Webseite F Abbildung 1.5 Die Basis ist ein Konzept. Zusammen mit den drei Säulen Inhalte, Design und Technik schafft es die Voraussetzung für eine gute Webseite. Inhalte Design Technik Konzept Eine erfolgreiche Webseite beruht auf den drei Säulen Inhalte, Design und Technik. Die Inhalte sind der Grund, warum Anwender auf die Webseite kommen. Sie sollten also sowohl das Un- Ein Design-Buch Der Schwerpunkt des Buches liegt eindeutig auf den Designaspekten bei der Umsetzung einer Webseite. Diese sind aber nie isoliert zu betrachten, sondern immer im Zusammenspiel mit Konzeption, Inhalten und Technik. Daher werden auch diese Aspekte immer wieder vorkommen. 27