88
Design at 1x — It’s a Fact (medium.com)
over 7 years ago from Micah Sivitz, Product Designer at Dropbox
51 comments
Alex Chan, over 7 years ago
I didn't realize people were still designing at 2x/3x after switching to Sketch. There's just no reason to do it when you have easy access to exporting at whatever multipier you need.
Sacha Greif, over 7 years ago
Yeah I'm confused, I would design at 2x in Photoshop because it's a bitmap program and can only export what's on the screen. I'm not sure why you'd do it otherwise? Unless you don't trust Sketch's scaling algorithm maybe?
Marc Edwards, over 7 years ago (edited over 7 years ago )
You can totally work at 1× in Photoshop! :P
Yes! Definitely worth noting that in some (reasonably rare) cases, you may want different assets for the different densities.
Khaled Islam Bouya, over 7 years ago
Fully, 100% agreeing.
Braden Hamm, over 7 years ago
I liked this one better: https://medium.com/sketch-app-sources/designing-at-1x-33240842180c#.ggzebruae
Simone , over 7 years ago
Yes! · Really, its just common sense and simple math (you can multiply by any number but you can't divide by any if you want to return an integer).
One missing reason is that designing @1x is much more comfortable (proportions and scale are easier to gauge, much less "guessing") because you see an accurate representation of your design in front of you. And we all know that zooming back and forth between 100% and 50% just doesn't cut it.
Jan Semler, over 7 years ago
Just wonder that this is still a topic. Thought everybody knows to start @1x is the way to go.
Jason Kirtley, over 7 years ago
Everything about this is on point. I switched last year to 1x and life has been so much easier.
Dean Hayden, over 7 years ago
If you decide to design at 2x in Photoshop, change the dpi of your canvas to 144; that way you won't have to do the maths for typography.
Other measurements will be less straight forward (as outlined in the article).
Kris Kim, over 7 years ago
Ok. I'm just being curious, if you guys design at 1x, do you load images at 2x sizes and shrink to 1/2 size to make it fit to canvas? Because otherwise it would look pixelated when previewing on a device, right?
Micah Sivitz, over 7 years ago
Yes when you're working with bitmap images you'll need to import the image at the larger size so that it does not get pixelated when exporting. Sketch has a setting for what size to flatten bitmaps on import.
+1 on this.
If you’re using Photoshop, it can be good to import at the biggest size you’ll need the bitmap, then turn the layer into a Smart Object so it can be resized without affecting the source image.
Aaron James, over 7 years ago (edited over 7 years ago ) I've noticed that this is usually a problem for new designers. They make the assumption that they should design in 2x or 3x because their phone may be that size. There are very few articles dispelling this myth. Thank you so much for putting this together. Many junior designers need these kind of fundamentals. High five!
Edit: Best practices for Android designers.
Vlad Danilov, over 7 years ago (edited over 7 years ago ) In some situations alternations are needed per resolution, e.g. pixel hinting, push on/off details, extra thin borders at higher resolutions.
That is designing at a single resolution is not enough.
Not sure about Sketch but Photoshop has recently added the ability to switch smart object states with layer comps. The issue is that smart objects are scaled as bitmaps with standard options for export. There are some workarounds to get good results at export. Anyway this concept looks like a good solution.
I posted this originally on Spec channel in Slack but it seems relevant here.
Aaron Sagray, over 7 years ago
When a screen is 300ppi, pixel hinting is a waste of time. Apple knows this, which is why they are able to down sample the 6plus without anyone noticing.
When a screen is 300ppi, pixel hinting is a waste of time.
First, it does matter and you can see it. Secondly, that kind of attitude leads to cumulative errors, like you’d have with bad edges and the iPhone 6 Plus’ display scaling.
And yes, you absolutely can see the scaling artefacts from the iPhone 6 Plus’ display. One very obvious situation is if you scroll a list with some fine horizontal lines (like in Settings etc) — the lines shimmer as they change from being spread across 1, 2 or 3 pixels.
Ha. The average user wouldn't notice this. They will notice your broken flows, janky animation and other flawed product ideas.
Nurturing anti-aliased pixels that will appear at 1/3 of a point or less isn't a good use of time in the scheme of things.
BTW, You see shimmering lines @2x too, when designers use 1px gray lines that momentarily split between RGB diodes on the screen. That has nothing to do with pixel fitting.
They will notice your broken flows, janky animation and other flawed product ideas.
We’re not discussing other issues. We’re discussing pixel snapping. If you are a good UI designer, your elements and icons should always be pixel snapped, where appropriate.
Nurturing anti-aliased pixels that will appear at 1/3 of a point or less isn't a good use of time in the scheme of things.
The point of the article here is that designing at 1× means you don’t have to worry about snapping to 1×, 2×, 3× and 4× — you get that for free when you derive everything from a 1× source. It’s not additional time, it’s a process that ensures less mistakes.
There are legitimate reasons to work at other scales (see Philip Amour’s comments), but you should definitely work at a resolution that relates to one of the display densities you’re targeting. Even if you’re creating for web. Even if you’re using SVGs. Even if your site might be zoomed. Anything less is just sloppy.
BTW, You see shimmering lines @2x too, when designers use 1px gray lines that momentarily split between RGB diodes on the screen.
That’s a separate issue to the shimmering from scrolling content on a scaled display. Not really relevant to this discussion, and ultimately not fixable by a designer.
Liam F, over 7 years ago
Completely agree, and for what its worth I do believe the user will notice it, they may not know what it is but they will feel it.
You have to know the canvas you are working on, you don't want to just not care because it takes time. Those extra pixels are important.
Philip Amour, over 7 years ago
Not true. People feel it, more observant individuals notice it. One of the reasons why I didn't get the 6 Plus. Took a look at one at the Apple Store, saw how everything jittery and blurry is, walked away.
Yeah, once you spot the issues, you can’t un-see them. I’m hoping the iPhone 7 Plus is true 3×, or true 2×. Rendering to a 3× canvas then scaling down was a terrible idea.
I thought it was temporary as it seemed too sloppy for Apple to do that.
Lost my hopes when the 6s Plus was announced and this issue was not addressed. :|
In my opinion the author is wrong. I have responded on Medium to each of his points to help further understand why.
Designing at 1x makes complete sense on Android and Web; however, you should design at @2x on iOS if you care about accuracy.
Joe Blau, over 7 years ago (edited over 7 years ago ) If you design at 2x then you have to account for 3x and 1x. Doesn't it seem easier to design at a baseline where you can multiply up and get consistent results, as opposed to having to divide for certain pixel densities and multiply for others?
Also @2x throws a wrench into using vectorized .pdfs because all of your assets are twice the size. iOS will natively convert a @1x vectorized pdf to whatever pixel density is appropriate for the device.
Read my responses. @1x doesn't matter. Most people use iPhone 5x and iPhone 6x. The oldest supported device on iOS 9 is iPhone 4s which is a @2x device. @3x doesn't matter as not many people have iPhone 6 plus, not to mention that iPhone 6 Plus itself doesn't render at @3x. PDF on iOS is garbage, may be great for convenience and if you don't care about the performance. iPhone has to do more work to convert and render the PDF vs simple png.
Joe Blau, over 7 years ago Read my responses.
Just checked em out. Seems like you're just going for the largest group and necessarily the edge cases. iPad 2 (which supports iOS9) is still at @1x and the iPhone 6 plus has a considerable market, at least in the US. If you're not trying to cover all of the devices at their native resolution, your argument makes sense.
DF on iOS is garbage, may be great for convenience and if you don't care about the performance.
Vectorized assets are rasterized at build time, not run-time.
Not edge case. Trust me. I have data on plenty of US users, barely anybody uses iPad (and people who do and own iPad 2/iPad mini 1 account for teeny tiny fraction). iPhone 6 Plus is less popular than you may think. iPhone 5/5s/5c/SE and iPhone 6/6s rule. I personally try to make the experience of most users as great as possible, sometimes you have to make sacrifices unless your solution solves major pains for the minority of your user base.
PDF: Thanks! You're right! I for some reason thought we were talking about rendering rasters from code (e.g. stuff like PaintCode - great for a lot of cases, but not all). PDF is indeed rasterized at build time. So what's the point of losing granular control of the individual assets of every resolution? PDFs in a lot of the times take more space than optimized PNGs so I really don't see the point.
How would designing at 2x be any less accurate than 1x? Maybe I'm missing some important factor? Assuming you work at 1x on a retina screen you would be surely seeing the most accurate representation?
Not sure what do you mean. Designing at 2x is 4 times more accurate than designing at 1x, that's my point.
If you design on a retina device (MacBook Pro) for a retina device (iPhone 6) then aren't you seeing the accurate representation of the screen at 1x.
Uh, if I am getting this correctly - are you asking that if designing on a MBPwRD (I always do, looking forward the new retina iMac) on a 375x667pt canvas result in an accurate preview? If that's your question, then nope.
If you're asking whatever designing in pixels for retina iPhone with @2x scale on an 750x1334px canvas result in accurate rendering on a retina MacBook Pro which has its display resolution set to native, then my answer is YES - of course you get probably the most accurate preview. I use Sketch mirror less when designing on a MBPwRD as the preview is really accurate (however, you don't get perfect color preview and you won't get enough of feel of the design either).
Ok, but why? My question is why is it not accurate? Why is designing on a retina canvas of 375x667 not accurate? What examples can you give to show me what I loose?
Surely if you design at 2x you'd be in between 50% and 100% zooms, I just don't see what "accuracy" is being lost and whether it's worth it versus a more clumbersome work ethic for myself. I also make use of Mirror (I assume 2x works fine there?) as well as Zeplin (not sure how it works based on it sorting out assets etc)
Abhijeet Wankhade, over 7 years ago
I'm curious too. Why do you lose accuracy at 1x? Zeplin plays nice with 1x IMO
Florian Grau, over 7 years ago
What comes to my mind in terms of accuracy and 1x is the issue with 1px hairlines. How do you guys do those in 1x? 0,5px, so that they are 1px in 2x?
Sketch supports 0.5px so thats what I do. I mean it is vector based so it supports teeny values if I so wish to use them, you are not dealing with pixel grids anymore (I do remember them having that option earlier on though). So that's why I am looking for clarification on "accuracy". I find that 1x or 2x they are just different ways to work and that's fine if they produce the same result.
I can work at 1x and not loose those pixels and they look exactly like they would if I worked at 2x because I'm on a retina device, exactly like what I am designing for.
For a horizontal line, you draw them as 0.5px high rectangles with the top edge or bottom edge on a pixel boundary.
That's a complete nightmare to manage! More than nightmare - imagine you want to change the side padding or height of the layer. Take a look at my iOS 9 template. If you want to change height of the cell (including the separator) - you just cmd+shift select two layers and adjust height.
Not too much of a problem in Photoshop and Illustrator, where you can select points of many paths across layers.
Shapes with 0.5px positioning and heights or widths can be preserved. I’m not saying people shouldn’t work at 2× — I’ve always advocated doing most work at 1×, but jumping to 2× for detail work, then back again. Everyone should do whatever they find best for them.
Interesting feature. How do you see what's the group height and quickly change that?
In Ps, changing the group height will scale the contents (= bad idea, most of the time). If you want to expand the width or height, you’re stuck with selecting multiple layers and using the direct selection tool to grab lots of points at once as shown above, unfortunately.
Have you ever designed detailed icons or dealt with 1px separators?
Yes. And I use 0.5px borders, shadows, measurements etc. I know above you state that you consider that an nightmare to work with but this isn't around whether the way someone works or not is a nightmare its down to what you consider a loss of accuracy. Whether working with .5px is a nightmare or not is it not as accurate as working with 1px at 2x?
For what it's worth (and this is just between you and me of course) I do agree with your points of designing at 2x, I don't want to see new designers just not care about details or develop lazy habits. I work at 1x, but I have the mindset of it being 2x (sounds stupid I know) but I calculate backwards to ensure accuracy, Sketch allows for this so I use it to my advantage. I treat my canvas as a retina canvas not as a "hey we will just be upscaling this to 2x so I don't care about what the pixels look like on an iPhone 6".
This may be an overly complicated way to work but it works for me which is why I do it, I've worked with designers who do work at 2x and that works for them. I've worked with 2x kits (like your own iOS sketch kit which is incredible and people should check out). I am flexible.
If people are agreeing with 1x then you need to take points that Philip made into consideration. I am positive and assume you all are, but if you don't care about that tiny 1px on a retina display then I can't help you.
I work at 1x, but I have the mindset of it being 2x I think that’s a great way to work.
Duke Cavinski, over 7 years ago
I do @1x for mobile web, but still design @2x for apps. I just use round even numbers for everything to get around a lot of that math.
Most of the people don't like getting around a lot of math, 1x makes thing a lot simpler if you think of it.
Well that's fine, but for my personal workflow, it's not a big deal at all. I can auto generate 1x assets easily.
Rolando Murillo, over 7 years ago
I was unaware of the notion of
0.5x, I had no clue people do that. I've always done 1x, 2x, etc. even with my retina computer. I'm just curious at which point did people ever thought it would be a good idea to make 1x = retina.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now