When drawing mocks for the iPhone 5, do you make the artboards 320×568 or 640×1136?
Always at @1x. Resolutions are always evolving and it's best to scale up rather than keeping up with the new dimensions.
I've switched to 1x, and think it's the way to go for simplicity's sake, especially if you are doing an adaptive app.
for simplicity's sake
We go with 2x
Why 2x vs 1x?
For me at least - I preview on mobile devices a bunch and a 1x version is pretty unusable. We also do lots of motion work and the extra fidelity makes for much nicer/larger videos.
Sketch mirror auto upscales from 1x -> 2x/3x.
Also exporting to 2x/3x with sketch is 1 click.
No Sketch mirror on android :/ I use Skala preview which requires you to zoom in and makes it fuzzy.
Also I don't find the automatic export upscaling to be perfect and I often have to manually pixel-fit things in Photoshop (especially with assets). Though if it's just for previewing something it's fine.
I recommend using Skala Preview combined with this plugin: https://github.com/marcisme/sketch-preview
This lets you design @1x then simply press CMD+P to send a scaled version to the device. Works really well!
That's what I use but it doesn't accurately scale up for me.. maybe I have a super old plugin version. Thanks, I'll check that now!
nps! yeah it's been updated fairly recently so might be worth another shot.
Even with that you want to see it exactly as it's going to appear on most devices. Most devices are NOT 1x. I like to do certain scaling of icons and buttons by hand to get them perfect. Sketch is not perfect in it's scaling. Design for what people use.
I totally agree with this. Design for what people use.
people use @3x
I've moved on to 4x now with my Nexus 6 :)
Agreed for 2x. For the data-driven and animation-heavy projects we've been working on lately, the mockups are mostly for prototyping and visualizing what the app or page will look like, not to produce the actual assets.
The main purpose is to see a crisp preview on the phone via something like Skala View, so 2x resolution makes the most sense.
TIL do what you want
Well yeah. For most of these questions there's no such thing as a right answer but there's value to learning why people make their choices.
No approach is without down sides so I love learning how people who have similar methods get around common limitations in their own process.
I always work at 2x in Photoshop and 1x in Sketch. Hard to upscale/downscale in PS, easy in to upscale in Sketch.
Hard to upscale/downscale in PS
He probably means that Photoshop doesn't natively support exporting multiple slices at different aspect ratios without a plugin.
Generator does it.
You can also use slices and actions (that's how I do it).
Some guy made these awesome actions!
They seem ok, I guess. :D
If you use Sketch you most likely do 2x. Nobody I know makes apps that still run on 1x phones.
1x is dead, or will be by the end of the year. iOS 8 cannot run on non-retina devices. Design for the devices your phone goes on.
I think the point in designing at 1x is for scaling designs up to 2x and 3x, not necessarily in supporting 1x devices (though if you need to, that's also a benefit). Sure, 1x devices may be dead soon, but 3x devices have a long life ahead. And what if we're at 5x in 5 years?
It's much better to start at 1x and scale 200% and 300% for 2x and 3x respectively than it is to start at 2x and scale at 150% to get to 3x.
Thank you. The second article is definitely the most recent, and my workflow is still very similar.
I do all initial work at 1×.
I frequently check designs at 2× and 3×, by scaling up the document (towards the end of the process, anyway).
All solutions are a compromise, but I feel that working predominately at 1× has more pros than cons.
I still use mostly PNGs.
Drawing in code can be good for situations where you need something to be dynamic beyond what PNGs can provide, which is actually pretty rare — PNGs can be tinted, expanded (9 part images), rotated etc.
I’m not using PDFs for assets. There’s some significant issues and not that many plusses — the PDF format isn’t great when it comes to shadows, inset effects, and many other things. They typically have to be rendered to an image, so your PDF will include portions as a 1× bitmap that gets scaled up to 2× or 3×. Not cool.
@2x. Using illustrator.
Conversation I had with our iOS developer today...
Me: Yo, Desmond. Hit me with the padding between cards. Desmond: 10px Me: Are your sure?
20min later Me: Yo, Desmond. Are you 100% sure?
Desmond recommends 2 too?
Always @2x, and preview on device as I design via Composite. http://www.getcomposite.com/ Hooks straight into photoshop as a plugin, and updates on the fly over wifi. It's awesome.
@2x as it represents the majority of our user base, and use 640x1136 as a starting point for a responsive layout. Always design with responsiveness in mind, and differing screen sizes are hardly ever a problem.
We've found you cant reliably batch out assets and still assure quality and pixel perfection. @2x is an excellent starting, as you can then scale to %50 for the @1x, and %150 for the @3x and manually export every icon. Really doesn't take all that long, and allows you to guarantee quality.
For iPhone I do @1x because it's easier to export the assets to @2x and @3x for iPhone and and iPhone 6+ without having to tweak Sketch's suffixes. If I'm doing an icon, I usually do it at it's native resolution depending on the icon so that I can apply progressive reduction.
I design at @2x on iPhone, @2x or @3x on Android (depends on most common device). Yes, it means a bit more mental math is involved, but how do you preview 1px lines on a retina screen if you're designing at 1x? I tweak all icons when exporting anyway, regardless of whether they're scaled up or scaled down, so why not design icons for the screen that they're most often going to be seen on?
In Sketch, you can draw a 0.5pt, and Sketch Mirror app will upscale the mockup automatically, giving you nice 1px line on retina displays.
Should have mentioned I prefer working in Photoshop.
You should check out Marc Edwards' Photoshop Actions and Workflows. That guy is a fucking Photoshop wizard, and he works at 1x.
Personal preference, I've been using Photoshop for 12+ years and prefer @2x.
It's worth noting that I don't really like working at 1×, I just find it to be the best compromise, when all things are considered. Oh, and I often jump up to 2× or 3× to continue to work or check on details.
And, I also use Illustrator when drawing glyphs, which is effectively infinite res (for the preview, anyway), but locked to the 1× grid, then paste back into Photoshop as a shape layer for styling.
So, it's not really that I'm always working at 1×, but more that 1× is the main base and grid I work from.
Makes sense. When working on iPhone I set up my document in Points and 144 ppi, then toggle the a grid (10 points, 10 subdivisions) to check quickly check if anything falls on a half-point.
The nice thing about Photoshop (or awful thing, depending on who you ask) is that you have the flexibility to choose how you work.
P.S. Thanks for Skala Preview! Not sure what I'd do without it.
Yeah, I think that's another great way to go.
P.S. Thanks for Skala Preview! Not sure what I'd do without it.
Great to hear! :D
Thank you! :)
I'm not sure what I'd do if Photoshop wasn't scriptable/actionable.
Never heard of that before. I'm buying Sketch Mirror now! Thanks for the tip.
I usually work at 640x1136. Just the way my previous art directors used to lay things out so I picked up the habit. I enjoy having the larger art board to work on knowing that it'll be reduced.
The only thing I really have to keep in mind is that sizes get halved when I hand off to the iOS developers since the art boards are still 320x568.
That's what I've been doing, and in Sketch, I've been creating 2 different versions of each style for mobile and desktop with some kind of indicator (m-ui-white and d-ui-white).
I'm testing out drawing at 1x, and here are some apparent advantages:
- The mocks look proportionally correct compared to the desktop
- I can share styles between mobile and desktop (for now)
- I can have both mobile and desktop mocks in an Invision web project
Do your answers still stand today? Do you feel the same with regard to web apps in the current climate?
I wish we could bump this up. I've got a 5k iMac and I'm still confused about what I should do.
1x now, much easier to go to 2x and 3x
@2x in both PS/Sketch, when i saw @1x, oh my eyes!!!!! damn, i'm working on mbp retina.
I do everything at 1080x1920 now, for some reason.
iOS in Sketch - always @2x (for the sake of convenience and accurate preview of what I am working on, just have to remember to design with points in mind) Android in Sketch - always in 1dp (can't avoid that)
1x or 2x is pretty much irrelevant in terms of workflow optimisation because you should be exporting 1,2 and 3x anyway, and there are numerous scripts or plugins to take care of that now.
Draw them for whichever device you're primarily testing your designs on, which ideally is the most popular device for your users, projected or otherwise, and then fit the rest of your workflow around that.
For Android I do everything at MDPI. For iOS I do @2x just because I preview everything on a iPhone 5 , but with more iOS screens coming onto the market I will eventually move to @1x like Android.
I don't do iOS but for android always mdpi (android @1X), later it is easier to export assets to all resolutions, sketch powered)
I've moved completely over to designing at @1x. So much better.
Photoshop @2x mirrored to devices w/ Skala — 2x is the iOS baseline, and I pay less attention to specific lineweights at iOS 3x. Draw at xhdpi for Android simply because of my mirror test device.
If the app needs a responsive/web codebase from the get-go, I start with 1x in Sketch. It’s easier to compare across breakpoints.
For native apps, I usually start with 2x. I debate this choice myself. I think the only factor steering me to starting at 2x is that Teehan+Lax iOS templates are set up that way. It’s a tiny bit annoying to have to override the default values in Sketch’s export fields by typing 0.5 (for @1x), 1 (for @2x), and 1.5 (for @3x) but it works just as well.
I design at @1x and I don't understand why Sketch is currently using @2x and @3x (6+) as it's default for artboard sizes. Even Apple recommends the use of 1x (points system). I have to manually resize the artboards them every single time.
Recently started using sketch and then we also switched to @1x or MDPI as base.
Because of the vectors it's easy to upscale.
Even wen working with images sketch can upscale from the original image you imported in your design, zo when exporting assets or screens you still have nice sharp images.
We design at 1x in Sketch for both iOS and Android. I find it makes exporting assets a lot easier. Here are the export settings I use in Sketch:
iOS: 1x 2x 3x
Android: 1.5x (hdpi) 2x (xhdpi) 3x (xxhdpi) 4x (xxxhdpi)
For previewing we use Sketch Mirror on iOS and Skala Preview on Android (with the Sketch Preview plugin: https://github.com/marcisme/sketch-preview)
I design @2x; it helps me seeing how the actual pixels will look like in real life, specially when I'm using Skala preview or Sketch mirror to see it in an actual device.
Otherwise I have to scale to 2x every time I want to see the design on the actual device, and that's time assuming.
+1 for going back to 1x from 2x. Only downside I run into is having to zoom at 200% in Skala Preview when mirroring the design on a retina device.