1. Web - Design
Neue Medien - Internet // Prof. Lehning
Iris Hachtroudian & Alexandra Günzel
Referat // 20.12.2011
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
1

2. Inhaltsverzeichnis:
1. Klassisch
1.1. Begriffsdefinition
1.2. Wichtige Fragen
1.3. Aufgaben des Designs
1.4. Charakteristische Besonderheiten
1.5. Orienterung
1.6. Designelemente
2. Modern
2.1. Anforderungen
3. Awards
3.1. Webby
3.2. FWA
4. Trends 2012
5. The good and the not so good ?
6. Agenturen
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
2

3. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Begriffsdefinition
Lexikondefinition von Design:
Entwurf, Gestaltung und Formgebung eines Gegenstands.
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
3

4. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Begriffsdefinition
»Gutes Design bedeutet relevante Information.«
Roger Black
Design ist mehr als die ästhetische Erscheinungsform der Dinge.
»Form follows function.«
Louis Sullivan
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
4

5. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Begriffsdefinition
Webdesign:
Der Begriff Webdesign reicht von der Erarbeitung
sowie der Umsetzung der Informationsstruktur,
über das grafische Design bis hin zur funktionierenden
Umsetzung der Website.
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
5

6. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Begriffsdefinition
a Webdesign ist eine inhaltszentrierte Tätigkeit
a Inhalt und Interaktion haben Vorrang vor Farbe und Form.
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
6

7. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Wichtige Fragen
Die Fragen die über allem stehen:
a Für wen gestalte ich?
a Welches Produkt verkaufe ich?
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
7

8. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Aufgaben des Designs
Eine Seite ist auf den ersten Blick immer
» ... die Komposition von Form und Farbe...«
auf den zweiten Blick werden
» ... spezifische Informationen aufgenommen...«
Patrick Lynch, Sarah Horton.
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
8

9. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Aufgaben des Designs
Aufgabe des Designs:
a Den User für die Seite interessieren
a Den User durch die Seite zu führen
a Die wichtige Stellen hervorzuheben
a Den Inhalt logisch zu ordnen
a Das bedeutet: Design ist eine Form visuellen
Informationsmanagements
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
9

10. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Charakteristische Besonderheiten
Zwei charakteristische Besonderheiten des Webdesigns:
a Aspekt der Unvorhersehbarkeit durch unterschiedliche
Browserversionen
a Nichtlinearer Aufbau
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
10

11. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Orienterung
»Die Suche nach Informationen in Web-Sites ist
eine sehr frustrierende Erfahrung«
Fazit einer Studie zur Web-Nutzung (Spool et al. 1999)
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
11

12. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Orienterung
Orientierungslosigkeit verunsichert!
a Wo befinde ich mich im Moment?
a Wie ist die Struktur?
a Wo bin ich schon überall gewesen?
a Was gibt es hier alles?
a Habe ich alles gesehen?
a Wo sind für mich relevante Informationen?
a Bin ich schnell erfolgreich?
a Macht es Spaß oder ist es mühsam?
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
12

13. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Orienterung
Layout-Elemente HTML:
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
13

14. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Orienterung
Die Navigation sagt uns:
a Wohin ich als Nutzer gehen kann.
a Wie ich dorthin komme.
a Wie ich wieder zurück komme.
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
14

15. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Designelemente
Designelemente:
a Navigationselemente
a Orientierungselemente
a Informationslemente
a Inhaltselemente
a Interaktionselemente
a Motivationselemente
a Schmuckelemente
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
15

16. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Designelemente
Designelemente:
a Farben:
Die Farbgebung sollte auf 3 - 8 Farben auf einer Seite
begrenzt sein.
Diese Farben sollten sich auf einer Seite logisch wiederholen,
um dem Auge Ruhe und dem Nutzer Führung zu geben.
a Bilder & Grafiken:
»Bilder sind schnelle Schüsse ins Gehirn.« Werner Kroeber-Riel
Die 3 Funktionen von Bildern & Grafiken:
1. Veranschaulichung
2. Strukturierung
3. Dekoration
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
16

17. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Designelemente
Designelemente:
a Typografie
Die verwendete Schrift
Die Schriftgröße
Schrift- und Seitenfarbe
Die Buchstaben- und Wortzwischenräume
Die Zeilenlänge
Der Zeilenabstand
Länge von Textblöcken
Silbentrennung
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
17

18. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Designelemente
Designelemente/Wahrnehmungsprinzipien:
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
18

19. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Designelemente
Designelemente/Wahrnehmungsprinzipien:
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
19

20. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Designelemente
»Wäre das Design im Alltag von der Ästhetik bestimmt,
dann gäbe es im Leben vielleicht mehr Schönes fürs Auge,
aber vieles wäre unpraktischer,
wäre das Design ausschließlich funktional, so wäre
das Leben vielleicht bequemer, dafür aber hässlicher.«
Norman Donald
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
20

21. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Anforderungen
Moderne Anforderungen:
Barrierefreiheit:
a Menschen mit und ohne Behinderungen
a Technische Einschränkungen (Textbrowser oder PDA)
a Altersbedingten Einschränkungen (Sehschwächen)
a Webcrawler
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
21

22. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Anforderungen
Grundlegende Techniken um Barrieren zu verringern:
a Korrekter Einsatz von Webstandards
(gültiges HTML/XHTML)
a Trennung von Inhalt
(Text, Bilder usw.)
und Layout durch CSS
(Cascading Style Sheets)
Kompromisse beim Design sind nicht nötig
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
22

23. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Anforderungen
Usability:
a »Suche nicht nach Fehlern. Suche nach Lösungen.« Henry Ford I.
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
23

24. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Anforderungen
Teilnehmen:
a www.aidsquilt.org
a www.johnnycashproject.com
a www.thewildernessdowntown.com
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
24

25. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Webby
Webby Awards:
Die Webby Awards werden einmal im Jahr von der „International
Academy of the Digital Arts and Sciences“ vergeben und gelten als
einer der wichtigsten Preise im Online-Bereich.
Ausgezeichnet werden die besten Arbeiten in vier Haupt- und über
100 Unterkategorien – von interaktiver Werbung über Websites bis
hin zu Online-Filmen und Videos. Darüber hinaus haben Teilnehmer
die Gelegenheit, den „People’s Voice Award“ zu gewinnen: eine
Auszeichnung, die nicht von der Award-Jury, sondern vom Publikum
vergeben wird.
Est.1996
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
25

26. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
FWA
FWA (Favourite Website Awards):
Ähnlich wie die Webbies vergibt die FWA Platzierungen für die
besten Websites. Bei der FWA gibt es die SOTD (Site of the day),
SOTM (Site of the month) und am Ende des Jahres werden
aus den 12 SOTM Gewinnern der SOTY Gewinner gewählt.
Anders als beim Webbie wählen hier nur die Besucher der
FWA-Seite den Gewinner.
Es geht um Cutting Edge Technologie vereint mit inspirierenden
zukunftsweisenden Ideen.
Est.2000
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
26

27. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
Trends 2012
Trends 2012:
1. Responsive Web Design / Mobility stuffandnonsense.co.uk
2. Navigation / netontwerp.com
3. Circles / dotmick.com
4. Focus on Simplicity / girlfriendnyc.com
5. Multi-Column Menus / bestmadeco.com
6. jQuery/CSS3/HTML5 Animation / jquery.com
7. Oversize footer / header / frogdesign.com, mokshastudio.com
8. Typography /Custom Font Faces / google.com/webfonts
9. Infographics / inspiredm.com
10. QR Codes will explode
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
27

28. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold
The good and the not so good ?
:-) :-(
katamari.co.jp spd.de
moma.org/bauhaus jackwolfskin.com
thinkblue.jp bahn.de
camelactive.de microsoft.com
sony.com
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
28

29. Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold // Agenturen
Agenturen
Agenturen:
www.rokkan.com
www.frogdesign.com // designmind.frogdesign.com
www.radicalmedia.com
www.katamari.co.jp
www.les84.com
www.2gh.de
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
29

30. Quellen:
Hoffmann, Manuela (2008):
Modernes Webdesign. Gestaltungsprinzipien, Webstandards, Praxis. Bonn: Galileo Design
Beier, Markus; von Gizycki Vittoria (2002): Usability. Nutzerfreundliches Web-Design
Berlin, Heildeberg: Springer Verlag
Thissen, Frank (2001): Screen-Design-Handbuch. Effektiv informieren und kommunizieren mit
Multimedia. 2. Auflage.Berlin, Heildeberg: Springer Verlag
Seibert, Björn; Hoffmann Manuela (2008): Professionelles Webdesign mit (X)HTML und CSS
Bonn: Galileo Press
Wardag, Jana (2006): Design und Usability. Gegenüberstellung zweier Gestantungsansätze im Webdesign.
Saarbrücken: VDM Verlag Dr. Müller
17.12.2011: www.bauhauswebdesign.de/web-design-blog/die-wichtigsten-elemente-des-webdesigns/
www.webmasterpro.de/design/article/gestaltgesetze-der-wahrnehmung.html
19.12.2011: webdesignledger.com, elmastudio.de, designstutorial.com, scoreberlin.de/fachartikel/usability-
score-pyramid/
Neue Medien - Internet // Prof. Lehning // Referat: Web Design // Iris Hachtroudian & Alexandra Günzel // 20.12.2011
30