Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
technical.ly baltimore
MORE: A Look at 2014 Design Trends
MORE Storytelling
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Use Less Text
To tell the story, use other
methods (video,...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Use Less Text
To tell the story, use other
methods (video,...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Use Less Text
To tell the story, use other
methods (video,...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Be Real
Less stock imagery. More
portraits and large photo...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Be Real
Less stock imagery. More
portraits and large photo...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Be Real
Less stock imagery. More
portraits and large photo...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Easy Steps
Details split into short
sections for easy read...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Easy Steps
Details split into short
sections for easy read...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Interactivity
Allow visitors to explore
and control the pa...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Interactivity
Allow visitors to explore
and control the pa...
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Focused Page
Use the page to tell one
story ... and only o...
MORE Seamlessness
more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Overlays/Tooltips
Getting more info doesn’t
require openin...
more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Caption Overlays
Let imagery make a bigger
impact with few...
more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Endless Scrolling
Scrolling is easier than
waiting for a n...
more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Simple Navigation
Navigation that’s minimal,
yet accessibl...
more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Smaller Search
The search field can
occupy less real estat...
more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Form Interaction
Rethinking the way forms act
can make con...
more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Grid Layout
Easily move from desktop
to mobile with the gr...
MORE Aesthetics
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Parallax Scrolling
Create movement and
depth on your 2D scre...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Parallax Scrolling
Create movement and
depth on your 2D scre...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Typography
Sites don’t always need to
use web safe fonts. Ju...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Typography
Sites don’t always need to
use web safe fonts. Ju...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Typography
Sites don’t always need to
use web safe fonts. Ju...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors
No skeumorphism.
Just keep it simple.
Coloured L...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors
No skeumorphism.
Just keep it simple.
TriplAgent...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors
No skeumorphism.
Just keep it simple.
Kick Point...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Illustration
Give the site a print feel
by using custom illu...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Illustration
Give the site a print feel
by using custom illu...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Photography
Like a full-bleed print
spread, the impact is
th...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Photography
Like a full-bleed print
spread, the impact is
th...
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Photography
Like a full-bleed print
spread, the impact is
th...
more: a look at 2014 design trends
#notatSXSW
MORE storytelling
MORE seamlessness
MORE aesthetics
more: a look at 2014 design trends
#notatSXSW
Thanks for
Attending!
facebook.com/R2integrated
@r2integrated
r2integrated.c...
Upcoming SlideShare
Loading in …5
×

2014 Design Trends

2,920 views

Published on

2014 Web Design Trends

Published in: Design
  • Be the first to comment

2014 Design Trends

  1. 1. technical.ly baltimore MORE: A Look at 2014 Design Trends
  2. 2. MORE Storytelling
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. MORE Seamlessness
  15. 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. 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. 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. 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. 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. 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. 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. 22. MORE Aesthetics
  23. 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. 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. 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. 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. 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. 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. 29. more: a look at 2014 design trends #notatSXSW More Aesthetics Flat Colors No skeumorphism. Just keep it simple. TriplAgent triplagent.com Responsive
  30. 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. 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. 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. 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. 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. 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. 36. more: a look at 2014 design trends #notatSXSW MORE storytelling MORE seamlessness MORE aesthetics
  37. 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

×