SlideShare a Scribd company logo
DIGITAL DESIGN TRENDS
SUMMER / 2014
FLAT / MINIMAL
“a two dimensional design for a two
dimensional screen.”


Sabina Idler - Usabilla
FAST, HONEST, TRENDY, SCALABLE,
RESPONSIVE MOBILE, USER FOCUSED
flatvsrealism.com AdrianHoppel.com blog.usabilla.com
THEN
Apple
Microsoft
Google
NIKE
World Times
ebay
Weather APP
Icons
Apple
Microsoft
Google
Twitter / Facebook / Spotify
NIKE
NOW
Flat Guitars Dots
B&O
WIDER IMPACT
SPOT THE DIFFERENCE
SPOT THE DIFFERENCE
Right a bit
Down a bit
“LESS IS MORE”, “LESS BUT BETTER”,
“DOING MORE WITH LESS”
Ludwig Mies van der Rohe Dieter Rams Buckminster Fuller
A NOD BACKWARDS?
In some respects, flat graphics can be seen as a nod back to early print, specifically Russian propaganda war
posters. At the time, before computers — yes, there was such an era — designers were forced to create flat
images because of printing constraints. Now it seems to be happening again, but with screens. 



Steven Heller, co-chairman of the M.F.A. Design Department at the New York School of Visual Arts
TREND OR REVOLUTION?
Many have accredited the rise of Minimalism in Design in the 1920’s & 30’s as a reaction to amongst other things
Abstract Expressionism, the same could be said today of Flat Design as a reaction to the Skeuomorphism.
In real terms, what we’re seeing commercially is a move towards a hybrid model, where texture exists but is
used sparingly and often only if it’s purpose can be validated, such as a identifying a CTA / Button.
TREND OR REVOLUTION?
The next Mobile OS from Apple, iOS8 seems to be treading this hybrid path.
2013 - Lorenzo Verzini - http://lorenzoverzini.com/
OTHERS
HTML5
HTML5 ROCKS
“HTML5 is a markup language used for structuring
and presenting content for the World Wide Web
and a core technology of the Internet”
HTML5 ROCKS
“HTML5 gets bounded about as this “thing” but in
reality it’s just a small part of a wider framework
and feature set.
FEATURES SUCH AS
VIDEO
studiobreeder.com volkswagen-sportscars.fr/cars/
24hoursofhappy.com
VIDEO
AUDIO (& Speech)
jamwithchrome.com peanutgalleryfilms.com
TOUCH
www.signedon.com/adding-ios-touch-events-to-farbtastic-color-picker
OnSwipe
Microsoft IE 10
ANIMATION & 3D (WEB GL)
bravestman.com workshop.chromeexperiments.com/machines/
BIG IMAGERY & VIDEO
BRITISH AIRWAYS
BMW MAGAZINE - bmwmagazine.com
GMC : THE ALL-NEW SIERRA
mobee.tm.mc
OBJECTS (STILL LIFE)
PEOPLE / PORTRAITURE
BOLD TYPOGRAPHY
@FONT-FACE RULES THE WEB
AND MONOCHROME BACKGROUNDS
DETAILS
SUBTLE TRANSITIONS & EFFECTS (MICRO UX)
mailchimp.com/comic/
codepen.io/sol0mka/full/Jsyxq
tympanus.net/codrops/
hugeinc.com/ideas/perspective/micro-ux
http://roundicons.com/
TILES
CONTENT FIRST
Mobile and responsive are creating a new interaction design
landscape that puts users and content first.
If we don’t design with content first, our users will do it for us.
Jeffrey Zeldman
Enjoy WishList.com
Mundita
The New Yorker
THANKS
QUESTIONS?

More Related Content

Similar to Digital Design Trends Summer 2014

Mobile front end development
Mobile front end developmentMobile front end development
Mobile front end development
Mike Massie
 
The Next Generation of Flash User Experience
The Next Generation of Flash User ExperienceThe Next Generation of Flash User Experience
The Next Generation of Flash User Experience
Kevin Suttle
 
Mini-Training: Mobile UX Trends
Mini-Training: Mobile UX TrendsMini-Training: Mobile UX Trends
Mini-Training: Mobile UX Trends
Betclic Everest Group Tech Team
 
The near future of real web applications
The near future of real web applicationsThe near future of real web applications
The near future of real web applications
X.commerce
 
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissSingapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
YOGESH TADWALKAR
 
Visualizing data spring2012
Visualizing data spring2012Visualizing data spring2012
Visualizing data spring2012
Lisa Kurt
 
Next Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv GohilNext Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv Gohil
Hardik Upadhyay
 
Skeuomorphs & Visual Metaphors in UI Design
Skeuomorphs & Visual Metaphors in UI DesignSkeuomorphs & Visual Metaphors in UI Design
Skeuomorphs & Visual Metaphors in UI Design
Tactica Interactive
 
