SlideShare ist ein Scribd-Unternehmen logo
WEBDESIGN TRENDS2015 
www.chrisign.ch 
Visuelle Trends
00 Intro 
chrisign gmbh 
2001 gegründet in Weinfelden von Christoph Lanter, setzt unser 12-köpfiges Team erfolgreich Massstäbe mit Weblösungen für lokale und nationale Unternehmen, Verbände und Privatpersonen. 
Besonderes Gewicht legen wir auf einfache und praxisnahe Bedienung unserer 
Programme und Dienstleistungen. 
Vom angesagten Webdesign bis zu den aktuellen Social Media-Anwendungen 
bieten wir Ihnen die passende und effiziente Lösung, damit Sie mehr Umsatz 
generieren. 
Unser Know-how ist auf dem neuesten Stand. Einfach und effektiv, sodass die 
Arbeit mit unseren Anwendungen Spass macht! 
www.chrisign.ch 
Dies ist ein Vortrag von Michael Mäder, Lead UX/UI-Design bei chrisign gmbh
01 Inhalt 
00 Intro 
01 Inhalt 
02 Skeumorphism 
03 Flat Design 
04 Hipster/ETSY Style 
05 Newspaper Style 
06 Herzlichen Dank für Ihre Aufmerksamkeit
02 Skeumorphism 
Analoge Instrumente auf Bildschirm 
Um die Funktionsweise analoger Instrumente, Bedienungselemente in die digitale Welt (Bildschirm) zu übertragen, wurde eine 1:1 Ansicht auf den Computer übertragen. Wurde auch von Apple bis iOS 6 verwendet, bis der Gegentrend Flat Design diesen Trend ablöste. 
Bsp. IKMultimedia 
http://www.ikmultimedia.com/products/orangecs/
03 Flat Design 
Remineszenz an 
Swiss Typographic Style 
Interessanterweise durch Microsofts Windows 8 ins Leben gerufene Bewegung, die ein neues Bedienungskonzept für ihr Surface Tablet entwickelten. Ist bereits sehr verbreitet, kein wirklicher Trend mehr, sondern bereits Mainstream. Aber ein Weg, der sicher noch eine Weile präsent sein wird und viele Facetten besitzt. 
http://www.palace.co/ 
http://www.parall.ax/ 
http://www.fostr.com/
03 Flat Design 
Oft zu sehen: 
- Block, Raster 
- monochrome, ruhige Farbschemata 
- Primärfarben (Gelb, Rot, Blau, Grün) 
- Keine Verläufe 
- Vektororientiert 
- Icons 
- Onepager 
- Hero Image mit zentrierter Headline und 
Call to Action 
- Parallax Bilder (bewegte, überlappte Bilder beim Scrollen) 
- Seitlich animierte Navigation (wie Mobile) 
- Grosse Bilder im Hintergrund im Billboard 
- Video im Hintergrund (ohne Ton) 
http://colouredlines.com.au/ 
http://www.fiftythree.com/ 
http://boostedboards.com/
04 Hipster/ETSY Style 
Leitet sich von Flat Design ab 
- statt nur flach sind Flächen mit Strukturen versehen 
- statt nur Sans-Serif Fonts sind auch Serifenschriften und fast handgezeichnete Schriften zu sehen. 
- Schriftmischungen, Lifestyle, Etsy-Style 
http://mr-cup.com/
04 Hipster/ETSY Style 
Leitet sich von Flat Design ab 
- statt nur flach sind Flächen mit Strukturen versehen 
- statt nur Sans-Serif Fonts sind auch 
Serifenschriften und handgezeichnete Schriften zu sehen. 
- Schriftmischungen, Lifestyle, ETSY-Style 
http://www.morganstreetcafe.com/ 
http://www.princeink.com/ 
http://www.rideforthebrand.net/
05 Newspaper Style 
Leitet sich vom traditionellem 
Zeitungslayout und der traditionellen 
Buchgestaltung ab. 
Legt starken Wert auf saubere, sehr fein gesetzte Typografie. Ist sehr aufwendig und verlangt viel Feingefühl im Umgang mit Schriften. Ist sehr textorientiert. 
http://www.branders.ch/ 
http://www.thebrander.com/ 
http://www.tagesanzeiger.ch/
HERZLICHEN DANKFÜR IHRE AUFMERKSAMKEIT 
www.chrisign.ch 
chrisign gmbh 
web management 
Schmidstrasse 9 
CH-8570 Weinfelden 
Visuelle Trends

