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.

Current web design trends

11,918 views

Published on

This is my presentation on web trends as I presented at the 2012 HOW Live Conference in Boston.

Published in: Design, Technology

Current web design trends

  1. 1. CURRENT WEB DESIGN TRENDS TRENDS, TECHNOLOGY AND THE NEW TOOLS OF THE TRADEPATRICK MCNEIL – HOW DESIGN LIVE 2012
  2. 2. TODAY I WANT TO TALK ABOUT WEB TRENDS TECHNOLOGY AND WORKFLOWPATRICK MCNEIL – HOW DESIGN LIVE 2012
  3. 3. I’M CONFUSED TRENDS AND WORKFLOWS? ISN’T THIS AN ODD PAIRING? LIKE FINE WINE WITH BUFFALO WINGSPATRICK MCNEIL – HOW DESIGN LIVE 2012
  4. 4. WHO AM I? I AM PATRICK MCNEIL 1. Find me on pmcneil.com or on twitter @designmeltdown 2. I am a freelance writer, designer, teacher and web developer 3. I have worked in the web community for around 12 years now 4. I love to write books, talk about design and teach designers about the webPATRICK MCNEIL – HOW DESIGN LIVE 2012
  5. 5. URL AT THE ENDPATRICK MCNEIL – HOW DESIGN LIVE 2012
  6. 6. THE TRADITIONAL DESIGN WORKFLOWPATRICK MCNEIL – HOW DESIGN LIVE 2012
  7. 7. 3 NOT SO SURPRISING TECH DRIVEN DESIGN TRENDS TECHNOLOGY IS SELDOM GENTLE ABOUT DRIVING CHANGEPATRICK MCNEIL – HOW DESIGN LIVE 2012
  8. 8. MULTIPLE DEVICESPATRICK MCNEIL – HOW DESIGN LIVE 2012
  9. 9. RESPONSIVE DESIGN ADAPTING TO A USERS ENVIRONMENTPATRICK MCNEIL – HOW DESIGN LIVE 2012
  10. 10. MULTIPLE LAYOUTSHTTP://WWW.GOLDENISLES.COM/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
  11. 11. HTTP://UCSD.EDU/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  12. 12. WHAT DOES THIS MEAN FOR DESIGNERS? MORE WORK OF COURSEPATRICK MCNEIL – HOW DESIGN LIVE 2012
  13. 13. INCREASINGLY RICH DESIGNS RETURNING TO A FORMER STATE OF VISUAL INTENSITYPATRICK MCNEIL – HOW DESIGN LIVE 2012
  14. 14. TYPOGRAPHIC FREEDOMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  15. 15. HTTP://BITFOUNDRY.CA/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  16. 16. HTTP://DANEDEN.ME/TYPE/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  17. 17. LIVE TYPE PLAYS NICE IN A RESPONSIVE WORLDPATRICK MCNEIL – HOW DESIGN LIVE 2012
  18. 18. TYPE TOOLS THESE USE CSS TO EMBED CUSTOM FONTS http://www.google.com/webfonts https://typekit.com/ http://www.fontsquirrel.com/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  19. 19. TYPE PLUGINS USING JAVASCRIPT TO ENHANCE TYPOGRAPHY Find more here: http://www.howinteractivedesign.com/technology/39-modern-web-typography-toolsPATRICK MCNEIL – HOW DESIGN LIVE 2012
  20. 20. CSS3 THE LATEST VERSION OF CSSPATRICK MCNEIL – HOW DESIGN LIVE 2012
  21. 21. NEW CSS3 STYLES CODE BASED VISUAL STYLES 1. Rounded corners 2. Multiple backgrounds 3. Drop shadows 4. Text shadows 5. Gradients 6. Transitions (animations between styles) 7. Transformations (scale, rotate etc) 8. @font face 9. RGBA (colors with alpha transparency)PATRICK MCNEIL – HOW DESIGN LIVE 2012
  22. 22. WHY IS CODE BETTER THEN IMAGES?PATRICK MCNEIL – HOW DESIGN LIVE 2012
  23. 23. HTTP://JOELGLOVIER.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  24. 24. HTTP://BOOKMARKLY.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  25. 25. ALL 3 WORK TOGETHER RESPONSIVE DESIGN + CSS3 + WEB TYPOGRAPHY A MAGICAL MIX OF INSPIRING GOODNESSPATRICK MCNEIL – HOW DESIGN LIVE 2012
  26. 26. HOUSTON WE HAVE A PROBLEMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  27. 27. DESIGNING IN CODE A CLASSIC CHICKEN AND EGG CONUNDRUMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  28. 28. A BUSTED PROCESS OUT WITH THE OLD – BUT IN WITH WHAT?PATRICK MCNEIL – HOW DESIGN LIVE 2012
  29. 29. THE TRADITIONAL DESIGN WORKFLOWPATRICK MCNEIL – HOW DESIGN LIVE 2012
  30. 30. MODERN TOOLS SMART PEOPLE ARE ON ITPATRICK MCNEIL – HOW DESIGN LIVE 2012
  31. 31. CSSHAT.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  32. 32. CSSHAT SAMPLEPATRICK MCNEIL – HOW DESIGN LIVE 2012
  33. 33. HTTP://WWW.WEBINK.COM/WEBFONTPLUGINPATRICK MCNEIL – HOW DESIGN LIVE 2012
  34. 34. CSS3 CODE HTTP://CSS3GENERATOR.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  35. 35. ADOBE SHADOW HTTP://LABS.ADOBE.COM/TECHNOLOGIES/SHADOW/ Image source: http://www.webmonkey.com/2012/03/adobe-shadow-simplifies-mobile-web-testing/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  36. 36. QUICK TESTING HTTP://RESPONSIVEPX.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  37. 37. DESIGN PROCESS TRENDS NEW APPROACHES AND TECHNIQUES SHAPING THE INDUSTRYPATRICK MCNEIL – HOW DESIGN LIVE 2012
  38. 38. PICK AN APPROACH FORM A STRATEGY 1. Desktop first (pretty much what we have been doing all along) 2. Mobile first (http://stuffandnonsense.co.uk/projects/320andup/) 3. Separate mobile & desktop sites (still need to consider responsiveness) 4. Design or brand driven (more like the traditional approach) 5. UX focused (user testing at the core)PATRICK MCNEIL – HOW DESIGN LIVE 2012
  39. 39. IDENTIFY BREAK POINTS CRITICAL SIZES YOUR DESIGN WILL ADAPT TO Some important sizes: 1. 320px – smartphones in portrait 2. 480px – smartphones in landscape 3. 600px – small tablets in portrait 4. 768px – small tablets in landscape 5. 1024px – some tablets, laptops and desktop monitors 6. 1200px - widescreen monitors 7. 1600x – large monitors Most often you will need to plan for 3 or 4 sizesPATRICK MCNEIL – HOW DESIGN LIVE 2012
  40. 40. INSPIRATION HTTP://MEDIAQUERI.ES/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  41. 41. SKETCH BOOK HTTP://APPSKETCHBOOK.COM/ FOR $12.95PATRICK MCNEIL – HOW DESIGN LIVE 2012
  42. 42. FRAMEWORKS A GOOD STARTING POINT: HTTP://FLUIDBASELINEGRID.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  43. 43. A NEW PROCESS A PROPOSED PROCESS FOR THE NEW APPROACHESPATRICK MCNEIL – HOW DESIGN LIVE 2012
  44. 44. THIS LEADS US TO OUR FINAL TRENDPATRICK MCNEIL – HOW DESIGN LIVE 2012
  45. 45. A SURPRISE ENDING DESIGNERS LEARNING TO CODE HTML, CSS & JAVASCRIPTPATRICK MCNEIL – HOW DESIGN LIVE 2012
  46. 46. CODEVISUALLY.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  47. 47. JQUERYFORDESIGNERS.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  48. 48. TYMPANUS.NET/CODROPS/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  49. 49. CSSDECK.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  50. 50. HTMLANDCSSBOOK.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  51. 51. THANK YOU VIEW THIS PRESENTATION: PMCNEIL.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012

×