Cadabra | Perfect UI by Sketch3 and Zeplin
Start my project

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.

Animated GIF  - Find & Share on GIPHY

Step 2. Standardization by Styles

You must avoid random colors, fonts and elements. How to make it?

Colors

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.

Animated GIF  - Find & Share on GIPHY

Shape Styles

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.

 

Animated GIF  - Find & Share on GIPHY

 

Animated GIF  - Find & Share on GIPHY

 

Font Styles

It works the same way for Text style.

Animated GIF  - Find & Share on GIPHY

 

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:

Animated GIF  - Find & Share on GIPHY

 

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.

Icons

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 🙂

Animated GIF  - Find & Share on GIPHY

 

Then make the symbol exportable and use it in all application.

Animated GIF  - Find & Share on GIPHY

 

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:

Animated GIF  - Find & Share on GIPHY

 

UI-elements

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,

Animated GIF  - Find & Share on GIPHY

 

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

Animated GIF  - Find & Share on GIPHY

  • Checkbox / Radio button / Text area / Input: Auto width, alignment: left

Animated GIF  - Find & Share on GIPHY

 

  • Table row: fixed width (according to column size)

Animated GIF  - Find & Share on GIPHY

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!

You can find us here

InstagramBehanceDribbbleFacebookTwitter, Medium.

We have something special for you. 

Type the your request
Thank you
Your request has been submitted.
We’ll get in touch with you very soon!

YOU ARE LOOKING FOR:

YOU ARE LOOKING FOR: