WebdesignPeter Erlach
Robert Page
Frank Stowasser
HdK 2000
Inhalt
Einführung
Konzeption von Websites
Technische Elemente des Webdesigns
Was macht ein Webdesign gut?
Kreation: Unser Designbeispiel
Screens
von analog zu digital...
Einführung
- Menschen entwickelten Hilfsmittel, die bedient werden wollten
- die dabei entstehenden Benutzeroberflächen, sogenannte Interfaces, sollten möglichst einfach und für jedermann verständlich sein
- im Multimedia-Bereich steht man nun vor der Aufgabe eine Oberfläche zu schaffen, die der Erfahrung des Benutzers entspricht und so in der rein virtuellen Welt hilft
- die effektive Nutzung von Interface-Elementen entscheidet nicht zuletzt auch darüber, ob eine Website interessant und/oder erfolgreich ist
- Webdesign ist stark von den technischen Möglichkeiten abhängig
- schon bei der Idee und der Entwicklung eines Gestaltungskonzeptes muß man sich vor Augen halten, dass die Datenmenge so gering wie möglich gehalten wird
- verschiedene Browser und Plattformen interpretieren gleiche Gestaltung verschieden
Noch regiert die Datenmenge...
Einführung
- gutes Design im Internet setzt eine gründliche Konzeption voraus
- eine gründliche Recherche im Netzt liefert wertvolle Informationen zur eigenen Umsetzung einer Website
- beurteilen Sie kritisch, wie hohe Ladezeiten erträglich sind...
- ...wieviel Text man zu lesen bereit ist, was Blicke auf sich zieht...
- ...was einen ärgert und demzufolge bei der eigenen Umsetzung vermieden werden sollte
Bei der Planung beginnt‘s...
Konzeption von Websites
- überlegen Sie sich, wen Sie ansprechen wollen
- berücksichtigen Sie Kriterien wie
Altersgruppe
Nationalität
Geschlecht
Kaufkraft
Interessen
Berufsgruppen etc.
Wen will ich erreichen?
Konzeption von Websites
- Websites haben unterschiedliche Funktionen
- der Gestaltungsanspruch ist daher auch unterschiedlich und sollte auch dementsprechend gewählt sein
- die Gestaltungsidee sollte sich normalerweise wie ein roter Faden durch alle Seiten ziehen.
Tonalität
Konzeption von Websites
- auch die verschiedenen Plattformen beeinträchtigen das Aussehen einer Site z.B. stellt Windows Farben dunkler dar als Macintosh
- zu berücksichtigen sind zudem kleine Monitorgrößen
- als Standard-Gestaltungsfläche im ScreenDesign haben sich 800x600 Pixel durchgesetzt - gegeben durch die durchschnittliche Bildschirmauflösung eines Siebzehn-Zoll-Monitors
Unterschiede
Technische Elemente
HTML
(Hyper-Text Markup Language)
- eine der einfacheren Programmiersprachen
- HTML basiert auf einfachen Textdokumente, welche mit definierten Befehlen (<TAG>) dem Browser die auszuführenden Handlungen respektive Darstellung mitteilen
Bestandteile
Technische Elemente
Frames
- Frames (Rahmen) dienen zur Aufteilung einer Website
- sie können mit einem HTML-Befehl kreiert werden
- Frames bieten die Möglichkeit Inhalte unabhängig voneinander auszutauschen
- Frames erleichtern die Orientierung
Bestandteile
Technische Elemente
Bildformate
- Gif und JPEG
- beide Formate besitzen spezielle Kompressionalalogorithmen
- das Gif-Format eignet sich besonders für Strichgrafiken und Illustrationen mit wenig Farbtönen
- das JPEG-Format eignet sich für Halbtonbilder mit vielen Farbnuancen, vor allem also für fotografische Bilder
- Moving Gif: Kleine Animationen, die eine Folge von Gifs abspielen, bzw. loopen
-Transparentes Gif: Definition einer Farbe innerhalb des Gifs, die transparent dargestellt werden soll
Bestandteile
Technische Elemente
Bestandteile
Technische Elemente
Macromedia Flash
- Annimationssoftware, die es ermöglicht "streaming" multimedia Module in Webseiten einzubauen
- kurzer Wartezeit - bildschirmfüllende Animationen
- synchronisierter Sound
Hintergrund
-Texturen oder Farbe sollen eine attraktive Grundlage schaffen
-Verschiedene Hintergründe in verschiedenen Abschnitten können dem Benutzer als visueller Hinweis dienen
-Sie sollen das Thema eines Projektes unterstützen ohne dabei zu viel Aufmerksamkeit auf sich selbst zu lenken
Bestandteile
Technische Elemente
Buttons
- gibt es in nahezu jeder Form und Größe
- Bildern, Design-Elementen, digitalen Videos oder auch 2D- bzw. 3D-Animationen
- Roll-Over-Funktion: 2 Bilder übereinander, das untere erscheint nur beim mouse-over
- nicht unerkenntlich klein aber auch nicht zu wichtig ("soviel wie möglich, aber nicht mehr als nötig")
Bestandteile
Technische Elemente
Schieberegler
- interaktive Steuerelemente, die mit einem Mausklick in die richtige Position geschoben werden können
- verwendet um innerhalb einer Seite zu navigieren
- geben dem Benutzer die Möglichkeit sich durch mehrere Optionen zu bewegen (z.B. zum Einstellen von Lautstärken, Geschwindigkeiten und anderen veränderbaren Optionen)
Bestandteile
Technische Elemente
Pop-Up-Menüs
- erscheinen, wenn der Benutzer auf einen Button oder einen anderen vordefinierten Bereich klickt
- sie können so auf der Oberfläche Informationen anbieten, ohne den Bildschirm zu überfüllen (ersparen zusätzliche Ebenen)
- Gefahr der Unübersichtlichkeit
Bestandteile
Technische Elemente
Cursor/ Mauszeiger
- Bilder, Videos und Animationen
- im Zusammenhang mit "Rollver-Events" können sie die Funktion von visuellen Hinweisen und Navigationskontrollen erhalten
Bestandteile
Technische Elemente
Navigation
- Konstruktion einer Website mit Hilfe von Diagrammen über den Informationsfluß
- Storyboards oder Flowcharts sind besonders nützlich
- Planung der Oberfläche der Site, ohne das Gesamtprojekt aus den Augen zu verlieren
Das Web ist weder eine Litfaßsäule noch ein Irrgarten...
Technische Elemente
Linear
Eine lineare Struktur ist die einfachste aber auch langweiligste Form der Architektur.
- eignet sich vor allem, um Inhalte für Kinder aufzubereiten- auch für Websites, die eine konzentrierte Information vermitteln wollen
Multilinear
Je nach Auswahl kann der User hier an bestimmten Punkten abzweigen, die Möglichkeit verschiedener Erlebnisvariationen bietet sich.
Navigationsarten
Technische Elemente
Hierarchie
- hierarchische Struktur wird am häufigsten verwendet
- es existiert eine Startseite, die sich dann in verschiedene Bereiche verzweigt und so die Architektur bestimmt
- es entsteht ein Strukturbaum
wichtig:- Bereiche und Ebenen, in der sich der User befindet sind deutlich zu machen- eine Sitemap oder ein Inahltsverzeichnis sollte jederzeit mit Positionsvermerk abrufbar sein
Navigationsarten
Technische Elemente
Virtuelle Räume
- Komplexeste Architektur
- wird mit steigender Bandbreite auch mehr und mehr in Websites benutzt
- aus der Spielewelt bekannt: Der User kann sich in jede Richtung bewegen.
- tauchen häufig in Kombinationen mit Shockwave- und Flashprogrammierung auf
- kann am verwirrendsten, aber auch am interessantesten sein
Navigationsarten
Technische Elemente
Die aktuelle In-Liste:
- unsichtbare Counter oder Statistiken- Inhaltsverzeichnisse (Sitemaps) - eine(!) Seitenversion für alle(!) Browser - selbstgemachte Grafiken und Zeichnungen - themenorientierte Linklisten - kurze URL's - Style Sheets - "noscript" Tags, für alle die Probleme mit Javascript und/oder Frames haben
Trends im Internet?
Was macht eine Website gut?
Was vor allem Besucher im Internet interessant finden:
- schnelle Ladezeiten - Übersicht - Nutzen & Aktualität - Wenn eine Site gleich zur Sache kommt - Insiderwissen - Kostenloses - Originelles, Persönliches, Eigenes
Was macht eine Website gut?
Trends im Internet?
Die aktuelle Out-Liste:
- Homepages mit Pop-Up Werbung. - sich drehende Weltkugeln, @'s oder springende Hündchen - die Schriftart MS Comic Sans - Grafiken aus dem MS Frontpage Paketen (u.a. Cliparts)- sichtbare Counter - DHTML Effekthascherei - Hintergrundgrafiken (Schlichte Farben sind wieder in) - Midi Dateien als Backgroundsound. - Under Construction-Hinweise und -Schilder - Buttons wie "Netscape now" oder "MS Internet Explorer here" - Hinweise wie "best viewed with 800*600“- Ticker egal welcher Art- Javascriptfenster, die sich beim Verlassen einer Site öffnen. - Gästebücher und Foren, in denen nichts passiert.
Was macht eine Website gut?
Trends im Internet?
- Pfadfinder Sites
- Sumo Sites
- Salami Sites
- Vortäuscher Sites
- Schwätzer Sites
- Las Vegas Sites
- Narzissen Sites
- OBI Sites
- Osterhasen Sites
Was macht eine Website gut?
Zu welchen Seiten man nicht gehören sollte:
- einfaches Design heißt nicht primitives Design
- direkt zur Sache kommen
- nicht für verschiedene Browser sondern für Gäste optimieren
- Text vor Bildern anzeigen
- große Tabellen in mehrere Kleine teilen
- überflüssige Elemente entfernen
- mehr kleinere statt einer großen Grafik
- halten, was man verspricht
- allegemeine Typografiegesetze beachten
- extreme lange Seiten vermeiden
---> Frustration vermeiden, der Konkurrent ist nur einen Klick entfernt!
Was macht eine Website gut?
Erfolgreiche Seiten
Wir gestalten eine Website, die auf den Überlegungen der Konkurrenz-Analyse-Gruppe beruht.
Deren Empfehlung:
“Die untersuchten Studentenportale positionieren sich vor allem im beruflichen und studienrelevanten Bereich. Das gilt sowohl für die redaktionellen Angebote, als auch für die meisten community-erstellten Angebote. Wir empfehlen den Schwerpunkt ganz klar auf Spaß und Freizeit im Internet zu legen. Der Bereich “Fun” ist im Positionierungskreuz noch unbesetzt und bietet ein großes Potential.”
Kreation
Was für ein Produkt gestalten wir ?
Kurz gesagt: Statt UNICUM Mehr UNIFUN
“UNIFUN” als einen Site die Informationen zu allem anbietet, was Studenten Spaß macht.
Kreation
Sicher nicht: Früh aufstehen, U-Bahn fahren, In Bibliotheken sitzen, lernen, Lernen, lernen
Sondern: Ausstellungen besuchen, verreisen, ins Kino gehen, Shopping, Sport treiben, flirten, feiern
Kreation
Und was macht Studenten Spaß?
Was bedeutet Spaß für die Gestaltung ?
-eher rund als eckig-eher farbig als schwarz-weiss-eher schwungvoll als statisch -emotional warm statt technisch kühl
Kreation
Aber wir haben gelernt: Spaß im Internet hat nicht nur ästhetische Aspekte. Spaß im Internet, dass heisst vor allem:
- Die Übersicht behalten- Sich zurechtfinden
- Schnell ans Ziel kommen
Kreation
Wie bekommen wir diese scheinbar widersprüchlichen Dinge unter einen Website–Hut ?
Wir müssen Elemente suchen, die die Seite übersichtlich und klar gliedern, ihr aber gleichzeitig ästhetischen Reiz schenken.
-Farbe als Leitsystem-Piktogramme als Buttons-Klares Raster-Flache Hierarchie
Kreation
Was Studenten Spaß macht...
Kreation
Start
Home
Sport Party Shop Musik Love Urlaub Kultur
Volleyball etc.
Wannsee etc.
Suchen
Kontakt
Impressum
Flowchart
Kreation
Haben wir als Designer damit genug getan, um das Überleben von UNIFUN im hart umkämpften Internet-Markt zu sichern ? Nein. Von Professor Heilmann wissen wir:
Internet, das bedeutet in Zukunft: Mehr Marke !
Also müssen wir die Markenbildung von UNIFUN mit unseren gestalterischen Mitteln fördern.
Dafür brauchen wir ein besonderes Design-Merkmal: Den Unifun-Schwung.
Er fügt sich nahtlos in unser Design ein und setzt dennoch ein eigenständiges Zeichen, dass für Wiedererkennung und Identität der Marke UNIFUN sorgt.
Kreation
So hört es sich gut an. Aber wie sieht es aus?
Kreation