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.

Visit PsPrint to get the best deals in online printing services!

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

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

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

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

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

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

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

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

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

By Blogsdna

Tags: best of the web, Inspiration, typography, web development, websites

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

Tendencias de Diseño para este 2010 « Blog Telaio

07. Jan, 2010

[...] 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. [...]
2010 Webdesign Trend előrejelzés at Webdesign és Online Marketing Blog

07. Jan, 2010

[...] http://www.littleboxofideas.com/blog/features/designers-predict-design-trends-for-2010-part-i http://designtutorials4u.com/top-10-web-designtrends-for-2010 http://www.slideshare.net/tijs/web-design-trends-for-2010 [...]
WEb Design Trends 2010 « VIDE

09. Jan, 2010

[...] web-designtrends-for-2010 [...]
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]
Fresh and Popular Web Design Trends and TemplateMonster Templates | WebDesigners

10. Jan, 2010

[...] 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 [...]
Elijah

11. Jan, 2010

Thanks for your shearing.

[Reply]
The top 10 “Top 10” lists of 2010 predictions

13. Jan, 2010

[...] 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 [...]
eagrapho » 11 Essential New Years Resolutions For Web Designers In 2010

14. Jan, 2010

[...] 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 [...]
Shirly Dimitriadis

18. Jan, 2010

Thanks for the great information

[Reply]
Deja Llanes

19. Jan, 2010

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

[Reply]
toputop

27. Jan, 2010

Awesome collection.Good post.

[Reply]
» designtrends 2010at webontwikkelaars blog- Just another WordPress weblog

28. Jan, 2010

[...] http://designtutorials4u.com/top-10-web-designtrends-for-2010/ [...]
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]
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]
Webdesign Trendek 2010 – II. at Webdesign és Online Marketing Blog

08. Feb, 2010

[...] http://www.littleboxofideas.com/blog/features/designers-predict-design-trends-for-2010-part-i http://designtutorials4u.com/top-10-web-designtrends-for-2010 http://www.slideshare.net/tijs/web-design-trends-for-2010 [...]
Diseno Web

10. Feb, 2010

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

[Reply]
Merely Thinking» Blogarchiv » links for 2010-02-11

11. Feb, 2010

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

08. Mar, 2010

[...] 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: [...]
Adrian - Isle of Man Web Design

12. Mar, 2010

A great little round up of some of the trends of 2010. I’d like to try and use a bit more of the hand drawn illustration effects on my websites. I’m a huge fan of the term “less is more” except when concerning white space, then I feel more is definitely more.

Thanks for the list )

[Reply]
uberVU - social comments

23. Mar, 2010

Social comments and analytics for this post…

This post was mentioned on Twitter by FFcraftsman: Top 10 Web Design Trends for 2010 http://bit.ly/aOaFx...
FolioWork

24. Mar, 2010

I started noticing Single Page Layouts, love it, is the ultimate simplification!

[Reply]
Scott Phillips

02. Apr, 2010

I dont see a lot of motion with the above mentioned sites. Movement grabs the eye almost better than anything else.

[Reply]
Brent

22. Apr, 2010

Where did you get that COOL “Share and Enjoy” set of social bookmark/icon thingies at the bottom of the post..?? Is that a WP plugin?

[Reply]
bmackler Reply:
April 22nd, 2010 at 6:31 pm
@Brent, Hi, yes thats a great wp plugin called sexy bookmarks – http://www.sexybookmarks.net/

[Reply]
JADE CLOWARD

29. Apr, 2010

White Space! This is huge for me. Graphic Designer 1st taught me overall web design. Leave white space for people to visually see & remember your homepage! Homepage must be #1 INFORMATIVE & Easily navigated. Good reminder here on this site about “white space!” *Visit us online at http://clowarddesign.com & keep us informed @clowarddesign for you twitter folks. Thanks.

[Reply]
Alex Grande

09. May, 2010

We run a small mobile agency – http://www.wearepharaoh.com/ – and we all feel that your list of websites in the article is spot on. These websites you showcased have attention to detail and appropriately-placed unique elements. Both are key to any successful project!

[Reply]
selva comments

