Nobody likes to have their time wasted. When working in massive teams like Distillery, it’s particularly crucial to find ways to avoid wasting anyone’s time. This is also important for small teams, of course, but in large teams, wasted time can have an exponentially larger impact on team productivity, timelines, and attitudes. In addition, adopting habits that help you avoid wasting others’ time is a way you can show respect to your team. So with that in mind, below are a few time- and frustration-saving tips and guidelines for designers.
Forget about @2x artboards.
Why? Because they increase file size. As a result, Photoshop slows down, slowing YOU down as well. Imagine that you’ve prepared an awesome icon with a 5px border and you now have to prepare an @3x asset. You’ll export it with a 1,5 coefficient with the following result: 5×1,5=7,5. The same goes for @1x: 5×0,5=2,5. It’s a blurred icon, and it’s shameful. In these types of situations, you always end up having to check your sizes (including font sizes) and margins, asking yourself whether they are integer after dividing by 2. Simply put, all of this is a waste of time.
Use @1x with 72 ppi and pixel sizes for fonts.
Doing so will help you achieve much smaller file sizes, keep more artboards in a single document, and experience less of a delay between your movements and Photoshop’s reactions. In addition, you will reap one huge benefit: 1px for you is 1pt for developers. This means no more headaches about sizes, because they are already integer. And there’s no pain involved in preparing pixel-perfect assets @2x or higher. As you can see, using @1x saves time for you as well as the developers: they can now create pixel-perfect layouts at the speed of light, because they no longer need to divide all sizes and margins. In addition, they don’t need to ask you what to do in case of fractional sizes. It’s a doubly satisfying result.
Do you need to support retina for non-vectored layers? Put retina-ready images into your artboard, convert them to Smart Objects, and scale them down to @1x. Photoshop and other exporting tools (e.g., Zeplin) will understand that, easily and automatically preparing high-resolution versions.
Use this short checklist to speed up your work.
- Use guides. The teal and blue lines will help you align objects with improved accuracy. But be careful when using Photoshop’s Smart Guides, and always check that your layers are in their proper places after you’ve released your mouse.
- Use a columns layout. The most popular layout is 12 columns (70px columns and a 30px gutter). It can be okay to use a different layout, however, when you fully understand why you’re using that layout.
- Use linked Smart Objects as much as possible.
- Use layer comps to show different states of elements.
For designers, these practices mean less time spent aligning and changing objects. And you’ve saved time for developers when they’re creating layouts.
Remember these tips that help make developers’ lives easier.
What other practices will encourage developers to think fondly of you, remembering you as a designer who plays nice? Here are a few more ideas:
- Remember that tools like Zeplin will export everything, not just those that appear on the artboard.
- In situations where you’re creating a full-width image block, you can cut your image with a vector mask using your canvas width (and your block height). You can then convert it into a Smart Object.
- In situations where you’re using things like thumbnails or avatars, you can cut your images with vector masks and then convert them into Smart Objects, too.
- Check your blocks. Don’t let them overlap each other, except in cases that are intentional.
- Double-check that your graphics are pixel-perfect. This is crucially important for achieving optimal quality in a browser.
- If for some reason you use @2x or @3x, double-check that all sizes can be divided by 2 or 3 (depending on the dimensions) with an integer result.
Anticipate the issues caused by mockup inspectors.
When your team is using tools like Zeplin, Avocode, or InVision — let’s call these types of tools “mockup inspectors” — it can lead to some confusing situations. When developers receive sizes and margins through a mockup inspector, your assets might show non-integer sizes. Don’t blame the designer too quickly. There is a difference between Photoshop’s render engine and those of the mockup inspectors. Let me illustrate this:
So how do we fix this issue? Unfortunately, in these programs, there’s no way to fix it. So the trick is to remember the difference between the render engines, allow for 2 to 5px jumping, and compare your layout with the mockups using your favorite pixel-perfect tool.
There is a solution that addresses this problem, however, and you’ve probably heard about it. It’s called Adobe Experience Design (XD). If you haven’t heard about it, check out this video:
Adobe Experience Design offers several benefits, including:
- Incredibly easy exporting of assets (even for Android)
- No worries about dimensions — it always uses @1x, and there are no confusing differences when you jump between retina and non-retina devices
- Designers and developers have the same render engine, and it’s really close to browser and native app rendering
- Much less file size than Photoshop or Sketch
- Super-speedy rendering
- Easy creation of pixel-perfect graphics, control margins, and font sizes
- Easy-to-use and user-friendly UI
- Integrated prototyping tools
- Opportunity to share your live prototype with a public link
So if Adobe Experience Design is so fantastic, why aren’t we already using it? Well, it’s currently only available in beta. And while the beta version is free, we don’t know how much it will ultimately cost.
You may be asking: what about Sketch? Yes, Sketch is good. But it’s not good enough. Try working on a project that has more than 350 artboards, and you’ll quickly see how speed slows down. And Sketch can cause other confusing situations when you’re working on UI (e.g., how Sketch works with symbols).
Want to learn more about how Distillery’s developers and designers work together to enable a seamless product development process? Let us know!
About the Author
Mikhail Nikipelov is a talented designer who joined Distillery in 2016. Drawing inspiration from the quote “Thinker doesn’t fear, feared doesn’t think,” Mikhail encourages his colleagues to speak up and raises high the torch of extremely high-quality web design. In his free time, he enjoys playing guitar and djembe.