Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by Justin Farrugia
Justin Farrugia
13,649 Points

What does designing at @1x, @2x, @3x mean? How does it factor into Photoshop and Sketch for example?

I'm aware that different devices have different sizes which means that we need to consider the different screen sizes. I keep hearing that ideal workflow is @1x but I'm really not sure what this means. Does it mean that for example if I were to design for the web at 1440 x 900, I would need to consider larger screen sizes ie 1920 x 1080. The terminology of it all (@1x, @2x, DP) is a bit confusing, care to explain?

1 Answer

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

@1x, @2x, @3x is refering to pixel density, not screen size.

There are two things to keep in mind here. There is the actual physical screen size, like 1440 x 900 points. Points are just abstract units used to mathematically calculate space. It's not a reference of pixels, per say.

Now you start getting into @1x, @2x, etc.

A long, long time ago, the standard resolution for screens was 72 pixels per inch, or as I'll refer to from here on out, PPI. That is no longer the case. Even today's lower market monitors are probably over 100PPI. iPhone's and other phones have gotten increased their PPIs, as well.

What does this mean? You're resolution will depend on how tightly the pixels are packed inside the physical screen size. To get the ultra high res, These devices are rendering an image on 2 or 3 times as many pixels as what is "standard", so so if your image's resolution doesn't have enough pixel information to support that many images, it distorts and becomes pixelated. It's just like taking an image and zooming in on it, to the point the image no longer has the pixel data for the screens resolution, the computer must make a guess of what to fill in the remaining pixels with.

So you provide assets that are 2x and 3x too big for the physical screen size, because there are so many pixels packed into the screen, (The PPI is very high) that the image will still render ultra sharp.

By the way, all of this only applies to raster based assets and images. Vector assets are resolution independent. Since vector images are mathematically shapes calculated by the computer, they are not subjected to the same problems with pixel density and resolution. They'll always be sharp. From as small to a business card, to blown up on a billboard, it'll be just as sharp.

I have no idea if that made sense, hopefully this will. http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions