SlideShare a Scribd company logo
1 of 23
Download to read offline
16 Web & Graphic Design
Trends to Watch in 2016
1. Usability
• In 2016, design is all about the user.
User experience (UX) is the new black.
• No one will care about how cool your design
looks, if it’s not usable.
• Your online business won’t grow if you don’t take
user experience into account.
• Your website needs to load fast and
be easy to use.
• Page Load Speed is a great issue. Adding just
one second of bloat to your site means sales
drop by 27%.
2.	Responsive Design
• Mobile is already the “first screen”.
• Google is literally crushing sites that don’t offer a
mobile-friendly experience.
• User experience on mobile phone is key.
• Hiding a desktop function for mobile users is not
an acceptable solution anymore.
• If your users can’t fully experience your website
on their daily metro conmutes, then your whole
site needs to be revised.
• In 2016 the meaning of responsive design goes
even further.
• Now, all your graphic design and artwork will
have to adhere to the rules of responsive. No
“one size or format fits all”.
• The best example of this is the recent Netflix
brand redesign.
3. App inspired
web design
• Websites should learn from app design
(speed, zero distractions, tailored user
experience).
• Remove all unessential information and let
the user interact with your content as fast
as he can.
4.	Clever menus
• Some people hated the now omnipresent
Hamburger Menu or navicon. Now, say hello
to clever menus.
• Hidden navigations that appear out of
nowhere depending on the user’s actions will
soon be the norm.
• Even if we can’t see it at the moment,
experience tells us that there is a menu on
every website. So no need to worry, it will just
appear when we need it.
• Experts are predicting that clever / hidden
menus will be fully responsive to
multidirectional scrolling.
5.	Modules and
modular text
• No one likes to read a dreadfully long blurb of
text.
• The first trick to breakdown long texts in the
web was to try to write in short paragraphs.
• But you can take a modular approach to web
page layout.
• Modular design is a technique where
everything is built using a block grid pattern.
• This doesn’t mean a boring pattern, like a
chessboard.
• In fact, it can mean exactly the opposite: hard
to anticipate patterns, that make it easy for us
to read and be interested in the different parts
of a website.
Image: Well Made Studio
6. Modular and
infinite scrolling
• Modular scrolling means every module on a website
may scroll on its own, independently from the other
modules.
• You may have already seen it (though sometimes it’s
hard to notice) in sites with a sidebar that doesn’t
scroll at the same speed than the main content.
• But it’s about to get better. Picture a website divided
in two columns with independent scroll, as you can
see here.
• It all began with infinite scroll. A trend that you may
have noticed in 2015. Some of the most popular
sites on the world today, like Pinterest, Twitter or
Facebook already use it.
• Infinite and modular scroll work on the
same premise: scrolling down is easier and
faster than clicking and it doesn’t interrupt
user experience by loading a new page.
• Time.com’s bounce rate dropped 15
percentage points after they adopted
infinite scrolling (source).
7. Material Design
• Material design wasn’t widely adopted
until 2015.
• But Material as a trend that you’ll find in
websites, apps, artwork, etc. will be
adopted massively during 2016.
• It will be the year of material design’s
dominance.
• Expect to see those long, solid shadows
virtually everywhere.
8.	Flat Design
• Material design came along to fix some of
flat design’s usability problems, but that
doesn’t mean flat is dead.
• In fact, flat design will also grow to be even
more popular during 2016.
• With a lot of big brands adopting flat
design in the last few years, mass
audiences are more aware that less is
better when it comes to visual style.
Images credit: Brafton
• Flat web design has another UX
advantage: image files weigh less and
do not add to page load time.
• The general guidelines of flat design will
be widely spread around small brands
and blogs artwork all over the web
(eg, ghost buttons).
• At the same time, those on the know on
graphic design will be moving on to Flat
2.0.
9.	Visual Storytelling
Some data:
• 100 million people worldwide watch at least
one video per day.
• Website visitors are 64% more likely to make a
purchase after watching a video.
• 80% of viewers recall watching a video ad up
to 30 days after seeing it.
• 92% of those watching video on mobile
devices share the content with others.
• Human beings process visual elements
60,000 times faster than reading words.
(Source).
• Now, design needs to play a content
function; it won’t be a mere companion to
the text that tells the story anymore.
10.	 Infographics
• Everyone loves a good infographic, and above
all, they love the results: infographics are
shared 3 more times than any other piece of
visual content.
• What kind of infographics are we going to see
generating buzz in 2016?
• The time of boring old infographics based on
the same old templates are about to fade
away. Putting three or four bullet points and
adding a few cute icons just won’t cut it
anymore.
• It’s time to mix infographic storytelling
capabilities with the deep insight of data
visualizations. Infographic and big data
together.
11.	 Cool Typography
	
• With typography becoming a key element
in any serious branding efforts, broad
audiences are g designers etting used to
seeing more artistic typefaces.
• Typography is a language in itself.
• Years ago, only graphic were able to talk
that language.
• Today, more people are gaining access to it,
thanks to the wider range of available web
fonts.
• 2016 will see a comeback of big fonts, italic
and all caps for logos and headings.
• Another big trend here are typefaces that
appear to come from someone holding a
pen.
12.	 Modern retro
	
• Modern retro is cool. It started as a trend in logo
design and it’s already permeating to web and
graphic design.
• There’s a subtle difference in what retro means
now. Old retro refers to early 20th century, up
until the 60s.
• Modern retro is all about the early days of
computer age: think vintage video games, pixel
art, big cell phones, Tron…
• Anything that was big in visual style between the
late 70s and early 90s is back!
13.	 Rich colors
	
• When it comes to colors, the 80s will rule.
Prepare for a world of bright pastels and rich,
bold accent colors.
• “A happier, sunnier place where we feel free to
express a wittier version of our real selves”, in
the words of the Pantone Fashion Color Report
For Spring 2016.
• The Top10 2016 spring colors according to
Pantone look like this:
• Whatever you do, just don’t pick a boring,
washed-out color. You’ve been warned.
14.	 Grids and geometrical
shapes
	
• Grid design is a clear system, easy to work with for
designers, plus the users can easily understand it
and use it very easily too.
• But every trend has its flip side, and experts also
predict that, as a response there will be a rise in
free-form shapes.
• These are just like geometrical shapes, but with
dents.
• Rough edged and hand-drawn shapes are a
signature of neo-grunge, another trend that will gain
prominence in 2016.
15.	 Kill The Stock Photo!
	
• Stock photos are one of the most boring and
unoriginal things you can include in a website.
• 2015 was the year that a host of free alternative stock
photos sites tried to make it more accesible for
anyone to get quality stock images in their sites.
• Everyone ended up picking the same photos and you
found them everywhere online, over and over again.
• Why use stock photos? You have millions of
alternatives.
• Please use images custom made for your site, either
by yourself or by a professional.
• What about a hand-drawn illustration? (You’ll see a lot
of these in 2016).
• Or a custom graphic? Or even better, what about
video?
16.	 Video & GIFs
	
• You’ve probably noticed all those cool websites
with video backgrounds.
• Most of them take a long time to load, but that
will change once people understand they have
to compress the video as much as possible.
• Video will replace images in lots of places, other
than website backgrounds.
• Vine, Snapchat et al have gotten us into the
habit of staring at short video loops.
• Watch out for profile pictures that are not
pictures anymore, but a short video
• Above all, watch out for the invasion of
animated GIFs.
• Facebook is to blame for opening the Pandora
Box and they will soon be EVERYWHERE.
So what do you think:
Will my predictions be spot on,
or will they utterly fail?
Please let me know
in the comments.
Thanks!
@VisualErnesto

More Related Content

What's hot

Trends in interactive design 2013
Trends in interactive design 2013Trends in interactive design 2013
Trends in interactive design 2013Prophets Agency
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Bookjesús Santo
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Jessie Doan
 
Designing for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developersDesigning for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developersOscar Gonzalez Garza
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017Lewis Lin 🦊
 
UI Design Patterns for the Web, Part 2
UI Design Patterns for the Web, Part 2UI Design Patterns for the Web, Part 2
UI Design Patterns for the Web, Part 2Lewis Lin 🦊
 
Uxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_designUxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_designLewis Lin 🦊
 
Uxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothingUxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothingLewis Lin 🦊
 
The 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTestingThe 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTestingInVision App
 
Presenting Usable Research Results
Presenting Usable Research ResultsPresenting Usable Research Results
Presenting Usable Research ResultsDiane Loviglio
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Lewis Lin 🦊
 
3 common ux mistakes killing good design
3 common ux mistakes killing good design3 common ux mistakes killing good design
3 common ux mistakes killing good designHalil Eren Çelik
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface DesignKANKIPATI KISHORE
 
Top 6 website designing trends for 2016
Top 6 website designing trends for 2016Top 6 website designing trends for 2016
Top 6 website designing trends for 2016T & A Solutions
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI DesignersRavi Bhadauria
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesAvijit Chinara
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Careerdpanarelli
 

What's hot (19)

Trends in interactive design 2013
Trends in interactive design 2013Trends in interactive design 2013
Trends in interactive design 2013
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Book
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014
 
Designing for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developersDesigning for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developers
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017
 
UI Design Patterns for the Web, Part 2
UI Design Patterns for the Web, Part 2UI Design Patterns for the Web, Part 2
UI Design Patterns for the Web, Part 2
 
Uxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_designUxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_design
 
Uxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothingUxpin mastering the_power_of_nothing
Uxpin mastering the_power_of_nothing
 
The 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTestingThe 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTesting
 
Presenting Usable Research Results
Presenting Usable Research ResultsPresenting Usable Research Results
Presenting Usable Research Results
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014
 
3 common ux mistakes killing good design
3 common ux mistakes killing good design3 common ux mistakes killing good design
3 common ux mistakes killing good design
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
Top 6 website designing trends for 2016
Top 6 website designing trends for 2016Top 6 website designing trends for 2016
Top 6 website designing trends for 2016
 
