Webdesign für Dummies®

Webdesign für Dummies®

by Lisa Lopuck
Released March 2007
Publisher(s): für Dummies
ISBN: 9783527703296

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Schöne Websites leben nicht alleine von vielen bunten Bildern und zeitgemäßer Programmierung. Eine gute und vor allem professionelle Website zeichnet sich dadurch aus, dass dahinter ein durchdachtes Konzept steht, dass sich die Site gut navigieren lässt und dass sich die angesprochene Zielgruppe gerne auf der Website aufhält. Wie man das erreicht, zeigt Lisa Lopuck in "Webdesign für Dummies". Sie erklärt, wie man den Webauftritt zielgruppenorientiert konzipiert und plant, wie man das passende Design für die angesprochene Zielgruppe entwickelt und worauf man achten muss, damit sich die fertige Website auch schnell aufbaut. Außerdem gibt sie eine kleine Einführung in die Websiteprogrammierung, die Gestaltung sowie den Einsatz von Typografie und Farben. Das Buch ist durchgängig farbig und enthält viele Beispiele und Anregungen.

Table of contents

  1. Copyright
  2. Über die Autorin
  3. Über den übersetzer
  4. Danksagungen
  5. Einleitung
    1. Über dieses Buch
    2. Konventionen in diesem Buch
    3. Törichte Annahmen über den Leser
    4. Was Sie nicht lesen müssen
    5. Wie dieses Buch aufgebaut ist
      1. Teil I: Webdesign – auf die Plätze, fertig, los!
      2. Teil II: Benutzerfreundliches Design
      3. Teil III: Webgrafiken gestalten
      4. Teil IV: Die endgültige Website produzieren
      5. Teil V: Der Top-Ten-Teil
    6. Symbole, die in diesem Buch verwendet werden
    7. Eine kleine Anmerkung
  6. I. Webdesign – auf die Plätze, fertig, los!
    1. 1. Sie wollen also Webdesigner werden
      1. 1.1. Die Beteiligten
        1. 1.1.1. Marketingleute
        2. 1.1.2. Projektmanager
        3. 1.1.3. Grafikdesigner
        4. 1.1.4. Informationsarchitekten
        5. 1.1.5. Inhaltsdesigner (Autoren)
        6. 1.1.6. Medienspezialisten
        7. 1.1.7. HTML-Schleuderer
        8. 1.1.8. Programmierer
      2. 1.2. Mit dem Webdesign beginnen
      3. 1.3. Erfahrung sammeln
    2. 2. Vom Konzept zur Ausführung
      1. 2.1. Phase 1: Definition
        1. 2.1.1. Die Ziele einer Site verstehen
        2. 2.1.2. Allgemeine Anforderungen an die Site sammeln
        3. 2.1.3. Einen Projektplan erstellen
      2. 2.2. Phase 2: Design
        1. 2.2.1. Die Vorlage für die Site anlegen
        2. 2.2.2. Einen Plan für jede Seite entwerfen
        3. 2.2.3. Benutzertests einarbeiten
        4. 2.2.4. Einen Inhaltsplan zusammenstellen
        5. 2.2.5. Look-and-feel erzeugen
        6. 2.2.6. Vorschläge von einer Zielgruppe bekommen
      3. 2.3. Phase 3: Entwicklung
        1. 2.3.1. Endgültige Webgrafiken produzieren
        2. 2.3.2. Inhalte entwickeln
        3. 2.3.3. Multimedia-Elemente entwickeln
        4. 2.3.4. Alles mit HTML zusammenhalten
        5. 2.3.5. Bis Ihnen der Kopf schwirrt: Datenbanken, Programmierung und andere Dinge
      4. 2.4. Phase 4: Tests und Inbetriebnahme
        1. 2.4.1. Qualitätssicherung
        2. 2.4.2. Die Seite veröffentlichen
      5. 2.5. Phase 5: Wartung und Pflege
  7. II. Benutzerfreundliches Design
    1. 3. Die richtige Site für die richtigen Leute gestalten
      1. 3.1. Wer ist Ihr Publikum ?
        1. 3.1.1. Fragen an den Kunden – eine Checkliste
        2. 3.1.2. Rollen
        3. 3.1.3. Szenarien
      2. 3.2. Einen Siteentwurf anfertigen
        1. 3.2.1. Eine Liste mit gewünschten Inhalten und allem Drum und Dran erstellen
        2. 3.2.2. Die Informationen aufteilen und nach Wichtigkeit anordnen
        3. 3.2.3. Der Fünf-bis-sieben-Regel folgen
      3. 3.3. Eine Sitemap gestalten
        1. 3.3.1. Zwischen den Zeilen (und Kästen) lesen
        2. 3.3.2. Ihre eigene Sammlung von Symbolen aufbauen
        3. 3.3.3. Alle singen nach derselben Partitur
        4. 3.3.4. Das offizielle Seitenverzeichnis und Konventionen bei der Benennung
      4. 3.4. Eine Sitemap für ein Redesign erstellen
        1. 3.4.1. Eine Website auseinandernehmen
        2. 3.4.2. Die Sitemap fertigstellen
      5. 3.5. Einen Marketingplan entwickeln
        1. 3.5.1. Offline-Marketing
        2. 3.5.2. Online-Marketing
    2. 4. Webinhalte organisieren und Navigation konzipieren
      1. 4.1. Planung auf Einzelseitenebene
        1. 4.1.1. Inhaltsabschnitte planen
        2. 4.1.2. Wireframes erstellen
      2. 4.2. Inhalte auf der Seite präsentieren
        1. 4.2.1. Text in einem Wireframe angeben
        2. 4.2.2. Mit einem Content-Management-System arbeiten
        3. 4.2.3. Den Platz bestmöglich ausnutzen
        4. 4.2.4. Flash in Wireframes angeben
      3. 4.3. Sich stilvoll umherbewegen
        1. 4.3.1. Für den Jetset: Globale Navigation
        2. 4.3.2. Navigation durch einzelne Abschnitte
      4. 4.4. Für Naturliebhaber: Einen Pfad aus Brotkrumen hinterlassen
      5. 4.5. Wenn Jetset und Naturliebhaber aufeinandertreffen
        1. 4.5.1. Bei Metaphern Zurückhaltung üben
    3. 5. Benutzeroberflächen für das Web entwerfen
      1. 5.1. Interaktionsdesign
        1. 5.1.1. Benutzerflussdiagramme erstellen
        2. 5.1.2. Mit dem Strom schwimmen
      2. 5.2. Die Rolle des Grafikdesigns bei der Benutzerfreundlichkeit
        1. 5.2.1. Roll-Over-Feedback vermitteln
        2. 5.2.2. Schaltflächen erstellen, die anklickbar aussehen
        3. 5.2.3. Elemente gruppieren und verschachteln
        4. 5.2.4. »Sie befinden sich hier«
        5. 5.2.5. Farbkodierung
        6. 5.2.6. Icons vernünftig verwenden
        7. 5.2.7. Zwischen anklickbaren und nicht anklickbaren Elementen unterscheiden
      3. 5.3. Einheitlichkeit ist das A und O
      4. 5.4. Alternative interaktive Designstrategien
      5. 5.5. Den Platz optimal nutzen
    4. 6. Benutzertests Schutzkleidung nicht erforderlich!
      1. 6.1. Testbare Prototypen entwickeln
        1. 6.1.1. Anklickbare Wireframes gestalten
        2. 6.1.2. Ihr grafisches Design testen
        3. 6.1.3. Eine Click-through-Version zum Testen der Benutzerfreundlichkeit erstellen
      2. 6.2. Vorbereitungen für den Benutzertest
        1. 6.2.1. Aufgabenlisten für die Probanden anfertigen
        2. 6.2.2. Eine Testmethode entwickeln
      3. 6.3. Benutzertests durchführen
        1. 6.3.1. Versuchskaninchen finden
        2. 6.3.2. Den Test durchführen
      4. 6.4. »Houston, wir haben ein Problem«: Die Auswertung der Ergebnisse
  8. III. Webgrafiken gestalten
    1. 7. Grafikdesign für das Web
      1. 7.1. Die grafische Oberfläche gestalten
        1. 7.1.1. Eine Strategie für das Seitenlayout entwickeln
        2. 7.1.2. Comps erstellen
        3. 7.1.3. Farben, Schriften und Grafiken miteinander verbinden
        4. 7.1.4. Farben wählen, die zum Thema passen
        5. 7.1.5. Eine bestimmte Farbpalette verwenden
        6. 7.1.6. Farben verwenden, die gut zusammenpassen
        7. 7.1.7. Schriften zum Erzeugen von Stimmung verwenden
        8. 7.1.8. Grafische Elemente wirkungsvoll einsetzen
        9. 7.1.9. Das gute alte Rastersystem verwenden
      2. 7.2. Optische Prioritäten festlegen
        1. 7.2.1. Die »groß, mittel, klein«-Strategie
        2. 7.2.2. Die Seite in bearbeitbare Häppchen unterteilen
        3. 7.2.3. Um den »Falz« herum gestalten
      3. 7.3. Platz zum Atmen hinzufügen
      4. 7.4. Einheitlichkeit beachten
      5. 7.5. Designrichtlinien festlegen
        1. 7.5.1. Grafische Vorlagen
        2. 7.5.2. Stilrichtlinien für Schrift
    2. 8. Perfektes Schriftdesign
      1. 8.1. Text, den Sie tatsächlich lesen können
        1. 8.1.1. Passende und nicht so passende Schriftarten für das Web
        2. 8.1.2. Standard- und ausgefallene Schriftarten
        3. 8.1.3. Durch dick und dünn
        4. 8.1.4. Serifen- und serifenlose Schriftarten
        5. 8.1.5. Nicht zu groß, nicht zu klein
        6. 8.1.6. Text auf Hintergrundkacheln
        7. 8.1.7. Grafischer Text und HTML-Text
        8. 8.1.8. Eine Prise grafischer Text, eine große Portion HTML-Text
        9. 8.1.9. Grafische Überschriften
      2. 8.2. Textanzeige steuern
        1. 8.2.1. Vorgaben für die Schriftart
      3. 8.3. CSS-Fontkontrolle
        1. 8.3.1. Externe Stylesheets
        2. 8.3.2. Interne Stylesheets
    3. 9. Farbe im Web
      1. 9.1. Die geheime Welt von RGB
        1. 9.1.1. Subtraktive und additive Farben
        2. 9.1.2. Unmengen von Farben
        3. 9.1.3. Farbtiefe (Bit-Tiefe)
      2. 9.2. Die web-sichere Farbpalette
        1. 9.2.1. Die Bit-Tiefe eines Bildes reduzieren
        2. 9.2.2. Farbpaletten
        3. 9.2.3. Adaptive Paletten
        4. 9.2.4. Web-sichere Palette
        5. 9.2.5. Web-adaptive Paletten
        6. 9.2.6. Probieren Sie's einfach
        7. 9.2.7. Den hexadezimalen Farbcode entziffern
      3. 9.3. Geschickte Farbnutzung im Web
        1. 9.3.1. Einfarbige Grafiken verwenden
        2. 9.3.2. So wenige Farben wie möglich verwenden
        3. 9.3.3. Achtung beim Farbverlauf
        4. 9.3.4. Ein Bild, das eine Mischung aus Fotos und einfachen Farben enthält, als GIF speichern
    4. 10. Webgrafiken von Grund auf erstellen
      1. 10.1. Bitmaps und Vektorgrafiken
        1. 10.1.1. Bitmaps Stoff aus Pixeln
        2. 10.1.2. Vektoren: Für die an Mathematik Interessierten
        3. 10.1.3. Der Vektor-Bitmap-Kampf
        4. 10.1.4. Bildschirmauflösung
        5. 10.1.5. Bildauflösung
      2. 10.2. Die üblichen Software-Verdächtigen
        1. 10.2.1. Adobe Photoshop
        2. 10.2.2. GIMP (GNU Image Manipulation Program)
        3. 10.2.3. Macromedia Fireworks (Macromedia Studio)
        4. 10.2.4. Paint Shop Pro
        5. 10.2.5. Adobe Illustrator und Macromedia Freehand
        6. 10.2.6. Macromedia Flash
      3. 10.3. Pixelschieben, die Erste Ein: Banner erstellen
      4. 10.4. Bildbearbeitung
      5. 10.5. Direkt aus der Digitalkamera
      6. 10.6. Bilder scannen
      7. 10.7. Archivfotografien und -illustrationen verwenden
      8. 10.8. Das Tüpfelchen auf dem i: Digitale Bildbearbeitung
    5. 11. Ihr Designmeisterwerk erstellen
      1. 11.1. Designvarianten entwickeln
        1. 11.1.1. Ideen für das Design finden
        2. 11.1.2. Die altehrwürdige Marke einbinden
        3. 11.1.3. Die Startseite und die Unterseite gestalten
      2. 11.2. Eine Onlinepräsentation zusammenstellen
        1. 11.2.1. Ihre Designs online vorstellen
        2. 11.2.2. Funktionsfähige und nicht funktionsfähige Prototypen entwickeln
      3. 11.3. Knackige gedruckte Präsentationen erstellen
        1. 11.3.1. Live und in Farbe: Ihre Modelle ausdrucken
        2. 11.3.2. Ihr Werk auf Karton aufziehen
      4. 11.4. Dem Kunden das Ergebnis präsentieren
        1. 11.4.1. Kunden verlieben sich immer in das hässliche Entlein
        2. 11.4.2. Und noch mal das Ganze: Runde zwei
    6. 12. Pixel perfekt aufpolieren: Grafikproduktion
      1. 12.1. Grafikproduktion
        1. 12.1.1. Designvorlagen
        2. 12.1.2. Stilrichtlinien
        3. 12.1.3. Versionskontrolle
      2. 12.2. Spaß mit Dateiformaten
        1. 12.2.1. Wann GIF geeignet ist
        2. 12.2.2. Wann man JPEGs benutzt
      3. 12.3. Rankes und schlankes Seitendesign
        1. 12.3.1. Ladezeiten verkürzen
        2. 12.3.2. Webgrafiken in Scheiben und Würfel schneiden
      4. 12.4. Hintergründe für Grafiken
        1. 12.4.1. Grafiken mit und ohne Kantenglättung
        2. 12.4.2. Grafiken mit Schlagschatten vorbereiten
        3. 12.4.3. An Hintergrundkachel anpassen
        4. 12.4.4. Alphakanäle verwenden
  9. IV. Die endgültige Website produzieren
    1. 13. Ein Blick über die HTML-Landschaft
      1. 13.1. HTML: Der Kleber, der eine Seite zusammenhält
        1. 13.1.1. Einen kurzen Blick in den HTML-Quellcode werfen
        2. 13.1.2. Von anderen lernen (und borgen)
      2. 13.2. Frames, Tabellen und <div>-Tags verwenden
        1. 13.2.1. Frames
        2. 13.2.2. iFrames
        3. 13.2.3. Tabellen
        4. 13.2.4. CSS-<div>-Tags verwenden
      3. 13.3. HTML die Designarbeit erledigen lassen
        1. 13.3.1. Einfärben mit Tabellen
        2. 13.3.2. Gestalten mit Hintergrundfarben und -kacheln
      4. 13.4. Ihre Seiten interaktiv machen
        1. 13.4.1. Normale Links
        2. 13.4.2. Imagemaps
        3. 13.4.3. Ankerlinks
        4. 13.4.4. E-Mail-Links
      5. 13.5. Programmieren, das Sie stolz macht
        1. 13.5.1. HTML-Bearbeitung mit Profiwerkzeugen
        2. 13.5.2. Einen Texteditor verwenden: HTML auf der Kommandozeile
    2. 14. Seitenlayout steuern
      1. 14.1. Flexible und feste Tabellen
      2. 14.2. Genaues Positionieren mit CSS-Ebenen
      3. 14.3. Designelemente mit CSS formatieren und anordnen
        1. 14.3.1. Seitenrandeinstellungen
        2. 14.3.2. Hintergrundbilder und -kacheln
        3. 14.3.3. Hintergrundfarben festlegen
        4. 14.3.4. Texte gestalten
        5. 14.3.5. Zeichen- und Zeilenabstände
      4. 14.4. Mehr Platz zwischen Elementen einfügen
        1. 14.4.1. Tabellenzellen mit Rändern
        2. 14.4.2. Platz um Grafiken hinzufügen
        3. 14.4.3. Mit CSS einen Rand festlegen
      5. 14.5. HTML-Designvorlagen erstellen
    3. 15. Doping für Ihre Website
      1. 15.1. Der Energydrink für Ihre HTML-Seiten
        1. 15.1.1. JavaScript
        2. 15.1.2. Eingebettete Medien
        3. 15.1.3. Streaming-Media
      2. 15.2. Dynamische, datenbankbasierte Websites bauen
        1. 15.2.1. Client- und server-seitige Programmiersprachen
        2. 15.2.2. Server Side Includes
        3. 15.2.3. Content-Management-Systeme
        4. 15.2.4. Personalisierte Websites mit Cookies
        5. 15.2.5. Onlineshops
  10. V. Der Top-Ten-Teil
    1. 16. Zehn Tipps zu Ihrer eigenen Webdesign Agentur
      1. 16.1. Ihre Arbeit präsentieren
        1. 16.1.1. Ihr Portfolio zusammenstellen
        2. 16.1.2. Präsentation
      2. 16.2. Ein Angebot entwickeln
      3. 16.3. Die Ausschreibung gewinnen
      4. 16.4. Wissen, was Sie als Freiberufler berechnen können
      5. 16.5. Wie Agenturen abrechnen
      6. 16.6. Mit den Erwartungen des Kunden umgehen
      7. 16.7. Die Verantwortlichkeiten für den Kunden festlegen
      8. 16.8. Wichtige Meilensteine vom Kunden »absegnen« lassen
      9. 16.9. Den Arbeitsablauf des Webprojekts verwalten
      10. 16.10. Zulieferer anheuern und einsetzen
    2. 17. Zehn Tipps zu Informations – und Interaktiondesign
      1. 17.1. Verwenden Sie nur fünf bis sieben Hauptkategorien
      2. 17.2. Entwickeln Sie Wireframes für jedes einzelne Seitenlayout
      3. 17.3. Beschriften Sie immer Ihre Buttons und Icons
      4. 17.4. Behalten Sie immer die Downloadzeit im Hinterkopf
      5. 17.5. Bauen Sie ein »Sie befinden sich hier« ein
      6. 17.6. Erleichtern Sie das Nachhausekommen
      7. 17.7. Trennen Sie die anklickbaren und die nicht anklickbaren Dinge grafisch
      8. 17.8. »Einer dieser Buttons ist nicht wie die anderen«
      9. 17.9. Übertreiben Sie es nicht mit Metaphern
      10. 17.10. Setzen Sie Farbkodierung sparsam ein
    3. 18. Zehn Dinge, die schiefgehen können
      1. 18.1. »Können wir noch eine winzige Sache hinzufügen ?«
      2. 18.2. »Wir haben keine Zeit für eine Sitemap«
      3. 18.3. »Was, der Kunde will DAS Design ?«
      4. 18.4. »Wer braucht schon Benutzertests, wenn Sie doch mich haben ?«
      5. 18.5. »Aber ich bin sicher, dass ich das zum Laufen kriege!«
      6. 18.6. »Wir planen internationales Publikum mit ein ?«
      7. 18.7. »Das Design muss unter Windows funktionieren ?«
      8. 18.8. »Ähm ... das muss auch auf 'nem Mac laufen ?«
      9. 18.9. »Wir werden das ganze Ding mit einer Datenbank ansteuern«
      10. 18.10. »Wenn du es baust, wird er kommen!«

Product information

  • Title: Webdesign für Dummies®
  • Author(s): Lisa Lopuck
  • Release date: March 2007
  • Publisher(s): für Dummies
  • ISBN: 9783527703296