SlideShare uma empresa Scribd logo
1 de 52
Baixar para ler offline
für Nicht-Designer, Normalos
und Entwickler
Webdesign
Gestaltungs-
grundlagen
@danielawibbeke
Daniela Wibbeke
@danielawibbeke
Was ist Design?
Design ist der Plan, Elemente so
anzuordnen, dass man eine bestimmte
Aufgabe durchführen kann.
Charles Eames (Designer und Architekt)
Design bedeutet
Informationen zu strukturieren
und zu gestalten
Modernes
Webdesigns
1
Prinzipien des modernen Webdesigns
napster.com
Februar 2001
Prinzipien des modernen Webdesigns
napster.com
November 2015
Prinzipien des modernen Webdesigns
Entwicklung des Webdesigns
•	 Nutzer rückt mehr in Mittelpunkt (User Experience)
•	 Veränderungen von Nutzungsverhalten
•	 Konzeption nimmt größere Rolle ein
Prinzipien des modernen Webdesigns
Gute Webdesign:
•	 besteht aus semantischem Code
•	 wird schnell geladen
•	 ist ästhetisch
•	 ist auf verschiedensten Bildschirmenauflösungen	
und Endgeräten gut bedienbar
•	 hat einen Wiedererkennungswert
Prinzipien des modernen Webdesigns
Design
TechnikInhalte
Basis ist
konzeption
Gestaltungs-
grundlagen
2
Einfachheit
Einfachheit
•	 Einfachheit = benutzerfreundliches Design
•	 jedes Element hat eine Bedeutung im Design
•	 klare visuelle Hierarchien und Einheit
Fazit: wenn alle Elemente Aufmerksamkeit erregen 	
ist schlussendlich nichts betont
Einfachheit
designerinaction.de
http://www.designerinaction.
de/
Weißraum
Weißraum
•	 Weißraum schafft Abstand zwischen Elementen
•	 Herstellung visueller Hierarchie
Aufgabe: Elemente in den Vordergrund rücken und	
Blick des Users leiten
Weißraum
medium.com
Weißraum
Ausrichtung
und Raster
Ausrichtung und Raster
•	 Raster hilft Elemente zu strukturieren und zu gliedern
•	 Hilfestellung bei der Platzierung von Elementen
•	 gibt User gutes Gefühl von Orientierung und	
Wiedererkennung
•	 hilft Inhalte in eine Hierarchie zu bringen und Überblick	
zu verschaffen
Ausrichtung und Raster
polyera.com
Ausrichtung und Raster
Ausrichtung und Raster
ableton.com
Ausrichtung und Raster
Ausrichtung und Raster
Farben
Farben
Bedeutung von Farben
•	 Farbgebung beeinflusst die Atomsphäre einer Website
•	 Verbindung mit Unternehmen und Marke
•	 Wichtig: Anzahl von verwendeten Farben auf	
wenige Farben begrenzen werden
Farben
Komplementäres Farbschema
•	 enthält Farben die im Farbkreis	
gegenüber sind
•	 hoher Kontrast zwischen den Farben
Farben
Farben
jetblue.com
Farben
Monochromes Farbschema
•	 enthält nur eine Grundfarbe und	
beliebige Menge Abstufungen
•	 Abstufungen von Sättigung	
und Helligkeit
Farben
Sättigung
Helligkeit
Farben
fanta.de
Farben
Farbschemata erstellen
•	 Farben aus dem Farbkreis wählen und	
Nuancen der Farben definieren
•	 Bilder als Vorlage nutzen
•	 Farbtools zur Hilfe nehmen
Farben
Hilfsmittel
•	 Color Scheme Designer
•	 Adobe Color CC (Kuler)
•	 Google Material Design
Typografie
Typografie
Web Design ist zu
Oliver Reichenstein
95%
Typografie
Typografie
•	 Nie mehr als zwei Schriftarten
•	 Typografische Hierarchie nutzen um	
eine visuelle Hierarchie herzustellen
•	 Visuelle Hierarchie = Schriftstärke + Größe + Farbe
Typografie
Typografie
Typografie
Schriftgröße
•	 Fließtext: 14 - 16px
•	 Hauptüberschriften H1: 180% - 200% des Fließtextes
•	 Sekundäre Überschriften: 130%–150% des Fließtextes
Typografie
Zeilenabstand
Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. Damit das Layout nun
nicht nackt im Raume steht und sich klein und leer
vorkommt, springe ich ein: der Blindtext. Genau zu
diesem Zwecke erschaffen, immer im Schatten mei-
nes großen Bruders »Lorem Ipsum«, freue ich mich
jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse
est percipi - Sein ist wahrgenommen werden. Und
weil Sie nun schon die Güte haben, mich ein paar
weitere Sätze lang zu begleiten, möchte ich diese Ge-
legenheit nutzen, Ihnen nicht nur als Lückenfüller
zu dienen, sondern auf etwas hinzuweisen, das es
ebenso verdient wahrgenommen zu werden: Web-
standards nämlich. Sehen Sie, Webstandards sind
das Regelwerk, auf dem Webseiten aufbauen.
Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. Damit das Layout nun
nicht nackt im Raume steht und sich klein und leer
vorkommt, springe ich ein: der Blindtext. Genau zu
diesem Zwecke erschaffen, immer im Schatten mei-
nes großen Bruders »Lorem Ipsum«, freue ich mich
jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse
est percipi - Sein ist wahrgenommen werden. Und
weil Sie nun schon die Güte haben, mich ein paar
weitere Sätze lang zu begleiten, möchte ich diese Ge-
legenheit nutzen, Ihnen nicht nur als Lückenfüller
zu dienen, sondern auf etwas hinzuweisen, das es
ebenso verdient wahrgenommen zu werden: Web-
standards nämlich. Sehen Sie, Webstandards sind
das Regelwerk, auf dem Webseiten aufbauen.
zu groß
Typografie
zu klein
Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. Damit das Layout nun
nicht nackt im Raume steht und sich klein und leer
vorkommt, springe ich ein: der Blindtext. Genau zu
diesem Zwecke erschaffen, immer im Schatten mei-
nes großen Bruders »Lorem Ipsum«, freue ich mich
jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse
est percipi - Sein ist wahrgenommen werden. Und
weil Sie nun schon die Güte haben, mich ein paar
weitere Sätze lang zu begleiten, möchte ich diese Ge-
legenheit nutzen, Ihnen nicht nur als Lückenfüller
zu dienen, sondern auf etwas hinzuweisen, das es
ebenso verdient wahrgenommen zu werden: Web-
standards nämlich. Sehen Sie, Webstandards sind
das Regelwerk, auf dem Webseiten aufbauen.
Typografie
30%- 40%
der Schriftgröße
Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. Damit das Layout nun
nicht nackt im Raume steht und sich klein und leer
vorkommt, springe ich ein: der Blindtext. Genau zu
diesem Zwecke erschaffen, immer im Schatten mei-
nes großen Bruders »Lorem Ipsum«, freue ich mich
jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse
est percipi - Sein ist wahrgenommen werden. Und
weil Sie nun schon die Güte haben, mich ein paar
weitere Sätze lang zu begleiten, möchte ich diese Ge-
legenheit nutzen, Ihnen nicht nur als Lückenfüller
zu dienen, sondern auf etwas hinzuweisen, das es
ebenso verdient wahrgenommen zu werden: Web-
standards nämlich. Sehen Sie, Webstandards sind
das Regelwerk, auf dem Webseiten aufbauen.
Typografie
Überall dieselbe alte Leier. Das Layout ist fertig, der
Text lässt auf sich warten. Damit das Layout nun
nicht nackt im Raume steht und sich klein und leer
vorkommt, springe ich ein: der Blindtext. Genau zu
diesem Zwecke erschaffen, immer im Schatten mei-
nes großen Bruders »Lorem Ipsum«, freue ich mich
jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse
est percipi - Sein ist wahrgenommen werden. Und
weil Sie nun schon die Güte haben, mich ein paar
weitere Sätze lang zu begleiten, möchte ich diese Ge-
legenheit nutzen, Ihnen nicht nur als Lückenfüller
zu dienen, sondern auf etwas hinzuweisen, das es
ebenso verdient wahrgenommen zu werden: Web-
standards nämlich. Sehen Sie, Webstandards sind
das Regelwerk, auf dem Webseiten aufbauen.
Zeilenlänge
Typografie
Überall dieselbe alte Leier.
Das Layout ist fertig, der Text
lässt auf sich warten. Damit
das Layout nun nicht nackt
im Raume steht und sich klein
und leer vorkommt, springe
ich ein: der Blindtext. Genau
zu diesem Zwecke erschaf-
fen, immer im Schatten mei-
nes großen Bruders »Lorem
Ipsum«, freue ich mich jedes
Mal, wenn Sie ein paar Zeilen
lesen.
zu kurz
Typografie
zu lang
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im
Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen,
immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.
Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere
Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf
etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstan-
dards sind das Regelwerk, auf dem Webseiten aufbauen.
Typografie
Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf
sich warten. Damit das Layout nun nicht nackt im Raume steht und
sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau
zu diesem Zwecke erschaffen, immer im Schatten meines großen
Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar
Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden.
Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze
lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht
nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das
es ebenso verdient wahrgenommen zu werden: Webstandards näm-
lich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Websei-
ten aufbauen.
70 bis 90
Anschläge
Typografie
Hilfsmittel
•	 typegenius.com
•	 google.com/fonts
Danke für ’s
Zuhören!

Mais conteúdo relacionado

Mais procurados

Product listing presentation
Product listing presentationProduct listing presentation
Product listing presentationjoneldeleon2
 
Pipeline based deployments on Jenkins
Pipeline based deployments  on JenkinsPipeline based deployments  on Jenkins
Pipeline based deployments on JenkinsKnoldus Inc.
 
Introduction to DevOps
Introduction to DevOpsIntroduction to DevOps
Introduction to DevOpsYosef Tavin
 
Vite, Workshop Slides (Frontend Masters)
Vite, Workshop Slides (Frontend Masters)Vite, Workshop Slides (Frontend Masters)
Vite, Workshop Slides (Frontend Masters)Steve Kinney
 
Content Writing Tips
Content Writing TipsContent Writing Tips
Content Writing TipsRed Dot Geek
 
Technical SEO Presentation
Technical SEO PresentationTechnical SEO Presentation
Technical SEO PresentationJoe Robison
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the InternetMike Crabb
 
Scaling DevSecOps Culture for Enterprise
Scaling DevSecOps Culture for EnterpriseScaling DevSecOps Culture for Enterprise
Scaling DevSecOps Culture for EnterpriseOpsta
 
SEMrush toolbox 9: SEO content template & SEO writing assistant - April 2019
SEMrush toolbox 9: SEO content template & SEO writing assistant - April 2019SEMrush toolbox 9: SEO content template & SEO writing assistant - April 2019
SEMrush toolbox 9: SEO content template & SEO writing assistant - April 2019Fabrizio Ballarini
 
