Using Style Guides to Bridge Design and Development
50mIntermediate2023-02-21
Authors

David Karlins
Web Design Expert, Instructor, and Corporate Trainer
Course details
If you currently work as a UX or UI designer, or are looking to break into the field, it’s essential that you know how to use a style guide to bridge the gap between design and development. In this course, instructor David Karlins gives you a comprehensive overview of style tile documentation, how it works, why it’s so important, and how it fits into professional designer and developer processes and workflows.
Explore the basics of a well-designed style guide to learn more about how it maps out on particular elements, including colors, fonts, copy, layout, formatting, textures, graphics, and other key design elements. Along the way, David gives you tips on how to generate and share style tile docs with project stakeholders. By the end of this course, you’ll also be equipped with new technical skills for exporting your complete style guide from a prototyping app like Figma into a developer tool like Zeplin.
Explore the basics of a well-designed style guide to learn more about how it maps out on particular elements, including colors, fonts, copy, layout, formatting, textures, graphics, and other key design elements. Along the way, David gives you tips on how to generate and share style tile docs with project stakeholders. By the end of this course, you’ll also be equipped with new technical skills for exporting your complete style guide from a prototyping app like Figma into a developer tool like Zeplin.
Skills covered
Brand DesignAdobe XDInteraction DesignUX DesignUser ExperienceProjectGraphic DesignAdobeWeb Development
Concepts
0. Introduction
- 01 - Style guides for designer and developer communication
1. Defining Style Guides
- 02 - What is a style guide
- 03 - Elements of a style guide - Color schemes
- 04 - Elements of a style guide - Typography
- 05 - Elements of a style guide - Textures
- 06 - Elements of a style guide - Graphic elements
- 07 - Elements of a style guide - Adjectives
2. Creating and Using Style Guides
- 08 - Tile layout and design
- 09 - Using style guides to facilitate the design process
- 10 - Handing off documentation to developers
- 11 - Exporting styles to Zeplin
Conclusion
- 12 - Next steps