Multimania - Web Design Trends

1,746 views

Published on

Web designers are having a great time. Over the last year, a lot of web design patterns took off: more simplicity, more cleanliness and more focus. This energy can translate into Flat Design, RWD, web fonts, parallax… Michaël has worked in the Web Design industry since the 90’s. In this session, he will list the current web design trends. Then he will explain WHY they took off, and HOW to achieve them. Get inspired and join the conversation about our Web Design industry.

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,746
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
15
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Multimania - Web Design Trends

  1. 1. Web Design trends THE WHY AND THE HOW
  2. 2. © 2013 Adobe Systems Incorporated. All Rights Reserved. #CreateNow© 2013 Adobe Systems Incorporated. All Rights Reserved. #CreateNow Démystification
  3. 3. Bonjour
  4. 4. Michaël CHAIZE @mchaize
  5. 5. @mchaize LET’S CONNECT 1994 2014>
  6. 6. TABLE BASED PAGES @mchaize LET’S CONNECT 1994 2014> CSS HITS THE WEB THE RISE OFFLASH THE RISE OFJAVASCRIPT WEB 2.0 - RIA THE MOBILE WEB
  7. 7. THE TRENDS LET’S CONNECT @mchaize
  8. 8. Great things are not accomplished by those who yield to trends and fads and popular opinion. JACK KEROUAC « I don't follow trends. I have my own look, which I call ‘Lolita Meets Old Hollywood Glam’. KATTY PERRY « THE TRENDS @mchaize LET’S CONNECT @mchaize
  9. 9. THE TRENDS LET’S CONNECT @mchaize TOP 5
  10. 10. LET’S CONNECT @mchaize RESPONSIVE WEB DESIGN STORY TELLING TYPOGRAPHY FLAT DESIGN HERO
  11. 11. RESPONSIVE WEB DESIGN @mchaize LET’S CONNECT @mchaize
  12. 12. Same content ? @mchaize LET’S CONNECT @mchaize
  13. 13. @mchaize LET’S CONNECT @mchaize
  14. 14. Same needs ? @mchaize LET’S CONNECT @mchaize
  15. 15. @mchaize LET’S CONNECT @mchaize
  16. 16. RESPONSIVE WEB DESIGN THE TOOLS @mchaize LET’S CONNECT @mchaize REFLOW CC // MUSE CC
  17. 17. STORYTELLING @mchaize LET’S CONNECT @mchaize
  18. 18. STORYTELLING @mchaize LET’S CONNECT @mchaize LIGHT ANIMATIONS > INTERACTIVE STORIES
  19. 19. @mchaize LET’S CONNECT @mchaize
  20. 20. @mchaize LET’S CONNECT @mchaize
  21. 21. @mchaize LET’S CONNECT @mchaize HTML5 ANIMATION
  22. 22. @mchaize LET’S CONNECT @mchaize HTML5 ANIMATION - PARALLAX SCROLLING
  23. 23. @mchaize LET’S CONNECT @mchaize VIDEO
  24. 24. @mchaize LET’S CONNECT @mchaize VIDEO
  25. 25. STORYTELLING @mchaize LET’S CONNECT @mchaize THE TOOLS - ANIMATION EDGE ANIMATE
  26. 26. PARALLAX SCROLLING @mchaize LET’S CONNECT @mchaize THE TOOLS EDGE ANIMATEADOBE MUSE
  27. 27. STORYTELLING @mchaize LET’S CONNECT @mchaize VIDEO
  28. 28. @mchaize LET’S CONNECT @mchaize
  29. 29. NON BORING TYPOGRAPHY @mchaize LET’S CONNECT @mchaize
  30. 30. NON BORING TYPOGRAPHY @mchaize LET’S CONNECT @mchaize Andale Mono Times New Roman Georgia Verdana Arial Courier New Trebuchet MS Comic Sans Impact 1996 2009 TYPEKIT
  31. 31. @mchaize LET’S CONNECT @mchaize TYPEKIT
  32. 32. TRENDS IN TYPOGRAPHY @mchaize LET’S CONNECT @mchaize Lobster is the new Comic Sans MS Proxima Nova is the new Helvetica
  33. 33. @mchaize LET’S CONNECT @mchaize TYPEKIT
  34. 34. @mchaize LET’S CONNECT @mchaize TYPEKIT EDGE WEB FONTS free
  35. 35. FLAT DESIGN @mchaize LET’S CONNECT @mchaize
  36. 36. @mchaize LET’S CONNECT @mchaize
  37. 37. FLAT DESIGN @mchaize LET’S CONNECT @mchaize
  38. 38. @mchaize LET’S CONNECT @mchaize FLATVSREALISM.COM
  39. 39. FLAT DESIGN @mchaize LET’S CONNECT @mchaize
  40. 40. FLAT DESIGN @mchaize LET’S CONNECT @mchaize
  41. 41. FLAT DESIGN & SVG @mchaize LET’S CONNECT @mchaize FROM ILLUSTRATOR & PHOTOSHOP
  42. 42. @mchaize LET’S CONNECT @mchaize SNAPSVG.io
  43. 43. FLAT DESIGN & LONG SHADOWS @mchaize LET’S CONNECT @mchaize BUT… WAIT A MINUTE…
  44. 44. @mchaize LET’S CONNECT @mchaize http://lab.rayps.com/lsg/
  45. 45. COLORS KULER.ADOBE.COM @mchaize LET’S CONNECT @mchaize
  46. 46. HERO BANNER MANIPULATED IMAGERY @mchaize LET’S CONNECT @mchaize
  47. 47. @mchaize LET’S CONNECT @mchaize http://www.seattlecidercompany.com/
  48. 48. @mchaize LET’S CONNECT @mchaize
  49. 49. CSS BLEND MODES @mchaize LET’S CONNECT @mchaize
  50. 50. BONUS CRAZY STUFF @mchaize LET’S CONNECT @mchaize
  51. 51. @mchaize LET’S CONNECT @mchaize
  52. 52. CONCLUSION WRAP-UP @mchaize LET’S CONNECT @mchaize
  53. 53. THE TRENDS USE WEB FONTS @mchaize LET’S CONNECT @mchaize FLAT DESIGN RESPONSIVE WEB DESIGN HTML5 ANIMATIONS 5 COLORS MAX SVG EVERYWHERE VIDEO PRODUCTION BONUS
  54. 54. THE TRENDS UNDERSTAND THEM BEFORE FOLLOWING THEM @mchaize LET’S CONNECT @mchaize
  55. 55. I WANT A FLAT DESIGN WEBSITE. I WANT THE BEST UX. I WANT A RESPONSIVE PAGE. I WANT THE BEST MOBILE XP. I WANT ANIMATIONS ON MY PAGE. I WANT TO TELL A STORY. @mchaize LET’S CONNECT @mchaize
  56. 56. KEEP CALM A WEB DESIGNER IS ALSO A DESIGNER @mchaize LET’S CONNECT @mchaize
  57. 57. F#!K THE TRENDS @mchaize LET’S CONNECT @mchaize
  58. 58. @mchaize LET’S CONNECT @mchaizehttp://www.mileycyrus.com/
  59. 59. MERCI BEAUCOUP @mchaize LET’S CONNECT @mchaize Michael CHAIZE www.CreativeDroplets.com

×