Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken.

Ähnliche Präsentationen


Präsentation zum Thema: "Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken."—  Präsentation transkript:

1 Entwicklung einer Web-Site

2 Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken

3 Was ist eine Web-Site? Publikation im Internet 1Publikation im Internet Site = Standort Webpräsenz eines Anbieters umfasst alle zusammengehörenden Webseiten, Dokumente und Download- Bereiche 1

4 Was ist Web-Design? Gestaltung von Webseiten 1Gestaltung von Webseiten Oberflächendarstellung & Navigationsstruktur Zielgruppenvorgabe = Web-Publishing 1

5 Was ist gutes Web-Design? Quelle:

6 Arbeitsschritte Zweck, Zielgruppe, Inhalt definieren Informationsarchitektur entwerfen Layout und Typografie der Site entwerfen Anfertigung der einzelnen Seiten Test und Veröffentlichung Wartung und Pflege

7 Interface-Design Interaktion mit Information Navigation mittels Hyperlinks Zusammenhänge zwischen den Seiten schwerer erkennbar Merkmale eines Buches im Laufe von Jahrhunderten herausgebildet ähnlicher Prozess besteht Web-Dokumenten bevor

8 Interface-Design Wer Was Wann Wo hat die Seiten erstellt? soll mitgeteilt werden? wurde das Dokument erstellt? befindet sich der geographische Ursprung des Dokuments? Grundregeln des Journalismus

9 Interface-Design Einheitliches Erscheinungsbild Symbole, Logos, Schaltflächen, Menüs Links zur Homepage, vorangegangenen, nächsten Seite, zum Webmaster Effiziente Informationsarchitektur nicht zu sehr in die Tiefe gehende Menüs mit vier bis sieben Informationseinheiten

10 Ausgewogene Menüstruktur Quelle:

11 Site-Design: Strukturierung Inhalt in logische Einheiten aufteilen Einheiten hierarchisch nach Wichtigkeit ordnen Beziehungen der Einheiten untereinander herstellen Inhaltsverzeichnis herstellen

12 Site-Design: Grundstrukturen Quelle: info.med.yale.edu/caim/manual/sites/site_structure.html

13 Site-Design: Regeln keine zu langen Textpassagen keine großen Grafiken Informationen nicht zu stark unterteilen wenig scrollen nicht für bestimmten Browser richtig schreiben

14 Site-Design: Elemente Homepage Menüs Inhaltsverzeichnis (Sitemap) Kontaktangebote (Feedback, FAQ) Neuigkeiten Suchfunktionen

15 Site-Design: Homepage Eingang zur gesamten Site Design kann Sonderstellung einnehmen Ideal für neueste Informationen Köder für gewisse Zielgruppen Menü oder Inhaltsübersicht

16 Site-Design: Beispiel Quelle:

17 Site-Design: Beispiel Quelle:

18 Site-Design: Homepage Aussagekräftige Überschrift Menü-Leiste Attraktive Grafik -Link zum Webmaster Anschriften / Telefonnummern Erstellungsdatum

19 Page-Design: gelungen? Gleichgewicht zwischen optischer Wahrnehmung und grafischer Information Ohne Farben, Formen, Kontraste wirken Webseiten langweilig Textlastige Dokumente schwer zu lesen Grafiklastige verwirren

20 Page-Design: Hierarchien Quelle: info.med.yale.edu/caim/manual/pages/graphic_design100.html

21 Page-Design: Seitenformate Bestimmt durch Mindestgröße der gebräuchlichen Monitore 595 × 295 Pixel für Bildschirm Papierformate zum Ausdrucken 535 × 295 Pixel für Printlayout siehe

22 Page-Design: Kopf und Fuß Aussagekräftiger Titel Kleine Grafiken Schaltflächen zum Navigieren Urheber und Datum Interner Link zum Seitenkopf

23 Page-Design: Tabellen Zur Sicherstellung, dass das entworfene Design auf verschiedenen Monitoren gleich erscheint Text untergliedern (z. B. in Übersichts- und Textspalte) Zeilenlänge günstig beeinflussen Ränder zwischen Texten und Bildern

24 Page-Design: Tabellen

25

26 Typografische Besonderheiten Besonderes Merkmal: Variabilität (Monitor, Browser, Schriftarten) Gängige Schriftarten (Times, Arial) Gängige Schriftgrößen (h1, h2, h3) Keine aufwändigen Grafiken Mit Tabellen arbeiten

27 Typografische Besonderheiten Linksbündig ausrichten 50 bis 70 Zeichen pro Zeile Sorgfältig und sparsam hervorheben Unterstreichung nur für Hyperlinks Verzicht auf Sonderzeichen Nur wenige Links auf externe Dateien

28 Test, Wartung und Pflege Test mit verschiedenen Browsern Archivierung aller Materialien Veröffentlichung der URL Hinweise zur Verbesserung umsetzen Links turnusmäßig überprüfen

29 Dateiverwaltung Hierarchisch (homepage = index.html) Grafiken in separatem Ordner Passende Erweiterung (html, jpg, pdf, …) Keine Leerzeichen, Umlaute und Sonderzeichen in Namen Unterscheidung von Groß- und Kleinschreibung

30 Allgemeines zu Web-Grafiken PC-Monitore arbeiten mit dem additiven Farbmodell Rot-Grün-Blau (RGB) Unterteilung des Bildschirms in Pixel (picture elements) mit x- und y-Koordinaten (0, 0) x y (640, 0) (0, 480)

31 Allgemeines zu Web-Grafiken Jedem Pixel ist Speicherplatz für Farbe (Farbtiefe) zugeordnet Farbtiefe = 1 Byte = 8 Bit Speicherung von 2 8 = 256 Farben True-Color-Monitore: Farbtiefe = 3 Byte Speicherung von 2 24 = Farb. Farben werden in einem Datenfeld (Farbpalette) abgespeichert

32 Allgemeines zu Web-Grafiken Netscape entwickelte browser-unabhängige 8-Bit-Farbpalette Vierzig Farben für Benutzeroberfläche 216 Farben für alle anderen Elemente Liegen Farben außerhalb dieser Palette, werden sie gedithert (auf 216 Farben reduziert)

33 Dateiformate für Web-Grafiken GIF Graphic Interchange Format JPEG Joint Photographic Experts Group PNG Portable Network Graphics

34 GIF-Dateien 8-Bit-Farbpalette Eine Farbe transparent möglich (Hintergrund) Animierte Grafiken möglich Geeignet für Diagramme, Illustrationen Kleine Navigationsgrafiken

35 JPEG-Dateien 24-Bit-Farbpalette fotorealistisch Geeignet für Bilder mit fließenden Übergängen Keine Transparenz möglich Schichtenweiser Grafikaufbau möglich (Interlacing) Punktdichte dpi einstellbar (70 – 100 ausreichend)

36 PNG-Dateien 24-Bit-Farbpalette Speziell für Webseiten entwickelt Transparenz möglich Schnelles Interlacing

37 Literatur Baumgardt, Michael: Web Design kreativ! Berlin Heidelberg u. a. (Springer-Verlag) Junker Kjær, Olav: Web Design. (KnowWare) Lynch, Patrick; Horton, Sarah: Erfolgreiches Web-Design. München (Humboldt Taschenbuchverlag Jakobi KG) Weingärtner, Monika: Publizieren im WWW. Hannover (RRNZ) 2001


Herunterladen ppt "Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken."

Ähnliche Präsentationen


Google-Anzeigen