Elliot Jay Stocks. Sexy Webdesign. Wie man mit guten Konzepten tolle Websites gestaltet

Transkript

1 Elliot Jay Stocks Sexy Webdesign Wie man mit guten Konzepten tolle Websites gestaltet

2 Lektorat: Nina Lötsch, René Schönfeldt Übersetzung: Cornelia Boenigk Copy-Editing: Alexander Reischert Herstellung:Nadine Thiele Umschlaggestaltung: Helmut Kraus, Druck und Bindung: L.E.G.O., S.p.a., in Vicenza Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über < abrufbar. ISBN Auflage 2009 Copyright 2009 dpunkt.verlag GmbH Ringstraße Heidelberg Copyright 2009 by SitePoint Pty. Ltd., Collingwood, Australia. Title of the English-language original: Sexy Web Design. ISBN Translation Copyright 2009 by dpunkt.verlag GmbH. All rights reserved. Original English edition work by: Jina Bolton (Expert Reviewer), Dan Rubin (Expert Reviewer), Chris Wyness (Managing Editor), Raena Jackson Armitage (Technical Editor), Kevin Yank (Technical Director), Kelly Steele (Editor), Fred Brown (Indexer), Alex Walker (Cover Design). Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen. Alle Angaben und Programme in diesem Buch wurden vom Autor mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buchs stehen. In diesem Buch werden eingetragene Warenzeichen, Handelsnamen und Gebrauchsnamen verwendet. Auch wenn diese nicht als solche gekennzeichnet sind, gelten die entsprechenden Schutzbestimmungen

3 xi Inhaltsverzeichnis Geleitwort Vorwort v vii Ka p i t e l 1 User Interfaces sind sexy Interfaces Interfaces in der realen Welt Interfaces im Internet Ziele von Webdesign Was Ihre Website macht Wie sieht Ihre Seite aus? Benutzerfreundlichkeit und Barrierefreiheit Der Gestaltungsprozess Die Recherche Die Struktur Interaktion Ästhetik Das Ergebnis Ran an die Arbeit! Ka p i t e l 2 Die Recherche Der Auftrag Einen Auftrag begleiten Den Auftrag erweitern Die Endfassung des Auftrags Die ersten Schritte Der Spaßanteil Seriosität und Kompetenz Ideenreichtum und Innovationskraft Die Anteile von Information und Atmosphäre in eine Balance bringen Was ist die Hauptsache? Markenkonsistenz Quellen der Inspiration Anregungen für die Atmosphäre Anregungen für den Seitenaufbau Anregungen für die Funktionalität... 40

4 xii Inhaltsverzeichnis 2.4 Was gibt es außerhalb des Internets? Sammelwerkzeuge Die Recherche: ein kontinuierlicher Prozess Ka p i t e l 3 Struktur Sitemaps Erste Skizzen Sitemaps versus Navigation Die fertigen Diagramme Wireframes Die Elemente gewichten Unsere Checkliste Wireframes zu fremden Websites entwerfen Die Skizzen Die Endfassungen der Seiten Und nun? Ka p i t e l 4 Navigation und Interaktion Navigation Navigation = Liste Das Problem mit dem Home-Button Verschiedene Navigationstypen Navigationsstile Die Navigation in unserem Projekt Formulare Formulare in unserem Projekt Audiovisuelle Inhalte Komplex kontra minimal Videos in unserem Projekt E-Commerce E-Commerce in unserem Projekt Die Interaktionen in das Design einarbeiten Eine geringfügige Planänderung Schlussbemerkung... 80

5 Inhaltsverzeichnis xiii Ka p i t e l 5 Ästhetik Eine kleine Einführung in Layout und Gestaltung Traditionen in Kunst und Design Starres oder variables Layout Das Raster Die künstlerische Ebene Stimmung und Atmosphäre Farbe Grundlagen der Farbenlehre Kontrast Konsistenz Tiefeneffekte Muster und Texturen Bilder Fotografie Illustrationen Piktogramme Bildbearbeitung Typografie Schrift im Internet Schriftarten auswählen Dekorative Schriften Konvention versus Innovation Das Design fertigstellen Die fertigen Entwürfe Das Raster benutzen Farben Bilder Muster und Texturen Kontraste und Hervorhebungen Die Einheitlichkeit in unserem Design Unsere Schriften Einsatz von Konventionen und Innovation in unserem Projekt Fazit

6 xiv Inhaltsverzeichnis Ka p i t e l 6 Die Übergabe Designentwürfe Ebenen organisieren Bilddaten exportieren Entwürfe im Browser präsentieren Styleguides Layout Farbe Leitmotive und Techniken Schriften und Text Bilder Die Entwicklungsphase im Blick behalten Sonst noch was? Und nun? Good luck, you sexy thing! Index 147 Website-Register 150