There are two basic types of projects in product design — those with predetermined structure and those without.
The projects that reside in large corporations generally operate within a set design system and have most of the visual fundamentals settled long before you showed up. While that might seem stifling, I enjoy those projects because they allow you to skip ahead to the real problems that need to be solved.
Alas, the first scenario doesn’t apply to every project. So what should you do when there is no predetermined design system?
Well, you build one, and that’s the reality for many small organizations.
The Fresh Market project very much resides in the realm of the latter group. There is no supporting structure to inherit, and a small design system is needed to govern the work.
Why Styles matter
When you create Styles, you are laying the foundation for everything that will follow. As you build the styles for color, text, and space (grid), they’ll provide answers for how to build components and pages.
Styles are a distillation for the visual exploration that occurred earlier. When you create a new style, you are deciding the direction of the project.
Yet, the initial work of creating Styles is still exploration because you have to test your creations. If a style doesn’t work, tweak and try again until you have something that you’re satisfied with.
It is essential to clean up after yourself by deleting Styles that you’ve deemed unnecessary. Taking a moment to edit will streamlining your work, making it easier for others to collaborate with you on this project as it grows.
Resources for review
Please use the following items to guide your exercise attempt:
| Video/Article | Source/Author |
|---|---|
| Making Your Mark | New Pragmatic |
| The Delivery Matters | New Pragmatic |
| Creating Styles with Figma | New Pragmatic |
Exercise
Length: One-to-two hours to complete.
Building upon the advancements made in the Branding exercise, follow the instructions below to create the project infrastructure needed to rapidly update your project.
- Create typographic and color styles the finalize home page design.
- Work through the other pages of the project and streamline type or color inconsistencies in the design.
- Flag areas of the design where you have concerns about the implementation of your updated design work.
- Discard any styles not in use at the end of this exercise.
///
Once complete, update your Program Journal with links to the assets produced for this exercise. Post your Journal in the #Feedback-Loop channel for review.
///
Up next Fresh Market: Components