UI Design System
User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.
Basics
Simplicity and Minimalism
The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.
​
Consistency
Create consistency and use common UI elements. By using common elements in your UI, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site.
​
Communication
Make sure that the system communicates what’s happening. Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, next steps can reduce frustration for your user.
Layout
Spatial Awareness
Be purposeful in page layout. Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.
Hierarchy
Establish a scale of importance between elements. Make the user distinguish what is central and important in your layout.
Typography
Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Different sizes, fonts, and arrangement of the text to help increase scalability, legibility and readability.
Colour
Strategically use color and texture. You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage.
Scalability
Screen frameworks, user interface structures, and components that enable your product design to gracefully accommodate new features, new markets, and dynamic content—that can shrink or grow—are the cornerstones of a scalable design.
Screen Frameworks
An effective screen framework for an application can provide a blueprint for deciding how to integrate new features. Use blocks to define and allocate space to content, assemble the blocks in a way that removing or adding one doesn't disrupt the layout or the design itself.
UI Structure
Always try to foresee how your product might scale, so that your UI components dont suffer from it. Choosing the right component in advance ( eg: vertical menu vs horizontal tabs ) can save the project from being redesigned if a new feature is needed.