1-01: Introduction To Web Development
1-01: Introduction To  Web  Development1-01: Introduction To  Web  Development
1-01: Introduction To Web Developmentapnwebdev
 
Automated testing using Selenium & NUnit
Automated testing using Selenium & NUnitAutomated testing using Selenium & NUnit
Automated testing using Selenium & NUnitAlfred Jett Grandeza
 
Liquiditätsplanung für Unternehmer
Liquiditätsplanung für UnternehmerLiquiditätsplanung für Unternehmer
Liquiditätsplanung für UnternehmerJürgen Faè
 

Mais procurados (20)

Screaming Frog PPT
Screaming Frog PPTScreaming Frog PPT
Screaming Frog PPT
 
Selenium
SeleniumSelenium
Selenium
 
Web Development - Lecture 1
Web Development - Lecture 1Web Development - Lecture 1
Web Development - Lecture 1
 
Product listing presentation
Product listing presentationProduct listing presentation
Product listing presentation
 
Atomic Habits
Atomic HabitsAtomic Habits
Atomic Habits
 
17 YouTube SEO Best Practices
17 YouTube SEO Best Practices17 YouTube SEO Best Practices
17 YouTube SEO Best Practices
 
Selenium
SeleniumSelenium
Selenium
 
Pipeline based deployments on Jenkins
Pipeline based deployments  on JenkinsPipeline based deployments  on Jenkins
Pipeline based deployments on Jenkins
 
Introduction to DevOps
Introduction to DevOpsIntroduction to DevOps
Introduction to DevOps
 
Introduction to blog
Introduction to blogIntroduction to blog
Introduction to blog
 
Vite, Workshop Slides (Frontend Masters)
Vite, Workshop Slides (Frontend Masters)Vite, Workshop Slides (Frontend Masters)
Vite, Workshop Slides (Frontend Masters)
 
Content Writing Tips
Content Writing TipsContent Writing Tips
Content Writing Tips
 
Technical SEO Presentation
Technical SEO PresentationTechnical SEO Presentation
Technical SEO Presentation
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the Internet
 
Scaling DevSecOps Culture for Enterprise
Scaling DevSecOps Culture for EnterpriseScaling DevSecOps Culture for Enterprise
Scaling DevSecOps Culture for Enterprise
 
SEMrush toolbox 9: SEO content template & SEO writing assistant - April 2019
SEMrush toolbox 9: SEO content template & SEO writing assistant - April 2019SEMrush toolbox 9: SEO content template & SEO writing assistant - April 2019
SEMrush toolbox 9: SEO content template & SEO writing assistant - April 2019
 
1-01: Introduction To Web Development
1-01: Introduction To  Web  Development1-01: Introduction To  Web  Development
1-01: Introduction To Web Development
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Design
 
Automated testing using Selenium & NUnit
Automated testing using Selenium & NUnitAutomated testing using Selenium & NUnit
Automated testing using Selenium & NUnit
 
Liquiditätsplanung für Unternehmer
Liquiditätsplanung für UnternehmerLiquiditätsplanung für Unternehmer
Liquiditätsplanung für Unternehmer
 

Destaque

Grundlagen des Interaktionsdesigns: Human-Computer-Interaction
Grundlagen des Interaktionsdesigns: Human-Computer-InteractionGrundlagen des Interaktionsdesigns: Human-Computer-Interaction
Grundlagen des Interaktionsdesigns: Human-Computer-Interactionh1m
 
Web design and_html
Web design and_htmlWeb design and_html
Web design and_htmlSayed Ahmed
 
Problem of website structure discovery and quality valuation
Problem of website structure discovery and quality valuationProblem of website structure discovery and quality valuation
Problem of website structure discovery and quality valuationDmitrij Żatuchin
 
Material design Made Real
Material design Made RealMaterial design Made Real
Material design Made RealTally Barak
 
Customer development
Customer developmentCustomer development
Customer developmentstartupbisnis
 
Tugas praktikukm pemrograman c++
Tugas praktikukm  pemrograman c++Tugas praktikukm  pemrograman c++
Tugas praktikukm pemrograman c++Dendi Riadi
 
Bracket Busting: Predicting the College Basketball Tournament with Social Media
Bracket Busting: Predicting the College Basketball Tournament with Social MediaBracket Busting: Predicting the College Basketball Tournament with Social Media
Bracket Busting: Predicting the College Basketball Tournament with Social MediaMohamed Mahdy
 
Bahasa Pemrograman C++
Bahasa Pemrograman C++Bahasa Pemrograman C++
Bahasa Pemrograman C++Rangga Ananto
 
