Each section of your design should be in either a Group or a Frame. Take a look at the left sidebar on the screenshot. Each section of this design is clearly divided out and uses a nomenclature that allows anyone to understand which section they are selecting. The Parent Frame has a name that allows you to know what page it is. The sub-frames have names to show you what section you are working within.
When to Use Components
Any time you are pressing “copy/paste” on a group of items should signal to you to transform them into a Component. This will allow you to make global changes in a single location. The minimum items that should be components include: navigation bar, footer, button (primary and secondary styling), any type of card-layout, etc.
Details for the Design
The goal of these bullet points is for you to protect your design. A lot of times, we receive design files where all the text is identical in length/height – which doesn’t account for what happens once the site is turned over to the client. We’d rather you design with imperfect “boxes and text” to showcase to the client (and the developer) how you’d like your design to play out when imperfections start happening.
- Your design comps shouldn’t be in “perfect alignment.” Meaning: in the real world, nothing lines up perfectly (some headers are one or two lines; paragraph text is longer in one card than the other). We need to show this imperfection in the design as it will help with the client’s understanding of text length as well as show the developer exactly how you want your design to look when imperfect text is applied.
- A few notable areas:
- Any card-/column-based layout should utilize multiple header lines as well as paragraph text of different lengths
- A good rule of thumb is that any component that is in a “row” should showcase different heights of content
- Another good sample is to use the phrase Accessibility is Important in your headlines. Typically, we see “short words” used in mockups for headers, and then when the client approves the final content, they use longer words, thus breaking the layouts.