2014 Web Design Trends

1. technical.ly baltimore
MORE: A Look at 2014 Design Trends

2. MORE Storytelling

3. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Use Less Text
To tell the story, use other
methods (video, image, parallax)
Paypal paypal.com
Not Responsive

4. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Use Less Text
To tell the story, use other
methods (video, image, parallax)
The Walking Dead cabletv.com/the-walking-dead
Not Responsive

5. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Use Less Text
To tell the story, use other
methods (video, image, parallax)
Square squareup.com
Responsive

6. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Be Real
Less stock imagery. More
portraits and large photography.
Peak usepeak.com
Not Responsive

7. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Be Real
Less stock imagery. More
portraits and large photography.
Munchery munchery.com/how-it-works
Not Responsive

8. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Be Real
Less stock imagery. More
portraits and large photography.
Eight Oaks 8oaks.org
Responsive

9. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Easy Steps
Details split into short
sections for easy reading.
Fitbit fitbit.com/zip
Not Responsive

10. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Easy Steps
Details split into short
sections for easy reading.
Scytale scytale.pt
Responsive

11. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Interactivity
Allow visitors to explore
and control the pace.
Google - How Search Works
google.ca/intl/en/insidesearch/howsearchworks/thestory
Not Responsive

12. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Interactivity
Allow visitors to explore
and control the pace.
Life of Pi journey.lifeofpimovie.com
Not Responsive

13. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Focused Page
Use the page to tell one
story ... and only one
Goldee getgoldee.com
Responsive

14. MORE Seamlessness

15. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Overlays/Tooltips
Getting more info doesn’t
require opening a new webpage.
Coffee Cava coffeecava.ru
Not Responsive

16. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Caption Overlays
Let imagery make a bigger
impact with fewer distractions.
NOWNESS nowness.com/archive
Responsive

17. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Endless Scrolling
Scrolling is easier than
waiting for a new page to load.
Case 3D case-3d.com/#about
Not Responsive

18. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Simple Navigation
Navigation that’s minimal,
yet accessible.
frog design frogdesign.com
Responsive

19. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Smaller Search
The search field can
occupy less real estate.
Fi Blog blog.f-i.com
Responsive

20. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Form Interaction
Rethinking the way forms act
can make conversion faster.
Floating Label
dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction

21. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Grid Layout
Easily move from desktop
to mobile with the grid.
Google Science Fair googlesciencefair.com/en
Responsive

22. MORE Aesthetics

23. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Parallax Scrolling
Create movement and
depth on your 2D screen.
Adcade adcade.com
Responsive

24. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Parallax Scrolling
Create movement and
depth on your 2D screen.
National Geographic kennedyandoswald.com
Responsive

25. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Typography
Sites don’t always need to
use web safe fonts. Just pick
the right time ... and type.
Webstock 2014 webstock.org.nz/14
Responsive

26. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Typography
Sites don’t always need to
use web safe fonts. Just pick
the right time ... and type.
Whiteboard whiteboard.is
Responsive

27. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Typography
Sites don’t always need to
use web safe fonts. Just pick
the right time ... and type.
Mixd mixd.co.uk/approach
Responsive

28. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors
No skeumorphism.
Just keep it simple.
Coloured Lines colouredlines.com.au
Not Responsive

29. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors
No skeumorphism.
Just keep it simple.
TriplAgent triplagent.com
Responsive

30. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors
No skeumorphism.
Just keep it simple.
Kick Point kickpoint.ca
Responsive

31. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Illustration
Give the site a print feel
by using custom illustration.
Cyclemon cyclemon.com
Not Responsive

32. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Illustration
Give the site a print feel
by using custom illustration.
Break It Down breakitdown.ie
Not Responsive

33. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Photography
Like a full-bleed print
spread, the impact is
the same on the screen.
Kolibree kolibree.com
Responsive

34. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Photography
Like a full-bleed print
spread, the impact is
the same on the screen.
MSNBC msnbc.com
Responsive

35. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Photography
Like a full-bleed print
spread, the impact is
the same on the screen.
Vilebrequin Magazine magazine.vilebrequin.com/en
Responsive

36. more: a look at 2014 design trends
#notatSXSW
MORE storytelling
MORE seamlessness
MORE aesthetics

37. more: a look at 2014 design trends
#notatSXSW
Thanks for
Attending!
facebook.com/R2integrated
@r2integrated
r2integrated.com
@annafelizatweet
@anna_feliza
Anna-Feliza Sy, Graphic Designer