Weitere ähnliche Inhalte

Andere mochten auch

Epoc asma
Epoc asmaEpoc asma
Epoc asma
Mercedes Calleja
 
Web 2
Web 2Web 2
Ledface papos-na-rede
Ledface papos-na-redeLedface papos-na-rede
Ledface papos-na-redePapos na rede
 
Gloucester, VA vs Bob Warden (5) 2009
Gloucester, VA vs Bob Warden (5) 2009Gloucester, VA vs Bob Warden (5) 2009
Gloucester, VA vs Bob Warden (5) 2009
Chuck Thompson
 
Portafolio Administracion III UCN
Portafolio Administracion III UCNPortafolio Administracion III UCN
Portafolio Administracion III UCN
Diana Chaverra
 
Univ.-Prof. DI Dr. Ulrike Pröbstl - Universitätsprofessorin Universität für B...
Univ.-Prof. DI Dr. Ulrike Pröbstl - Universitätsprofessorin Universität für B...Univ.-Prof. DI Dr. Ulrike Pröbstl - Universitätsprofessorin Universität für B...
Univ.-Prof. DI Dr. Ulrike Pröbstl - Universitätsprofessorin Universität für B...
Andreas Oberenzer
 
God tests abrahams love spanish
God tests abrahams love spanishGod tests abrahams love spanish
God tests abrahams love spanish
Ministerio Infantil Arcoiris
 
Büroorganisation
BüroorganisationBüroorganisation
Büroorganisation
Metin Aydin
 
Stefania villa
Stefania villaStefania villa
Stefania villa
TatianaValencia
 
Studienergebnisse Social Media im Verkaufsalltag, BROADCAST-FUTURE
Studienergebnisse Social Media im Verkaufsalltag, BROADCAST-FUTUREStudienergebnisse Social Media im Verkaufsalltag, BROADCAST-FUTURE
Studienergebnisse Social Media im Verkaufsalltag, BROADCAST-FUTURE
broadcastfuture
 
Reggaeton
ReggaetonReggaeton
Reggaeton
jonymali
 
Discipulado
DiscipuladoDiscipulado
Discipulado
rodercito
 
Recuperación de información: De la teoría a la práctica
Recuperación de información: De la teoría a la prácticaRecuperación de información: De la teoría a la práctica
Recuperación de información: De la teoría a la práctica
OPS Colombia
 
Adoracion de todo corazon
Adoracion de todo corazonAdoracion de todo corazon
Adoracion de todo corazon
Ministerio Infantil Arcoiris
 
Adventures in Conversation: Westminster University Library
Adventures in Conversation: Westminster University LibraryAdventures in Conversation: Westminster University Library
Adventures in Conversation: Westminster University Library
University Library Services University of Sunderland
 
Präsentation1
Präsentation1Präsentation1
Präsentation1
YueZhang123
 
Bab 5
Bab 5Bab 5
Bab 5
sandybudi
 

Andere mochten auch (17)

Epoc asma
Epoc asmaEpoc asma
Epoc asma
 
Web 2
Web 2Web 2
Web 2
 
Ledface papos-na-rede
Ledface papos-na-redeLedface papos-na-rede
Ledface papos-na-rede
 
Gloucester, VA vs Bob Warden (5) 2009
Gloucester, VA vs Bob Warden (5) 2009Gloucester, VA vs Bob Warden (5) 2009
Gloucester, VA vs Bob Warden (5) 2009
 
Portafolio Administracion III UCN
Portafolio Administracion III UCNPortafolio Administracion III UCN
Portafolio Administracion III UCN
 
