Webdesign
Upcoming SlideShare
Loading in...5
×
 

Webdesign

on

  • 1,972 views

 

Statistics

Views

Total Views
1,972
Views on SlideShare
1,637
Embed Views
335

Actions

Likes
0
Downloads
11
Comments
0

1 Embed 335

http://fuenfzehnsechzig.wordpress.com 335

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webdesign Webdesign Presentation Transcript

  • Web - Design Neue Medien - Internet // Prof. Lehning Iris Hachtroudian & Alexandra Günzel Referat // 20.12.2011Neue 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. AgenturenNeue 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. ColdBegriffsdefinition 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. ColdBegriffsdefinition »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. ColdBegriffsdefinition 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. ColdBegriffsdefinition 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. ColdWichtige 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. ColdAufgaben 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. ColdAufgaben 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. ColdCharakteristische 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. ColdOrienterung »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. ColdOrienterung 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. ColdOrienterung 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. ColdOrienterung 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. ColdDesignelemente 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. ColdDesignelemente 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. ColdDesignelemente 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. ColdDesignelemente 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. ColdDesignelemente 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. ColdDesignelemente »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. ColdAnforderungen 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. ColdAnforderungen 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. ColdAnforderungen 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. ColdAnforderungen 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. ColdWebby 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. ColdFWA 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. ColdTrends 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. ColdThe 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 // AgenturenAgenturen 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