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