10 things to remember while working with Sketch & Zeplin
While using Zeplin as a tool for collaboration between UI designers and front end developers, be sure you follow few points to get the best out.
These are the 10 things to remember while working with Sketch & Zeplin, that will improve you to get the best out in a little time,
1. Various Artboard sizes
Android
mdpi: 360 x 640 px
IOS
@1X: 375 x 667 px
Responsive design
Be clear with your front-end developer about the media queries they are going to use. Make a clear breakpoints.
1920 x 1080 px
1200 x 900 px
1024 x 768 px
320 x 480 px
2. Working of breakpoints
Upload the works to Zeplin and check out the different looks of your responsive design on various devices. This helps the front-end developers
to be clear if the design will look perfectly fit on the assigned screen resolution.
3. Raster image size
Always assign a maximum size to the raster images, so that you are eventually protecting the raster images from loss of quality while they are getting displayed on different screens of high resolutions.
For example, Consider setting an iOS design image size at a maximum size of @3x, so that image will be protected from unusual down scaling or pixel loss. Do this little trick and see if the front-end developer asks you to send the high resolution images again.
4. Keep the icon group exportable
Always keep the icon group exportable and the individual objects layered. When the individual objects are kept layered, it would be easy for the developers to separate them and use as needed. The developers may be interested in exporting one or more elements of the design you have made, or the full design itself. So make all elements exportabe too.
5. Keep the text static
Avoid making the text exportable. Imagine that your design has a banner and it contains an image, a filter and a text within it. Then, design it to the way that the developers can be able to export:
Only the image ( but not text )
Only the filter ( but not text )
Both Image and filter ( but not text )
6. Remove the spaces around the designed image
Keep the design simple. Dont allow spaces of pixels around the design. For example, consider designing a transparent logo png with no white spaces around a letter logo. If there are spaces around the image, it becomes difficult for the developer to figure out the margin between objects and the following interfaces of the design.
7. Line-height and width
Add 6px in additional to the currently available line height of the body-text. For example, if the current line-height of the body-text is 4px simply make it 10px.
Don’t apply this change to the title text, where other graphical elements can be used to attract the user. Apply the same line-height to all of the body text boxes to maintain consistency and good sense of logicality across your design.
Always set the Text box width to ‘auto’. This could help the developer to figure out the margin between objects and the following interfaces of the design.
8. Apply specifications to buttons
Make few things clear like, defining the behaviour of the icon, text, button, etc,
Configure your own states for the components used in the interface and save the new artwork by some name like ‘Specifications’ or something like that.
9. organizing the design screens in Zeplin
You can organize the design screens by tags. Zeplin allows sorting of screens so that you can Set the first screen of your website or app just by setting up the first screen in Zeplin.
10. Use the default Styleguide
Why to design your own Styleguide when Zeplin has already made that easier for you! You can save a lot of time that you usually spend for making styleguides. Use the styleguides tab to make styleguides such as adding colors and typographies. Learn more about Styleguides in Zeplin from my recent post here.
