Webdesign von Kopf bis Fuss

Table of contents

1. Webdesign von Kopf bis Fuß
2. Die Autoren von Webdesign von Kopf bis Fuß
3. Über den Übersetzer dieses Buchs
4. Wie man dieses Buch benutzt: Einführung
   1. Für wen ist dieses Buch?
      1. Wer sollte lieber die Finger von diesem Buch lassen?
   2. Wir wissen, was Sie gerade denken
   3. Und wir wissen, was Ihr Gehirn gerade denkt
   4. Metakognition: Nachdenken übers Denken
   5. Das haben WIR getan
   6. Und das können SIE tun, um sich Ihr Gehirn untertan zu machen
   7. Lies mich
   8. Die Fachgutachter
   9. Danksagungen
5. 1. Schöne Webseiten bauen: Schönheit liegt immer im Auge des Benutzers
   1. Ihre große Chance mit Rote Laterne Design
   2. Womit anfangen?
   3. Zeichnen Sie zuerst eine Blaupause
   4. Entwickeln Sie eine Top-Level-Navigation
   5. Der richtige Kontext
      1. Horizontale Tabs
      2. Horizontale Buttons
      3. Vertikales Menü
      4. Vertikale Tabs
   6. Zeigen Sie Jana einige Skizzen
   7. Skizzen richten den Fokus auf die Funktionalität
   8. Ruinieren Sie gutes Design nicht durch schlechten Text
   9. Was macht Text übersichtlich?
   10. Beim Webdesign geht es um Kommunikation mit den BENUTZERN
   11. Webdesign-Werkzeugkasten
6. 2. Konzeption: Papier wickelt Stein ein
   1. Ihr erster »internationaler« Auftritt ...
   2. Vor dem Programmieren denken
      1. Beginnen Sie mit einer visuellen Metapher
   3. Eine klare visuelle Metapher unterstreicht das Thema Ihrer Website
   4. Das Thema Ihrer Website
   5. Brainstorming: Der Weg zur visuellen Metapher
   6. Zielsetzung und visuelle Metapher für Mark
   7. Seitenelemente formen die visuelle Metapher
   8. Erstellen Sie ein XHTML-Mock-up für Mark
   9. Und das CSS ...
   10. Entwickeln Sie Ihre Ideen mit Storyboards ohne Code, um Zeit zu sparen
   11. Gestalten Sie nicht für sich selbst!
   12. Wir erstellen ein Storyboard für Mark
       1. Skizzieren Sie Ihr Design
       2. Farbe und letzter Schliff für Ihr Storyboard
   13. Webdesign-Werkzeugkasten
7. 3. Strukturieren Sie Ihre Website: »Biegen Sie bei dem grünen Wasserturm links ab ...«
   1. Passen Sie den Inhalt in Ihr Layout ein
   2. Strukturieren Sie die Informationen
   3. Strukturieren Sie Ihre Website durch Informationsarchitektur (IA)
   4. IA mit Card Sorting
      1. Das brauchen Sie für ein erfolgreiches Card Sorting
   5. Sortieren Sie Ihre Karten in passende Stapel
   6. Geben Sie den Stapeln kurze und aussagekräftige Namen
   7. Welches Card Sorting ist richtig?
   8. Ordnen Sie die Karten in der Hierarchie der Website an
   9. IA-Diagramme sind Card Sortings auf Papier
   10. IA-Diagramme sind NICHT nur Links
       1. Wenn die IA Links darstellen würde ...
   11. Von der Konzeption zu Umsetzung
   12. Die Struktur von Marks Website
   13. Zuerst die index.html ...
   14. ... und dann screen.css für den Stil
   15. Fortsetzung screen.css ...
   16. Von der Konzeption zur Umsetzung
   17. Webdesign-Werkzeugkasten
