Create front-end style guides in minutes

Try for free See features


Tags are keywords that are used to make information (e.g. pictures, computer files, books) easier to find. Encourage users add their own tags to objects and let them manage existing tags to build...

Created: Janne Lammi, July 5, 2010

Tag an Object


Breadcrumbs show where the page is located in the website hierarchy (Location breadcrumbs), or the attributes the user has chosen while refining the search (Attribute breadcrumbs). Breadcrumbs are...

Created: Janne Lammi, July 5, 2010



Autocomplete helps the user to provide valid answers. As the user types into a text box, a list of matching answers is shown in a drop-down menu below the text box. The user can then choose the co...

Created: Janne Lammi, July 5, 2010



When there are too many search results to comfortably fit on a single page, split the results into separate pages. Allow the user to navigate between pages using a pagination (paging) control. Fl...

Created: Janne Lammi, July 5, 2010

Search Pagination


An overlay is a mini page in a layer on top of a page. Overlays simplify the user interface and provide a way for the user to access additional information without leaving current page. It is also...

Created: Janne Lammi, June 30, 2010



The most common way to handle large data sets on websites is to use Search Pagination pattern. Endless scrolling provides an alternative way to get to additional content. When the user scrolls dow...

Created: Janne Lammi, June 30, 2010

Endless Scrolling


Information dashboard organizes and presents the most important information from large amounts of data in a way that it is easy to read and understand for the user. Dashboards summarize informatio...

Created: Janne Lammi, June 14, 2010

Information Dashboard


Show only the most essential features/content up front, and hide the rest. Reveal secondary elements “inline” when requested by the user. Travelstart flight booking service BBC: Tools fo...

Created: Janne Lammi, June 14, 2010

Inline Expand


Radial menu provides available actions in a context-sensitive, circular popup menu made of several pie slices. It gets activated when the user clicks on an item that can be manipulated. Songza pro...

Created: Janne Lammi, June 14, 2010

Radial Menu


Guide the user through a task with several steps by showing a clear path to completion. CampaignMonitor uses a static One Page Wizard for signing up. Sign up process is quite simple – the pr...

Created: Janne Lammi, June 14, 2010

One Page Wizard


Allow user to refine search results in real time using multiple filters in any order until the desired items are found. hotel search is a typical example of Refining Search pattern. Sea...

Created: Janne Lammi, June 14, 2010

Refining Search


Present each major step in a task on a different page. Indicate clearly where the user is in the process, and how many steps there are left. Finnair uses Multiple Page Wizard to guide the user thr...

Created: Janne Lammi, June 14, 2010

Multiple Page Wizard


Inline Input Adder minimizes the amount of input fields by allowing the user to add more fields when needed. As the additional input fields are not shown until requested by the user, the user inte...

Created: Janne Lammi, June 14, 2010

Inline Input Adder


Good defaults pattern is about helping users to answer questions on the form by providing good default values. This pattern saves the users work and reduces the possibility of input errors. Trave...

Created: Janne Lammi, June 14, 2010

Good Defaults


Show collection of items with multiple attributes in a data table to make the data easy to scan, analyze, and customize. In WordPress administration panel, blog posts are shown in a data table al...

Created: Janne Lammi, June 8, 2010

Data Table