Webdesign Peter Erlach Robert Page Frank Stowasser Hd

Webdesign Peter Erlach Robert Page Frank Stowasser Hd. K 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 Screen. Design haben sich 800 x 600 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 2 D- bzw. 3 DAnimationen - 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 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 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 Sport Party Shop Volleyball etc. Wannsee etc. Start Suchen Home Kontakt Impressum Musik Love Urlaub Kultur 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