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.
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.
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.
For designers, these practices mean less time spent aligning and changing objects. And you’ve saved time for developers when they’re creating layouts.
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:
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:
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!
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.