Define Guidelines and Standards
So, how to design a consistent experience… ?
What are UI guidelines?
While working on UI design, few principles and guidelines are needed to follow that help you design a consistent experience throughout your product.
These guidelines include best practices of UI components and their usage behavior.
Why guidelines are important?
While designing an interface, a designer can easily forget what he has built previously. It can happen that we start a project with a set of conventions and end with some others. To keep oneself stick to a similar experience, guidelines are required to define and follow.
Guidelines are important as they:
Enforce consistent experience throughout products
Describe specs and best practices of UI components thus make it easier to choose the right control
Save time as designers don’t have to create specs each time they design a feature, and developers don’t wait for guidelines every time they implement a screen
How to create guidelines?
If you already have a product, you can easily extract guidelines from its design.
Use existing standard guidelines like Google, Microsoft or Apple. You can customize them if required.
Save your guidelines in a standard format like PDF, or keep them online whatever is convenient for you. Refer to these guidelines each time when you are designing a feature.
Types of guidelines
Guidelines can be used based on their types:
Style guidelines are used to build logos, colors, icons and typography.
Layout guidelines define a structure of interfaces like grid layout or list layout.
UI control guidelines provide specs and usage of all controls that display on interface and user interacts with them, like input controls, windows, dialogs, panels, menus etc.
Textual guidelines define tone and style of text, and text specs like font size, color, and style.
Interaction and behavioral guidelines define types of interaction (click, gesture, voice) that a user performs with a design, and system response in return to these interactions.
Guidelines related to different platforms and resolutions like web, mobile, wearables are also defined.
Accessibility guidelines define rules for different types of disabled users so that they can access the design like a normal user.
Guidelines also include reusable design patterns, templates and resources.
Standard guidelines collection
Microsoft: Desktop, UWP Apps
Apple: Mac, iOS apps, WatchOS, iPhoneX
Google: Material design, WearOS, Augmented Reality, Android Auto
UI guidelines are common design concepts that are used to build engaging and unique user experiences. Following these guidelines helps you to enhance usability and beauty of your products.