• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Webdesign - Erstellen und Gestalten von Webseiten
 

Webdesign - Erstellen und Gestalten von Webseiten

on

  • 637 views

 

Statistics

Views

Total Views
637
Views on SlideShare
637
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Webdesign - Erstellen und Gestalten von Webseiten Webdesign - Erstellen und Gestalten von Webseiten Presentation Transcript

    • Webdesign – Erstellen und Gestalten von Webseiten Kaiserslautern, 25.01.2006 Tibor Maxam (Kommission Neue Technologien)Berufsverband Information Bibliothek e. V.
    • 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
    • Die Zutaten einer Webseite Navigation Einfache Bedienung Konsistenz Sichtbarkeit Klarheit Orientierung Inhalt Menge & Struktur Lesbarkeit Schreibstil
    • Die Zutaten einer Webseite Design Wiedererkennung Klarheit & Unterstützung Technik
    • 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
    • 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
    • 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
    • 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
    • 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.
    • Auf dem Weg zur KonzeptionDie Zielgruppe Alter Geschlecht Bildungsniveau MotivationTechnik und technische Basis Browsertypen Plattformen Hardware
    • 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.
    • 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
    • Architektur – Beschreibung vonStruktur und AufbauPhase 1: Definition von Inhalt und Struktur mittelsMindmaps1. Chaosphase2. Ordnungsphase3. Ausbauphase4. Optimierungsphase
    • 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
    • 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!
    • 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
    • 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!
    • 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
    • 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
    • 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
    • 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.
    • Navigation und LayoutRegeln der guten Navigation Einfache Bedienung Konsistenz Sichtbarkeit Klarheit OrientierungAufbau einer Navigation Globale Navigation (Hauptnavigation) Lokale Navigation (innerhalb einer Rubrik)
    • 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)
    • Navigation und Layout
    • 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.
    • 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
    • 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
    • Navigation und Layout
    • 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
    • Navigation und LayoutSeitenlayout Frames oder No-Frames Gestaltungsraster Maßeinheiten Mehrspaltigkeit Breite und Höhe Bildraster Schriften/Grundlinienraster/Umsetzbarkeit
    • 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.
    • 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
    • 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!
    • Farbe und Schrift im WebSchriften Informationsvermittlung Strukturierung/Orientierung Visualisierung/CharakterLesbarkeit Schriftart Schriftschnitt
    • 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.
    • 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)
    • 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)
    • 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
    • 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
    • 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)
    • 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:
    • 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
    • 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
    • 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