Univ.-Prof. DI Dr. Ulrike Pröbstl - Universitätsprofessorin Universität für B...
Univ.-Prof. DI Dr. Ulrike Pröbstl - Universitätsprofessorin Universität für B...Univ.-Prof. DI Dr. Ulrike Pröbstl - Universitätsprofessorin Universität für B...
Univ.-Prof. DI Dr. Ulrike Pröbstl - Universitätsprofessorin Universität für B...
 
God tests abrahams love spanish
God tests abrahams love spanishGod tests abrahams love spanish
God tests abrahams love spanish
 
Büroorganisation
BüroorganisationBüroorganisation
Büroorganisation
 
Stefania villa
Stefania villaStefania villa
Stefania villa
 
Studienergebnisse Social Media im Verkaufsalltag, BROADCAST-FUTURE
Studienergebnisse Social Media im Verkaufsalltag, BROADCAST-FUTUREStudienergebnisse Social Media im Verkaufsalltag, BROADCAST-FUTURE
Studienergebnisse Social Media im Verkaufsalltag, BROADCAST-FUTURE
 
Reggaeton
ReggaetonReggaeton
Reggaeton
 
Discipulado
DiscipuladoDiscipulado
Discipulado
 
Recuperación de información: De la teoría a la práctica
Recuperación de información: De la teoría a la prácticaRecuperación de información: De la teoría a la práctica
Recuperación de información: De la teoría a la práctica
 
Adoracion de todo corazon
Adoracion de todo corazonAdoracion de todo corazon
Adoracion de todo corazon
 
Adventures in Conversation: Westminster University Library
Adventures in Conversation: Westminster University LibraryAdventures in Conversation: Westminster University Library
Adventures in Conversation: Westminster University Library
 
Präsentation1
Präsentation1Präsentation1
Präsentation1
 
Bab 5
Bab 5Bab 5
Bab 5
 

Ähnlich wie Webdesign Trends Teil 03 - Visuelle Trends

Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
chrisign gmbh
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
 
Lean, Mean Design Machine!
Lean, Mean Design Machine!Lean, Mean Design Machine!
Lean, Mean Design Machine!
Markus Denhoff
 
So funktioniert Publishing. Auch in Zukunft.
So funktioniert Publishing. Auch in Zukunft.So funktioniert Publishing. Auch in Zukunft.
So funktioniert Publishing. Auch in Zukunft.
Haeme Ulrich
 
Anuvito - art, projects and styles
Anuvito - art, projects and stylesAnuvito - art, projects and styles
Anuvito - art, projects and styles
anuvito
 
Mobile Advertising: Formate, Media & KPIs - Mobile Ad Summit
Mobile Advertising: Formate, Media & KPIs - Mobile Ad SummitMobile Advertising: Formate, Media & KPIs - Mobile Ad Summit
Mobile Advertising: Formate, Media & KPIs - Mobile Ad Summit
spacedealer GmbH
 
True & False. Cats & Dogs. Designer & Entwickler?
True & False. Cats & Dogs. Designer & Entwickler?True & False. Cats & Dogs. Designer & Entwickler?
True & False. Cats & Dogs. Designer & Entwickler?
Liane Kirschner
 
Digital Publishing Übersicht & Strategie
Digital Publishing Übersicht & StrategieDigital Publishing Übersicht & Strategie
Digital Publishing Übersicht & Strategie
Haeme Ulrich
 
revision6 GmbH Internetagentur
revision6 GmbH Internetagenturrevision6 GmbH Internetagentur
revision6 GmbH Internetagentur
revision6 GmbH
 
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 developerchristianschweinhardt
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
Gregor Biswanger
 
Die App ist auch nur eine App.
Die App ist auch nur eine App.Die App ist auch nur eine App.
Die App ist auch nur eine App.
Haeme Ulrich
 
UI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen GerätenUI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen GerätenRainer Gibbert
 
Kompetenzentwicklung für Content-Strategie #cosca16
Kompetenzentwicklung für Content-Strategie #cosca16Kompetenzentwicklung für Content-Strategie #cosca16
Kompetenzentwicklung für Content-Strategie #cosca16
Kai Heddergott
 
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
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätPeter Rozek
 
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Winkler & Stenzel Marketing GmbH
 