Vision in Vegas: WritersUA 2005 and the Next Big Thing
Vision in Vegas: WritersUA 2005 and the Next Big ThingVision in Vegas: WritersUA 2005 and the Next Big Thing
Vision in Vegas: WritersUA 2005 and the Next Big Thing
Bill Albing
 
Content Management 101 by Joyce Schwarz JCOM
Content Management 101 by Joyce Schwarz JCOMContent Management 101 by Joyce Schwarz JCOM
Content Management 101 by Joyce Schwarz JCOMJoyce Schwarz
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraThinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Jonathan Stark
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
Jonathan Stark
 
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 The Browser is Dead, Long Live the Web! (Jonathan Stark) The Browser is Dead, Long Live the Web! (Jonathan Stark)
The Browser is Dead, Long Live the Web! (Jonathan Stark)
Future Insights
 
The Future of Flash
The Future of FlashThe Future of Flash
The Future of Flash
Chris Black
 
Apple Inc. Business Policy
Apple Inc. Business PolicyApple Inc. Business Policy
Apple Inc. Business Policy
Patricia Viljoen
 
Cwmc2009
Cwmc2009Cwmc2009
Cwmc2009
Charles Mok
 
_______ ProfessoHBS casillustrat Copyrig7685, .docx
_______ ProfessoHBS casillustrat Copyrig7685, .docx_______ ProfessoHBS casillustrat Copyrig7685, .docx
_______ ProfessoHBS casillustrat Copyrig7685, .docx
gerardkortney
 
Interactive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CCInteractive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CC
Joseph Labrecque
 

Similar to Digital Design Trends Summer 2014 (20)

HTML5 vs Flash
HTML5 vs FlashHTML5 vs Flash
HTML5 vs Flash
 
Mobile front end development
Mobile front end developmentMobile front end development
Mobile front end development
 
The Next Generation of Flash User Experience
The Next Generation of Flash User ExperienceThe Next Generation of Flash User Experience
The Next Generation of Flash User Experience
 
Mini-Training: Mobile UX Trends
Mini-Training: Mobile UX TrendsMini-Training: Mobile UX Trends
Mini-Training: Mobile UX Trends
 
The near future of real web applications
The near future of real web applicationsThe near future of real web applications
The near future of real web applications
 
what_is_next _now_ppt
what_is_next _now_pptwhat_is_next _now_ppt
what_is_next _now_ppt
 
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissSingapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
 
Visualizing data spring2012
Visualizing data spring2012Visualizing data spring2012
Visualizing data spring2012
 
Next Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv GohilNext Generation Apps with Google Chrome-By Dhruv Gohil
Next Generation Apps with Google Chrome-By Dhruv Gohil
 
Skeuomorphs & Visual Metaphors in UI Design
Skeuomorphs & Visual Metaphors in UI DesignSkeuomorphs & Visual Metaphors in UI Design
Skeuomorphs & Visual Metaphors in UI Design
 
Vision in Vegas: WritersUA 2005 and the Next Big Thing
Vision in Vegas: WritersUA 2005 and the Next Big ThingVision in Vegas: WritersUA 2005 and the Next Big Thing
Vision in Vegas: WritersUA 2005 and the Next Big Thing
 
Content Management 101 by Joyce Schwarz JCOM
Content Management 101 by Joyce Schwarz JCOMContent Management 101 by Joyce Schwarz JCOM
Content Management 101 by Joyce Schwarz JCOM
 
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile EraThinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
Thinking Outside The Little Black Box: Interaction Design in The Post-Mobile Era
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
 
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 The Browser is Dead, Long Live the Web! (Jonathan Stark) The Browser is Dead, Long Live the Web! (Jonathan Stark)
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 
The Future of Flash
The Future of FlashThe Future of Flash
The Future of Flash
 
Apple Inc. Business Policy
Apple Inc. Business PolicyApple Inc. Business Policy
Apple Inc. Business Policy
 
Cwmc2009
Cwmc2009Cwmc2009
Cwmc2009
 
_______ ProfessoHBS casillustrat Copyrig7685, .docx
_______ ProfessoHBS casillustrat Copyrig7685, .docx_______ ProfessoHBS casillustrat Copyrig7685, .docx
_______ ProfessoHBS casillustrat Copyrig7685, .docx
 
Interactive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CCInteractive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CC
 

Recently uploaded

一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
Confidence Ago
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
9a93xvy
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
Design-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service DeliveryDesign-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service Delivery
farhanaslam79
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 

Recently uploaded (20)

一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Book Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for DesignersBook Formatting: Quality Control Checks for Designers
Book Formatting: Quality Control Checks for Designers
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
一比一原版(RHUL毕业证书)伦敦大学皇家霍洛威学院毕业证如何办理
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
Design-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service DeliveryDesign-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service Delivery
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 

Digital Design Trends Summer 2014