SlideShare ist ein Scribd-Unternehmen logo
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

Weitere ähnliche Inhalte

Andere mochten auch

Web Design 101
Web Design 101Web Design 101
Web Design 101
T.S. Lim
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
Andreas Simon
 
Deber 12.
Deber 12.Deber 12.
Deber 12.
Alex Lemfer
 
Ley de-notariado
Ley de-notariadoLey de-notariado
Ley de-notariado
Save Solutions
 
La música
La músicaLa música
La música
Zoe Toro
 
14 adn
14 adn14 adn
14 adn
y1r2m
 
Expocision liderazgo
Expocision liderazgoExpocision liderazgo
Expocision liderazgo
William Murillo
 
Tics educacion
Tics educacionTics educacion
Tics educacion
upc
 
Ley de-procedimientos-uniformes-para-instrumentos-en-los-registros-de-la-prop...
Ley de-procedimientos-uniformes-para-instrumentos-en-los-registros-de-la-prop...Ley de-procedimientos-uniformes-para-instrumentos-en-los-registros-de-la-prop...
Ley de-procedimientos-uniformes-para-instrumentos-en-los-registros-de-la-prop...
Save Solutions
 
Lecon 2 Les Dates
Lecon 2  Les  DatesLecon 2  Les  Dates
Lecon 2 Les Dates
Miss Fanny
 
1.la leyenda de la india dormida
1.la leyenda de la india dormida1.la leyenda de la india dormida
1.la leyenda de la india dormida
mirnaf
 
Tortugart
TortugartTortugart
Tortugart
Nokia
 
Sopas colombinas
Sopas colombinasSopas colombinas
Sopas colombinas
Celenia Galvis
 
Invitation
InvitationInvitation
Invitation161
 
Portique Traitement Materiaux
Portique Traitement MateriauxPortique Traitement Materiaux
Portique Traitement Materiauxyouri59490
 

Andere mochten auch (15)

Web Design 101
Web Design 101Web Design 101
Web Design 101
 
Responsive Webdesign
Responsive WebdesignResponsive Webdesign
Responsive Webdesign
 
Deber 12.
Deber 12.Deber 12.
Deber 12.
 
Ley de-notariado
Ley de-notariadoLey de-notariado
Ley de-notariado
 
La música
La músicaLa música
La música
 
14 adn
14 adn14 adn
14 adn
 
Expocision liderazgo
Expocision liderazgoExpocision liderazgo
Expocision liderazgo
 
Tics educacion
Tics educacionTics educacion
Tics educacion
 
Ley de-procedimientos-uniformes-para-instrumentos-en-los-registros-de-la-prop...
Ley de-procedimientos-uniformes-para-instrumentos-en-los-registros-de-la-prop...Ley de-procedimientos-uniformes-para-instrumentos-en-los-registros-de-la-prop...
Ley de-procedimientos-uniformes-para-instrumentos-en-los-registros-de-la-prop...
 
Lecon 2 Les Dates
Lecon 2  Les  DatesLecon 2  Les  Dates
Lecon 2 Les Dates
 
1.la leyenda de la india dormida
1.la leyenda de la india dormida1.la leyenda de la india dormida
1.la leyenda de la india dormida
 
Tortugart
TortugartTortugart
Tortugart
 
Sopas colombinas
Sopas colombinasSopas colombinas
Sopas colombinas
 
Invitation
InvitationInvitation
Invitation
 
Portique Traitement Materiaux
Portique Traitement MateriauxPortique Traitement Materiaux
Portique Traitement Materiaux
 

Ähnlich wie Webdesign

Wie Online-Trends den Stiftungssektor verändern - Teil 2
Wie Online-Trends den Stiftungssektor verändern - Teil 2Wie Online-Trends den Stiftungssektor verändern - Teil 2
Wie Online-Trends den Stiftungssektor verändern - Teil 2
betterplace lab
 
Vortrag Generation Online - Dr. Katja Bett
Vortrag Generation Online - Dr. Katja BettVortrag Generation Online - Dr. Katja Bett
Vortrag Generation Online - Dr. Katja Bett
Katja Bett
 
