UI Web Patterns.
- Many common interface patterns today almost seem obvious, but are still well worth taking a look into considering their importance
- Patterns are tested and tried and with the right use, can create highly functional and easy to navigate websites.
Picture Manager
- Use thumbnails, item views, and a browsing interface to create a familiar structure for managing photos, videos, and other pictorial items.
News Stream
- Show time-sensitive items in a reverse chronological list, with the latest items at the top. Update it dynamically , and combine the items from different sources or people into one single stream.
Settings Editor
- Provide an easy-to-find, self-contained page or window where users can change settings, preferences, or properties. Divide the content into separate tabs or pages, if you need to manage large numbers of settings.
Alternative Views
- Let the user choose among alternative views that are substantially different from the default view.
Many WorkSpaces
- Use multiple top-level tabs, tab groups, and windows so that users can view more than one page, project, file, or context at a time. Let users place these workspaces side by side if possible.
Fat Menus
- Display a long list of navigation options in drop-down or fly-out menus. Use these to show all the subpages in site sections. Organize them with care, using well-chosen categories or a natural sorting order, and spread them out horizontally.
Animated Transitions
- Shows where your application is minimized so you can know where to go when you want it again
- Put two side-by-side panels on the interface. In the first one, show a list of items that the user can select at will; in the second one, show the content of the selected item.
One-Window Drilldown
- Show a list or menu of items in a single window. When the user selects an item from the list, show the details or contents of that item in the window, replacing the list
List Inlay
- Show a list of items as rows in a column. When the user selects an item, open that item’s details in place, within the list itself. Allow items to be opened and closed independently of each other.
Grid of Equals
- Arrange content items in a grid or matrix. Each item should follow a common template, and each item’s visual weight should be similar. Link to jump pages as necessary.
Radial Table
- Show a table or list of items as a circle instead of a column. Draw connections among items through the interior of the circle.
Infinite list
- At the bottom of a long list, put a button that loads and appends more items to the list.
Password Strength Meter
- Give the user immediate feedback on the validity and strength of a new password while it is being typed.
- The trend is towards forcing the user to choose a good password. In today’s world, this is sometimes a necessity.
Liquid Layout
- As the user resizes the window, resize the page contents along with it so that the page is constantly “filled”.
- You have to make conscious decisions about what to change, where to change it and even if remove and add information.
- Many decisions about what to work on (and how to work on it), e.g., mobile-only page, dedicated app, etc., will be based on time, budget and hard judgement about what is really necessary.
Deep Background
- Place an image or gradient into the page’s background that visually receds behind the foreground elements.
A website with poor design, this is something we must avoid.
