Web Design Tutorials The Ultimate Roundup - This is a great article from Hongkiat showing some of the many design layout applicable businesses or individuals.

60+ Incredible Tutorials And Resources Collections For Designers To Discover The Best Of The Web In June - Following up with some of the latest design trends out, this collection of  sites are some of the best from last month.

23 Colorful And Inspiring Web Designs Where Textures Are In Full Action - Texture is a great way to give dimension to a web site. This short list displays some great examples of creative and affective use.

150 Useful Adobe Photoshop Web Design Layout Tutorials and Techniques - A great collection of both web design and photoshop tutorials to take  yor designs to the next level.

27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts - Just as the title states “Decent Web Layouts” i would have to agree with but you get the idea. Some time layout examples is all you need to get the creative juices flowing.

Honorable Mentions

35 Tutorials for Creating Website Layouts in Photoshop 

40 Useful Photoshop Web Layout Tutorials

Top 30 Photoshop Web Design Layout Tutorials

The phrase Web 2.0 can mean several different things. I’ve heard many different descriptions ranging from, “using the web as a platform” to “anything that’s cool and on the web right now!” I would say that It is an internet era that gave birth to a design style. As you would imagine, most of the web 2.0 applications are designed using web 2.0 style. Simple layouts, reflecting floors, glossy text, and gradients are common characteristics.

There is a lot of hype, both positive and negative, surrounding the whole web 2.0 era and style.  Haters might pull out the argument that all Web 2.0 sites look the same, and that the style is becoming something of a default rather than evoking originality and creativity.  I’ll be honest, I could live the rest of my life without seeing another glossed over starburst with a poorly applied gradient, and be perfectly content.  However, there is no denying that websites designed in a Web 2.0 style are user friendly and effective.  The cleanliness and simplicity of Web 2.0 sites result in effective navigation and allows users to find exactly what they need. The simple anotomy of Web 2.0 sites are conducive with the F Shape reading pattern of the users. Take a look at the examples below. All of the sites follow the basic anatomy of a web page, and F Shape reading pattern. (Which you can further read about in our previous blog posts)

Bottom line is, Web 2.0 isn’t about following a design trend or copying popular sites. Web 2.0 is about pushing yourself or your company to make the most beautiful and effective websites possible.  The benefits of designing a Web 2.0 site have been studied and proven to be the best and most advantageous way of designing a site.  Unfortunatly, too often you will hear nightmarish stories of design firms that crank out 90′s style websites for their clients just for the sake of giving them a web presence. Thus producing one too many nasty looking sites that no one wants to visit.

It is for this very reason that Blueprint, and other companies like us, do what we do. We care about making the world wide web a better and more beautiful place.

Related Articles:

Benefits Of Web 2.0 Design

40 original Web 2.0 Websites

People read websites in an F shaped pattern. Why is this important to know? The more aware you are of how people will be reading or scanning your website the more effectively you can layout the information on your pages. This knowledge can help you place important information and navigation in the obvious “hot spots.” It will help make your site more efficient in helping users find information quickly.  Many studies have been done concerning the way people scan web pages. A particularly helpful eye-tracking study can be found on Jakob Nielson’s alert box on useit.com. In this study, over 200 users looked at thousands of websites. Using advanced eye-tracking technology, they found that the users’ reading behavior was consistent. Their eyes scanned the pages in a way that resembles an F shape.  Obviously this is a GENERAL pattern, but the study found that typically people scan horizontally across the top part, then horizontally a little lower, and finish by scrolling vertically down the left side. If you squint your eyes at the image below, it is easier to see the F pattern in all of the examples.

Nielson goes on to make three important implications:

1. Users will rarely read text thoroughly and word-for-word. Keep text concise and to the point so that users can find relevant information quickly.

2. The first two paragraphs must include the most important information

3. Start subheads and bullet points with significant and information carrying words

Something to take note of however, is that these web pages are mostly text based.  In websites with a lot of images and graphics the patterns are very different, and vary significantly from each other.  In an article by Jeff Sexton, he further discusses how we can control the scan patterns by the graphics we use and how we place them on the page. Take a look at the image below and you can see how by simply changing the angle of the babies head, the focus of the web page is directed towards the text and product instead of the image. While most web pages contain minimum graphics it is still important to know how images can affect the users scan pattern

At Blueprint, we design all of our websites using this knowledge. Below are a couple examples of past sites that we have designed with the desired Scan patterns.  You’ll notice that the first two implement the F Shape Pattern. However, the third is an example of a graphic based web page.

Will Call Sports Grill

Patch Landscaping

The Burback Brothers Inc. Animation Group.

Related Articles:

The F shape Pattern

12 Eye-tracking Website Tactics

How Graphic Design Layouts Affect Scanning Patterns