113 Design Guidelines for Homepage Usability

While many of these guidelines can apply to web design in general, they are especially critical to follow when designing your homepage, because the stakes are so high. Your homepage is often your first — and possibly your last — chance to attract and retain each customer, rather like the front page of a newspaper. One of the biggest values of a newspaper's front page is the priority given to top news items. All homepages would benefit from being treated like a front page of a major newspaper, with editors who determine the high-priority content and ensure continuity and style consistency.

Even small changes to homepages can have drastic effects. Consider the homepage for The New York Times. If you kept all design and writing exactly the same on this site but decided to show only local New York content on the homepage and link to all national and international news, it would inexorably alter the entire site. On closer examination, this change doesn't seem small at all.

While we encourage you to use these guidelines as a checklist when designing your homepage, recognize that they are written in an abbreviated manner here. You'll need to look at the individual site examples to see these guidelines used properly or, more often, overlooked. This is an extensively illustrated book, and it is only in the context of a visual example that you can fully appreciate the negative impact of ignoring these guidelines.

All said, these are just guidelines, not axioms. For all sites, there are surely exceptions. However, we've developed these guidelines from our combined 14 years of experience, running user tests on homepages and observing what makes them pass or fail user scrutiny. Although you can greatly improve the usability of your homepage by following these guidelines, you also need to involve your own users in the process through methods such as field studies and usability testing and incorporate iterative feedback into your development cycle. If you make a decision not to follow a guideline, do so based on customer information in the context of your homepage.

The guidelines are presented under the following broad categories.

Communicating the Site's Purpose
Communicating Information About Your Company
Content Writing
Revealing Content Through Examples
Archives and Accessing Past Content
Links
Navigation
Search
Tools and Task Shortcuts
Graphics and Animation
Graphic Design
UI Widgets
Window Titles
URLs
News and Press Releases
Popup Windows and Staging Pages
Advertising
Welcomes
Communicating Technical Problems and Handling Emergencies
Credits
Page Reload and Refresh
Customization
Gathering Customer Data
Fostering Community
dates and times
Stock Quotes and Displaying Numbers

Read the full list of 113 design guidelines

50 Useful and Free Web UI, Mobile UI and Wireframe Kits

Here we are featuring 50 useful, free and spanking new Web UI and wireframes resources that you will definitely love. Web designers always require some fundamental user interface elements to produce a model of user interface either of a website or software. For that, they require wireframing and UI design kits which help them to replicate the user interface.

In this round-up, we have collected some web and mobile user interface kits which are practical in creating low-fidelity illustrations for your projects. We hope you will like this compilation. Enjoy! Feel free to share your opinion with us.

Read the full post

Really Useful Resources and Tools for Responsive Web Design

Responsive web design has been a trending topic for a little while now, plenty of tools have been developed around this technique to help designers and users to get the most out of their mobile and tablet browsers. Even if responsive design is not limited to small devices, most of the resources published today target the mobile and tablet world and try to provide easy ways to build beautiful and flexible websites. When dealing with responsive design, the first thing most designers think about is media-queries.

In this article, we will go far beyond the media queries, and showcase a list of pretty useful tools and resources everybody could use to improve the display of their website for mobile, tablet, and of course desktop browsers.

Read the article