1st Portfolio Development Idea: Photographer's Portfolio Website Layout
1st Portfolio Development Idea: Photographer's Portfolio Website Layout1st Portfolio Development Idea: Photographer's Portfolio Website Layout
1st Portfolio Development Idea: Photographer's Portfolio Website LayoutQian Rong
 
Proyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadProyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadhestihariani
 
Pemrograman web dengan php my sql
Pemrograman web dengan php my sqlPemrograman web dengan php my sql
Pemrograman web dengan php my sqlHerry Mardiyanto
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepadSamsuri14
 
Web designp pt
Web designp ptWeb designp pt
Web designp ptBizzyb09
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web DesignKathy Gill
 

Destaque (20)

Grundlagen des Interaktionsdesigns: Human-Computer-Interaction
Grundlagen des Interaktionsdesigns: Human-Computer-InteractionGrundlagen des Interaktionsdesigns: Human-Computer-Interaction
Grundlagen des Interaktionsdesigns: Human-Computer-Interaction
 
Web design and_html
Web design and_htmlWeb design and_html
Web design and_html
 
Warum ich Geschichte studiere
Warum ich Geschichte studiereWarum ich Geschichte studiere
Warum ich Geschichte studiere
 
Problem of website structure discovery and quality valuation
Problem of website structure discovery and quality valuationProblem of website structure discovery and quality valuation
Problem of website structure discovery and quality valuation
 
Effective Website Structure
Effective Website StructureEffective Website Structure
Effective Website Structure
 
Material design Made Real
Material design Made RealMaterial design Made Real
Material design Made Real
 
Customer development
Customer developmentCustomer development
Customer development
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Tugas praktikukm pemrograman c++
Tugas praktikukm  pemrograman c++Tugas praktikukm  pemrograman c++
Tugas praktikukm pemrograman c++
 
Bracket Busting: Predicting the College Basketball Tournament with Social Media
Bracket Busting: Predicting the College Basketball Tournament with Social MediaBracket Busting: Predicting the College Basketball Tournament with Social Media
Bracket Busting: Predicting the College Basketball Tournament with Social Media
 
Foxpro
FoxproFoxpro
Foxpro
 
Bahasa Pemrograman C++
Bahasa Pemrograman C++Bahasa Pemrograman C++
Bahasa Pemrograman C++
 
1st Portfolio Development Idea: Photographer's Portfolio Website Layout
1st Portfolio Development Idea: Photographer's Portfolio Website Layout1st Portfolio Development Idea: Photographer's Portfolio Website Layout
1st Portfolio Development Idea: Photographer's Portfolio Website Layout
 
Proyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadProyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepad
 
Pemrograman web dengan php my sql
Pemrograman web dengan php my sqlPemrograman web dengan php my sql
Pemrograman web dengan php my sql
 
Go Material
Go MaterialGo Material
Go Material
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
Web designp pt
Web designp ptWeb designp pt
Web designp pt
 
Formularios En Visual Fox Pro
Formularios En Visual Fox ProFormularios En Visual Fox Pro
Formularios En Visual Fox Pro
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 

Semelhante a Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler

Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsHussein Morsy
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeWolf Brüning
 
Besser lesbare Blogartikel erstellen
Besser lesbare Blogartikel erstellenBesser lesbare Blogartikel erstellen
Besser lesbare Blogartikel erstellenDani Schenker
 
7 Tipps für das Korrekturlesen eigener Texte
7 Tipps für das Korrekturlesen eigener Texte7 Tipps für das Korrekturlesen eigener Texte
7 Tipps für das Korrekturlesen eigener TexteTextlove.de
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD
 
RoofTop Brains & BBQ: Ein Gästbuch für China
RoofTop Brains & BBQ: Ein Gästbuch für ChinaRoofTop Brains & BBQ: Ein Gästbuch für China
RoofTop Brains & BBQ: Ein Gästbuch für ChinaJohann-Peter Hartmann
 