Typography and Colors for GUI Designers
Typography and Colors for GUI DesignersTypography and Colors for GUI Designers
Typography and Colors for GUI Designers
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best Practices
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Career
 
Sbwire 531031
Sbwire 531031Sbwire 531031
Sbwire 531031
 

Viewers also liked

Introduction to Layouts in Graphic Design
Introduction to Layouts in Graphic DesignIntroduction to Layouts in Graphic Design
Introduction to Layouts in Graphic DesignCasey Robertson
 
Principles of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryPrinciples of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryAbanoub Hanna
 
20 Graphic Design Resources that will Make you Master of the Game
20 Graphic Design Resources that will Make you Master of the Game20 Graphic Design Resources that will Make you Master of the Game
20 Graphic Design Resources that will Make you Master of the GameLogo Design Guru
 
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)Shawn Calvert
 
Graphic Design For non graphic designers
Graphic Design For non graphic designersGraphic Design For non graphic designers
Graphic Design For non graphic designersshira73
 
Elements & Principles of Art Design PowerPoint
Elements & Principles of Art Design PowerPointElements & Principles of Art Design PowerPoint
Elements & Principles of Art Design PowerPointemurfield
 
12 Hacks For Graphic Design Newbs
12 Hacks For Graphic Design Newbs12 Hacks For Graphic Design Newbs
12 Hacks For Graphic Design NewbsDesignMantic
 
Graphic Design In Movie Poster
Graphic Design In Movie PosterGraphic Design In Movie Poster
Graphic Design In Movie PosterSanupam Samantray
 
An Introduction To Graphic Design
An Introduction To Graphic DesignAn Introduction To Graphic Design
An Introduction To Graphic DesignAfshan Kirmani
 
Graphic Design 101 For Marketers and Business Owners
Graphic Design 101 For Marketers and Business OwnersGraphic Design 101 For Marketers and Business Owners
Graphic Design 101 For Marketers and Business OwnersVisible Logic, Inc.
 
8 Steps To Do It Yourself Design Like A Pro!
8 Steps To Do It Yourself Design Like A Pro!8 Steps To Do It Yourself Design Like A Pro!
8 Steps To Do It Yourself Design Like A Pro!DesignMantic
 
Fjord Trends 2017
Fjord Trends 2017 Fjord Trends 2017
Fjord Trends 2017 Fjord
 
5 Presentation design trends 2017
5 Presentation design trends 20175 Presentation design trends 2017
5 Presentation design trends 2017Annova Studio
 
Five Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same SlideFive Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same SlideCrispy Presentations
 
The History of SEO
The History of SEOThe History of SEO
The History of SEOHubSpot
 
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Velocity Partners
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersHubSpot
 
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingThe Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingVelocity Partners
 

Viewers also liked (20)

Graphic Design 101
Graphic Design 101Graphic Design 101
Graphic Design 101
 
Introduction to Layouts in Graphic Design
Introduction to Layouts in Graphic DesignIntroduction to Layouts in Graphic Design
Introduction to Layouts in Graphic Design
 
Principles of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryPrinciples of Design - Graphic Design Theory
Principles of Design - Graphic Design Theory
 
20 Graphic Design Resources that will Make you Master of the Game
20 Graphic Design Resources that will Make you Master of the Game20 Graphic Design Resources that will Make you Master of the Game
20 Graphic Design Resources that will Make you Master of the Game
 
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
 
Graphic Design For non graphic designers
Graphic Design For non graphic designersGraphic Design For non graphic designers
Graphic Design For non graphic designers
 
Elements & Principles of Art Design PowerPoint
Elements & Principles of Art Design PowerPointElements & Principles of Art Design PowerPoint
Elements & Principles of Art Design PowerPoint
 
12 Hacks For Graphic Design Newbs
12 Hacks For Graphic Design Newbs12 Hacks For Graphic Design Newbs
12 Hacks For Graphic Design Newbs
 
Graphic Design In Movie Poster
Graphic Design In Movie PosterGraphic Design In Movie Poster
Graphic Design In Movie Poster
 
An Introduction To Graphic Design
An Introduction To Graphic DesignAn Introduction To Graphic Design
An Introduction To Graphic Design
 
Graphic Design 101 For Marketers and Business Owners
Graphic Design 101 For Marketers and Business OwnersGraphic Design 101 For Marketers and Business Owners
Graphic Design 101 For Marketers and Business Owners
 
8 Steps To Do It Yourself Design Like A Pro!
8 Steps To Do It Yourself Design Like A Pro!8 Steps To Do It Yourself Design Like A Pro!
8 Steps To Do It Yourself Design Like A Pro!
 
Fjord Trends 2017
Fjord Trends 2017 Fjord Trends 2017
Fjord Trends 2017
 
5 Presentation design trends 2017
5 Presentation design trends 20175 Presentation design trends 2017
5 Presentation design trends 2017
 
Five Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same SlideFive Killer Ways to Design The Same Slide
Five Killer Ways to Design The Same Slide
 
The History of SEO
The History of SEOThe History of SEO
The History of SEO
 
Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.Crap. The Content Marketing Deluge.
Crap. The Content Marketing Deluge.
 
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating PresentersWhat Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
What Would Steve Do? 10 Lessons from the World's Most Captivating Presenters
 
How Google Works
How Google WorksHow Google Works
How Google Works
 
The Search for Meaning in B2B Marketing
The Search for Meaning in B2B MarketingThe Search for Meaning in B2B Marketing
The Search for Meaning in B2B Marketing
 

Similar to 16 Web & Graphic Design Trends to Watch in 2016

Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017nannudavis
 
Modern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive DesignModern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive DesignValtech UK
 
20 web design trends - at the moment
20 web design trends - at the moment20 web design trends - at the moment
20 web design trends - at the momentMarco Santo
 
The Latest Web Design Trends and Standards
The Latest Web Design Trends and StandardsThe Latest Web Design Trends and Standards
The Latest Web Design Trends and StandardsCogniter Technologies
 
LMA13 responsive design_final
LMA13 responsive design_finalLMA13 responsive design_final
LMA13 responsive design_finalRobert Algeri
 
10 Webdesign Trends for 2014 by Vanksen
10 Webdesign Trends for 2014 by Vanksen10 Webdesign Trends for 2014 by Vanksen
10 Webdesign Trends for 2014 by VanksenVanksen
 
Top graphic design trends for website designing
Top graphic design trends for website designingTop graphic design trends for website designing
Top graphic design trends for website designingArtista KW
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
10 stops towards a responsive web design mindset
10 stops towards a responsive web design mindset10 stops towards a responsive web design mindset
10 stops towards a responsive web design mindsetMiika Puputti
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013Angela Bowman
 
Top 5 website design trends you can expect in 2016
Top 5 website design trends you can expect in 2016Top 5 website design trends you can expect in 2016
Top 5 website design trends you can expect in 2016tobylogans
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesignBart De Waele
 
Responsive Webdesign - UXtour Microsoft
Responsive Webdesign - UXtour MicrosoftResponsive Webdesign - UXtour Microsoft
Responsive Webdesign - UXtour MicrosoftThomas Deceuninck
 
Top 10 responsive web design & ux trends in 2019
Top 10 responsive web design & ux trends in 2019Top 10 responsive web design & ux trends in 2019
Top 10 responsive web design & ux trends in 2019Nishant Desai
 
All about web design trend of 2015
All about web design trend of 2015All about web design trend of 2015
All about web design trend of 2015Davis Brown
 
Free Webinar: 2020 Design Trends: Create an Awesome Website!
Free Webinar: 2020 Design Trends: Create an Awesome Website!Free Webinar: 2020 Design Trends: Create an Awesome Website!
Free Webinar: 2020 Design Trends: Create an Awesome Website!June Bachman
 
The Future of Website Design is Revolutionary – Are You Ready to Embrace?
The Future of Website Design is Revolutionary – Are You Ready to Embrace?The Future of Website Design is Revolutionary – Are You Ready to Embrace?
The Future of Website Design is Revolutionary – Are You Ready to Embrace?Pixel Crayons
 
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)kevinjohngallagher
 

Similar to 16 Web & Graphic Design Trends to Watch in 2016 (20)

Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017
 
Modern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive DesignModern Digital Design: The power of Responsive Design
Modern Digital Design: The power of Responsive Design
 
20 web design trends - at the moment
20 web design trends - at the moment20 web design trends - at the moment
20 web design trends - at the moment
 
The Latest Web Design Trends and Standards
The Latest Web Design Trends and StandardsThe Latest Web Design Trends and Standards
The Latest Web Design Trends and Standards
 
Web Design Trends
Web Design TrendsWeb Design Trends
Web Design Trends
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
LMA13 responsive design_final
LMA13 responsive design_finalLMA13 responsive design_final
LMA13 responsive design_final
 
10 Webdesign Trends for 2014 by Vanksen
10 Webdesign Trends for 2014 by Vanksen10 Webdesign Trends for 2014 by Vanksen
10 Webdesign Trends for 2014 by Vanksen
 
Top graphic design trends for website designing
Top graphic design trends for website designingTop graphic design trends for website designing
Top graphic design trends for website designing
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
10 stops towards a responsive web design mindset
10 stops towards a responsive web design mindset10 stops towards a responsive web design mindset
10 stops towards a responsive web design mindset
 
Web designtrends 5-29-2013
Web designtrends 5-29-2013Web designtrends 5-29-2013
Web designtrends 5-29-2013
 
Top 5 website design trends you can expect in 2016
Top 5 website design trends you can expect in 2016Top 5 website design trends you can expect in 2016
Top 5 website design trends you can expect in 2016
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
Responsive Webdesign - UXtour Microsoft
Responsive Webdesign - UXtour MicrosoftResponsive Webdesign - UXtour Microsoft
Responsive Webdesign - UXtour Microsoft
 
Top 10 responsive web design & ux trends in 2019
Top 10 responsive web design & ux trends in 2019Top 10 responsive web design & ux trends in 2019
Top 10 responsive web design & ux trends in 2019
 
All about web design trend of 2015
All about web design trend of 2015All about web design trend of 2015
All about web design trend of 2015
 
