Create front-end style guides in minutes

Try for free See features

good-defaults

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

horizontal-module-tabs

Horizontal Module Tabs separates content into different panes, and the panes can be viewed one at a time. Tabs are arranged horizontally above (sometimes below) the content, and the selected tab i...

Written by: Janne Lammi

Horizontal Module Tabs

hover-invitation

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

hover-reveal-tools

Hover-Reveal Tools allows user to interact directly with the content. Hover-Reveal Tools are contextual tools that are shown when the user hovers over an element that has tools available. Hiding t...

Written by: Janne Lammi

Hover-Reveal Tools

information-dashboard

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

Inline edit allows the user to edit text directly in the page without requiring going to a separate page. It makes the interaction more direct and intuitive as the user can edit the text in the sa...

Written by: Janne Lammi

Inline Edit

inline-expand

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

inline-input-adder

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

input-controls

A special pattern describing basic input controls (Text box, checkbox, radio button, and drop-down list) in Web applications. Source: http://jannel.wufoo.com/forms/form-controls/ Different types...

Written by: Janne Lammi

Input Controls

input-prompt

Input Prompt is an info text placed inside a text box. It guides the user on how the text field should be filled or how it can be used. The input prompt inside a text field will disappear if click...

Written by: Janne Lammi

Input Prompt

invite

Offering users a way to invite their friends to start using your website is a good way to get more users to your site. Invite feature is also necessary for online collaboration tools, because peop...

Written by: Johannes Hocksell

Invite

When there are too many search results to comfortably fit on a single page, split the results into separate pages. Let the user to navigate between pages using a pagination control. The ultra simp...

Written by: Janne Lammi

Multicon-page pagination

</>
multiple-page-wizard

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

Navigation list provides a simple and easy way to build groups of navigation links with optional headers. They&#8217;re best used in the sidebars of a Website/Web app.

Written by: Janne Lammi

Navigation List

</>
navigation-tabs

Tab-based navigation consists of buttons or tabs aligned side by side and it is usually located at the top of the page. Navigation tabs help the users know where they are and find their way around...

Written by: Janne Lammi

Navigation Tabs