Book description
Webdesign von Kopf bis Fuß ist ein Buch für alle, die Kenntnisse in (X)HTML und CSS mitbringen und nun das Design ihrer Website auf Vordermann bringen wollen. Nach und nach lernen Sie die Prinzipien professionellen Designs kennen und bekommen einen geschärften Blick dafür, was eine gelungene, nutzerfreundliche Website im Kern ausmacht.
"Die Erstellung von Websites umfasst heutzutage weitaus mehr als ein paar Zeilen Code. Webdesign von Kopf bis Fuß zeigt Ihnen, was Sie wissen müssen, um anregende, nutzerfreundliche Websites zu entwickeln. Ein weiteres geniales Von-Kopf-bis-Fuß-Buch."
Table of contents
- Webdesign von Kopf bis Fuß
- Die Autoren von Webdesign von Kopf bis Fuß
- Über den Übersetzer dieses Buchs
- Wie man dieses Buch benutzt: Einführung
-
1. Schöne Webseiten bauen: Schönheit liegt immer im Auge des Benutzers
- Ihre große Chance mit Rote Laterne Design
- Womit anfangen?
- Zeichnen Sie zuerst eine Blaupause
- Entwickeln Sie eine Top-Level-Navigation
- Der richtige Kontext
- Zeigen Sie Jana einige Skizzen
- Skizzen richten den Fokus auf die Funktionalität
- Ruinieren Sie gutes Design nicht durch schlechten Text
- Was macht Text übersichtlich?
- Beim Webdesign geht es um Kommunikation mit den BENUTZERN
- Webdesign-Werkzeugkasten
-
2. Konzeption: Papier wickelt Stein ein
- Ihr erster »internationaler« Auftritt ...
- Vor dem Programmieren denken
- Eine klare visuelle Metapher unterstreicht das Thema Ihrer Website
- Das Thema Ihrer Website
- Brainstorming: Der Weg zur visuellen Metapher
- Zielsetzung und visuelle Metapher für Mark
- Seitenelemente formen die visuelle Metapher
- Erstellen Sie ein XHTML-Mock-up für Mark
- Und das CSS ...
- Entwickeln Sie Ihre Ideen mit Storyboards ohne Code, um Zeit zu sparen
- Gestalten Sie nicht für sich selbst!
- Wir erstellen ein Storyboard für Mark
- Webdesign-Werkzeugkasten
-
3. Strukturieren Sie Ihre Website: »Biegen Sie bei dem grünen Wasserturm links ab ...«
- Passen Sie den Inhalt in Ihr Layout ein
- Strukturieren Sie die Informationen
- Strukturieren Sie Ihre Website durch Informationsarchitektur (IA)
- IA mit Card Sorting
- Sortieren Sie Ihre Karten in passende Stapel
- Geben Sie den Stapeln kurze und aussagekräftige Namen
- Welches Card Sorting ist richtig?
- Ordnen Sie die Karten in der Hierarchie der Website an
- IA-Diagramme sind Card Sortings auf Papier
- IA-Diagramme sind NICHT nur Links
- Von der Konzeption zu Umsetzung
- Die Struktur von Marks Website
- Zuerst die index.html ...
- ... und dann screen.css für den Stil
- Fortsetzung screen.css ...
- Von der Konzeption zur Umsetzung
- Webdesign-Werkzeugkasten
-
4. Layout und Design: Die goldene Regel
- Beim Design geht es ums Publikum
- Ihr neuester Auftritt: RPM Records
- Bestimmen Sie RPMs Zielgruppe mit Personas
- Lassen Sie sich von Ihren Personas leiten ...
- Die Auflösung wirkt sich auf Design und Layout aus
- Die Bildschirmgröße entscheidet, WIE VIEL von Ihrer Website im Browser angezeigt wird
- Ein für 1024 x 768 optimiertes XHTML- und CSS-Grundgerüst
- Menschen haben es gern klar und strukturiert
- Wie breit soll mein Raster sein? Der Goldene Schnitt
- Die Drittel-Regel: eine Abkürzung zum Goldenen Schnitt
- RPM und der Goldene Schnitt: eine (Anti-)Fallstudie
- Erinnern Sie sich an Ihre Personas?
- Erinnern Sie sich an Ihren Kunden?
- RPM 2.0 mit dem Blueprint-Framework
- RPM 2.0 mit Blueprint-CSS-Regeln stylen
- Zeit für die RPM-Grooves
- Das Layout mit CSS aufpolieren
- Machen Sie das Markup für Inhalt und Navigation fertig
- Layout und typografische Details mit CSS
-
5. Mit Farbe gestalten: Jenseits des Monochromen
- Unterstützen Sie die hiesige Musikszene
- 9Rules: Der Goldstandard der Blog-Netzwerke
- Manchmal sind Ihre Möglichkeiten ein bisschen ... begrenzt
- Farben haben eine emotionale Wirkung
- Der Farbkreis (womit alles beginnt)
- Wählen Sie mit dem Farbkreis Farben, die zusammenpassen
- Wählen Sie zuerst die GRUNDFARBE
- Gute Farbmuster mit dem triadischen Schema
- Fangen Sie mit dem SampleRate-Markup an
- Erstellen Sie das grundlegende Seitenlayout mit CSS
- Das Gegenteil von dunkel ist ... hell
- Erstellen Sie sattere Farbpaletten mit einem tetradischen Farbschema
- Aktualisieren Sie das SampleRate-CSS
- Webdesign-Werkzeugkasten
-
6. Smarte Navigation: »Klicken Sie in 2 Sekunden auf Home.«
- Zurück auf die Schulbank
- Eine gute Navigation fängt mit einer guten IA an
- Was hat es mit einem Namen überhaupt auf sich?
- Variante 1: Horizontale Tab-Navigation
- Variante 2: Vertikale Navigation
- Blockelemente sind Ihre Freunde
- Die Blocknavigation der CNM-Website floaten
- Symbole SAGEN nichts aus ... sie sind nur hübsch
- Fügen Sie Symbole zu Ihrem Text hinzu, nicht umgekehrt
- Aktualisieren Sie das CNM-XHTML mit Textlinks
- Jetzt können wir unsere neuen Elemente stylen ...
- Die primäre Navigation sollte sich nicht ändern ... ... die sekundäre aber SCHON
- Sekundäre Navigation für alle untergeordneten Seiten
- Die Navigation mit CSS stylen
- Webdesign-Werkzeugkasten
-
7. Schreiben für das Web: Los, überfliegen Sie!
- Machen Sie eine bessere Onlinezeitung
- Hipster-Kurier online: Projektspezifikation
- Das Problem ist der TEXT
- Inhalte mit der umgekehrten Pyramide optimieren
- Kürzen Sie Ihren Text
- Listen in XHTML
- Überschriften machen Texte noch scannbarer
- Heben Sie Überschriften und Texte mit verschiedenen Schriften hervor
- Die Ebene einer Überschrift zeigt ihre Wichtigkeit, nicht die Größe
- Webdesign-Werkzeugkasten
-
8. Barrierefreiheit: Barrieren stören
- Audio2Go: Barrierefreiheit mit Hindernissen
- Barrierefreiheit heißt Benutzerfreundlichkeit für ALLE
- Wie LIEST sich Ihre Website?
- Der Zweck einer Website sollte JEDEM klar sein
- Mal ehrlich: Computer sind dumm!
- Ein Computer liest den ALT-Text des Bilds
- Aus ALT mach LONGDESC
- Ihre Verbesserungen werden nur von manchen Audio2Go-Kunden begrüßt
- Barrierefreiheit bedeutet mehr als nur Screenreader
- Die Tab-Navigation sollte GEORDNET sein
- Audio2Go ist jetzt VIEL zugänglicher
- WCAG 2.0
- Farben sollten nicht Ihr EINZIGES Kommunikationsmittel sein
- Die Welt durch websichere Augen ...
- Audio2Go durch farbenblinde Augen
- Diese Sterne sind ein echtes Problem
- Hintergrundbilder sind immer noch Ihre Freunde
- tabindex allein genügt nicht
-
9. Hören Sie auf Ihre Benutzer: Der Weg zu harmonischem Design
- Probleme bei RPM
- Lassen Sie Ihr Publikum mit Fokusgruppen und Umfragen zu Wort kommen
- Weder Umfragen noch Fokusgruppen sind gratis
- Stellen Sie die richtigen Fragen in Ihren Umfragen
- Die endgültige RPM Music-Benutzerumfrage
- Die Ergebnisse sind da!
- Antworten auf die offene Frage
- Lösen Sie den RPM-CSS-Bug durch Verschieben der hover-Eigenschaft
- Budget-Bausteine für Usability-Tests
- Strukturieren Sie den Test mit einem Moderatorskript
- Freunde und Familie können problematisch sein
- Die Ergebnisse des Usability-Tests – was Ihre Benutzer sagen
- Ein einfaches Problem ...
- Website-Statistiken geben Benutzern eine (weitere) Stimme
- Website-Analysetools
- Webdesign-Werkzeugkasten
-
10. Evolutionäres Design: Websites frisch halten
- Ihr bisheriges Portfolio ...
- Eine frische Website und aktuelle Inhalte lassen Besucher immer zurückkommen
- Webdesign: evolutionär, nicht evolutionär
- Evolutionieren Sie das Design Ihrer Website mit CSS
- Interaktivität mit JavaScript-Lightboxen
- Facebox in der Rote Laterne-Homepage
- Ändern Sie die index-Datei
- Ein Blog mit WordPress
- Ein WordPress-Blog für die Rote Laterne-Website
- Anderes Look and Feel für den Blog durch Themes
- Webdesign-Werkzeugkasten
-
11. Business und Webdesign: Kümmern Sie sich um Ihr Geschäft
- Der neueste potenzielle Kunde: die Foo Bar
- Was die Foo Bar als Angebot möchte
- Ein flottes Mock-up für die Foo Bar
- Drei Monate später ...
- Willkommen in der Welt der DESIGNPIRATERIE
- Rote Laterne hat einen neuen potenziellen Kunden
- Beziffern Sie ein Gesamtangebot
- Schicken Sie Ihren Kunden ein detailliertes Angebotsschreiben
- Der Trilobite-Podcast: (noch) eine Herausforderung
- Lizenzieren Sie Ihre Arbeit mit Creative Commons
- Creative Commons-Lizenzen
- Webdesign-Werkzeugkasten
-
A. Was übrig bleibt: Die Top Ten (der unbehandeltenThemen)
- Nr. 1: Interkulturelles und internationales Design
- Nr. 2: Die Zukunft des Web-Markups
- Nr. 3: Die Zukunft von CSS
- Nr. 4: Für mobile Geräte gestalten
- Nr. 5: Webapplikationen entwickeln
- Nr. 6: Rhythmus im Layout
- Nr. 7: Textkontrast
- Nr. 8: Linknamen und passende Seitentitel
- Nr. 9: Kontrast ist ein fundamentales Layoutwerkzeug
- Nr. 10: Weitere Designtools
- Stichwortverzeichnis
Product information
- Title: Webdesign von Kopf bis Fuss
- Author(s):
- Release date: May 2009
- Publisher(s): O'Reilly Verlag
- ISBN: 97833897219069
You might also like
book
Mobiles Web von Kopf bis Fuß
Ob in der U-Bahn, auf Konferenzen oder im Café – überall wird gesurft, gemailt, getippt, gespielt. …
book
Java™ von Kopf bis Fuß
Java von Kopf bis Fuß ist eine umfassende Erlebnistour durch die Objektorientierte Programmierung und Java. Ganz …
book
JavaScript-Programmierung von Kopf bis Fuß
Etwas Abwechslung gefällig? JavaScript-Programmierung von Kopf bis Fuß ist der fantasievolle Beweis dafür, dass Fachliteratur keineswegs …
book
Responsives Design mit WordPress
Responsives Design ist der Schlüssel zu einem konsistenten und attraktiven Auftritt Ihrer WordPress-Website auf Desktop, Tablet …