Current web design trends

11,710 views
11,566 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
2 Comments
7 Likes
Statistics
Notes
No Downloads
Views
Total views
11,710
On SlideShare
0
From Embeds
0
Number of Embeds
9,064
Actions
Shares
0
Downloads
1
Comments
2
Likes
7
Embeds 0
No embeds

No notes for slide
  • Don’t forget, this is the cloud were talking. So for the most part macvs pc shouldn’t matter.
  • Easier to maintainMore flexibleRuns faster
  • Assumes a single layoutRequires us to design then translate it to codeDoesn’t accommodate for a smooth design to production workflow
  • 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

    ×