Webdesign

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

1

Web - Design

Neue Medien - Internet // Prof. LehningIris Hachtroudian & Alexandra Günzel

Referat // 20.12.2011


2

Inhaltsverzeichnis:

1. Klassisch1.1. Begriffsdefinition1.2. WichtigeFragen1.3. AufgabendesDesigns1.4. CharakteristischeBesonderheiten1.5. Orienterung1.6. Designelemente

2. Modern2.1. Anforderungen

3. Awards3.1. Webby3.2. FWA

4. Trends 2012

5. The good and the not so good ?

6. Agenturen


3

LexikondefinitionvonDesign: Entwurf, Gestaltung und Formgebung eines Gegenstands.

Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold

Begriffsdefinition


4

»Gutes Design bedeutet relevante Information.«

RogerBlack

DesignistmehralsdieästhetischeErscheinungsformderDinge.

»Form follows function.« LouisSullivan


Begriffsdefinition


5

Webdesign:

DerBegriffWebdesignreichtvonderErarbeitungsowiederUmsetzungderInformationsstruktur,überdasgrafischeDesignbishinzurfunktionierendenUmsetzungderWebsite.


Begriffsdefinition


6

a WebdesignisteineinhaltszentrierteTätigkeit

a InhaltundInteraktionhabenVorrangvorFarbeundForm.


Begriffsdefinition


7

Die Fragen die über allem stehen:

a Fürwengestalteich?

a WelchesProduktverkaufeich?


Wichtige Fragen


8

EineSeiteistaufdenerstenBlickimmer » ... die Komposition von Form und Farbe...« aufdenzweitenBlickwerden » ... spezifische Informationen aufgenommen...«PatrickLynch,SarahHorton.


Aufgaben des Designs


9

Aufgabe des Designs:

a DenUserfürdieSeiteinteressierena DenUserdurchdieSeitezuführena DiewichtigeStellenhervorzuhebena DenInhaltlogischzuordnena Dasbedeutet:DesignisteineFormvisuellen Informationsmanagements


Aufgaben des Designs


10

Zwei charakteristische Besonderheiten des Webdesigns:

a AspektderUnvorhersehbarkeitdurchunterschiedliche Browserversionen a NichtlinearerAufbau


Charakteristische Besonderheiten


11

»Die Suche nach Informationen in Web-Sites ist eine sehr frustrierende Erfahrung«

FaziteinerStudiezurWeb-Nutzung(Spooletal.1999)


Orienterung


12

Orientierungslosigkeit verunsichert!

a WobefindeichmichimMoment?a WieistdieStruktur?a Wobinichschonüberallgewesen?a Wasgibteshieralles?a Habeichallesgesehen?a WosindfürmichrelevanteInformationen?a Binichschnellerfolgreich?a MachtesSpaßoderistesmühsam?


Orienterung


13

Layout-Elemente HTML:


Orienterung


14

Die Navigation sagt uns:

a WohinichalsNutzergehenkann.

a Wieichdorthinkomme.

a Wieichwiederzurückkomme.


Orienterung


15

Designelemente:

a Navigationselemente

a Orientierungselemente

a Informationslemente

a Inhaltselemente

a Interaktionselemente

a Motivationselemente

a Schmuckelemente


Designelemente


16

Designelemente:

a Farben:

DieFarbgebungsollteauf3-8FarbenaufeinerSeite begrenztsein. DieseFarbensolltensichaufeinerSeitelogischwiederholen, umdemAugeRuheunddemNutzerFührungzugeben.

a Bilder&Grafiken:

»BildersindschnelleSchüsseinsGehirn.«WernerKroeber-Riel Die3FunktionenvonBildern&Grafiken:

1.Veranschaulichung 2.Strukturierung 3.Dekoration


Designelemente


17

Designelemente:

a Typografie DieverwendeteSchrift DieSchriftgröße Schrift-undSeitenfarbe DieBuchstaben-undWortzwischenräume DieZeilenlänge DerZeilenabstand LängevonTextblöcken Silbentrennung


Designelemente


18

Designelemente/Wahrnehmungsprinzipien:


Designelemente


19

Designelemente/Wahrnehmungsprinzipien:


Designelemente


20

»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.«NormanDonald


Designelemente


21

Moderne Anforderungen:

Barrierefreiheit:

a MenschenmitundohneBehinderungen

a TechnischeEinschränkungen(TextbrowseroderPDA)

a AltersbedingtenEinschränkungen(Sehschwächen)

a Webcrawler


Anforderungen


22

Grundlegende Techniken um Barrieren zu verringern:

a Korrekter Einsatz von Webstandards (gültigesHTML/XHTML)

a Trennung von Inhalt (Text,Bilderusw.) und Layout durch CSS (CascadingStyleSheets)

KompromissebeimDesignsindnichtnötig


Anforderungen


23

Usability:

a »SuchenichtnachFehlern.SuchenachLösungen.«HenryFordI.


