• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Design Trends 2012

Web Design Trends 2012



Web Design trends for 2012: ...

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



Total Views
Views on SlideShare
Embed Views



19 Embeds 1,163

http://www.bogdannedelcu.com 658
http://www.ancabundaru.ro 212
http://bogdanbarliga.blogspot.com 98
http://bogdanbarliga.blogspot.ro 67
http://www.bogdanbarliga.blogspot.com 43
http://www.bundaru.ro 35
http://paper.li 14
https://twitter.com 8
http://www.linkedin.com 7
http://a0.twimg.com 7
https://si0.twimg.com 3
http://bogdanbarliga.blogspot.se 3
http://webcache.googleusercontent.com 2
http://bogdanbarliga.blogspot.de 1
https://twimg0-a.akamaihd.net 1
http://www.bogdanbarliga.blogspot.it 1
http://us-w1.rockmelt.com 1
http://www.copyscape.com 1
http://bogdanbarliga.blogspot.ch 1



Upload Details

Uploaded via as Adobe PDF

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.


13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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.
    Are you sure you want to
    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.
    Are you sure you want to
    Your message goes here
  • Cool tips. It works for me when i design a website on photoshop. This is just great. Thanks!
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Web Design Trends 2012 Web Design Trends 2012 Presentation Transcript

    • 8‐10 May 2012 Philadelphia Fresh New LookModern Web Design Trends Marianne Kolodiy Web Designer at Yorkshire Building Society
    • 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
    • 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
    • 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 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)
    • New approach: fixed width, fluid feel• Fixed width, optimised for 1024x768 and  above.• Background stretching to the sides, giving the  design a fluid feel.
    • https://www.asb.co.nz
    • New approach: variable fixed• The layout is changed to best accommodate the browser  window size.  http://www.colly.com/ ,  http://simplebits.com/
    • 2. Footer – the underground world• No longer an afterthought • Rich design• Larger space• Information, social media, contact details• Useful for cross‐linking and SEO
    • 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 Replacement Methodshttp://webdesign.tutsplus.com/articles/typography‐articles/a‐web‐designers‐guide‐to‐font‐replacement‐methods/
    • 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 corners look modern. They  suggest fluidity and natural movement
    • 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/
    • 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‐over effects  • parallax
    • 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 speeds)
    • 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/
    • https://www.mint.com/
    • http://www.wearecupcup.com/
    • 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
    • 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 from Australia’s other big four banks .
    • 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
    • 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’t necessarily require online presence on Facebook or Twitter
    • 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/
    • 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)
    • Marianne Kolodiy Web Designer and Front‐End Developer at Yorkshire Building Society mkolodiy@ybs.co.ukhttp://uk.linkedin.com/in/mariannekolodiy
    • Look your best Who said love is blind? ‐ Mae West