Keynote: Aktuelle Web-Trends - Bernd Völcker
Keynote: Aktuelle Web-Trends - Bernd VölckerKeynote: Aktuelle Web-Trends - Bernd Völcker
Keynote: Aktuelle Web-Trends - Bernd Völcker
JustRelate
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
Jens Grochtdreis
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Jens Grochtdreis
 
Social Media - vorübergehender Hype oder Chance für den Mittelstand?
Social Media - vorübergehender Hype oder Chance für den Mittelstand?Social Media - vorübergehender Hype oder Chance für den Mittelstand?
Social Media - vorübergehender Hype oder Chance für den Mittelstand?
crowdmedia GmbH
 
MOOCs als Anwendungsfall in sozialen Intranets?
MOOCs als Anwendungsfall in sozialen Intranets?MOOCs als Anwendungsfall in sozialen Intranets?
MOOCs als Anwendungsfall in sozialen Intranets?
mgmt20mooc
 
Facebook-Google+ 2012
Facebook-Google+ 2012Facebook-Google+ 2012
Facebook-Google+ 2012
annaberger-internet
 
Social Media für Gründer und KMU
Social Media für Gründer und KMUSocial Media für Gründer und KMU
Social Media für Gründer und KMU
Sven-Olaf Peeck
 
Social Media für Gründer und KMU
Social Media für Gründer und KMUSocial Media für Gründer und KMU
Social Media für Gründer und KMU
crowdmedia GmbH
 
Keine Angst vor Social Media
Keine Angst vor Social MediaKeine Angst vor Social Media
Keine Angst vor Social MediaHagen Kohn
 
Arbeitskreis Personal agenda11-12
Arbeitskreis Personal agenda11-12Arbeitskreis Personal agenda11-12
Arbeitskreis Personal agenda11-12
Community ITsax.de
 
Arbeitskreis Personal Agenda11-12
Arbeitskreis Personal Agenda11-12Arbeitskreis Personal Agenda11-12
Arbeitskreis Personal Agenda11-12
Community MINTsax.de
 
IDUG_RheinRuhr #5 Düsseldorf (Was gibt's neues, Gute Dokumente brauchen wir)
IDUG_RheinRuhr #5 Düsseldorf (Was gibt's neues, Gute Dokumente brauchen wir)IDUG_RheinRuhr #5 Düsseldorf (Was gibt's neues, Gute Dokumente brauchen wir)
IDUG_RheinRuhr #5 Düsseldorf (Was gibt's neues, Gute Dokumente brauchen wir)Johannes Henseler
 
Mediencampus Website Grobkonzept
Mediencampus Website GrobkonzeptMediencampus Website Grobkonzept
Mediencampus Website Grobkonzept
Marisa Wollner
 
Outsourcing bei komplexen Web-Projekten
Outsourcing bei komplexen Web-ProjektenOutsourcing bei komplexen Web-Projekten
Outsourcing bei komplexen Web-Projekten
Birger Friedrichs
 
B2B im Social Web
B2B im Social WebB2B im Social Web
B2B im Social Web
KMTO
 
Social Media Instrumente
Social Media Instrumente Social Media Instrumente
"Der Übergang zur Webgesellschaft"
"Der Übergang zur Webgesellschaft""Der Übergang zur Webgesellschaft"
"Der Übergang zur Webgesellschaft"
Gerald Fricke
 
Arbeiten 4.0 work like a network
Arbeiten 4.0   work like a networkArbeiten 4.0   work like a network
Arbeiten 4.0 work like a network
BrainConsult
 

Ähnlich wie Webdesign (20)

Wie Online-Trends den Stiftungssektor verändern - Teil 2
Wie Online-Trends den Stiftungssektor verändern - Teil 2Wie Online-Trends den Stiftungssektor verändern - Teil 2
Wie Online-Trends den Stiftungssektor verändern - Teil 2
 
Vortrag Generation Online - Dr. Katja Bett
Vortrag Generation Online - Dr. Katja BettVortrag Generation Online - Dr. Katja Bett
Vortrag Generation Online - Dr. Katja Bett
 