Free Webinar: 2020 Design Trends: Create an Awesome Website!
Free Webinar: 2020 Design Trends: Create an Awesome Website!Free Webinar: 2020 Design Trends: Create an Awesome Website!
Free Webinar: 2020 Design Trends: Create an Awesome Website!
 
The Future of Website Design is Revolutionary – Are You Ready to Embrace?
The Future of Website Design is Revolutionary – Are You Ready to Embrace?The Future of Website Design is Revolutionary – Are You Ready to Embrace?
The Future of Website Design is Revolutionary – Are You Ready to Embrace?
 
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
Kevinjohn Gallagher's: Emperors new clothes (WordUp Glasgow 2012)
 

More from Ernesto Olivares

16 Tendencias de diseño grafico & web para 2016
16 Tendencias de diseño grafico & web para 201616 Tendencias de diseño grafico & web para 2016
16 Tendencias de diseño grafico & web para 2016Ernesto Olivares
 
Five Steps to Successful Call Tracking
Five Steps to Successful Call TrackingFive Steps to Successful Call Tracking
Five Steps to Successful Call TrackingErnesto Olivares
 
Presupuesto ernesto olivares esp
Presupuesto ernesto olivares espPresupuesto ernesto olivares esp
Presupuesto ernesto olivares espErnesto Olivares
 
Ampliación del Canal Panama
Ampliación del Canal PanamaAmpliación del Canal Panama
Ampliación del Canal PanamaErnesto Olivares
 
La vuelta al mundo en 9 meses
La vuelta al mundo en 9 mesesLa vuelta al mundo en 9 meses
La vuelta al mundo en 9 mesesErnesto Olivares
 
La nueva terminal aérea de Barcelona
La nueva terminal aérea de BarcelonaLa nueva terminal aérea de Barcelona
La nueva terminal aérea de BarcelonaErnesto Olivares
 
Cómo se sirve una cerveza de barril
Cómo se sirve una cerveza de barrilCómo se sirve una cerveza de barril
Cómo se sirve una cerveza de barrilErnesto Olivares
 
Ampliacion del Museo de El Prado
Ampliacion del Museo de El PradoAmpliacion del Museo de El Prado
Ampliacion del Museo de El PradoErnesto Olivares
 
La lucha por los 14 gigantes del Himalaya
La lucha por los 14 gigantes del HimalayaLa lucha por los 14 gigantes del Himalaya
La lucha por los 14 gigantes del HimalayaErnesto Olivares
 

More from Ernesto Olivares (13)

16 Tendencias de diseño grafico & web para 2016
16 Tendencias de diseño grafico & web para 201616 Tendencias de diseño grafico & web para 2016
16 Tendencias de diseño grafico & web para 2016
 
Five Steps to Successful Call Tracking
Five Steps to Successful Call TrackingFive Steps to Successful Call Tracking
Five Steps to Successful Call Tracking
 
Presupuesto ernesto olivares esp
Presupuesto ernesto olivares espPresupuesto ernesto olivares esp
Presupuesto ernesto olivares esp
 
Emisiones de CO2
Emisiones de CO2Emisiones de CO2
Emisiones de CO2
 
Ampliación del Canal Panama
Ampliación del Canal PanamaAmpliación del Canal Panama
Ampliación del Canal Panama
 
La vuelta al mundo en 9 meses
La vuelta al mundo en 9 mesesLa vuelta al mundo en 9 meses
La vuelta al mundo en 9 meses
 
La nueva terminal aérea de Barcelona
La nueva terminal aérea de BarcelonaLa nueva terminal aérea de Barcelona
La nueva terminal aérea de Barcelona
 
Ojo "biónico"
Ojo "biónico"Ojo "biónico"
Ojo "biónico"
 
Dubai acaricia el cielo
Dubai acaricia el cieloDubai acaricia el cielo
Dubai acaricia el cielo
 
Nuevas reglas de la F1
Nuevas reglas de la F1Nuevas reglas de la F1
Nuevas reglas de la F1
 
Cómo se sirve una cerveza de barril
Cómo se sirve una cerveza de barrilCómo se sirve una cerveza de barril
Cómo se sirve una cerveza de barril
 
Ampliacion del Museo de El Prado
Ampliacion del Museo de El PradoAmpliacion del Museo de El Prado
Ampliacion del Museo de El Prado
 
La lucha por los 14 gigantes del Himalaya
La lucha por los 14 gigantes del HimalayaLa lucha por los 14 gigantes del Himalaya
La lucha por los 14 gigantes del Himalaya
 

Recently uploaded

Paul Russell Confidential Resume for Fahlo.pdf
Paul Russell Confidential Resume for Fahlo.pdfPaul Russell Confidential Resume for Fahlo.pdf
Paul Russell Confidential Resume for Fahlo.pdfpaul8402
 
8 distribution in rural mkts.ppt Rural Marketing
8 distribution in rural mkts.ppt Rural Marketing8 distribution in rural mkts.ppt Rural Marketing
8 distribution in rural mkts.ppt Rural Marketingpshirsat
 
