Lesson 2: Make It Easy For Your Team To Access Assets
In the past a few years, a lot of different screen sizes and measurement units emerged across iOS, Android, and Web platforms.
We need to consider this and make it as easy as possible for our teammates to access assets in the right format for their platform so that they can start development, so that we don’t have to manually reproduce assets for the right platform, and so that we don’t get caught in back-and-forth email chains last minute while engineering is trying to make a sprint planning deadline.
iOS engineers use pt (points) as their main development unit. This is different from the typographical ‘point unit’ that is available to us in our design tools.
Android engineers use dp (density-independent pixel) as the main unit and sp (scale-independent pixel) for text size.
In Web, there are even more options. Some engineers simply use px (pixels), some use percentage values, and some of them use em/rem values. Both rem and em are relative units, px is not. Relat...
“Using Zeplin has created more time for our team to experiment with designs, as opposed to manually creating design spec documents. Our engineers prefer not having paper or PDF spec documents, instead they can reference designs on-screen.” –Jason Stoff, Sr. Designer at Starbucks
You’ll want to save time preparing specs by automating as much of the speccing, redlining, and asset preparation processes as possible. This is where a design handoff tool comes in.
Before handoff tools existed, designers would print their designs on paper, draw redlines with a pen, and hand the paper to their engineer. The good news is you don’t have to do that anymore. 😅
Now, redlines, specs, and code snippets can be automatically generated using Zeplin by uploading your file from Sketch, Photoshop, Adobe XD CC, and Figma.
Zeplin automatically redlines your file and converts...
One of the most popular old-school misconceptions is about “The Fold” which is the part of your design that is visible before the user scrolls.
Everything above The Fold will get maximum visibility. However, you can expect 60-80% of users to scroll if they expect to find something useful below the fold. Whatever is above The Fold should inform users about what is below The Fold. If user’s don’t know what is down there, they might not be interested enough to find out.
It is popular right now to use huge background images at the top of the page. If it looks like the site ends at The Fold, people might leave instead of scrolling. And if you need to add a graphic that says “scroll down” your design is probably weak.
Many UX designers treat images as if they are not fu...