Top 10 Web Design Trends for 2010

Posted on 15. Sep, 2009 by bmackler in Inspiration


Its always tough to predict the future, and that is all the more true when talking about the web.  The internet continues to evolve so fast and in so many directions,  due in large part to  the various social media tools, making the web accessible to  people who never dreamed being part of it.

Here is a list of design trends that I think will play a large role over the next year, well into 2010.

Typography
This trend started over the past year and will continue.  Designs will trend toward the use of typography an integral part of the overall work rather than a liability.  Web designers will start using larger, more exciting fonts in place of system text. Overall, designers are paying closer attention to typographic details such as leading, line height and choice of font.

Typography

Typography

Sketches, hand drawn style and illustrations
Easily noticeable on a page.  Stands out from traditional graphics and gives the website a unique, personalized look.

Sketches, hand drawn style and illustrations

Sketches, hand drawn style and illustrations


Large images/photography

Large Images/Photography

Large Images/Photography


Magazine Layout
With more people going on line who see the web as the source of entertainment and real time information, many sites will be gearing towards this type of look  -  with short concise articles that are  easy to read and concise information.

Magazine Layout

Magazine Layout

Introduction Blocks
The upper-left area of a website is the most important block on the page, because that is the first place your eye goes when you come to a website.  This spot grabs most attention from visitors.  Therefore, this is the ideal place to get your message out and seen quickly.

You see this done in many types of design, including corporate design, web apps, or portfolios.  They take up alot of real estate, but that is ok.  the message is key.

Introduction Blocks

Introduction Blocks

Single Page Layouts
People are in a rush, they are online to find the info and go, they dont have time to look around and see everything.  This is the solution to get them the info they need.

Single Page Layouts

Single Page Layouts

Social Media Sites and Add-ins/Icons
Of course this has been the big thing of the past two years, and it will only continue to get bigger.  Linking to them, using apps from them helps build communities around products, ideas and causes.  More and more people are spending time online, looking to connect with like minded people and to share their lives and information.  Sometimes too much information

Social Media Sites and Add-ins

Social Media Sites and Add-ins

White Space
Its cleaner, easier on the eyes and easy to find what you are looking for.  White is a great color to help something stand out…except if its the carpet under your dining room table.  Sometimes simplicity is key.

White Space

White Space

Icons and Visuals
Not talking about clip art, but stylistically rendered icons that represent in a small image what the entire section is about.  Easy for people to recognize and people notice them quicker than text

Icons and Visuals

Icons and Visuals

Modal Boxes (Lightboxes)
These guys are great.  Open source applications that are, basically the next generation of pop-ups. They are a cleaner, more user-friendly alternative to the basic JavaScript pop up windows that have been around for years.   Clean, crisp, and focuses the user on the information you are presenting, whether it is a picture, text or a video.  This little tool helps the presentation go a long way.

Modal Boxes

Modal Boxes

Tags: , , , ,

70 Responses to “Top 10 Web Design Trends for 2010”

  1. [...] Tendencias 2010. Tags: Diseño This entry was posted on Martes, Enero 5th, 2010 at 11:31 am and is filed under Creatividad, Diseño, Photoshop. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

  2. [...] web-designtrends-for-2010 [...]

  3. Inside the Webb

    09. Jan, 2010

    The magazine layout is one of the most popular I’ve noticed, especially on blogs. Blogs have blown up to enormous proportions on the web these days, and there are so many people visiting these new posts and sites

    [Reply]

  4. [...] We have even managed to find a couple or reviews of top trends for 2010 done by WebDesignLedger and DesignTutorials4U. These guys have done a great job but we feel like we have a couple of ideas to [...]

  5. Elijah

    11. Jan, 2010

    Thanks for your shearing.

    [Reply]

  6. [...] 2. Social media (generic) 3. Social media (specific) 4. Online marketing 5. Digital marketing 6. Web design 7. Wireless 8. News media (minus 2) 9. Personal branding 10. Tech terms (out with the [...]

  7. [...] or Verdana.  This year, find 15 new free fonts to incorporate into your designs.  As I discussed previously, a stronger emphasis on typography in web design is going to be a growing trend in the coming [...]

  8. Shirly Dimitriadis

    18. Jan, 2010

    Thanks for the great information

    [Reply]

  9. Deja Llanes

    19. Jan, 2010

    I wish I had found this site before because it is great!

    [Reply]

  10. toputop

    27. Jan, 2010

    Awesome collection.Good post.

    [Reply]

  11. Helen

    28. Jan, 2010

    I think you are right about the latest trends
    Also, you may find it exciting to vote for the best web design trends of 2010

    [Reply]

  12. blythe

    29. Jan, 2010

    I agree with the hand drawn style as a trend for 2010. It gives a great personalized feel to the site and is a great way to break outside the box, don’t you agree? I actually wrote a blog on this as well. Check out my thoughts if you are interested:

    http://www.microarts.com/culture/branding-insights/2009/11/going-back-to-basics.php/?s=bl

    [Reply]

  13. Diseno Web

    10. Feb, 2010

    thanks for the information, very similar to the 2009 trends.

    [Reply]

  14. [...] Top 10 Web Design Trends for 2010 | Web Design Tutorials and Inspiration | Learn Photoshop Online | … (tags: web design trends) [...]

  15. [...] information was gathered in many blogs, here are some of them and also related articles:www.designtutorials4u.comwww.webdesignledger.comwww.webtoolkit4.mewww.uxpassion.comwww.siteinspire.net Share and Enjoy: [...]

Leave a Reply

My Zimbio

Web Design Tutorials and Online Journal