8. 4. Layout und Design: Die goldene Regel
   1. Beim Design geht es ums Publikum
   2. Ihr neuester Auftritt: RPM Records
   3. Bestimmen Sie RPMs Zielgruppe mit Personas
      1. Daten über die Benutzer von RPM Music
   4. Lassen Sie sich von Ihren Personas leiten ...
   5. Die Auflösung wirkt sich auf Design und Layout aus
   6. Die Bildschirmgröße entscheidet, WIE VIEL von Ihrer Website im Browser angezeigt wird
      1. Auch die Bildschirm-AUFLÖSUNG beeinflusst die Bildschirmgröße
   7. Ein für 1024 x 768 optimiertes XHTML- und CSS-Grundgerüst
   8. Menschen haben es gern klar und strukturiert
   9. Wie breit soll mein Raster sein? Der Goldene Schnitt
   10. Die Drittel-Regel: eine Abkürzung zum Goldenen Schnitt
   11. RPM und der Goldene Schnitt: eine (Anti-)Fallstudie
   12. Erinnern Sie sich an Ihre Personas?
   13. Erinnern Sie sich an Ihren Kunden?
   14. RPM 2.0 mit dem Blueprint-Framework
   15. RPM 2.0 mit Blueprint-CSS-Regeln stylen
   16. Zeit für die RPM-Grooves
   17. Das Layout mit CSS aufpolieren
   18. Machen Sie das Markup für Inhalt und Navigation fertig
   19. Layout und typografische Details mit CSS
9. 5. Mit Farbe gestalten: Jenseits des Monochromen
   1. Unterstützen Sie die hiesige Musikszene
   2. 9Rules: Der Goldstandard der Blog-Netzwerke
   3. Manchmal sind Ihre Möglichkeiten ein bisschen ... begrenzt
   4. Farben haben eine emotionale Wirkung
   5. Der Farbkreis (womit alles beginnt)
   6. Wählen Sie mit dem Farbkreis Farben, die zusammenpassen
   7. Wählen Sie zuerst die GRUNDFARBE
   8. Gute Farbmuster mit dem triadischen Schema
   9. Fangen Sie mit dem SampleRate-Markup an
   10. Erstellen Sie das grundlegende Seitenlayout mit CSS
   11. Das Gegenteil von dunkel ist ... hell
   12. Erstellen Sie sattere Farbpaletten mit einem tetradischen Farbschema
       1. Kontrast
       2. Hervorheb-O-Matik
   13. Aktualisieren Sie das SampleRate-CSS
   14. Webdesign-Werkzeugkasten
10. 6. Smarte Navigation: »Klicken Sie in 2 Sekunden auf Home.«
    1. Zurück auf die Schulbank
    2. Eine gute Navigation fängt mit einer guten IA an
    3. Was hat es mit einem Namen überhaupt auf sich?
    4. Variante 1: Horizontale Tab-Navigation
    5. Variante 2: Vertikale Navigation
    6. Blockelemente sind Ihre Freunde
    7. Die Blocknavigation der CNM-Website floaten
    8. Symbole SAGEN nichts aus ... sie sind nur hübsch
    9. Fügen Sie Symbole zu Ihrem Text hinzu, nicht umgekehrt
    10. Aktualisieren Sie das CNM-XHTML mit Textlinks
    11. Jetzt können wir unsere neuen Elemente stylen ...
    12. Die primäre Navigation sollte sich nicht ändern ... ... die sekundäre aber SCHON
    13. Sekundäre Navigation für alle untergeordneten Seiten
    14. Die Navigation mit CSS stylen
    15. Webdesign-Werkzeugkasten
11. 7. Schreiben für das Web: Los, überfliegen Sie!
    1. Machen Sie eine bessere Onlinezeitung
    2. Hipster-Kurier online: Projektspezifikation
    3. Das Problem ist der TEXT
    4. Inhalte mit der umgekehrten Pyramide optimieren
    5. Kürzen Sie Ihren Text
    6. Listen in XHTML
       1. Ungeordnete Liste
       2. Geordnete Liste
    7. Überschriften machen Texte noch scannbarer
    8. Heben Sie Überschriften und Texte mit verschiedenen Schriften hervor
    9. Die Ebene einer Überschrift zeigt ihre Wichtigkeit, nicht die Größe
    10. Webdesign-Werkzeugkasten
12. 8. Barrierefreiheit: Barrieren stören
    1. Audio2Go: Barrierefreiheit mit Hindernissen
    2. Barrierefreiheit heißt Benutzerfreundlichkeit für ALLE
    3. Wie LIEST sich Ihre Website?
    4. Der Zweck einer Website sollte JEDEM klar sein
    5. Mal ehrlich: Computer sind dumm!
    6. Ein Computer liest den ALT-Text des Bilds
    7. Aus ALT mach LONGDESC
    8. Ihre Verbesserungen werden nur von manchen Audio2Go-Kunden begrüßt
    9. Barrierefreiheit bedeutet mehr als nur Screenreader
    10. Die Tab-Navigation sollte GEORDNET sein
    11. Audio2Go ist jetzt VIEL zugänglicher
    12. WCAG 2.0
    13. Farben sollten nicht Ihr EINZIGES Kommunikationsmittel sein
    14. Die Welt durch websichere Augen ...
    15. Audio2Go durch farbenblinde Augen
    16. Diese Sterne sind ein echtes Problem
    17. Hintergrundbilder sind immer noch Ihre Freunde
    18. tabindex allein genügt nicht
