Create front-end style guides in minutes

Try for free See features

always-visible-input-hints

Always visible input hints are info texts or examples guiding users to fill in empty text fields correctly. They should be placed close to the text field (usually below or on the right side of it)...

Written by: Janne Lammi

Always Visible Input Hints

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

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

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’s display image, the user’s full display na...

Written by: Johannes Hocksell

User Card

blank-slate

Blank slate is the screen people see when they start using an application and there is no data to show yet. Leaving it blank would not make a good first impression, so it should be filled with som...

Written by: Janne Lammi

Blank Slate

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

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

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

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

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

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

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

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

always-visible-tools

Contextual Tools, like Always-Visible Tools, allow user to interact directly with the content. Like the name says, Always-Visible Tools are always visible instead of hiding them until the user nee...

Written by: Janne Lammi

Always-Visible Tools

breadcrumbs

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

Breadcrumbs