Webdesign

Document Sample
Webdesign Powered By Docstoc
					Webdesign
    Peter 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...

 - 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




                                                                   Einführung
Noch regiert die Datenmenge...

 - 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




                                                                Einführung
Bei der Planung beginnt„s...

 - 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




                                                 Konzeption von Websites
Wen will ich erreichen?


 - überlegen Sie sich, wen Sie ansprechen wollen

 - berücksichtigen Sie Kriterien wie

                   Altersgruppe
                   Nationalität
                   Geschlecht
                   Kaufkraft
                   Interessen
                   Berufsgruppen etc.




                                            Konzeption von Websites
Tonalität

 - 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.




                                              Konzeption von Websites
Unterschiede

 - 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




                                                  Technische Elemente
Bestandteile

 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




                                                  Technische Elemente
Bestandteile

 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




                                                  Technische Elemente
Bestandteile

 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




                                                     Technische Elemente
Bestandteile

 Macromedia Flash

 - Annimationssoftware, die es ermöglicht "streaming" multimedia Module in
 Webseiten einzubauen

 - kurzer Wartezeit - bildschirmfüllende Animationen

 - synchronisierter Sound




                                                       Technische Elemente
Bestandteile

 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




                                                   Technische Elemente
Bestandteile

 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")




                                                     Technische Elemente
Bestandteile

 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)




                                                     Technische Elemente
Bestandteile

 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




                                                  Technische Elemente
Bestandteile

 Cursor/ Mauszeiger

 - Bilder, Videos und Animationen

 - im Zusammenhang mit "Rollver-Events" können sie die Funktion von
 visuellen Hinweisen und Navigationskontrollen erhalten




                                                Technische Elemente
Das Web ist weder eine Litfaßsäule noch ein Irrgarten...

 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




                                                 Technische Elemente
Navigationsarten

 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.




                                                    Technische Elemente
Navigationsarten

 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




                                                     Technische Elemente
Navigationsarten

 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




                                                  Technische Elemente
Trends im Internet?

 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




                                        Was macht eine Website gut?
Trends im Internet?

 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?
Zu welchen Seiten man nicht gehören sollte:

 - 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?
Erfolgreiche Seiten

 - 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?
Was für ein Produkt gestalten wir ?

 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.”

 Kurz gesagt:         Statt UNICUM
                      Mehr UNIFUN




                                                                    Kreation
“UNIFUN” als einen Site die Informationen zu allem anbietet, was Studenten
Spaß macht.




                                                                  Kreation
Und was macht Studenten Spaß?

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
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
Flowchart


                           Start            Suchen
                           Home             Kontakt
                                          Impressum

  Sport     Party   Shop   Musik   Love   Urlaub   Kultur
 Volleyball    etc.
 Wannsee        etc.




                                                   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

				
DOCUMENT INFO