Perfect UI by Sketch3 and Zeplin
How to make your design perfect and your developer happy?
One of the fundamental advantages of Sketch3 is that it has made possible to build mock ups in the way they will be fixed in the code. All designers are aware of the requirements of developers: follow the same indentation, use the same color, all the elements should have equal sizes, etc. To follow these requirements, we have to seek out carefully all “the same” elements and edit them simultaneously. It`s obvious that the bigger your project is, the more efforts it takes to keep it complete.
We have developed a set of rules with which from the very beginning you should not be worried — your layout will always be in perfect order!
Step 1. Set Layout Grid
We often use Bootstrap for web project and standard grid for devices from template.
Step 2. Standardization by Styles
You must avoid random colors, fonts and elements. How to make it?
Firstly, set your document pallet — it helps you to keep your UI in consistent colors when you create new elements. How to move pallet from one document to another you can read in our previous article.
The shape style includes color, fils, opacity, borders etc. Also, I use styles for saving colors and button’s style. You can change color of the whole application by style in one click.
It works the same way for Text style.
Why your developer will be happy and why you won’t be worried about wrong colors or fonts?
He doesn’t pick the color by additional tools, he doesn’t loose opacity or color of shadow. He open Zeplin and make this:
So, use correct name of styles and use styles as often as possible to create text and buttons.
Step 3. Template by Symbols
Symbols give an opportunity to use the same object in several parts of layout and even to create a template of composed object with different content.
It would be better, when all icons have the same sizes (with internal padding). Create the universal sets of icons, replace them quickly, modify and just enjoy 🙂
Then make the symbol exportable and use it in all application.
Now you don`t need to worry about slicing. From any point of the app developer will be able to download your perfect icon to svg and three sizes — @1x, @2x, @3x:
You can create as a symbol of more composed object, as a ui-card, and check the several copies of symbols by different data.
Set text areas in accordance with their purpose,
and enjoy the variety!
Also you should use the properties of text in all elements, when it will be changed
- buttons: fixed width, alignment: Center
- Checkbox / Radio button / Text area / Input: Auto width, alignment: left
- Table row: fixed width (according to column size)
Step 4. Create Guidelines
Step 5. Load to Zeplin
Check names, sizes and exportable symbols
Check and set Styles
We hope this article is useful for you and thanks for reading us!