SlideShare ist ein Scribd-Unternehmen logo
Web Design
/ Inhalte, Interfaces und Interaktion /




                                          - Björn Wilmsmann -
Was ist Design?
• Planvoller Entwurf
• Design ist eine Methode der
  Problemlösung
• Design ist eine Denkweise
• Design orientiert sich am Menschen
• Design orientiert sich an
  Rahmenbedingungen
Dieter Rams
http://ikono.org/2013/01/dieter-rams-braun-design-collection-for-sale/
http://weandthecolor.com/braun-old-minimalistic-industrial-design-by-dieter-rams/10299
http://www.paulhazel.com/2012/02/05/dieter-rams/
http://huminimal.com/442/
10 Principles of Good
       Design
Gutes Design ist
   innovativ
Gutes Design macht ein
  Produkt brauchbar
Gutes Design ist
  ästhetisch
Gutes Design macht ein
 Produkt verständlich
Gutes Design ist
 unaufdringlich
Gutes Design ist
    ehrlich
Gutes Design ist
   langlebig
Gutes Design ist
konsequent bis ins
  letzte Detail
Gutes Design ist
umweltfreundlich
Gutes Design ist so
 wenig Design wie
     möglich
Industriedesign

• Klassisches Produktdesign
• Design von materiellen Produkten
• Industrie- und Massenprodukte
• Produktlinien
• Eingebettet im Entwicklungsprozess
Grafikdesign

• Entwurf und Gestaltung von visuellen
  Inhalten
• Illustrationen
• Bilder
• Typografie
Interfacedesign

• Gestaltung von Benutzeroberflächen
• Mensch-Maschine Schnittstellen
• Nutzererwartung
• Betrachtet Ziele und Aufgaben des Nutzers
  in Bezug auf ein Produkt
Interaktionsdesign

• Unterstützt Ziele des Nutzers
• Unterbrechungsfreie, einfache und
  zielgerichtete Interaktion zwischen Nutzer
  und Produkt
• Kriterien: Stabilität, Nützlichkeit, Ästhetik
Affordanz




http://blogs.technet.com/b/ewan/archive/2007/04/04/the-design-of-everyday-things.aspx
http://www.mobypicture.com/user/ToiVillar/view/10818690
http://www.yourpr.de/2009/11/17/skurriles-zum-welttoilettentag-den-19-november-2009-62118622.html
User Experience
         Design
• Nutzererlebnis
• Wahrnehmung des Nutzers
• Reaktion des Nutzers auf Gestaltung und
  Funktionalität
• Abhängig von Vorkenntnissen und Erfahrung
Was ist Web Design?
Bedeutung

• Web Design ist allgegenwärtig
• Digitale Inhalte
• Nachrichten
• Browser-basierte Anwendungen
Rahmenbedingungen

• Browser
• Betriebssystem
• Bildschirmauflösung
• Installierte Schriftarten
• Bandbreite
Inhalte

• Nachrichten
• Längere Texte
• Bilder
• Videos
Typografie
Schriftsatz



 http://freelancefolder.com
Schriftarten

• Serifen: Times New Roman
• Serifenlos / Sans Serif: Arial, Helvetica
• Festbreite: Courier
The quick brown fox jumps over the lazy dog.
Volkswagen. Das Auto.
Ein kleine Typografie
        Demo
Web Anwendungen
• Interaktion
• Erwartungen und Ziele des Nutzers
• Ergonomie
 • Affordanz
 • Bedienelemente leicht erreichbar
 • kurze Wege
Fokus




http://www.funkydigital.co/website/conversion-rat/usability
Beispiel: Google Mail
Beispiel: Pinterest
Mobile Web Design
Rahmenbedingungen

• Formfaktor / Bildschirmgröße
• Eingabemethoden
• Bandbreite
• Speicherplatz, Prozessorleistung
• Batterielaufzeit
Responsive Design

• Geräte- und Bildschirmgrößen
• Fließende Raster
• Proportionale Größen
Methoden

• Design Patterns - Entwurfsmuster
• Feedback
• Kontext
• Fokus
Barrierefreies Design
Barrierefreiheit

• Visueller Kontrast
• Bedienbarkeit ohne Maus
• Anpassung an Ausgabegeräte
• Screen Reader
„Design is not just what it looks like
and feels like. Design is how it works.“
„Design ist nicht nur, wie etwas
aussieht und sich anfühlt. Design ist,
wie es funktioniert“
              - Steve Jobs -

