entwicklung einer web-site. inhalt arbeitsschritte web-design interface-design site-design...
TRANSCRIPT
![Page 1: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/1.jpg)
Entwicklung einer
Web-Site
![Page 2: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/2.jpg)
Inhalt• Arbeitsschritte
• Web-Design• Interface-Design• Site-Design• Page-Design
• Typografische Besonderheiten
• Web-Grafiken
![Page 3: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/3.jpg)
Was ist eine Web-Site?• Publikation im Internet 1
• Site = Standort
• Webpräsenz eines Anbieters
• umfasst alle zusammengehörenden Webseiten, Dokumente und Download-Bereiche
1 http://www.networds.de/n2.html
![Page 4: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/4.jpg)
Was ist Web-Design?• Gestaltung von Webseiten 1
• Oberflächendarstellung &Navigationsstruktur
• Zielgruppenvorgabe
• = Web-Publishing
1 http://www.networds.de/n2.html
![Page 5: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/5.jpg)
Was ist gutes Web-Design?
Quelle: http://www.w3c.com
![Page 6: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/6.jpg)
Arbeitsschritte• Zweck, Zielgruppe, Inhalt definieren
• Informationsarchitektur entwerfen
• Layout und Typografie der Site entwerfen
• Anfertigung der einzelnen Seiten
• Test und Veröffentlichung
• Wartung und Pflege
![Page 7: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/7.jpg)
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
![Page 8: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/8.jpg)
Interface-Design
• Wer• Was• Wann• Wo
hat die Seiten erstellt?soll mitgeteilt werden?wurde das Dokument erstellt?befindet sich der geographischeUrsprung des Dokuments?
Grundregeln des Journalismus
![Page 9: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/9.jpg)
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
![Page 10: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/10.jpg)
Ausgewogene Menüstruktur
Quelle: http://info.med.yale.edu/caim/manual/sites/site_design.html
![Page 11: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/11.jpg)
Site-Design: Strukturierung• Inhalt in logische Einheiten aufteilen
• Einheiten hierarchisch nach Wichtigkeit ordnen
• Beziehungen der Einheiten untereinander herstellen
• Inhaltsverzeichnis herstellen
![Page 12: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/12.jpg)
Site-Design: Grundstrukturen
Quelle: info.med.yale.edu/caim/manual/sites/site_structure.html
![Page 13: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/13.jpg)
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
![Page 14: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/14.jpg)
Site-Design: Elemente• Homepage
• Menüs
• Inhaltsverzeichnis (Sitemap)
• Kontaktangebote (Feedback, FAQ)
• Neuigkeiten
• Suchfunktionen
![Page 15: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/15.jpg)
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
![Page 16: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/16.jpg)
Site-Design: Beispiel
Quelle: http://www.moma.org/
![Page 18: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/18.jpg)
Site-Design: Homepage• Aussagekräftige Überschrift
• Menü-Leiste
• Attraktive Grafik
• E-Mail-Link zum Webmaster
• Anschriften / Telefonnummern
• Erstellungsdatum
![Page 19: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/19.jpg)
Page-Design: gelungen?• Gleichgewicht zwischen optischer
Wahrnehmung und grafischer Information
• Ohne Farben, Formen, Kontraste wirken Webseiten langweilig
• Textlastige Dokumente schwer zu lesen
• Grafiklastige verwirren
![Page 20: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/20.jpg)
Page-Design: Hierarchien
Quelle: http://info.med.yale.edu/caim/manual/pages/graphic_design100.html
![Page 21: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/21.jpg)
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 http://webwelt.horus.at/medium/screens/home.html
![Page 22: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/22.jpg)
Page-Design: Kopf und Fuß• Aussagekräftiger Titel
• Kleine Grafiken
• Schaltflächen zum Navigieren
• Urheber und Datum
• Interner Link zum Seitenkopf
![Page 23: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/23.jpg)
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
![Page 24: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/24.jpg)
Page-Design: Tabellen
![Page 25: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/25.jpg)
Page-Design: Tabellen
![Page 26: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/26.jpg)
Typografische BesonderheitenBesonderes Merkmal: Variabilität
(Monitor, Browser, Schriftarten)
Gängige Schriftarten (Times, Arial)Gängige Schriftgrößen (h1, h2, h3)Keine aufwändigen GrafikenMit Tabellen arbeiten
![Page 27: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/27.jpg)
Typografische BesonderheitenLinksbündig ausrichten50 bis 70 Zeichen pro ZeileSorgfältig und sparsam hervorhebenUnterstreichung nur für HyperlinksVerzicht auf SonderzeichenNur wenige Links auf externe Dateien
![Page 28: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/28.jpg)
Test, Wartung und Pflege
• Test mit verschiedenen Browsern
• Archivierung aller Materialien
• Veröffentlichung der URL
• Hinweise zur Verbesserung umsetzen
• Links turnusmäßig überprüfen
![Page 29: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/29.jpg)
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
![Page 30: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/30.jpg)
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)
![Page 31: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/31.jpg)
Allgemeines zu Web-Grafiken• Jedem Pixel ist Speicherplatz für Farbe
(Farbtiefe) zugeordnet• Farbtiefe = 1 Byte = 8 Bit → Speicherung
von 28 = 256 Farben• True-Color-Monitore: Farbtiefe = 3 Byte
→ Speicherung von 224 = 16 777 216 Farb.• Farben werden in einem Datenfeld
(Farbpalette) abgespeichert
![Page 32: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/32.jpg)
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)
![Page 33: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/33.jpg)
Dateiformate für Web-Grafiken• GIF
Graphic Interchange Format
• JPEGJoint Photographic Experts Group
• PNGPortable Network Graphics
![Page 34: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/34.jpg)
GIF-Dateien
• 8-Bit-Farbpalette
• Eine Farbe transparent möglich (Hintergrund)
• Animierte Grafiken möglich
• Geeignet für Diagramme, Illustrationen
• Kleine Navigationsgrafiken
![Page 35: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/35.jpg)
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)
![Page 36: Entwicklung einer Web-Site. Inhalt Arbeitsschritte Web-Design Interface-Design Site-Design Page-Design Typografische Besonderheiten Web-Grafiken](https://reader034.vdocuments.site/reader034/viewer/2022051413/55204d7049795902118c10c0/html5/thumbnails/36.jpg)
PNG-Dateien
• 24-Bit-Farbpalette
• Speziell für Webseiten entwickelt
• Transparenz möglich
• Schnelles Interlacing