Keynote: Aktuelle Web-Trends - Bernd Völcker
Keynote: Aktuelle Web-Trends - Bernd VölckerKeynote: Aktuelle Web-Trends - Bernd Völcker
Keynote: Aktuelle Web-Trends - Bernd Völcker
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)
 
Social Media - vorübergehender Hype oder Chance für den Mittelstand?
Social Media - vorübergehender Hype oder Chance für den Mittelstand?Social Media - vorübergehender Hype oder Chance für den Mittelstand?
Social Media - vorübergehender Hype oder Chance für den Mittelstand?
 
MOOCs als Anwendungsfall in sozialen Intranets?
MOOCs als Anwendungsfall in sozialen Intranets?MOOCs als Anwendungsfall in sozialen Intranets?
MOOCs als Anwendungsfall in sozialen Intranets?
 
Facebook-Google+ 2012
Facebook-Google+ 2012Facebook-Google+ 2012
Facebook-Google+ 2012
 
Social Media für Gründer und KMU
Social Media für Gründer und KMUSocial Media für Gründer und KMU
Social Media für Gründer und KMU
 
Social Media für Gründer und KMU
Social Media für Gründer und KMUSocial Media für Gründer und KMU
Social Media für Gründer und KMU
 
Keine Angst vor Social Media
Keine Angst vor Social MediaKeine Angst vor Social Media
Keine Angst vor Social Media
 
Arbeitskreis Personal agenda11-12
Arbeitskreis Personal agenda11-12Arbeitskreis Personal agenda11-12
Arbeitskreis Personal agenda11-12
 
Arbeitskreis Personal Agenda11-12
Arbeitskreis Personal Agenda11-12Arbeitskreis Personal Agenda11-12
Arbeitskreis Personal Agenda11-12
 
IDUG_RheinRuhr #5 Düsseldorf (Was gibt's neues, Gute Dokumente brauchen wir)
IDUG_RheinRuhr #5 Düsseldorf (Was gibt's neues, Gute Dokumente brauchen wir)IDUG_RheinRuhr #5 Düsseldorf (Was gibt's neues, Gute Dokumente brauchen wir)
IDUG_RheinRuhr #5 Düsseldorf (Was gibt's neues, Gute Dokumente brauchen wir)
 
Mediencampus Website Grobkonzept
Mediencampus Website GrobkonzeptMediencampus Website Grobkonzept
Mediencampus Website Grobkonzept
 
Outsourcing bei komplexen Web-Projekten
Outsourcing bei komplexen Web-ProjektenOutsourcing bei komplexen Web-Projekten
Outsourcing bei komplexen Web-Projekten
 
B2B im Social Web
B2B im Social WebB2B im Social Web
B2B im Social Web
 
Social Media Instrumente
Social Media Instrumente Social Media Instrumente
Social Media Instrumente
 
"Der Übergang zur Webgesellschaft"
"Der Übergang zur Webgesellschaft""Der Übergang zur Webgesellschaft"
"Der Übergang zur Webgesellschaft"
 
Arbeiten 4.0 work like a network
Arbeiten 4.0   work like a networkArbeiten 4.0   work like a network
Arbeiten 4.0 work like a network
 

Mehr von 1560media

Mobile applications
Mobile applicationsMobile applications
Mobile applications1560media
 
Referat bloggen
Referat bloggenReferat bloggen
Referat bloggen1560media
 
Website Konzeption
Website KonzeptionWebsite Konzeption
Website Konzeption1560media
 
Social media 111129
Social media 111129Social media 111129
Social media 1111291560media
 
Suchmaschinenmarketing
SuchmaschinenmarketingSuchmaschinenmarketing
Suchmaschinenmarketing
1560media
 

Mehr von 1560media (7)

Mobile applications
Mobile applicationsMobile applications
Mobile applications
 
Referat bloggen
Referat bloggenReferat bloggen
Referat bloggen
 
Agof
AgofAgof
Agof
 
Website Konzeption
Website KonzeptionWebsite Konzeption
Website Konzeption
 
E commerce
E commerceE commerce
E commerce
 
Social media 111129
Social media 111129Social media 111129
Social media 111129
 
Suchmaschinenmarketing
SuchmaschinenmarketingSuchmaschinenmarketing
Suchmaschinenmarketing
 

Webdesign

  • 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