Gastartikel sind tot - Teil 1 - Spam
Gastartikel sind tot - Teil 1 - SpamGastartikel sind tot - Teil 1 - Spam
Gastartikel sind tot - Teil 1 - SpamSergei Bojew
 
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
 
Gratis-Webinar Schreiben für das Internet - Eduvision Ausbildungen
Gratis-Webinar Schreiben für das Internet  - Eduvision AusbildungenGratis-Webinar Schreiben für das Internet  - Eduvision Ausbildungen
Gratis-Webinar Schreiben für das Internet - Eduvision AusbildungenEduvision Ausbildungen
 
Win At Live With JavaScript Patterns
Win At Live With JavaScript PatternsWin At Live With JavaScript Patterns
Win At Live With JavaScript PatternsPascal Precht
 
Mehr Gäste durch das Web
Mehr Gäste durch das WebMehr Gäste durch das Web
Mehr Gäste durch das WebAngelika Röck
 
Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014Rolf Mistelbacher
 
Search Engine Friendly Design
Search Engine Friendly DesignSearch Engine Friendly Design
Search Engine Friendly Designget traction GmbH
 
Webtexte, die gelesen werden
Webtexte, die gelesen werdenWebtexte, die gelesen werden
Webtexte, die gelesen werdenMonika Decurtins
 

Semelhante a Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler (19)

Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
 
XUG Muc 4: Word <> XML
XUG Muc 4: Word <> XMLXUG Muc 4: Word <> XML
XUG Muc 4: Word <> XML
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und Pflege
 
Web Typografie
Web TypografieWeb Typografie
Web Typografie
 
Besser lesbare Blogartikel erstellen
Besser lesbare Blogartikel erstellenBesser lesbare Blogartikel erstellen
Besser lesbare Blogartikel erstellen
 
7 Tipps für das Korrekturlesen eigener Texte
7 Tipps für das Korrekturlesen eigener Texte7 Tipps für das Korrekturlesen eigener Texte
7 Tipps für das Korrekturlesen eigener Texte
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
 
RoofTop Brains & BBQ: Ein Gästbuch für China
RoofTop Brains & BBQ: Ein Gästbuch für ChinaRoofTop Brains & BBQ: Ein Gästbuch für China
RoofTop Brains & BBQ: Ein Gästbuch für China
 
Gastartikel sind tot - Teil 1 - Spam
Gastartikel sind tot - Teil 1 - SpamGastartikel sind tot - Teil 1 - Spam
Gastartikel sind tot - Teil 1 - Spam
 
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
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
Gratis-Webinar Schreiben für das Internet - Eduvision Ausbildungen
Gratis-Webinar Schreiben für das Internet  - Eduvision AusbildungenGratis-Webinar Schreiben für das Internet  - Eduvision Ausbildungen
Gratis-Webinar Schreiben für das Internet - Eduvision Ausbildungen
 
Erste Hilfe Web Typografie
Erste Hilfe Web TypografieErste Hilfe Web Typografie
Erste Hilfe Web Typografie
 
Win At Live With JavaScript Patterns
Win At Live With JavaScript PatternsWin At Live With JavaScript Patterns
Win At Live With JavaScript Patterns
 
Mehr Gäste durch das Web
Mehr Gäste durch das WebMehr Gäste durch das Web
Mehr Gäste durch das Web
 
Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014Digital Storytelling Slides - Mediencamp Wien November 2014
Digital Storytelling Slides - Mediencamp Wien November 2014
 
Search Engine Friendly Design
Search Engine Friendly DesignSearch Engine Friendly Design
Search Engine Friendly Design
 
Webtexte, die gelesen werden
Webtexte, die gelesen werdenWebtexte, die gelesen werden
Webtexte, die gelesen werden
 
Saim Alkan: Texten im Internet
Saim Alkan: Texten im InternetSaim Alkan: Texten im Internet
Saim Alkan: Texten im Internet
 