The power of SEO-driven market intelligence
The power of SEO-driven market intelligenceThe power of SEO-driven market intelligence
The power of SEO-driven market intelligenceHinde Lamrani
 
Francesco d’Angela, Service Designer di @HintoGroup- “Oltre la Frontiera Crea...
Francesco d’Angela, Service Designer di @HintoGroup- “Oltre la Frontiera Crea...Francesco d’Angela, Service Designer di @HintoGroup- “Oltre la Frontiera Crea...
Francesco d’Angela, Service Designer di @HintoGroup- “Oltre la Frontiera Crea...Associazione Digital Days
 
Best digital marketing e-book form bignners
Best digital marketing e-book form bignnersBest digital marketing e-book form bignners
Best digital marketing e-book form bignnersmuntasibkhan58
 
Exploring the Impact of Social Media Trends on Society.pdf
Exploring the Impact of Social Media Trends on Society.pdfExploring the Impact of Social Media Trends on Society.pdf
Exploring the Impact of Social Media Trends on Society.pdfolivalibereo
 
social media optimization complete indroduction
social media optimization complete indroductionsocial media optimization complete indroduction
social media optimization complete indroductioninfoshraddha747
 
5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software Solutions5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software SolutionsDevherds Software Solutions
 
Understand the Key differences between SMO and SMM
Understand the Key differences between SMO and SMMUnderstand the Key differences between SMO and SMM
Understand the Key differences between SMO and SMMsearchextensionin
 
Navigating Global Markets and Strategies for Success
Navigating Global Markets and Strategies for SuccessNavigating Global Markets and Strategies for Success
Navigating Global Markets and Strategies for SuccessElizabeth Moore
 
Digital Marketing in 5G Era - Digital Transformation in 5G Age
Digital Marketing in 5G Era - Digital Transformation in 5G AgeDigital Marketing in 5G Era - Digital Transformation in 5G Age
Digital Marketing in 5G Era - Digital Transformation in 5G AgeDigiKarishma
 
SEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessSEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessLiv Day
 
TAM Sports IPL 17 Advertising Report- M01 - M23
TAM Sports IPL 17 Advertising Report- M01 - M23TAM Sports IPL 17 Advertising Report- M01 - M23
TAM Sports IPL 17 Advertising Report- M01 - M23Social Samosa
 
Digital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet MarketingDigital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet MarketingShauryaBadaya
 
2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local Leads2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local LeadsSearch Engine Journal
 
Richard van der Velde, Technical Support Lead for Cookiebot @CMP – “Artificia...
Richard van der Velde, Technical Support Lead for Cookiebot @CMP – “Artificia...Richard van der Velde, Technical Support Lead for Cookiebot @CMP – “Artificia...
Richard van der Velde, Technical Support Lead for Cookiebot @CMP – “Artificia...Associazione Digital Days
 
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the InternetExploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internetnehapardhi711
 
2024 WTF - what's working in mobile user acquisition
2024 WTF - what's working in mobile user acquisition2024 WTF - what's working in mobile user acquisition
2024 WTF - what's working in mobile user acquisitionJohn Koetsier
 
History of JWT by The Knowledge Center.pdf
History of JWT by The Knowledge Center.pdfHistory of JWT by The Knowledge Center.pdf
History of JWT by The Knowledge Center.pdfwilliam charnock
 
A Comprehensive Guide to Technical SEO | Banyanbrain
A Comprehensive Guide to Technical SEO | BanyanbrainA Comprehensive Guide to Technical SEO | Banyanbrain
A Comprehensive Guide to Technical SEO | BanyanbrainBanyanbrain
 

Recently uploaded (20)

Paul Russell Confidential Resume for Fahlo.pdf
Paul Russell Confidential Resume for Fahlo.pdfPaul Russell Confidential Resume for Fahlo.pdf
Paul Russell Confidential Resume for Fahlo.pdf
 
8 distribution in rural mkts.ppt Rural Marketing
8 distribution in rural mkts.ppt Rural Marketing8 distribution in rural mkts.ppt Rural Marketing
8 distribution in rural mkts.ppt Rural Marketing
 
The power of SEO-driven market intelligence
The power of SEO-driven market intelligenceThe power of SEO-driven market intelligence
The power of SEO-driven market intelligence
 
Francesco d’Angela, Service Designer di @HintoGroup- “Oltre la Frontiera Crea...
Francesco d’Angela, Service Designer di @HintoGroup- “Oltre la Frontiera Crea...Francesco d’Angela, Service Designer di @HintoGroup- “Oltre la Frontiera Crea...
Francesco d’Angela, Service Designer di @HintoGroup- “Oltre la Frontiera Crea...
 
Best digital marketing e-book form bignners
Best digital marketing e-book form bignnersBest digital marketing e-book form bignners
Best digital marketing e-book form bignners
 
Exploring the Impact of Social Media Trends on Society.pdf
Exploring the Impact of Social Media Trends on Society.pdfExploring the Impact of Social Media Trends on Society.pdf
Exploring the Impact of Social Media Trends on Society.pdf
 
