UX/UI design can get incredibly messy with even small projects. To help keep things organized, I utilize a design system called Atomic Design which was invented by Brad Frost.
As with many other designers, I’ve made my own modifications to Atomic Design. In the content below, I’ll talk about how I work with this design system.
In traditional Atomic Design the element types are Atoms, Molecules, Organisms, Templates, and Pages.
Having a standard naming convention is incredibly important to keep things organized in your Sketch, Figma, etc file. I subscribe to the idea that this naming system should be simple, yet flexible to meet any situation.
My naming system typically follows this structure:
(type: atom, molecule, etc) / (class: button, input, etc) / (subclass A: state, color, size, etc) / (subclass B: state, color, size, etc)
As a general rule, I don’t like to drill down more than 4 times in an element’s “name” (type / class / subclass A / subclass B). This helps reduce the amount of time to find a certain symbol when you are looking for it. To help keep elements within this framework, I use dashes for very similar classes instead of breaking them into subclasses.
If you have any questions or are looking for a designer, feel free to reach out: https://www.danstrangfeld.com/contact
Index Slides are there to provide supplemental detail that answers questions that can not be answered in the “pitch” part of the deck (Intro Slide through Closing Slide). They should include any detail needed to expand upon topics in the deck. Index slides are always located at the end of the pitch deck.
I view design as an evolving process in which the client and the designer collaborate to find the best solution for the problem at hand. Just as nature has gone through evolution over billions of years, design should follow the rules set forth by this process. A principle that I always work with in mind: Good design = evolving design. With that being said, let’s jump into...
The Solution Slide is where you show what your solution is and how it addresses the problems listed in your Problem Slide. It typically includes the name of the solution, visual depictions of the solution, a description, and lists how the solution addresses the problem(s) that were listed. This slide is placed after the Problem Slide or after the Existing Solutions Slide.