Create front-end style guides in minutes

Try for free See features


Use hover invitation to clue the user in to interact with objects and still keeping the interface lightweight. Flickr uses hover invitation to let the user know he can edit image title directly &#...

Written by: Janne Lammi

Hover Invitation


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...

Written by: Janne Lammi

Tag an Object


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...

Written by: Janne Lammi

Search Pagination


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...

Written by: Janne Lammi



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...

Written by: Janne Lammi



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...

Written by: Janne Lammi

Endless Scrolling


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...

Written by: Janne Lammi

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...

Written by: Janne Lammi

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...

Written by: Janne Lammi

Refining Search


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...

Written by: Janne Lammi

Information Dashboard


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...

Written by: Janne Lammi

Inline Input Adder


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...

Written by: Janne Lammi

Inline Expand


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...

Written by: Janne Lammi

Good Defaults


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...

Written by: Janne Lammi

Multiple Page Wizard


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...

Written by: Janne Lammi

Data Table