13. 9. Hören Sie auf Ihre Benutzer: Der Weg zu harmonischem Design
    1. Probleme bei RPM
    2. Lassen Sie Ihr Publikum mit Fokusgruppen und Umfragen zu Wort kommen
    3. Weder Umfragen noch Fokusgruppen sind gratis
    4. Stellen Sie die richtigen Fragen in Ihren Umfragen
    5. Die endgültige RPM Music-Benutzerumfrage
    6. Die Ergebnisse sind da!
    7. Antworten auf die offene Frage
    8. Lösen Sie den RPM-CSS-Bug durch Verschieben der hover-Eigenschaft
       1. IE6 unterstützt :hover nur für Link- und Anker-Tags
    9. Budget-Bausteine für Usability-Tests
    10. Strukturieren Sie den Test mit einem Moderatorskript
    11. Freunde und Familie können problematisch sein
    12. Die Ergebnisse des Usability-Tests – was Ihre Benutzer sagen
    13. Ein einfaches Problem ...
    14. Website-Statistiken geben Benutzern eine (weitere) Stimme
    15. Website-Analysetools
        1. Mint
        2. Google Analytics
    16. Webdesign-Werkzeugkasten
14. 10. Evolutionäres Design: Websites frisch halten
    1. Ihr bisheriges Portfolio ...
    2. Eine frische Website und aktuelle Inhalte lassen Besucher immer zurückkommen
       1. Rote Laterne, die zweite
          1. To-do-Liste Rote Laterne ...
    3. Webdesign: evolutionär, nicht evolutionär
    4. Evolutionieren Sie das Design Ihrer Website mit CSS
    5. Interaktivität mit JavaScript-Lightboxen
    6. Facebox in der Rote Laterne-Homepage
    7. Ändern Sie die index-Datei
    8. Ein Blog mit WordPress
    9. Ein WordPress-Blog für die Rote Laterne-Website
    10. Anderes Look and Feel für den Blog durch Themes
    11. Webdesign-Werkzeugkasten
15. 11. Business und Webdesign: Kümmern Sie sich um Ihr Geschäft
    1. Der neueste potenzielle Kunde: die Foo Bar
    2. Was die Foo Bar als Angebot möchte
    3. Ein flottes Mock-up für die Foo Bar
    4. Drei Monate später ...
    5. Willkommen in der Welt der DESIGNPIRATERIE
    6. Rote Laterne hat einen neuen potenziellen Kunden
       1. Kundenanforderungen
    7. Beziffern Sie ein Gesamtangebot
    8. Schicken Sie Ihren Kunden ein detailliertes Angebotsschreiben
    9. Der Trilobite-Podcast: (noch) eine Herausforderung
    10. Lizenzieren Sie Ihre Arbeit mit Creative Commons
    11. Creative Commons-Lizenzen
    12. Webdesign-Werkzeugkasten
16. A. Was übrig bleibt: Die Top Ten (der unbehandeltenThemen)
    1. Nr. 1: Interkulturelles und internationales Design
       1. Symbole haben in jeder Kultur eine andere Bedeutung
       2. Andere Sprachen, andere Länge
       3. Monat oder Jahr?
       4. Möchten Sie wirklich diese Flagge verwenden?
    2. Nr. 2: Die Zukunft des Web-Markups
       1. HTML 5 kontra XHTML 2
       2. Wann ist es so weit?
    3. Nr. 3: Die Zukunft von CSS
    4. Nr. 4: Für mobile Geräte gestalten
    5. Nr. 5: Webapplikationen entwickeln
    6. Nr. 6: Rhythmus im Layout
    7. Nr. 7: Textkontrast
    8. Nr. 8: Linknamen und passende Seitentitel
    9. Nr. 9: Kontrast ist ein fundamentales Layoutwerkzeug
    10. Nr. 10: Weitere Designtools
17. Stichwortverzeichnis