Current web design trends
•
8 likes•1,944 views
This is my presentation on web trends as I presented at the 2012 HOW Live Conference in Boston.
Recommended
More Related Content
Similar to Current web design trends
Similar to Current web design trends (20)
More from Patrick McNeil
Recently uploaded
Recently uploaded (20)
Current web design trends
- 1. CURRENT WEB DESIGN TRENDS TRENDS, TECHNOLOGY AND THE NEW TOOLS OF THE TRADE PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 2. TODAY I WANT TO TALK ABOUT WEB TRENDS TECHNOLOGY AND WORKFLOW PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 3. I’M CONFUSED TRENDS AND WORKFLOWS? ISN’T THIS AN ODD PAIRING? LIKE FINE WINE WITH BUFFALO WINGS PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 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 web PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 5. URL AT THE END PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 6. THE TRADITIONAL DESIGN WORKFLOW PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 7. 3 NOT SO SURPRISING TECH DRIVEN DESIGN TRENDS TECHNOLOGY IS SELDOM GENTLE ABOUT DRIVING CHANGE PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 8. MULTIPLE DEVICES PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 9. RESPONSIVE DESIGN ADAPTING TO A USERS ENVIRONMENT PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 11. MULTIPLE LAYOUTS HTTP://WWW.GOLDENISLES.COM/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 13. HTTP://UCSD.EDU/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 14. WHAT DOES THIS MEAN FOR DESIGNERS? MORE WORK OF COURSE PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 15. INCREASINGLY RICH DESIGNS RETURNING TO A FORMER STATE OF VISUAL INTENSITY PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 18. TYPOGRAPHIC FREEDOM PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 20. HTTP://BITFOUNDRY.CA/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 21. HTTP://DANEDEN.ME/TYPE/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 22. LIVE TYPE PLAYS NICE IN A RESPONSIVE WORLD PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 23. 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
- 24. TYPE PLUGINS USING JAVASCRIPT TO ENHANCE TYPOGRAPHY Find more here: http://www.howinteractivedesign.com/technology/39-modern-web-typography-tools PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 25. CSS3 THE LATEST VERSION OF CSS PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 26. 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
- 27. WHY IS CODE BETTER THEN IMAGES? PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 29. HTTP://JOELGLOVIER.COM/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 31. HTTP://BOOKMARKLY.COM/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 32. ALL 3 WORK TOGETHER RESPONSIVE DESIGN + CSS3 + WEB TYPOGRAPHY A MAGICAL MIX OF INSPIRING GOODNESS PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 33. HOUSTON WE HAVE A PROBLEM PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 34. DESIGNING IN CODE A CLASSIC CHICKEN AND EGG CONUNDRUM PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 35. A BUSTED PROCESS OUT WITH THE OLD – BUT IN WITH WHAT? PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 36. THE TRADITIONAL DESIGN WORKFLOW PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 37. MODERN TOOLS SMART PEOPLE ARE ON IT PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 38. CSSHAT.COM PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 39. CSSHAT SAMPLE PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 40. HTTP://WWW.WEBINK.COM/WEBFONTPLUGIN PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 41. CSS3 CODE HTTP://CSS3GENERATOR.COM/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 42. 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
- 43. QUICK TESTING HTTP://RESPONSIVEPX.COM/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 44. DESIGN PROCESS TRENDS NEW APPROACHES AND TECHNIQUES SHAPING THE INDUSTRY PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 45. 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
- 46. 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 sizes PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 47. INSPIRATION HTTP://MEDIAQUERI.ES/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 48. SKETCH BOOK HTTP://APPSKETCHBOOK.COM/ FOR $12.95 PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 49. FRAMEWORKS A GOOD STARTING POINT: HTTP://FLUIDBASELINEGRID.COM/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 50. A NEW PROCESS A PROPOSED PROCESS FOR THE NEW APPROACHES PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 51. THIS LEADS US TO OUR FINAL TREND PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 52. A SURPRISE ENDING DESIGNERS LEARNING TO CODE HTML, CSS & JAVASCRIPT PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 53. CODEVISUALLY.COM PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 54. JQUERYFORDESIGNERS.COM PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 55. TYMPANUS.NET/CODROPS/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 56. CSSDECK.COM PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 57. HTMLANDCSSBOOK.COM PATRICK MCNEIL – HOW DESIGN LIVE 2012
- 58. THANK YOU VIEW THIS PRESENTATION: PMCNEIL.COM PATRICK MCNEIL – HOW DESIGN LIVE 2012
Editor's Notes
- 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