Weitere ähnliche Inhalte

Was ist angesagt?

SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016
André Scharf
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Mario Fink
 
Agile SEO - webinale 2015
Agile SEO - webinale 2015Agile SEO - webinale 2015
Agile SEO - webinale 2015
André Scharf
 
Uability und User Experience - Ein bisschen darüber geplaudert ...
Uability und User Experience - Ein bisschen darüber geplaudert ...Uability und User Experience - Ein bisschen darüber geplaudert ...
Uability und User Experience - Ein bisschen darüber geplaudert ...
Maria Rauschenberger
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
André Scharf
 
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
Peter Rozek
 
Product tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux shortProduct tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux short
Inken Petersen
 
Webd projektp-erstellen.-gianna
Webd projektp-erstellen.-giannaWebd projektp-erstellen.-gianna
Webd projektp-erstellen.-gianna
Gianna-B
 

Was ist angesagt? (9)

SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Agile SEO - webinale 2015
Agile SEO - webinale 2015Agile SEO - webinale 2015
Agile SEO - webinale 2015
 
Uability und User Experience - Ein bisschen darüber geplaudert ...
Uability und User Experience - Ein bisschen darüber geplaudert ...Uability und User Experience - Ein bisschen darüber geplaudert ...
Uability und User Experience - Ein bisschen darüber geplaudert ...
 
SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Product tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux shortProduct tank karlsruhe 2021 modern ux short
Product tank karlsruhe 2021 modern ux short
 
Webd projektp-erstellen.-gianna
Webd projektp-erstellen.-giannaWebd projektp-erstellen.-gianna
Webd projektp-erstellen.-gianna
 

Ähnlich wie Web Design - Inhalte, Interfaces und Interaktion

Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Stephan Hamberger
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
uxHH
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
Nina Rebele
 
Service Design: Dienstleistungen gestalten / IDZ Design & Company
Service Design: Dienstleistungen gestalten / IDZ Design & CompanyService Design: Dienstleistungen gestalten / IDZ Design & Company
Service Design: Dienstleistungen gestalten / IDZ Design & Company
Service Design Berlin
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
Oliver Annen
 
design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
Peter Rozek
 
Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!
Lukas Fischer
 
Gedanken zum Thema Customer Experience
Gedanken zum Thema Customer ExperienceGedanken zum Thema Customer Experience
Gedanken zum Thema Customer Experience
Axel Hermes
 
Designmanagement - systematisch kreativ, 2013
Designmanagement - systematisch kreativ, 2013Designmanagement - systematisch kreativ, 2013
Designmanagement - systematisch kreativ, 2013
Zwetana Penova
 
Responsive design
Responsive designResponsive design
Responsive design
Thomas Bähr
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
SteffenHeim
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
Peter Rozek
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
christianschweinhardt
 
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Robert Weller
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
eResult_GmbH
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
Michael Oeser
 
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold KegebeinFMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
Verein FM Konferenz
 
Mass customization & Produktdarstellung
Mass customization & ProduktdarstellungMass customization & Produktdarstellung
Mass customization & Produktdarstellung
Elaspix
 

Ähnlich wie Web Design - Inhalte, Interfaces und Interaktion (20)

Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
 
UX aus Sicht eines Concepters
UX aus Sicht eines ConceptersUX aus Sicht eines Concepters
UX aus Sicht eines Concepters
 
Usability Engineering
Usability  EngineeringUsability  Engineering
Usability Engineering
 
Service Design: Dienstleistungen gestalten / IDZ Design & Company
Service Design: Dienstleistungen gestalten / IDZ Design & CompanyService Design: Dienstleistungen gestalten / IDZ Design & Company
Service Design: Dienstleistungen gestalten / IDZ Design & Company
 
Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!
 
Gedanken zum Thema Customer Experience
Gedanken zum Thema Customer ExperienceGedanken zum Thema Customer Experience
Gedanken zum Thema Customer Experience
 
Designmanagement - systematisch kreativ, 2013
Designmanagement - systematisch kreativ, 2013Designmanagement - systematisch kreativ, 2013
Designmanagement - systematisch kreativ, 2013
 
Responsive design
Responsive designResponsive design
Responsive design
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
 
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold KegebeinFMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein
 
Mass customization & Produktdarstellung
Mass customization & ProduktdarstellungMass customization & Produktdarstellung
Mass customization & Produktdarstellung
 

Web Design - Inhalte, Interfaces und Interaktion