Trendformate im Online-Marketing by TWT: Branding mit Top-Performern und IAB ...
Trendformate im Online-Marketing by TWT: Branding mit Top-Performern und IAB ...Trendformate im Online-Marketing by TWT: Branding mit Top-Performern und IAB ...
Trendformate im Online-Marketing by TWT: Branding mit Top-Performern und IAB ...
TWT
 
120214 gpm basel_web_booklet
120214 gpm basel_web_booklet120214 gpm basel_web_booklet
120214 gpm basel_web_booklet
GPM - Agentur für digitale Kommunikation
 
Mehr Erfolg mit E-Mail-Marketing
Mehr Erfolg mit E-Mail-MarketingMehr Erfolg mit E-Mail-Marketing
Mehr Erfolg mit E-Mail-Marketing
DesireeHilscher
 

Ähnlich wie Webdesign Trends Teil 03 - Visuelle Trends (20)

Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Lean, Mean Design Machine!
Lean, Mean Design Machine!Lean, Mean Design Machine!
Lean, Mean Design Machine!
 
So funktioniert Publishing. Auch in Zukunft.
So funktioniert Publishing. Auch in Zukunft.So funktioniert Publishing. Auch in Zukunft.
So funktioniert Publishing. Auch in Zukunft.
 
Anuvito - art, projects and styles
Anuvito - art, projects and stylesAnuvito - art, projects and styles
Anuvito - art, projects and styles
 
Mobile Advertising: Formate, Media & KPIs - Mobile Ad Summit
Mobile Advertising: Formate, Media & KPIs - Mobile Ad SummitMobile Advertising: Formate, Media & KPIs - Mobile Ad Summit
Mobile Advertising: Formate, Media & KPIs - Mobile Ad Summit
 
True & False. Cats & Dogs. Designer & Entwickler?
True & False. Cats & Dogs. Designer & Entwickler?True & False. Cats & Dogs. Designer & Entwickler?
True & False. Cats & Dogs. Designer & Entwickler?
 
Digital Publishing Übersicht & Strategie
Digital Publishing Übersicht & StrategieDigital Publishing Übersicht & Strategie
Digital Publishing Übersicht & Strategie
 
revision6 GmbH Internetagentur
revision6 GmbH Internetagenturrevision6 GmbH Internetagentur
revision6 GmbH Internetagentur
 
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
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Die App ist auch nur eine App.
Die App ist auch nur eine App.Die App ist auch nur eine App.
Die App ist auch nur eine App.
 
UI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen GerätenUI Design Patterns für Navigationssysteme auf mobilen Geräten
UI Design Patterns für Navigationssysteme auf mobilen Geräten
 
Kompetenzentwicklung für Content-Strategie #cosca16
Kompetenzentwicklung für Content-Strategie #cosca16Kompetenzentwicklung für Content-Strategie #cosca16
Kompetenzentwicklung für Content-Strategie #cosca16
 
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...
 
Responsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, QualitätResponsive Webdesign: Prozess, Dialog, Qualität
Responsive Webdesign: Prozess, Dialog, Qualität
 
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
Trend Forecast Oktober 2014 (Bildsprache, Logos, Farben, Web-Design, Gestaltu...
 
Trendformate im Online-Marketing by TWT: Branding mit Top-Performern und IAB ...
Trendformate im Online-Marketing by TWT: Branding mit Top-Performern und IAB ...Trendformate im Online-Marketing by TWT: Branding mit Top-Performern und IAB ...
Trendformate im Online-Marketing by TWT: Branding mit Top-Performern und IAB ...
 
120214 gpm basel_web_booklet
120214 gpm basel_web_booklet120214 gpm basel_web_booklet
120214 gpm basel_web_booklet
 
Mehr Erfolg mit E-Mail-Marketing
Mehr Erfolg mit E-Mail-MarketingMehr Erfolg mit E-Mail-Marketing
Mehr Erfolg mit E-Mail-Marketing
 

Webdesign Trends Teil 03 - Visuelle Trends

  • 2. 00 Intro chrisign gmbh 2001 gegründet in Weinfelden von Christoph Lanter, setzt unser 12-köpfiges Team erfolgreich Massstäbe mit Weblösungen für lokale und nationale Unternehmen, Verbände und Privatpersonen. Besonderes Gewicht legen wir auf einfache und praxisnahe Bedienung unserer Programme und Dienstleistungen. Vom angesagten Webdesign bis zu den aktuellen Social Media-Anwendungen bieten wir Ihnen die passende und effiziente Lösung, damit Sie mehr Umsatz generieren. Unser Know-how ist auf dem neuesten Stand. Einfach und effektiv, sodass die Arbeit mit unseren Anwendungen Spass macht! www.chrisign.ch Dies ist ein Vortrag von Michael Mäder, Lead UX/UI-Design bei chrisign gmbh
  • 3. 01 Inhalt 00 Intro 01 Inhalt 02 Skeumorphism 03 Flat Design 04 Hipster/ETSY Style 05 Newspaper Style 06 Herzlichen Dank für Ihre Aufmerksamkeit
  • 4. 02 Skeumorphism Analoge Instrumente auf Bildschirm Um die Funktionsweise analoger Instrumente, Bedienungselemente in die digitale Welt (Bildschirm) zu übertragen, wurde eine 1:1 Ansicht auf den Computer übertragen. Wurde auch von Apple bis iOS 6 verwendet, bis der Gegentrend Flat Design diesen Trend ablöste. Bsp. IKMultimedia http://www.ikmultimedia.com/products/orangecs/
  • 5. 03 Flat Design Remineszenz an Swiss Typographic Style Interessanterweise durch Microsofts Windows 8 ins Leben gerufene Bewegung, die ein neues Bedienungskonzept für ihr Surface Tablet entwickelten. Ist bereits sehr verbreitet, kein wirklicher Trend mehr, sondern bereits Mainstream. Aber ein Weg, der sicher noch eine Weile präsent sein wird und viele Facetten besitzt. http://www.palace.co/ http://www.parall.ax/ http://www.fostr.com/
  • 6. 03 Flat Design Oft zu sehen: - Block, Raster - monochrome, ruhige Farbschemata - Primärfarben (Gelb, Rot, Blau, Grün) - Keine Verläufe - Vektororientiert - Icons - Onepager - Hero Image mit zentrierter Headline und Call to Action - Parallax Bilder (bewegte, überlappte Bilder beim Scrollen) - Seitlich animierte Navigation (wie Mobile) - Grosse Bilder im Hintergrund im Billboard - Video im Hintergrund (ohne Ton) http://colouredlines.com.au/ http://www.fiftythree.com/ http://boostedboards.com/
  • 7. 04 Hipster/ETSY Style Leitet sich von Flat Design ab - statt nur flach sind Flächen mit Strukturen versehen - statt nur Sans-Serif Fonts sind auch Serifenschriften und fast handgezeichnete Schriften zu sehen. - Schriftmischungen, Lifestyle, Etsy-Style http://mr-cup.com/
  • 8. 04 Hipster/ETSY Style Leitet sich von Flat Design ab - statt nur flach sind Flächen mit Strukturen versehen - statt nur Sans-Serif Fonts sind auch Serifenschriften und handgezeichnete Schriften zu sehen. - Schriftmischungen, Lifestyle, ETSY-Style http://www.morganstreetcafe.com/ http://www.princeink.com/ http://www.rideforthebrand.net/
  • 9. 05 Newspaper Style Leitet sich vom traditionellem Zeitungslayout und der traditionellen Buchgestaltung ab. Legt starken Wert auf saubere, sehr fein gesetzte Typografie. Ist sehr aufwendig und verlangt viel Feingefühl im Umgang mit Schriften. Ist sehr textorientiert. http://www.branders.ch/ http://www.thebrander.com/ http://www.tagesanzeiger.ch/
  • 10. HERZLICHEN DANKFÜR IHRE AUFMERKSAMKEIT www.chrisign.ch chrisign gmbh web management Schmidstrasse 9 CH-8570 Weinfelden Visuelle Trends