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...
Z-Pattern, F-Pattern, Visual Hierarchy, and White Space
It is easy to imagine every user excitedly reading every letter you write and every pixel you make. Get over it, because real users don’t do that. They scan. Scanning means they only stop to read when something catches their eye. So today we will learn about scanning patterns:
Let’s start with the most boring design I can imagine: an entire newspaper page of solid text. All one story. No headlines. No images. No breaks or pull quotes. Just text, in even columns, from corner-to-corner.