Successfully reported this slideshow.
8‐10 May 2012                                      Philadelphia     Fresh New LookModern Web Design Trends            Mari...
The Importance of First Impression • Research confirms that users make aesthetic decisions about  the overall visual impre...
Modern Web Design Trends1. Layout: fixed, fluid, variable‐fixed, responsive design2. Footer: no longer an afterthought3. H...
1. Layout: Fixed or Fluid?fixed widthhttp://webdevrefinery.com/forums/topic/5897‐fixed‐   fluid widthvs‐fluid/
Reality check“Our craft is becoming a commodity and people in charge don’t care about the quality of the markup, CSS or ho...
New approach: fixed width, fluid feel• Fixed width, optimised for 1024x768 and   above.• Background stretching to the side...
https://www.asb.co.nz
New approach: variable fixed• The layout is changed to best accommodate the browser   window size.        http://www.colly...
2. Footer – the underground world•   No longer an afterthought •   Rich design•   Larger space•   Information, social medi...
National Australia Bank  http://www.nab.com.au/
Co‐operative Bank  http://www.co‐operativebank.co.uk/
3.1. Huge imagesHuge images create a visual impact that the visitor won’t soon forget. 
3.2. Big bold typography  • Large headings  • Non‐standard fonts  • Simple messagesThe Web Designer’s Guide to Font Replac...
3.3. Larger icons   Larger, richer icons with more detail
4. Rounded corners• 10 years ago straight corners were simpler to   implement and therefore very common• Today rounded cor...
5.1. Interactivity: carousels  • Carousels (slideshows):                                 interactive, dynamic showcase of ...
http://www.cheltglos.co.uk/
http://www.bnymellon.com/
http://www.stgeorge.com.au/personal
5.2. Interactivity:      interface enhancements   • overlays   • modal windows / lightbox   • collapsible panels   • mouse...
Help overlay
Collapsible Panels
Lightbox / modal window
http://www.taoeffect.com/espionage/ ‐ buttons change color to blue on hover
https://github.com/404 ‐ parallax effect (when user hovers over image, multiple backgrounds start moving at different spee...
6. Sense of depth • Rich surfaces • Gradients, shadows, reflections • Sense of depthCreating Depth in Web Design: 5 Design...
https://www.mint.com/
http://www.wearecupcup.com/
7. Fairness • Fairness • Ethical values • Community involvement • Environmental commitment • Communicating who you are (va...
http://www.co‐operativebank.co.uk/A ‘green’ section dedicated to ethics and fairness
http://www.nab.com.auNAB uses ethics and fairness in its marketing campaigns in an attempt to        differentiate itself ...
Nature‐related design elements • Grass, trees, leaves and plants • Wood and paper backgrounds  • Hand written text • Green...
http://www.taoeffect.com/espionage/
8. Social media • Logos of Facebook, Twitter, YouTube   make website look modern and up‐to‐date • Share and Like links don...
9. Touch screen considerations•   No CSS hover•   1024 x 768•   Fat fingers•   Right Handed•   No Flash … Yes HTML5Designi...
Summary1. Big and bold   (width 960px+, large footer, large images, headings and icons)2. Natural and green   (rounded cor...
Marianne Kolodiy    Web Designer and Front‐End Developer         at Yorkshire Building Society           mkolodiy@ybs.co.u...
Look your best Who said love is blind?     ‐ Mae West
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Web Design Trends 2012
Upcoming SlideShare
Loading in …5
×

Web Design Trends 2012

20,239 views

Published on

Web Design trends for 2012:

- Huge images, big headings, rich typography, larger icons

- Rich surfaces, gradients, shadows, sense of depth

- Fixed width, fluid feel

- Footer: no longer an afterthought

- Interactivity: carousels, subtle animations, overlays

- Fairness, ethical values, community, environment

- Social media

- Touch screen considerations

Published in: Design, Technology
  • Anugerah, 960px wide is actually meant for 1024 screens. You can't do a full 1024px website if you're wanting it to fit in a 1024 screen. You have to leave space for browser application usage such as the scroll page, winder border, etc. And by the way, 1024 is really the absolute smallest screen in existence these days, it's nothing new. As screen's get larger, we'll be able to make wider fixed width websites. The number of people using 1024 wide is shrinking.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great insight to the current trends in webdesign. I was going to use 960, but it turns out screens have gone bigger to 1024.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Cool tips. It works for me when i design a website on photoshop. This is just great. Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Web Design Trends 2012

  1. 1. 8‐10 May 2012 Philadelphia Fresh New LookModern Web Design Trends Marianne Kolodiy Web Designer at Yorkshire Building Society
  2. 2. The Importance of First Impression • Research confirms that users make aesthetic decisions about  the overall visual impression of web pages in as little as 50  milliseconds.  • These first impressions can color subsequent judgements of  perceived credibility, usability, and influence purchasing decisions “Attention web designers: You have 50 milliseconds to make a good first  impression.” Lindgaard, G., G. Fernandes, and C. Dudek. Behavior & Information Technology,  Carleton University, Ottawa, Canada http://www.ext.colostate.edu/conferences/ace‐netc/lindgaard.pdf
  3. 3. Modern Web Design Trends1. Layout: fixed, fluid, variable‐fixed, responsive design2. Footer: no longer an afterthought3. Huge images, big headings, rich typography, larger icons4. Rounded corners 5. Interactivity: carousels, subtle animations, overlays6. Rich surfaces, gradients, shadows, sense of depth7. Fairness, ethical values, community, environment8. Social media9. Touch screen
  4. 4. 1. Layout: Fixed or Fluid?fixed widthhttp://webdevrefinery.com/forums/topic/5897‐fixed‐ fluid widthvs‐fluid/
  5. 5. Reality check“Our craft is becoming a commodity and people in charge don’t care about the quality of the markup, CSS or how short our JavaScript is. What matters is how fast you can get it to market, how many people it reaches and how cheaply it can be built.” Christian Heilmann,  Developer Evangelist (London, UK)
  6. 6. New approach: fixed width, fluid feel• Fixed width, optimised for 1024x768 and  above.• Background stretching to the sides, giving the  design a fluid feel.
  7. 7. https://www.asb.co.nz
  8. 8. New approach: variable fixed• The layout is changed to best accommodate the browser  window size.  http://www.colly.com/ ,  http://simplebits.com/
  9. 9. 2. Footer – the underground world• No longer an afterthought • Rich design• Larger space• Information, social media, contact details• Useful for cross‐linking and SEO
  10. 10. National Australia Bank  http://www.nab.com.au/
  11. 11. Co‐operative Bank  http://www.co‐operativebank.co.uk/
  12. 12. 3.1. Huge imagesHuge images create a visual impact that the visitor won’t soon forget. 
  13. 13. 3.2. Big bold typography • Large headings • Non‐standard fonts • Simple messagesThe Web Designer’s Guide to Font Replacement Methodshttp://webdesign.tutsplus.com/articles/typography‐articles/a‐web‐designers‐guide‐to‐font‐replacement‐methods/
  14. 14. 3.3. Larger icons Larger, richer icons with more detail
  15. 15. 4. Rounded corners• 10 years ago straight corners were simpler to  implement and therefore very common• Today rounded corners look modern. They  suggest fluidity and natural movement
  16. 16. 5.1. Interactivity: carousels • Carousels (slideshows):                              interactive, dynamic showcase of featured  content.Carousels (82 examples)http://www.smileycat.com/design_elements/carousels/5 Big Usability Mistakes Designers Make on Carouselshttp://uxmovement.com/navigation/big‐usability‐mistakes‐designers‐make‐on‐carousels/
  17. 17. http://www.cheltglos.co.uk/
  18. 18. http://www.bnymellon.com/
  19. 19. http://www.stgeorge.com.au/personal
  20. 20. 5.2. Interactivity:  interface enhancements • overlays • modal windows / lightbox • collapsible panels • mouse‐over effects  • parallax
  21. 21. Help overlay
  22. 22. Collapsible Panels
  23. 23. Lightbox / modal window
  24. 24. http://www.taoeffect.com/espionage/ ‐ buttons change color to blue on hover
  25. 25. https://github.com/404 ‐ parallax effect (when user hovers over image, multiple backgrounds start moving at different speeds)
  26. 26. 6. Sense of depth • Rich surfaces • Gradients, shadows, reflections • Sense of depthCreating Depth in Web Design: 5 Design Trickshttp://www.onextrapixel.com/2011/06/20/creating‐depth‐in‐web‐design‐5‐design‐tricks/
  27. 27. https://www.mint.com/
  28. 28. http://www.wearecupcup.com/
  29. 29. 7. Fairness • Fairness • Ethical values • Community involvement • Environmental commitment • Communicating who you are (values),  and not only what you do (products) The only way is ethics http://www.marketingweek.co.uk/trends/the‐only‐way‐is‐ ethics/3028974.article
  30. 30. http://www.co‐operativebank.co.uk/A ‘green’ section dedicated to ethics and fairness
  31. 31. http://www.nab.com.auNAB uses ethics and fairness in its marketing campaigns in an attempt to  differentiate itself from Australia’s other big four banks .
  32. 32. Nature‐related design elements • Grass, trees, leaves and plants • Wood and paper backgrounds  • Hand written text • Green colour  10 Green Design Trends http://smashinghub.com/10‐green‐design‐trends.htm
  33. 33. http://www.taoeffect.com/espionage/
  34. 34. 8. Social media • Logos of Facebook, Twitter, YouTube make website look modern and up‐to‐date • Share and Like links don’t necessarily require online presence on Facebook or Twitter
  35. 35. 9. Touch screen considerations• No CSS hover• 1024 x 768• Fat fingers• Right Handed• No Flash … Yes HTML5Designing for Touch Screenhttp://www.whatcreative.co.uk/blog/tips/designing‐for‐touch‐screen/
  36. 36. Summary1. Big and bold (width 960px+, large footer, large images, headings and icons)2. Natural and green (rounded corners, rich surfaces, gradients, shadows, sense of depth, fairness, environment)3. Interactive (carousels, subtle animations, social media)
  37. 37. Marianne Kolodiy Web Designer and Front‐End Developer at Yorkshire Building Society mkolodiy@ybs.co.ukhttp://uk.linkedin.com/in/mariannekolodiy
  38. 38. Look your best Who said love is blind? ‐ Mae West

×