Anforderungen


24

Teilnehmen:

a www.aidsquilt.org

a www.johnnycashproject.com

a www.thewildernessdowntown.com


Anforderungen

http://www.radicalmedia.com/Design__and__Digital/The-Johnny-Cash-Project/Digital/#/5216/

http://www.thewildernessdowntown.com


25

Webby Awards:

DieWebbyAwardswerdeneinmalimJahrvonder„International

AcademyoftheDigitalArtsandSciences“vergebenundgeltenals

einerderwichtigstenPreiseimOnline-Bereich.

AusgezeichnetwerdendiebestenArbeiteninvierHaupt-undüber

100Unterkategorien–voninteraktiverWerbungüberWebsitesbis

hinzuOnline-FilmenundVideos.DarüberhinaushabenTeilnehmer

dieGelegenheit,den„People’sVoiceAward“zugewinnen:eine

Auszeichnung,dienichtvonderAward-Jury,sondernvomPublikum

vergebenwird.

Est.1996


Webby

http://www.webbyawards.com/


26

FWA (Favourite Website Awards):

ÄhnlichwiedieWebbiesvergibtdieFWAPlatzierungenfürdie

bestenWebsites.BeiderFWAgibtesdieSOTD(Siteoftheday),

SOTM(Siteofthemonth)undamEndedesJahreswerden

ausden12SOTMGewinnernderSOTYGewinnergewählt.

AndersalsbeimWebbiewählenhiernurdieBesucherder

FWA-SeitedenGewinner.

EsgehtumCuttingEdgeTechnologievereintmitinspirierenden

zukunftsweisendenIdeen.

Est.2000


FWA

http://www.thefwa.com/


27

Trends 2012:

1. ResponsiveWebDesign/Mobilitystuffandnonsense.co.uk

2. Navigation/netontwerp.com

3. Circles/dotmick.com

4. FocusonSimplicity/girlfriendnyc.com

5. Multi-ColumnMenus/bestmadeco.com

6. jQuery/CSS3/HTML5Animation/jquery.com

7. Oversizefooter/header/frogdesign.com, mokshastudio.com

8. Typography/CustomFontFaces/google.com/webfonts

9. Infographics/inspiredm.com

10.QRCodeswillexplode


Trends 2012

http://stuffandnonsense.co.uk/projects/320andup/

http://www.netontwerp.com/index_en.htm#work

http://www.hidden-heroes.net/

http://dotmick.com/

http://www.girlfriendnyc.com/#

http://www.bestmadeco.com/

http://jquery.com/

http://mokshastudio.com/

http://www.frogdesign.com/

http://www.google.com/webfonts#ChoosePlace:select

http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/

http://t3n.de/news/smartphones-tod-feierabend-infografik-325321/socialcast_smartphone2-w595/

http://www.qrcode-generator.de/


28

:-)

katamari.co.jpmoma.org/bauhausthinkblue.jpcamelactive.desony.com

:-(

spd.dejackwolfskin.combahn.demicrosoft.com


The good and the not so good ?

http://katamari.co.jp/

http://www.moma.org/interactives/exhibitions/2009/bauhaus/

http://www.camelactive.de/

http://www.sony.com/index.php

http://www.spd.de/aktuelles/

http://www.bahn.de/p/view/index.shtml

http://www.microsoft.com/de-de/default.aspx

http://thinkblue.jp/

http://jackwolfskin.com


29

Agenturen:

www.rokkan.comwww.frogdesign.com//designmind.frogdesign.comwww.radicalmedia.comwww.katamari.co.jpwww.les84.comwww.2gh.de

Web Design // Klassisch // Modern // Awards // Trends 2012 // Hot vs. Cold // Agenturen

Agenturen

http://rokkan.com/

http://www.frogdesign.com/

http://www.radicalmedia.com/

http://katamari.co.jp

http://www.les84.com/

http://www.2gh.de/adventskalender/tag20

http://www.monet2010.com/

http://www.hidden-heroes.net/


30

Quellen: Hoffmann,Manuela(2008):ModernesWebdesign.Gestaltungsprinzipien,Webstandards,Praxis.Bonn:GalileoDesign

Beier,Markus;vonGizyckiVittoria(2002):Usability.NutzerfreundlichesWeb-DesignBerlin,Heildeberg:SpringerVerlag

Thissen,Frank(2001):Screen-Design-Handbuch.EffektivinformierenundkommunizierenmitMultimedia.2.Auflage.Berlin,Heildeberg:SpringerVerlag

Seibert,Björn;HoffmannManuela(2008):ProfessionellesWebdesignmit(X)HTMLundCSSBonn:GalileoPress

Wardag,Jana(2006):DesignundUsability.GegenüberstellungzweierGestantungsansätzeimWebdesign.Saarbrücken:VDMVerlagDr.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/

Webdesign

Documents

Transcript of Webdesign