2014 Design Trends

2,486 views
2,369 views

Published on

2014 Web Design Trends

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,486
On SlideShare
0
From Embeds
0
Number of Embeds
1,520
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×