Webdesign –            Erstellen und Gestalten            von Webseiten              Kaiserslautern, 25.01.2006           ...
Webdesign – und dann ? „Die Webseite gibt es nicht“ Eine Webseite ist eine Ansammlung komplexer Informationen in mehr oder...
Die Zutaten einer Webseite Navigation   Einfache Bedienung   Konsistenz   Sichtbarkeit   Klarheit   Orientierung Inhalt   ...
Die Zutaten einer Webseite Design   Wiedererkennung   Klarheit & Unterstützung Technik
Unterschiedliche Kategorien vonSeiten Portale   Portale bilden den Zugang zu unterschiedlichen   Informationen zu meistens...
Unterschiedliche Kategorien vonSeiten Unternehmenswebseiten   Vielfältiger, unterschiedlicher und zwiespältiger als Portal...
Unterschiedliche Kategorien vonSeiten Community-Webseiten   Reden ist Silber, Schweigen bekanntlich Gold. Dies gilt   alle...
Unterschiedliche Kategorien vonSeiten Online-Shops   Beim Thema Shops könnte man leicht sagen: „Kennst du   einen, kennst ...
Auf dem Weg zur KonzeptionProjektdarstellung  Die Projektdarstellung ist eine Zusammenfassung des  Umfangs und Inhalts des...
Auf dem Weg zur KonzeptionDie Zielgruppe  Alter  Geschlecht  Bildungsniveau  MotivationTechnik und technische Basis  Brows...
Auf dem Weg zur Konzeption  Bandbreite  PlugInsThe Big Picture – Ziel der Webseite formulierenJede Webseite hat eine Gesch...
Auf dem Weg zur Konzeption(Konzeptionell) gute Seiten, schlechte Seiten  Google    www.google.de  LEGO     www.lego.com  S...
Architektur – Beschreibung vonStruktur und AufbauPhase 1: Definition von Inhalt und Struktur mittelsMindmaps1.   Chaosphas...
Architektur – Beschreibung vonStruktur und AufbauPhase 2: Definition von Navigation und Seitentypensowie Inhaltsbeschreibu...
Architektur – Beschreibung vonStruktur und AufbauPhase 3: Umsetzung und regelmäßige Aktualisierung  Die Struktur der Seite...
Grundsätzliches zur GestaltungScribbles, Skizzen und Entwurf  Beginnen Sie mit der „Homepage“    Sie ist die Zentrale, wen...
Grundsätzliches zur GestaltungDeshalb:  Entwerfen Sie zuerst das „Big Picture“ und arbeiten Sie  dann an den Details  Vers...
Grundsätzliches zur GestaltungNutzerverhalten im Web  Webseiten sind keine Broschüren und erst recht keine  Bücher  Was se...
Grundsätzliches zur Gestaltung Damit sind rund 40% des Schirms nicht verfügbar Derzeit dreht sich im Web alles um die Aufl...
Grundsätzliches zur GestaltungIm Rahmen bleibenEin Faktor, der meist ignoriert wird, ist der Browserrahmen.Um zu verdeutli...
Grundsätzliches zur Gestaltung    massiv und erdrückt alles, was unterhalb angeordnet ist. Opera    Die neue Version schie...
Navigation und LayoutRegeln der guten Navigation  Einfache Bedienung  Konsistenz  Sichtbarkeit  Klarheit  OrientierungAufb...
Navigation und Layout Kontextnavigation (abhängig vom Inhalt der Seite) Unterstützende Navigation (Sitemaps, Suchmaschinen...
Navigation und Layout
Navigation und LayoutUsabilityEine Untersuchung der Wichita State University im Jahr 2002hatte das Ziel, herauszufinden, i...
Navigation und Layout Interne Links der Seite stehen am besten im linken oberen Bereich der Seite Externe Links ins Web st...
Navigation und Layout  Der Einkaufswagen wird meist in der rechten oberen Ecke  vermutet und sollte deshalb auch dort zu f...
Navigation und Layout
Navigation und Layout Beispiele Museum of Modern Art    www.moma.org CNN-n-tv     www.ntv.de Stuttgarter Zeitung www.stutt...
Navigation und LayoutSeitenlayout  Frames oder No-Frames  Gestaltungsraster     Maßeinheiten     Mehrspaltigkeit     Breit...
Farbe und Schrift im WebFarben  Erfahrungen aus der Umwelt  Rot bedeutet Gefahr, Blau ist kalt und Grün eine positive  fri...
Farbe und Schrift im Web Aktion und Selektion Nutzen Sie die Signalfarben und starke Kontraste bei der Gestaltung der Navi...
Farbe und Schrift im Web Beliebte und unbeliebte Farben Es gibt Farben, die kann keiner – oder nur wenige – leiden, andere...
Farbe und Schrift im WebSchriften  Informationsvermittlung  Strukturierung/Orientierung  Visualisierung/CharakterLesbarkei...
Farbe und Schrift im Web  Farbe  Laufweite  Zeilenabstand  Ausrichtung  Spaltenbreite/Zeilenlänge  Zeilenumbruch  Lesbare ...
Styleguides für WebseitenRegeln für StyleguidesEin durchschnittlicher Styleguide umfasst ca. 40-70 Seiten (A4),abhängig vo...
Styleguides für Webseiten Bildwelten (Darstellung der Bilder) Elemente (Schrift, Flächen, Bilder, Linien) Bausteine („Über...
Technische WebstandardsGrafikformate  Das GIF-Format (*.gif)  Im Internet weit verbreitetes Dateiformat für Bitmap-Grafike...
Technische Webstandards für digitale Fotos überhaupt. Neben GIF ist JPEG das dominierende Grafikformat im Internet und wir...
Technische WebstandardsSowohl für Schrift als auch für die Farbdarstellung gibt esheute einige Standards, die sich aber bi...
BarrierefreiheitEin Thema, das bei der Gestaltung von Webseiten oftvergessen wird, ist bereits in Artikel 3 des Grundgeset...
Barrierefreiheit  Der Inhalt sollte weitgehend auf Texte aufgebaut sein  Verzichten Sie auf die Verwendung von Texten als ...
Barrierefreiheit  Verwenden Sie eine kontrastreiche Darstellung,  besonders bei der Gestaltung unterschiedlicher  inhaltli...
Webdesign –Erstellen und Gestalten von Webseiten              Vielen Dank       für Ihre Aufmerksamkeit!                  ...
Nächste SlideShare
Wird geladen in …5
×

Webdesign - Erstellen und Gestalten von Webseiten

937 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
937
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Webdesign - Erstellen und Gestalten von Webseiten

  1. 1. Webdesign – Erstellen und Gestalten von Webseiten Kaiserslautern, 25.01.2006 Tibor Maxam (Kommission Neue Technologien)Berufsverband Information Bibliothek e. V.
  2. 2. Webdesign – und dann ? „Die Webseite gibt es nicht“ Eine Webseite ist eine Ansammlung komplexer Informationen in mehr oder weniger strukturierter Form und nicht immer vorhersehbarer Problemstellungen und Aufgaben
  3. 3. Die Zutaten einer Webseite Navigation Einfache Bedienung Konsistenz Sichtbarkeit Klarheit Orientierung Inhalt Menge & Struktur Lesbarkeit Schreibstil
  4. 4. Die Zutaten einer Webseite Design Wiedererkennung Klarheit & Unterstützung Technik
  5. 5. Unterschiedliche Kategorien vonSeiten Portale Portale bilden den Zugang zu unterschiedlichen Informationen zu meistens einem gemeinsamen Thema unter einem einzigen Dach Beispiele: Microsoft MSN www.msn.de RTL-World www.rtl.de T-Online www.t-online.de
  6. 6. Unterschiedliche Kategorien vonSeiten Unternehmenswebseiten Vielfältiger, unterschiedlicher und zwiespältiger als Portale sind die Webseiten, die als Thema nur ein einzelnes Unternehmen haben, die Unternehmenswebseiten oder schicker „Corporate Sites“ Beispiele: Stihl www.stihl.de Lufthansa www.lufthansa.de Apple www.apple.com
  7. 7. Unterschiedliche Kategorien vonSeiten Community-Webseiten Reden ist Silber, Schweigen bekanntlich Gold. Dies gilt allerdings nicht für Community-Webseiten, auf denen sich Freunde im Geiste über die unterschiedlichsten Themen austauschen. Allen Communities ist gemein, dass sie auf einer stark dynamischen Basis vor allem textuelle Inhalte präsentieren Beispiele: dotcomtod.com www.dotcomtod.com redseven www.redseven.de
  8. 8. Unterschiedliche Kategorien vonSeiten Online-Shops Beim Thema Shops könnte man leicht sagen: „Kennst du einen, kennst du alle.“ Im Prinzip ist das auch so, verfolgen doch alle denselben Zweck: Verkaufen von Produkten. Beispiele: Amazon www.amazon.de Karstadt www.karstadt.de Neckermann www.neckermann.de
  9. 9. Auf dem Weg zur KonzeptionProjektdarstellung Die Projektdarstellung ist eine Zusammenfassung des Umfangs und Inhalts des Projektes. Hier sollte kurz und knapp dargestellt werden, was überhaupt im Projekt gemacht wird und welche Ergebnisse geplant sind.Analyse Keine Konzeption ohne Vorgaben! Sammeln Sie zu Beginn des Projektes so viele Informationen wie möglich, auch wenn Sie der Meinung sind, schon alles über das Web und die gestellte Aufgabe zu wissen.
  10. 10. Auf dem Weg zur KonzeptionDie Zielgruppe Alter Geschlecht Bildungsniveau MotivationTechnik und technische Basis Browsertypen Plattformen Hardware
  11. 11. Auf dem Weg zur Konzeption Bandbreite PlugInsThe Big Picture – Ziel der Webseite formulierenJede Webseite hat eine Geschichte, man muss sie nurspannend erzählen.Nachdem Sie alle Informationen gesammelt haben,beginnen Sie mit der eigentlichen Konzeption.
  12. 12. Auf dem Weg zur Konzeption(Konzeptionell) gute Seiten, schlechte Seiten Google www.google.de LEGO www.lego.com SAT.1 www.sat1.de ALDI www.aldi.de Schlecker www.schlecker.com Jeep www.jeep.de BMW www.bmw.de Robbie Williams www.robbiewilliams.com
  13. 13. Architektur – Beschreibung vonStruktur und AufbauPhase 1: Definition von Inhalt und Struktur mittelsMindmaps1. Chaosphase2. Ordnungsphase3. Ausbauphase4. Optimierungsphase
  14. 14. Architektur – Beschreibung vonStruktur und AufbauPhase 2: Definition von Navigation und Seitentypensowie Inhaltsbeschreibung Planung und Umsetzung der Navigation Aufteilung der Seiten in unterschiedliche Inhaltsbereiche Zahl und Art der Seitentypen werden festgelegt Inhalte der Seiten werden erfasst, die Querverbindungen zu anderen Teilen der Seite oder externe Links
  15. 15. Architektur – Beschreibung vonStruktur und AufbauPhase 3: Umsetzung und regelmäßige Aktualisierung Die Struktur der Seite steht fest Es kann jedoch notwendig werden, die Struktur den späteren Gegebenheiten anzupassenGrundsätzlich gilt:Ein Entscheider am Tisch erspart den Therapeuten!
  16. 16. Grundsätzliches zur GestaltungScribbles, Skizzen und Entwurf Beginnen Sie mit der „Homepage“ Sie ist die Zentrale, wenn wir nicht mehr weiter wissen Sie steht für Seitenaufteilung und Navigation Sie ist in den meisten Fällen das Erste, was der Besucher von Ihrer Webseite sieht Wenn Sie ihn damit nicht fesseln, ist er mit dem nächsten Klick schon auf einer anderen Seite
  17. 17. Grundsätzliches zur GestaltungDeshalb: Entwerfen Sie zuerst das „Big Picture“ und arbeiten Sie dann an den Details Versuchen Sie bei der Arbeit mit so wenigen Elementen wie möglich auszukommen Arbeiten Sie erst zum Schluss die Details ausImmer gilt:Entwurf prüfen!
  18. 18. Grundsätzliches zur GestaltungNutzerverhalten im Web Webseiten sind keine Broschüren und erst recht keine Bücher Was sehen eigentlich die Anwender?Bildschirmgröße und Auflösung In der Regel stehen lediglich 780 X 390 Pixel für die eigentliche Webseite zur Verfügung
  19. 19. Grundsätzliches zur Gestaltung Damit sind rund 40% des Schirms nicht verfügbar Derzeit dreht sich im Web alles um die Auflösungen 800 x 600 Pixel, 1024 x 768 Pixel und 1280 x 1024 Pixel, letztere wird sich wohl in den nächsten Jahren als Standard etablieren Gefragt sind daher flexible Layouts, die in jedem Seitenverhältnis und (fast) jeder Auflösung funktionieren Gilt es, umfangreiche Inhalte und komplexe Strukturen zu visualisieren, muss das Design flexibel sein
  20. 20. Grundsätzliches zur GestaltungIm Rahmen bleibenEin Faktor, der meist ignoriert wird, ist der Browserrahmen.Um zu verdeutlichen, welche Auswirkungen der Rahmendes Browsers auf das spätere Design hat, hier eineGegenüberstellung: Netscape/Mozilla/Firefox Stahlgrau und wenig plastisch präsentiert sich die Variante des ehemaligen Marktführers. Er wirkt
  21. 21. Grundsätzliches zur Gestaltung massiv und erdrückt alles, was unterhalb angeordnet ist. Opera Die neue Version schießt nicht nur einen Vogel in puncto „Funktionen, auf die wir gewartet haben“ ab. Zudem stört – wenn auch verständlich – das Werbebanner in der kostenlosen Version. Zusätzliche Verwirrung schaffen die vielen Eingabefelder und Symbole. Internet Explorer Der Marktführer präsentiert sich zurückhaltend. Lediglich die bunten Icons lenken vom Inhalt ab. Dennoch ist hier Microsoft auf dem richtigen Weg und setzt immer noch den Standard.
  22. 22. Navigation und LayoutRegeln der guten Navigation Einfache Bedienung Konsistenz Sichtbarkeit Klarheit OrientierungAufbau einer Navigation Globale Navigation (Hauptnavigation) Lokale Navigation (innerhalb einer Rubrik)
  23. 23. Navigation und Layout Kontextnavigation (abhängig vom Inhalt der Seite) Unterstützende Navigation (Sitemaps, Suchmaschinen) Farbcodes & visuelles Feedback (Rollover-Buttons, unterstrichene Hyperlinks, farblich unterschiedlich unterlegte Inhaltsbereiche)
  24. 24. Navigation und Layout
  25. 25. Navigation und LayoutUsabilityEine Untersuchung der Wichita State University im Jahr 2002hatte das Ziel, herauszufinden, in welchen Bereichen einer Seitedie Anwender welche Navigationselemente vermuten.Aus den Ergebnissen der Studie lassen sich folgende Regelnableiten: Zurück zur Homepage steht links oben oder in der Mitte unten auf der Seite. Zudem ist es Standard, die Homepage auch über das Unternehmenslogo zu verlinken.
  26. 26. Navigation und Layout Interne Links der Seite stehen am besten im linken oberen Bereich der Seite Externe Links ins Web stehen am Rand auf der rechten Seite oder am Rand links unten Interne Suchmaschinen erwarten die Anwender meist in der Mitte des oberen Bereichs der Seite Werbebanner werden von den Anwendern immer oben im Kopf der Seite vermutet Login/Registrierung steht in der Erwartung des Anwenders in der linken oberen Ecke der Webseite
  27. 27. Navigation und Layout Der Einkaufswagen wird meist in der rechten oberen Ecke vermutet und sollte deshalb auch dort zu finden sein Hilfe wird in den meisten Fällen in der rechten oberen Ecke gesucht, sicherlich eine Gewohnheit, die mit der Position der Hilfe in der Menüleiste von Programmen zu tun hatNavigation als Text oder Bild?Immer weniger wird heute eine bildbasierte Navigationverwendet, auch wenn die meisten Textnavigationen als Bildergespeichert sind
  28. 28. Navigation und Layout
  29. 29. Navigation und Layout Beispiele Museum of Modern Art www.moma.org CNN-n-tv www.ntv.de Stuttgarter Zeitung www.stuttgarter-zeitung.de ZDF www.zdf.de
  30. 30. Navigation und LayoutSeitenlayout Frames oder No-Frames Gestaltungsraster Maßeinheiten Mehrspaltigkeit Breite und Höhe Bildraster Schriften/Grundlinienraster/Umsetzbarkeit
  31. 31. Farbe und Schrift im WebFarben Erfahrungen aus der Umwelt Rot bedeutet Gefahr, Blau ist kalt und Grün eine positive frische Farbe, Hellblau beruhigt, und Orange macht in größeren Dosen aggressiv Markenwelt IBM ist Big Blue, Schumacher bedeutet Ferrari-Rot, die Post ist gelb und die Umwelt grün. Rot kämpft gegen Schwarz und die Zukunft ist Wüstenrot.
  32. 32. Farbe und Schrift im Web Aktion und Selektion Nutzen Sie die Signalfarben und starke Kontraste bei der Gestaltung der Navigation. Aktivierte Menüeinträge müssen sich klar von den andern unterscheiden Wiedererkennung Verwenden Sie Farben aus der Markenwelt für die Gestaltung der Gesamterscheinung der Seite. Orientieren Sie sich am Farbklima, das auch in der klassischen Kommunikation verwendet wird
  33. 33. Farbe und Schrift im Web Beliebte und unbeliebte Farben Es gibt Farben, die kann keiner – oder nur wenige – leiden, andere wiederum finden alle sympathisch und nett Interessanterweise finden z.B. Männer Gelb gut, während Frauen die Farbe überwiegend ablehnen Orientierung bieten mit Farbe und mehr Navigation – oben links, graue Fläche – Zusatzinfos, Rot – kann ich anklicken!
  34. 34. Farbe und Schrift im WebSchriften Informationsvermittlung Strukturierung/Orientierung Visualisierung/CharakterLesbarkeit Schriftart Schriftschnitt
  35. 35. Farbe und Schrift im Web Farbe Laufweite Zeilenabstand Ausrichtung Spaltenbreite/Zeilenlänge Zeilenumbruch Lesbare SchriftenFast alles im Schriftbereich lässt sich durch CSS (CascadingStyle Sheets) darstellen, in dem die Schriftgröße usw. definiertwerden.
  36. 36. Styleguides für WebseitenRegeln für StyleguidesEin durchschnittlicher Styleguide umfasst ca. 40-70 Seiten (A4),abhängig vom Umfang und der Komplexität einer Seite Allgemeines (Einleitung/Einführung) Seitenbereiche (Navigation, Fußzeile) Raster & Maße (Bemaßungen, Abstände) Farben (Farbklima mit RGB und Hexadezimalwerten) Schriften (hier auch die CSS-Daten)
  37. 37. Styleguides für Webseiten Bildwelten (Darstellung der Bilder) Elemente (Schrift, Flächen, Bilder, Linien) Bausteine („Überschrift“, „Unterzeile“, „Vorspann“ usw.) Seitentypen (Inhaltsbereich, redaktioneller Teil) Exemplarische Seiten (Beispiele) Navigation (ausführliche Darstellung der Navigationsebenen oder Varianten)
  38. 38. Technische WebstandardsGrafikformate Das GIF-Format (*.gif) Im Internet weit verbreitetes Dateiformat für Bitmap-Grafiken, das in seiner ursprünglichen Version 1987 für die Firma Compuserve entwickelt wurde. Überwiegend wird es für Navigationsschaltflächen, Werbebanner und Logos eingesetzt Das JPEG-Format (*.jpg, *.jepg, *.jp2) JPEG ist das wohl am häufigsten verwendete Grafikformat
  39. 39. Technische Webstandards für digitale Fotos überhaupt. Neben GIF ist JPEG das dominierende Grafikformat im Internet und wird bevorzugt für Fotos mit vielen Farben genutzt. Das weiter entwickelte Format JPEG 2000 bietet den Vorteil eines weiter entwickelten Kompressionsverfahrens Das PNG-Format (*.png) Das PNG-Format wurde speziell für den Einsatz im Web entwickelt und bietet, neben hervorragende Bildqualität, sehr gute Kompressionseigenschaften
  40. 40. Technische WebstandardsSowohl für Schrift als auch für die Farbdarstellung gibt esheute einige Standards, die sich aber bis heute noch nichtdurchgesetzt haben.So kursiert zur Farbdarstellung der Begriff „Websave“,da es auch derzeit nur 256 Farben gibt, die sich korrekt aufallen Plattformen darstellen lassen.Zur effektiveren Darstellung von Schriften werden imMoment zwei Formate entwickelt: Embedded OpenType(Microsoft) und TrueDoc (Netscape/Bitstream)
  41. 41. BarrierefreiheitEin Thema, das bei der Gestaltung von Webseiten oftvergessen wird, ist bereits in Artikel 3 des Grundgesetzesverankert: „Niemand darf aufgrund seiner Behinderungbenachteiligt werden.“ – das barrierefreie Arbeiten. Zudemgelten sowohl nationale als auch internationale Richtlinien.Wie man eine Webseite auch für behinderte Menschenzugänglich macht. Man sollte einfach ein paar kleineRegeln beachten:
  42. 42. Barrierefreiheit Der Inhalt sollte weitgehend auf Texte aufgebaut sein Verzichten Sie auf die Verwendung von Texten als Bildern Hinterlegen Sie Bilder mit aussagekräftigen ALT-Tags, bei Bildern beispielsweise eine Beschreibung, was zu sehen ist Gestalten Sie Texte nicht zweispaltig Verwenden Sie auch in kurzen Listen am Ende der Zeile einen Punkt, Beschreiben sie zusätzlich die Liste in einem kurzen Satz
  43. 43. Barrierefreiheit Verwenden Sie eine kontrastreiche Darstellung, besonders bei der Gestaltung unterschiedlicher inhaltlicher Bereiche Gestalten Sie Steuerungselemente (Buttons) nicht zu klein, auch sollte diese Elemente eine Mindestgröße haben Achten Sie bei der Entwicklung von Formularen darauf, diese für unterschiedliche Anwendergruppen zugänglich zu machen
  44. 44. Webdesign –Erstellen und Gestalten von Webseiten Vielen Dank für Ihre Aufmerksamkeit! © 2005 Tibor Maxam Kontakt: Stadtbibliothek Springe, Hinter der Burg 3a, 31832 Springe, Deister Tel.: 0 50 41 / 77 99 543, Fax: 6 29 53, E-Mail: maxam@stabi-springe.de

×