Create front-end style guides in minutes

Try for free See features

one-page-wizard

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

overlay

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

Overlay

primary-secondary-actions

Match the visual presentation of actions to their importance to minimize the risk for potential errors and help people complete a form as quickly as possible. Primary actions are actions such as “...

Written by: Janne Lammi

Primary & Secondary Actions

Progress bar tells the user the application is busy doing something and she needs wait. It should be used especially when the action in progress takes more than few seconds to complete to keep the...

Written by: Janne Lammi

Progress Bar

</>
radial-menu

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

ratings

Rating is an easy way for users to voice their opinion about a certain object. These objects can be physical products, services, or virtual items such as images, videos and articles. Users are inv...

Written by: Johannes Hocksell

Ratings

refining-search

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

Written by: Janne Lammi

Refining Search

Indicating clearly required or optional fields on a form tells the user what needs to be filled in to complete the form. If most of the form fields are optional, use text or asterisk (*) next to e...

Written by: Janne Lammi

Required Form Fields

</>
search-pagination

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

spotlight-effect

Highlighting (a.k.a., spotlighting) is an effective but subtle way to draw attention to a change in the interface. For instance, instead of showing a message telling people that their item was add...

Written by: Janne Lammi

Spotlight Effect

tag-an-object

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

This pattern contains typography guidance for Patternry. You can use this pattern as a basis when creating a typography part of your company style guide. Just sign up if you haven&#8217;t already,...

Written by: Janne Lammi

Typography

</>
undo

People tend to make mistakes when interacting with applications. Making one mistake can throw away hours of work. Therefore users should be have an option to easily undo their actions and get thei...

Written by: Janne Lammi

Undo

user-card

User Card pops out when hovering over someone’s profile picture or display name. It is a small panel presenting a larger version of the user&#8217;s display image, the user&#8217;s full display na...

Written by: Johannes Hocksell

User Card

vertical-module-tabs

Vertical Module Tabs separates content into different panes, and the panes can be viewed one at a time. This pattern can also be used to show selection-dependent inputs on a form (show initial que...

Written by: Janne Lammi

Vertical Module Tabs