What are UI Style guides?

Summary: What are UI Style guides? They provide a user interface compass to navigating visual consistency for both front-end developers and UX designers. The latest (and some classic oldies) UI Style guides are provided below.

Last update: 2021

What is the role of a UI Style Guide?

To guide clarity and consistency. UI Style Guides lay the groundwork for a unified visual language, providing a standardized framework that guides the creation of interfaces. By establishing rules for elements like typography, color palettes, icons, and spacing, the guide ensures a consistent user experience across various screens and interactions. This uniformity fosters familiarity and comfort among users, thereby enhancing usability and engagement.

To promote intuitive and engaging interactions. Interaction Design thrives on the predictability of user actions and responses. A well-constructed UI Style Guide aids Interaction Design by defining the behavior of elements like buttons, navigation menus, and form fields. This guidance streamlines the creation of interactions that align with user expectations, making the user journey intuitive and seamless. Beyond functionality, both UX and Interaction Design aim to evoke emotions and provide a strong call to action. The UI Style Guide contributes by delineating design elements that elicit specific emotional responses. Be it the choice of colors to evoke trust or the selection of imagery to convey warmth; the guide shapes user sentiments throughout the interaction.

Visual cohesion for developers. Beyond providing actual assets (Figma files) and a way for UX and Dev to collaborate, Front-end developers draw inspiration and guidance from the UI Style Guide when translating designs into CSS/HTML code. By adhering to predefined styles and guidelines, developers ensure that the final product aligns with the intended visual aesthetics. This alignment reduces discrepancies and iterations, leading to efficient development cycles.

For Devs and UX designers, the UI Style Guide or Design System is a reference point that aligns design decisions with user-centric principles. Interaction Design conceptualizes wireframes and prototypes, based on user behavior and UX principles. The Style Guide tries to capture that and keep the user experience central, lifting heads up from the styles (or color level). UX designers integrate the visual guidelines, ensuring that the proposed solutions adhere to the established aesthetics. This congruence streamlines the iterative design process, resulting in interfaces that seamlessly merge form and function.

See our Design Systems Training

Mobile (iOS, Android, Tablet)

Android User Interface Guidelines

Android UI Guidelines
Also see Google Material Design guidelines
Android Ice Cream Sandwich User Interface Guidelines
Google Glass UI guidelines
Google Cast (Chromecast) UX guidelines (new Dec 2013)

Apple iPhone User Interface Guidelines

Apple iPad User Interface Guidelines

Other Mobile Usability Guidelines

Tablet PC User Interface Guidelines

The Challenge of Designing Interfaces for the Tablet PC (WayBackWeb archived)
Eight Essentials of Tablet User Interface Success (WayBackWeb archived)
Eight More Rules of Tablet UI Success (WayBackWeb archived)

Desktop (Windows, iOS, KDE, Gnome, Ubuntu)

Apple (iOS) Usability Guidelines

Microsoft Windows Usability Guidelines

Open Source Usability Guidelines

Accessibility (ARIA, JAX, Java)

Accessibility Guidelines

AJAX and Rich Internet Application (RIA) related Usability Guidelines (What is Ajax?)

Sun Microsystems- Java related

Java Look and Feel Guidelines (PDF)
Java Look and Feel Guidelines (BOOK)

Java Swing related UI style guides

VR, AR, Mixed Reality UX/UI guidelines

VR, AR, Mixed Reality UX guidelines

Google Daydream and Cardboard VR UX Guidelines
Occulus VR UI Guidelines
Hololens: Microsoft Holographic – Mixed Reality UI Guidelines
Designing for Mixed Reality (Hololens) UX guidelines for Mixed Reality
Microsoft Kinect for Windows Human Interface Guidelines v1.8.0 UX Guidelines (PDF shortcut)
Microsoft Surface User Experience Guidelines
Leap Motion UX Guidelines
Unreal Engine VR UX Guidelines
Unity VR UX Guidelines

Other

Corporate User Interface Standards and Guidelines (samples)

Telstra Online Standards (WayBackWeb archived)
Ameritech Graphical User Interface Standards and Design Guidelines (WayBackWeb archived)

Government funded Usability Guidelines

MITRE Guidelines for Designing User Interface Software (US Airforce)
Research based Web Design and Usability Guidelines (PDF) (US Dept. of Health and Human Services)
Usability.gov – Usability Guidelines

Other Usability and UI Guidelines

Silicon Graphics Indigo Magic User Interface Guidelines
Smith and Mosier HCI Guidelines (PDF) (1984, yet amazingly pertinent still today)
User Interface Design and Usability (links)

Style guides need collaboration

UI Style Guides thrive on collaboration between front-end developers, UX designers, and various stakeholders. This collaboration ensures that the guide captures diverse perspectives and encapsulates the brand’s essence. By fostering cross-functional communication, the guide evolves to cater to the project’s evolving needs and aligns design efforts with strategic objectives. Your Design System needs heavy collaboration, do not let it stand alone like a UI Style Guide of yesteryear.

In conclusion, UI Style Guides are integral tools that guide the intricate dance of UX and Interaction Design. By providing a roadmap of consistency, intuitive interactions, and emotional resonance, these guides facilitate the creation of immersive and user-centric experiences. Simultaneously, they offer a guiding light to front-end developers and UX designers, ensuring the end product is visually captivating and functionally effective. As the design journey unfolds, UI Style Guides embedded in Design Systems emerge as companions that empower all stakeholders to create interfaces that harmonize aesthetics with usability.

Learn more with our Interaction Design training or Design Systems Training