Webdesign Gestaltungsgrundlagen für Nicht-Designer, Normales und Entwickler

  • 1. für Nicht-Designer, Normalos und Entwickler Webdesign Gestaltungs- grundlagen @danielawibbeke
  • 4. Design ist der Plan, Elemente so anzuordnen, dass man eine bestimmte Aufgabe durchführen kann. Charles Eames (Designer und Architekt)
  • 5. Design bedeutet Informationen zu strukturieren und zu gestalten
  • 7. Prinzipien des modernen Webdesigns napster.com Februar 2001
  • 8. Prinzipien des modernen Webdesigns napster.com November 2015
  • 9. Prinzipien des modernen Webdesigns Entwicklung des Webdesigns • Nutzer rückt mehr in Mittelpunkt (User Experience) • Veränderungen von Nutzungsverhalten • Konzeption nimmt größere Rolle ein
  • 10. Prinzipien des modernen Webdesigns Gute Webdesign: • besteht aus semantischem Code • wird schnell geladen • ist ästhetisch • ist auf verschiedensten Bildschirmenauflösungen und Endgeräten gut bedienbar • hat einen Wiedererkennungswert
  • 11. Prinzipien des modernen Webdesigns Design TechnikInhalte Basis ist konzeption
  • 14. Einfachheit • Einfachheit = benutzerfreundliches Design • jedes Element hat eine Bedeutung im Design • klare visuelle Hierarchien und Einheit Fazit: wenn alle Elemente Aufmerksamkeit erregen ist schlussendlich nichts betont
  • 17. Weißraum • Weißraum schafft Abstand zwischen Elementen • Herstellung visueller Hierarchie Aufgabe: Elemente in den Vordergrund rücken und Blick des Users leiten
  • 21. Ausrichtung und Raster • Raster hilft Elemente zu strukturieren und zu gliedern • Hilfestellung bei der Platzierung von Elementen • gibt User gutes Gefühl von Orientierung und Wiedererkennung • hilft Inhalte in eine Hierarchie zu bringen und Überblick zu verschaffen
  • 28. Farben Bedeutung von Farben • Farbgebung beeinflusst die Atomsphäre einer Website • Verbindung mit Unternehmen und Marke • Wichtig: Anzahl von verwendeten Farben auf wenige Farben begrenzen werden
  • 29. Farben Komplementäres Farbschema • enthält Farben die im Farbkreis gegenüber sind • hoher Kontrast zwischen den Farben
  • 32. Farben Monochromes Farbschema • enthält nur eine Grundfarbe und beliebige Menge Abstufungen • Abstufungen von Sättigung und Helligkeit
  • 35. Farben Farbschemata erstellen • Farben aus dem Farbkreis wählen und Nuancen der Farben definieren • Bilder als Vorlage nutzen • Farbtools zur Hilfe nehmen
  • 36. Farben Hilfsmittel • Color Scheme Designer • Adobe Color CC (Kuler) • Google Material Design
  • 38. Typografie Web Design ist zu Oliver Reichenstein 95% Typografie
  • 39. Typografie • Nie mehr als zwei Schriftarten • Typografische Hierarchie nutzen um eine visuelle Hierarchie herzustellen • Visuelle Hierarchie = Schriftstärke + Größe + Farbe
  • 42. Typografie Schriftgröße • Fließtext: 14 - 16px • Hauptüberschriften H1: 180% - 200% des Fließtextes • Sekundäre Überschriften: 130%–150% des Fließtextes
  • 43. Typografie Zeilenabstand Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
  • 44. Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. zu groß
  • 45. Typografie zu klein Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
  • 46. Typografie 30%- 40% der Schriftgröße Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen.
  • 47. Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Ge- legenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Web- standards nämlich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. Zeilenlänge
  • 48. Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaf- fen, immer im Schatten mei- nes großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. zu kurz
  • 49. Typografie zu lang Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. Sehen Sie, Webstan- dards sind das Regelwerk, auf dem Webseiten aufbauen.
  • 50. Typografie Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards näm- lich. Sehen Sie, Webstandards sind das Regelwerk, auf dem Websei- ten aufbauen. 70 bis 90 Anschläge