For websites, just images and a color scheme do not make a design. The user interface that is everywhere on a website, such as pagers, topic trees, tabs, icons etc, are also an important element. That said, don’t you always settle for the usual things?
As a result, you end up making a site that’s hard to use. You end up with the same kind of design. To help clear up these worries, we’ve come up with a collection of handy resources.
Yahoo! Design Pattern Library
This is a categorized reference of various UI patterns. With their commentaries on what kind of pattern solves what kind of problems, or what is useful for certain conditions, you can understand the basics of patterns. For example, if there are to many items that confuse the users, or if there isn’t enough space, you can use accordion if the items can be neatly divided into groups. You can set the headers to category or group names, or so they say.
This too is a design pattern reference. In addition to examples used on real websites, there’s also a comments section where you can exchange opinions.
We recommend these two books when you want to learn in more detail.
Designing Interfaces, 2nd Edition — Patterns for Effective Interaction Design
In Chapter 1, it covers the basic principles of how users act, and what operation you can expect. After that, it comments on categorized patterns like the sites mentioned above. The real highlights are the actual screenshots and detailed commentaries.
You can learn the basics of interface design that are useful not only in websites, but also in software development. This book is full color.
Designing Web Navigation — Optimizing the User Experience
This is a book specializing in topic trees, pagers and other elements of website navigation design. There is a wealth of commentary on UI patterns here as well, with emphasis on smooth transition between pages within the site, and they also comment on navigation principles such as how to choose patterns and wording.
For UI patterns, you tend to avoid unusual designs when you think about the user experience. However, if you think about that too much, you will end up with similar designs every time. It’s difficult. In order to give you some inspiration, we will introduce a site with a
collection of UI designs. Most of them searchable in different page categories, like those patterns that are actually being used, or 404 – Not Found for pages with no data.
You can search by color. It also has a pattern reference.
This site collects things related to UIs from design posting sites like dribbble.
Collection: Design Patterns by factoryjoe
This is a screenshot collection sorted into albums by category. You can use Flickr this way too.
It gives evaluations in two categories, Idea and Visual. I think the tag categories for platforms (iOS) as well as types of pages and styles are something you won’t see on any other site.
Mobile UI Patterns
This is a UI gallery specializing in iOS. When you select a category, you can view them in a horizontally scrolling UI, similar to the App Store.
A better UI design leads to higher page views numbers and a better conversion rate. Please master these items and improve your designs.
For comparing or proposing designs, 7 web design sheets to improve your clients’ satisfaction are also handy.