Types of UI Guidelines

Based on their usage, Guidelines can be categorized as follows.

| Style

Style guidelines define the visual expression of an organization that it presents to the world. Every organization has its own style guide which they use to build logos, colors, icons and typography.

| Layout

Layout guidelines define the overall structure of the interface. UI can be designed using grid layout or list layout.

This section of guidelines also contains behavior of a responsive design.

| UI Components

These guidelines provide specs and usage of UI components that display on the interface and a user interacts with them.

UI components include standard controls like input controls, windows, dialogs, panels, menus, views, scrollbars, buttons, and many other similar items.

| Text

Textual guidelines cover tone and style of text to be used on UI. Text should be understandable for different cultures and the audience.

Text specs like font size, color, and style are part of these guidelines. Text displays on UI as fields, labels, messages, and information for the user.

| Interaction And Behavior

Types of interaction (click, gesture, voice) that a user performs with a design, and system response in return to these interactions are part of these guidelines.

| Platform

Platforms are changing rapidly where software and apps are being developed for mobile, wearable and auto car in addition to conventional desktop systems.

The UI guidelines of an organization cover details of all types of supported platforms and resolutions.

| Accessibility

Designing an accessible system requires a specific set of guidelines for different types of disabled users so that they can access the design like a normal user.

| Patterns

Reusable design patterns are included in UI guidelines. These patterns define behavior for certain controls.

Few examples are navigation, search, forms, data formats, states, and pagination.

| Resources

Guidelines have a collection of resources that can be used while designing a system.

These resources contain layout templates for multiple devices, icon sets, font libraries, UI components, and color palettes.