social media optimization complete indroduction
social media optimization complete indroductionsocial media optimization complete indroduction
social media optimization complete indroduction
 
5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software Solutions5 Digital Marketing Tips | Devherds Software Solutions
5 Digital Marketing Tips | Devherds Software Solutions
 
Understand the Key differences between SMO and SMM
Understand the Key differences between SMO and SMMUnderstand the Key differences between SMO and SMM
Understand the Key differences between SMO and SMM
 
Navigating Global Markets and Strategies for Success
Navigating Global Markets and Strategies for SuccessNavigating Global Markets and Strategies for Success
Navigating Global Markets and Strategies for Success
 
Digital Marketing in 5G Era - Digital Transformation in 5G Age
Digital Marketing in 5G Era - Digital Transformation in 5G AgeDigital Marketing in 5G Era - Digital Transformation in 5G Age
Digital Marketing in 5G Era - Digital Transformation in 5G Age
 
SEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise SuccessSEO and Digital PR - How to Connect Your Teams to Maximise Success
SEO and Digital PR - How to Connect Your Teams to Maximise Success
 
TAM Sports IPL 17 Advertising Report- M01 - M23
TAM Sports IPL 17 Advertising Report- M01 - M23TAM Sports IPL 17 Advertising Report- M01 - M23
TAM Sports IPL 17 Advertising Report- M01 - M23
 
Digital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet MarketingDigital Marketing Courses In Pune- school Of Internet Marketing
Digital Marketing Courses In Pune- school Of Internet Marketing
 
2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local Leads2024's Top PPC Tactics: Triple Your Google Ads Local Leads
2024's Top PPC Tactics: Triple Your Google Ads Local Leads
 
Richard van der Velde, Technical Support Lead for Cookiebot @CMP – “Artificia...
Richard van der Velde, Technical Support Lead for Cookiebot @CMP – “Artificia...Richard van der Velde, Technical Support Lead for Cookiebot @CMP – “Artificia...
Richard van der Velde, Technical Support Lead for Cookiebot @CMP – “Artificia...
 
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the InternetExploring Web 3.0 Growth marketing: Navigating the Future of the Internet
Exploring Web 3.0 Growth marketing: Navigating the Future of the Internet
 
2024 WTF - what's working in mobile user acquisition
2024 WTF - what's working in mobile user acquisition2024 WTF - what's working in mobile user acquisition
2024 WTF - what's working in mobile user acquisition
 
History of JWT by The Knowledge Center.pdf
History of JWT by The Knowledge Center.pdfHistory of JWT by The Knowledge Center.pdf
History of JWT by The Knowledge Center.pdf
 
A Comprehensive Guide to Technical SEO | Banyanbrain
A Comprehensive Guide to Technical SEO | BanyanbrainA Comprehensive Guide to Technical SEO | Banyanbrain
A Comprehensive Guide to Technical SEO | Banyanbrain
 

