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

Created: Janne Lammi, March 20, 2011

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

Created: Johannes Hocksell, Jan. 26, 2011

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

Created: Johannes Hocksell, Jan. 24, 2011

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

Created: Johannes Hocksell, Nov. 16, 2010

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

Created: Janne Lammi, Oct. 26, 2010

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

Created: Janne Lammi, Sept. 26, 2010

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

Created: Janne Lammi, Sept. 20, 2010

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

Created: Janne Lammi, Sept. 12, 2010

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

Created: Janne Lammi, Sept. 9, 2010

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

Created: Janne Lammi, June 8, 2010

Vertical Module Tabs

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

Created: Janne Lammi, July 8, 2010

Undo

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

Created: Janne Lammi, July 8, 2010

Always-Visible Tools

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

Created: Janne Lammi, July 8, 2010

Hover-Reveal Tools

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

Created: Janne Lammi, July 8, 2010

Spotlight Effect

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

Created: Janne Lammi, July 5, 2010

Hover Invitation