13. May, 2010

Wow! Awesome collection, really inspiring… thanks for sharing

[Reply]
Web Design

14. May, 2010

Thanks for sharing… Nice collection of 2010 web design trends….

[Reply]
web designer in india

17. May, 2010

Awesome post.. I feel the single page layout and intro text trend has continued from the last year!

[Reply]
10 Tendencias en Diseño web en este 2010 « .accesoweb

20. May, 2010

[...] imagenes y webs más sociales, son algúnas de las tendencias en diseño web se encuentran en este interesante artículo escrito por [...]
Suresh

24. May, 2010

I read your article.The things you have written sound very sincere and nice topics i am looking forward to its continuation. Many of us don’t know about this event.

Your post is helpful.

[Reply]
Chris

26. May, 2010

Wow, great article. Now that we are into May I think we can say your predictions are holding true…of course one was left off maybe? What about mobile versions, with release of iPad and the continued surge of mobile browsing in the market this trend will be a mainstay for years to come I think.

[Reply]
Design Trends – Web Apps Blog INFT11-132 - James Hooper 102 - (super hilarious and witty tagline, coming soon. I promise)

31. May, 2010

[...] designs, both consciously and subconsciously. Every year sees a new set of trends come and go. Design Tutorials 4 U have compiled a list of the current trends for 2010. Take a look and see what you [...]
angel

31. May, 2010

Very good ideas for our designs. Regards from españa

[Reply]
2010 Design Trends « Life of a Designer

02. Jun, 2010

[...] http://designtutorials4u.com/top-10-web-designtrends-for-2010/ [...]
Josh

07. Jun, 2010

Great article. Fully agree with these web design trends. I am just in the (long) process of completely redesigning my website. Lots of white space, and simple/clean navigation are first priority. I have bookmarked this page

[Reply]
Top 10 Web Designs trends to look for in 2010

10. Jun, 2010

[...] Reference: http://designtutorials4u.com/top-10-web-designtrends-for-2010/ [...]
chennai webdesign

10. Jun, 2010

As a web designer it helps me lot to design a new website based on your webdesign trends 2010. This site is so innovative to create my own website http://www.globsoftsolution.com…thanks for your valuable visuals…this site will serve me as my prototype for my new webdesigns..

[Reply]
طراحی سایت

15. Jun, 2010

Cool post, i’m missing the trend ”one page lay-outs”.

[Reply]
EngulfTech

16. Jun, 2010

I like the last part “Share & Enjoy”

[Reply]
navicekarper

17. Jun, 2010

I agree with post analysis web design | exhibitions designs

[Reply]
Yêu Tiếng Việt » Blog Archive » Xu hướng website 2010

19. Jun, 2010

[...] http://designtutorials4u.com/top-10-web-designtrends-for-2010/ Category: Phần mềm máy tính, Thiết kế mỹ thuật | Comment (RSS) | Trackback [...]
The Caribou Group

24. Jun, 2010

I thought this article was right on the money. Especially large images/photograhpy and the sketches / hand drawn. I would expect to see more and more of these kinds of sites as the year progresses.

Good job too because they’re lovely and I like looking at them

[Reply]
طراحی سایت

01. Jul, 2010

gerat tnx

[Reply]
Tasarım

05. Jul, 2010

It’s lovely to see that those trends are becoming real day by day!

[Reply]
Oyunlar

08. Jul, 2010

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

[Reply]
Posicionamiento Web

21. Jul, 2010

Good idea to put into practice in our designs. Thanks for your input. The comments also makes things interesting.

[Reply]
Frank

23. Jul, 2010

Love the list. Websites that have icons are easily remembered for me. I know some of these are already existing in the past years but have been developed each year. Thanks for sharing.

[Reply]
riesurya

27. Jul, 2010

wow, trully inspirational design. nice and clear explanation. it’s time to get back to sketch, i love it. thanks for sharing, cool

[Reply]
internet marketing arizona

03. Aug, 2010

great information you have discussed. got a few pointers. thanks.

[Reply]
Web design inspiration.. | akisplace.com

05. Aug, 2010

[...] 10 web design τάσεις για το 2010. [...]