Designing a native app or a simple website can be a process that is dragged out by a (rather) inexperienced designer or can be simplified by proper preparation. I’d like to shine some light on how we prepare our design environments and set up the foundations that allow us to work on designs in an efficient manner. So when the client needs to make one change that influences 50% of the website I don’t have to manually change 50% of it, but a few clicks here and there will suffice.
In this article, I’ll take a closer look at what UX designers can do to prepare a solid foundation to build consistent mockups, and easily update both desktop and mobile projects later on. The focus will be on Sketch but most of the programs have similar features.
Let’s start by searching for elements that can be used as a foundation to build beautiful, organized, and consistent designs for websites, apps, or other digital products, saving your product’s budget for more valuable features or analysis.
Defining your project text styles upfront will save you time during later phases
The first step in preparing your workspace should be to define your text styles. If you define text styles before starting to draw mockups, you’ll only need one click to update them in your designs. In the beginning, it should be enough to create a few basic styles for elements like headers, subtitles, and the body.
Later you can enhance your text styles library. Remember to properly define line-height in the text function and alignment. It’s very important to set text contrast, but don’t limit yourself to black only. All these features can be found in the text menu. Play with them to find the best choice for your design.
Defining your text styles from the getgo is a great time-saver because if you want to change a typeface or text height in your designed mockups, there will be no need to click on every line and change it manually.
Defining layer styles helps you make quick changes and updates to your designs
Layer styles work just the same as text styles. You can edit them by updating the current style or creating a new one. Just like your text styles, it’s also very important to define your layer styles from the very beginning. These two elements are the basic building blocks for the other components in your design.
To start, build a primary palette with frequently used colors (if you’re struggling with setting a specific color palette you can always use a color palette generator). Then create a secondary palette for less-used and accent colors, which should have less than 10-15% visibility in your designs.
Your layer styles aren’t only the plain colors you’ll need for your design. Don’t forget to also define the colors for icons, buttons, background, highlights, cards, and more. Remember to set borders, shadows, and gradients as well. You need to define all of these from the start to facilitate further phases, using different variations of components in your project. Setting this beforehand saves lots of time when working on the design in later phases - you don’t pause on each element wondering which gradient, hue, color, or font to use.
Consistent naming convention creates a clear structure of your design components
This is a universal rule which allows multiple people to work on the same files. Neglected by many. Best practices tell us to group our text styles, layers styles, and symbols by category for better management. It saves us time when looking for specific elements for our designs. People’s brains are programmed for organized structures. In Sketch, this is really easy.
When naming a new element, think about the categories from their main, general category to their more detailed group. Use a “/” to separate parts of the name, for example,
“Selector/Checkbox/Unselected.” Sketch will automatically segregate elements into groups. Once you name your next element Selector/Radiobutton/Selected it will go straight into the same selectors’ group but will place it in the different second-category group. Try to use a maximum of 3 categories to describe each of your elements.
Save time by creating symbols with overrides during the design process
A quick explanation for those who don’t know what a symbol is in Sketch. Symbols by default are saved on a separate symbol page and are basic elements. The symbols on your mockups are only a representation of the basic symbol placed on the symbol page. Implementing changes for a specific symbol on the symbols page will affect this particular symbol on every mockup it appears.
Before you start creating symbols and more complex structures make sure you determine text and layer styles first. It makes a big difference when you want to use icons in different colors or change a button’s state, for example. This is because when creating a simple symbol, like an icon, you also have to define its color. But in the project, you’ll need more colors than the default ones you’ve set, for example, choosing grey for the inactive state or blue for clicked or hover state. When you don’t define color styles at all, you need to create 3 separate icons as symbols.
But if you’ll set a previously defined color style to the icon, during the symbol creation process, there’s no need to prepare different color variations for this icon as a symbol. In Sketch, you have overrides, which are variables of the item option. On your project page, you can change the color of an icon without implementing changes on the symbol page.
Overrides are really important for helping designers adjust variables of components to fit the project needs. You can start from basic elements, like an icon, to a more complex and advanced structure like bars, lists, and whole pages. There are also a few amenities that help to build more advanced components with text and transform them the way you want.
Let’s take a look at the button - a very popular element in the digital design
A button can consist of a few elements which can be our variables - color style, text style, and icon. The goal is to create one button as a symbol and use overrides (variables) on the project page to have multiple options for the look of this button. When it comes to color, that part is easy and we went through it previously - the key is to determine a layer style so you can simply change the color of the button.
After this, comes the button copy
We apply a text style and define its alignment and position in relation to the button’s border, followed by adding an icon. If you want to change the icon there is one rule: They must all be the same size. Remember to group content together (text and icon).
Now, we’ve created a symbol
Our next step is to apply the layout feature to the symbol so that we can determine the flexibility of this element. In our example, we can change the text length and the button adapts, preserving paddings. We can also limit the minimum width of our elements. It works really well on various types of elements.
Below is an example of how we can use our symbol, on the project page, using these 3 overrides.
Another very useful element in digital design is input. You should now be able to see how to create one input as a symbol and use it in different variations in your project depending on your need.
There is one important difference between buttons and inputs - there is a need to increase border length, not text length. How? Use the resizing feature on the symbol page, for the symbol. Icons need to always be fixed. After that, you set the layout for the whole symbol. On your project page it should work like this:
Understanding how you can set a symbol’s features, and early on in your designing, allows you to design more complex elements while saving time and making it easier to make changes in future phases of the UX design process.
Using Anima Plugin to set a hierarchy in your project keeps it organized and structured
The Anima plugin was a great discovery for me. I like to keep all my work in order and in groups. It also makes it easier for other designers to figure out and track down elements of your project when everything has a clear visual hierarchy. Anima also runs on Adobe XD and shortly, will also run on Figma. Let’s take a glimpse into the layout features of Anima.
I usually use the padding option to make buttons dynamic, which resize themselves based on their content. I create a text layer and click padding, which automatically adds a background layer under the text. Both layers are related to each other, just set the proper spacing and it’s done. Your dynamic button is ready.
I often use the pins option that allows you to keep your layers in precisely defined places. You always pin a layer to its Parent. A Parent can be an Artboard or a Group. The pins determine the relationships between layers, but only at the Parent-Child level.
The stack option works a little bit differently, as it’s pinning between siblings. It’s always a relationship between Child and Child - layers on the same level in the hierarchy. In my opinion, this is the most useful feature. It allows you to set a clear structure of your elements, keeping proper spaces between them and stacking them in the same places. When you prepare it right, you have a far easier way to change the order, replace elements, and change spaces between them.
Let me show you how it works:
Anima is especially beneficial for tables and forms when we have multiple elements that go under each, vertically or horizontally, like forms or tables. First, we should have determinate elements that our structure will consist of. In forms, these are inputs and selectors. When it comes to preparing tables I always start by designing a single row and their possible states and appearance as a symbol. This kind of preparation was mentioned in the previous section.
Saving time with design best practices
The UX design process is an integral part of the Digital Product Journey. Helping clients to understand how their digital product will provide value and be a delight for the end-users is why UX is so important. Saving your client’s time and money makes you a more valuable UX designer, so speeding up your workflow, without sacrificing quality, makes a lot of sense.
To accelerate your workflow, it only takes a few steps to prepare your work environment before you start drawing designs. The foundation you build from the start will make it easier to implement changes in the later stages of your UX design process. It also speeds up the pace of making these changes, saving yourself and your client valuable time.
- Define your text and layer styles at the beginning. It will prevent time loss in the future
- Have naming conventions. Organize your components for better management
- Create symbols and more complex components, using overrides, layout settings, and resize features
- The hierarchy of elements allows you to keep everything organized. You can use the Anima plugin to facilitate implementing changes
Our experienced team of designers has helped many clients improve their product UI/UX. If you’d like more details on digital product design, reach out to us. We’d be glad to share our experience. You can also schedule a meeting with us on our website.