UX/UI Bootcamp
  • COURSE INFORMATION
    • UXUI Bootcamp
  • Self-Onboarding
    • Welcome
    • Your Bootcamp
    • Participation & Conduct Protocols
    • Tools
      • Google Classroom
      • Slack
      • Google Calendar
      • Zoom
      • Figma
      • Github
    • Learning Strategies
    • Complete your Self-Onboarding
  • Prepare for the Course
  • Foundations
    • What is the Foundations section?
    • Introduction to UX Design
    • User-Centered Design
    • Human-Centered Design
    • Design Thinking
      • Example of Design Thinking in a UX Project
    • Introduction to Project Management Methodologies
    • Figma
    • How to use AI
  • 1. Project
    • Milestone 1 - Research Planning
      • Introduction to User Research
      • Research Methods
        • Behavioral Research Methods
        • Attitudinal Research
        • Exploratory, Confirmatory, Evaluative Research
      • Research Planning
    • Milestone 2 - User Research
      • User Interviews
      • Qualitative Data Analysis
      • Practical Application of User Interviews
    • Milestone 3 - User Personas, User Journey Map
      • 👥User Personas
      • 🛤️User Journey Map
    • Recap
  • 2. Project - Mobile Application
    • Milestone 1 - UX Mapping, Empathy Map, Task Analysis, User flows
      • 🗺️UX Mapping Methods
      • 🐾Empathy Map
      • 🔰Task Analysis and User Flows
    • Milestone 2 - Information Architecture and Mid-Wireframes
      • 🏢Information Architecture
      • 💻Sitemap
      • 🏞️Mobile Navigation Patterns
      • 🌠Mobile Design Patterns
      • ✏️Wireframes
    • Milestone 3 - Prototyping, Testing and Refining
      • 🏗️Prototyping
        • Type of Prototypes
        • Prototyping with Figma
      • 🧪Usability Testing
    • Recap
  • 3. Project - Dashboard
    • Milestone 1 - Planning, Competitor Analysis, Design Proposal
      • Project Planning
      • Competitor Analysis
      • Desk Research
      • Design Proposal
    • Milestone 2 - Design & Prototyping
      • Mood Board
      • Style Guide
      • Component Library & UI Kits
      • Prototyping with Figma
    • Milestone 3 - Usability Test & Documentation
      • 🧪Usability Testing
      • Design documentation and Case Study
    • Recap
  • 👏Credits
Powered by GitBook
On this page
  • Design Systems and Style Guides
  • Key Components of a Style Guide
  • Get Started with Your Style Guide

Was this helpful?

  1. 3. Project - Dashboard
  2. Milestone 2 - Design & Prototyping

Style Guide

PreviousMood BoardNextComponent Library & UI Kits

Last updated 7 months ago

Was this helpful?

Design Systems and Style Guides

Design systems, like Google's Material Design or IBM's Carbon Design System, are comprehensive standards that manage design at scale. They include various elements, including style guides. Style guides, content, or visual style guides represent just one component within a broader design system. In this part, we focus on style guides.

  • Design Systems: These are overarching frameworks that provide guidelines, principles, and tools for design and development, ensuring consistency across a company's products.

  • Style Guides: These are components of a design system focused specifically on visual and content guidelines.

Relationship

Design systems and style guides maintain a parent-child relationship. The design system, as the "parent," encompasses various "children," such as style guides, pattern libraries, and component libraries, each contributing to the overall coherence and functionality of the system.

Key Components of a Style Guide

A design guide is primarily a document or set of documents that includes detailed guidelines on the visual and stylistic elements of a brand or product. These guides focus on:

  • Visual Design Elements:

    • Typography: Typography significantly impacts your design by conveying specific messages through fonts. It should be clear, easy to read, and visually appealing. Your style guide should specify up to 2-3 typefaces to maintain a neat and professional look, ensuring these typefaces complement each other in size and weight.

    • Color palette: The colors you select can influence user reactions, comfort, and satisfaction. Your style guide should categorize colors into primary, secondary, and neutral. Primary colors appear most frequently across all elements, while secondary colors are used for accents like progress bars and headings.

    • Iconography: icons use symbols and images to communicate more effectively, and they are often universally understood. Ensure consistency by selecting a specific set of icons for use across all designs.

    • Layout grids: Grids provide a structured alignment system using rows and columns, which is crucial for consistency across screens. Your style guide must include a grid system.

    • UI Elements: Include essential UI elements such as buttons, input fields, and notifications in your style guide, specifying states like default, active, disabled, and hover to ensure functionality and enhance user experience.

  • Best practices: General design principles and best practices for using various design elements.

Get Started with Your Style Guide

Let's head over to Figma to create your style guide. Watch this YouTube video to learn more about creating styles in Figma:

If you still want to diver into Style Guides, watch this 30-minute tutorial:

Further Resources:

Tone and voice: Copywriting standards for maintaining a consistent narrative style. You can use ChatGPT to support your copywriting! Have a look at this .

Head over to this , which walks you through setting up your Style Guide.

Learn more about (Article)

(Article)

Figma Article

Copy Writer GPT
FreeCodeCamp article
Design Systems vs Style Guide
How to Create a Style Guide in Figma
What is a Style Guide?
https://www.nngroup.com/articles/design-systems-vs-style-guides/