16 Web & Graphic Design Trends to Watch in 2016

  • 1. 16 Web & Graphic Design Trends to Watch in 2016
  • 2. 1. Usability • In 2016, design is all about the user. User experience (UX) is the new black. • No one will care about how cool your design looks, if it’s not usable. • Your online business won’t grow if you don’t take user experience into account. • Your website needs to load fast and be easy to use. • Page Load Speed is a great issue. Adding just one second of bloat to your site means sales drop by 27%.
  • 3. 2. Responsive Design • Mobile is already the “first screen”. • Google is literally crushing sites that don’t offer a mobile-friendly experience. • User experience on mobile phone is key. • Hiding a desktop function for mobile users is not an acceptable solution anymore. • If your users can’t fully experience your website on their daily metro conmutes, then your whole site needs to be revised.
  • 4. • In 2016 the meaning of responsive design goes even further. • Now, all your graphic design and artwork will have to adhere to the rules of responsive. No “one size or format fits all”. • The best example of this is the recent Netflix brand redesign.
  • 5. 3. App inspired web design • Websites should learn from app design (speed, zero distractions, tailored user experience). • Remove all unessential information and let the user interact with your content as fast as he can.
  • 6. 4. Clever menus • Some people hated the now omnipresent Hamburger Menu or navicon. Now, say hello to clever menus. • Hidden navigations that appear out of nowhere depending on the user’s actions will soon be the norm. • Even if we can’t see it at the moment, experience tells us that there is a menu on every website. So no need to worry, it will just appear when we need it. • Experts are predicting that clever / hidden menus will be fully responsive to multidirectional scrolling.
  • 7. 5. Modules and modular text • No one likes to read a dreadfully long blurb of text. • The first trick to breakdown long texts in the web was to try to write in short paragraphs. • But you can take a modular approach to web page layout. • Modular design is a technique where everything is built using a block grid pattern. • This doesn’t mean a boring pattern, like a chessboard. • In fact, it can mean exactly the opposite: hard to anticipate patterns, that make it easy for us to read and be interested in the different parts of a website. Image: Well Made Studio
  • 8. 6. Modular and infinite scrolling • Modular scrolling means every module on a website may scroll on its own, independently from the other modules. • You may have already seen it (though sometimes it’s hard to notice) in sites with a sidebar that doesn’t scroll at the same speed than the main content. • But it’s about to get better. Picture a website divided in two columns with independent scroll, as you can see here. • It all began with infinite scroll. A trend that you may have noticed in 2015. Some of the most popular sites on the world today, like Pinterest, Twitter or Facebook already use it.
  • 9. • Infinite and modular scroll work on the same premise: scrolling down is easier and faster than clicking and it doesn’t interrupt user experience by loading a new page. • Time.com’s bounce rate dropped 15 percentage points after they adopted infinite scrolling (source).
  • 10. 7. Material Design • Material design wasn’t widely adopted until 2015. • But Material as a trend that you’ll find in websites, apps, artwork, etc. will be adopted massively during 2016. • It will be the year of material design’s dominance. • Expect to see those long, solid shadows virtually everywhere.
  • 11. 8. Flat Design • Material design came along to fix some of flat design’s usability problems, but that doesn’t mean flat is dead. • In fact, flat design will also grow to be even more popular during 2016. • With a lot of big brands adopting flat design in the last few years, mass audiences are more aware that less is better when it comes to visual style. Images credit: Brafton
  • 12. • Flat web design has another UX advantage: image files weigh less and do not add to page load time. • The general guidelines of flat design will be widely spread around small brands and blogs artwork all over the web (eg, ghost buttons). • At the same time, those on the know on graphic design will be moving on to Flat 2.0.
  • 13. 9. Visual Storytelling Some data: • 100 million people worldwide watch at least one video per day. • Website visitors are 64% more likely to make a purchase after watching a video. • 80% of viewers recall watching a video ad up to 30 days after seeing it. • 92% of those watching video on mobile devices share the content with others.
  • 14. • Human beings process visual elements 60,000 times faster than reading words. (Source). • Now, design needs to play a content function; it won’t be a mere companion to the text that tells the story anymore.
  • 15. 10. Infographics • Everyone loves a good infographic, and above all, they love the results: infographics are shared 3 more times than any other piece of visual content. • What kind of infographics are we going to see generating buzz in 2016? • The time of boring old infographics based on the same old templates are about to fade away. Putting three or four bullet points and adding a few cute icons just won’t cut it anymore. • It’s time to mix infographic storytelling capabilities with the deep insight of data visualizations. Infographic and big data together.
  • 16. 11. Cool Typography • With typography becoming a key element in any serious branding efforts, broad audiences are g designers etting used to seeing more artistic typefaces. • Typography is a language in itself. • Years ago, only graphic were able to talk that language. • Today, more people are gaining access to it, thanks to the wider range of available web fonts. • 2016 will see a comeback of big fonts, italic and all caps for logos and headings. • Another big trend here are typefaces that appear to come from someone holding a pen.
  • 17. 12. Modern retro • Modern retro is cool. It started as a trend in logo design and it’s already permeating to web and graphic design. • There’s a subtle difference in what retro means now. Old retro refers to early 20th century, up until the 60s. • Modern retro is all about the early days of computer age: think vintage video games, pixel art, big cell phones, Tron… • Anything that was big in visual style between the late 70s and early 90s is back!
  • 18. 13. Rich colors • When it comes to colors, the 80s will rule. Prepare for a world of bright pastels and rich, bold accent colors. • “A happier, sunnier place where we feel free to express a wittier version of our real selves”, in the words of the Pantone Fashion Color Report For Spring 2016. • The Top10 2016 spring colors according to Pantone look like this: • Whatever you do, just don’t pick a boring, washed-out color. You’ve been warned.
  • 19. 14. Grids and geometrical shapes • Grid design is a clear system, easy to work with for designers, plus the users can easily understand it and use it very easily too. • But every trend has its flip side, and experts also predict that, as a response there will be a rise in free-form shapes. • These are just like geometrical shapes, but with dents. • Rough edged and hand-drawn shapes are a signature of neo-grunge, another trend that will gain prominence in 2016.
  • 20. 15. Kill The Stock Photo! • Stock photos are one of the most boring and unoriginal things you can include in a website. • 2015 was the year that a host of free alternative stock photos sites tried to make it more accesible for anyone to get quality stock images in their sites. • Everyone ended up picking the same photos and you found them everywhere online, over and over again. • Why use stock photos? You have millions of alternatives. • Please use images custom made for your site, either by yourself or by a professional. • What about a hand-drawn illustration? (You’ll see a lot of these in 2016). • Or a custom graphic? Or even better, what about video?
  • 21. 16. Video & GIFs • You’ve probably noticed all those cool websites with video backgrounds. • Most of them take a long time to load, but that will change once people understand they have to compress the video as much as possible. • Video will replace images in lots of places, other than website backgrounds. • Vine, Snapchat et al have gotten us into the habit of staring at short video loops. • Watch out for profile pictures that are not pictures anymore, but a short video • Above all, watch out for the invasion of animated GIFs. • Facebook is to blame for opening the Pandora Box and they will soon be EVERYWHERE.
  • 22. So what do you think: Will my predictions be spot on, or will they utterly fail? Please let me know in the comments.