• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Current web design trends
 

Current web design trends

on

  • 11,316 views

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

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

Statistics

Views

Total Views
11,316
Views on SlideShare
2,286
Embed Views
9,030

Actions

Likes
7
Downloads
1
Comments
2

7 Embeds 9,030

http://pmcneil.com 8966
http://feeds.feedburner.com 29
http://translate.googleusercontent.com 27
http://webcache.googleusercontent.com 3
http://pinterest.com 2
http://www.pinterest.com 2
https://si0.twimg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Current web design trends Presentation Transcript

  • CURRENT WEB DESIGN TRENDS TRENDS, TECHNOLOGY AND THE NEW TOOLS OF THE TRADEPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • TODAY I WANT TO TALK ABOUT WEB TRENDS TECHNOLOGY AND WORKFLOWPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • I’M CONFUSED TRENDS AND WORKFLOWS? ISN’T THIS AN ODD PAIRING? LIKE FINE WINE WITH BUFFALO WINGSPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • 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
  • URL AT THE ENDPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • THE TRADITIONAL DESIGN WORKFLOWPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • 3 NOT SO SURPRISING TECH DRIVEN DESIGN TRENDS TECHNOLOGY IS SELDOM GENTLE ABOUT DRIVING CHANGEPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • MULTIPLE DEVICESPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • RESPONSIVE DESIGN ADAPTING TO A USERS ENVIRONMENTPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • MULTIPLE LAYOUTSHTTP://WWW.GOLDENISLES.COM/ PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • HTTP://UCSD.EDU/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • WHAT DOES THIS MEAN FOR DESIGNERS? MORE WORK OF COURSEPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • INCREASINGLY RICH DESIGNS RETURNING TO A FORMER STATE OF VISUAL INTENSITYPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • TYPOGRAPHIC FREEDOMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • HTTP://BITFOUNDRY.CA/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • HTTP://DANEDEN.ME/TYPE/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • LIVE TYPE PLAYS NICE IN A RESPONSIVE WORLDPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • 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
  • 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
  • CSS3 THE LATEST VERSION OF CSSPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • 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
  • WHY IS CODE BETTER THEN IMAGES?PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • HTTP://JOELGLOVIER.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • HTTP://BOOKMARKLY.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • ALL 3 WORK TOGETHER RESPONSIVE DESIGN + CSS3 + WEB TYPOGRAPHY A MAGICAL MIX OF INSPIRING GOODNESSPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • HOUSTON WE HAVE A PROBLEMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • DESIGNING IN CODE A CLASSIC CHICKEN AND EGG CONUNDRUMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • A BUSTED PROCESS OUT WITH THE OLD – BUT IN WITH WHAT?PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • THE TRADITIONAL DESIGN WORKFLOWPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • MODERN TOOLS SMART PEOPLE ARE ON ITPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • CSSHAT.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • CSSHAT SAMPLEPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • HTTP://WWW.WEBINK.COM/WEBFONTPLUGINPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • CSS3 CODE HTTP://CSS3GENERATOR.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • 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
  • QUICK TESTING HTTP://RESPONSIVEPX.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • DESIGN PROCESS TRENDS NEW APPROACHES AND TECHNIQUES SHAPING THE INDUSTRYPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • 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
  • 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
  • INSPIRATION HTTP://MEDIAQUERI.ES/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • SKETCH BOOK HTTP://APPSKETCHBOOK.COM/ FOR $12.95PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • FRAMEWORKS A GOOD STARTING POINT: HTTP://FLUIDBASELINEGRID.COM/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • A NEW PROCESS A PROPOSED PROCESS FOR THE NEW APPROACHESPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • THIS LEADS US TO OUR FINAL TRENDPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • A SURPRISE ENDING DESIGNERS LEARNING TO CODE HTML, CSS & JAVASCRIPTPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • CODEVISUALLY.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • JQUERYFORDESIGNERS.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • TYMPANUS.NET/CODROPS/PATRICK MCNEIL – HOW DESIGN LIVE 2012
  • CSSDECK.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • HTMLANDCSSBOOK.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012
  • THANK YOU VIEW THIS PRESENTATION: PMCNEIL.COMPATRICK MCNEIL – HOW DESIGN LIVE 2012