Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Webdesign Peter Erlach Robert Page Frank Stowasser HdK 2000.

Ähnliche Präsentationen


Präsentation zum Thema: "Webdesign Peter Erlach Robert Page Frank Stowasser HdK 2000."—  Präsentation transkript:

1 Webdesign Peter Erlach Robert Page Frank Stowasser HdK 2000

2 Inhalt Einführung Konzeption von Websites Technische Elemente des Webdesigns Was macht ein Webdesign gut? Kreation: Unser Designbeispiel Screens

3 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

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

5 - 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 beginnts... Konzeption von Websites

6 - ü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

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

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

9 HTML (Hyper-Text Markup Language) - eine der einfacheren Programmiersprachen - HTML basiert auf einfachen Textdokumente, welche mit definierten Befehlen ( ) dem Browser die auszuführenden Handlungen respektive Darstellung mitteilen Bestandteile Technische Elemente

10 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

11 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

12 Bestandteile Technische Elemente Macromedia Flash - Annimationssoftware, die es ermöglicht "streaming" multimedia Module in Webseiten einzubauen - kurzer Wartezeit - bildschirmfüllende Animationen - synchronisierter Sound

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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?

23 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?

24 Die aktuelle Out-Liste: - Homepages mit Pop-Up Werbung. - sich drehende 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?

25 - 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:

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

27 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

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

29 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ß?

30 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

31 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

32 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

33 Was Studenten Spaß macht... Kreation

34 Start Home SportPartyShopMusikLoveUrlaubKultur Volleyballetc. Wannseeetc. Suchen Kontakt Impressum Flowchart Kreation

35 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

36 So hört es sich gut an. Aber wie sieht es aus? Kreation

37

38

39

40

41


Herunterladen ppt "Webdesign Peter Erlach Robert Page Frank Stowasser HdK 2000."

Ähnliche Präsentationen


Google-Anzeigen