iOS Designers: Say Goodbye to Pixel Perfect

I once interviewed with a company where they asked me whether I can create “Pixel Perfect” work based on the design I’m given. I stopped interviewing with that company immediately after that call – this question was a big red flag to me. Unfortunately, there are way too many designers and companies who still think in the old-school “pixel perfect” design way.

The future of design is already here, and it is very dynamic, exciting, challenging, and far from pixel perfect. Here is what today’s iOS designers have to consider in their design (I know it’s a lot harder than the pixel perfect version!):

Relative Positioning

Let’s face it, there are different device sizes and orientations, even in iOS, and there are most likely more sizes coming if you believe the rumors.

This is why Apple has been pushing their Autolayout system – similar to relative layout in CSS. Instead of thinking in pixels, designers need to think how elements on the screen relate to each other and the screen.

For example, as the screen expands, does the text box expand with it, leaving only a 20px margin on the left and right, or does it stay the same size centered in the middle? If it expands, what is it’s maximum size (it might not look good taking up the whole screen when the device is in landscape mode).

Dynamic Type

Designers LOVE fonts, and it’s hard for many to move over to the new Dynamic Type way of thinking. With Dynamic Type, each font has to come in different sizes, so the user can choose to increase readability of your app if needed.

In iOS8, implementing Dynamic Type is so easy, it will become the standard and the “it looks the best with this font size” excuse will not do it for users who need a bigger font to see clearly.

Again, this means fonts are no longer static. The designer has to think of how each screen looks with different font sizes, and what those font sizes should be.

Kinetic Realism

With iOS7, physics-like animations have taken the center stage in iOS Design. Things are expected to bounce, collide, fall, etc. Custom transitions that show the users where they are in the app have become common place, especially in collection view (see Apple’s photos app).

A static PSD of the design does not begin to give you the feel for how alive the page should feel. There are now tools for designers (check out Origami by Facebook) to prototype those animated interactions. Ultimately, the designer has to work closely with the developer to get those animations just right.

Take a look at how the cute Snapchat ghosts play soccer, or how you can connect the dots in Uber while requesting a cab, or how the little icons move toward your finger and bounce around in the number of friends cell in Secret, or how the coffee bean circles fall around so smoothly in the UP Coffee container. All of these little cool touches make the app feel amazing (I actually enjoy waiting while requesting an Uber!), and none of them could have been done with a static PSD design!

Data

Today’s design is more than ever about data. Before even giving the design to developers, a user experience designer can use tools such as Flinto to test out the app’s usability with real people. And after the app is out, the analytics will continue telling you if the app is used, when it’s used, and what users do in the app. Ultimately, data informs design.

This means that today’s designer has to be somewhat detached from their work. After all, what they thought was a brilliant idea could be completely lost on actual users, and they have to be ok with that.

This also means that the design of the app will be changing constantly as more and more data is gathered and more features are added. To make the changes quickly, designers need to think in terms of style guides for the app (think Twitter Bootstrap but for your app). Stretchable buttons are a must!

In some work places, developers have json files they use to specify font and color schemes for different situations, and the designer can go in and modify the json as needed. This type of model could be great for A/B testing design as well (use different font/color styles json files for a subset of the users).

With iOS 7 and iOS 8, the world of design and development is becoming more and more dynamic. I’m looking forward to seeing more designers adapt to these changes so we can create some amazing apps together!

Do you work with a good designer? How did you find them? What is their process like? I’d love to hear about it in the comments.

Enjoy the article? Join over 14,500+ Swift developers and enthusiasts who get my weekly updates.

  • YT86

    As a designer, when I say pixel perfect, I don’t preclude any of the things you mentioned above. I think most designers have moved beyond the static site paradigm.

    We still use the term pixel perfect, and there are realms where the old definition pertains, but for the most part I think it is more of a way to gauge a developer’s commitment to design. Developers can be sloppy about implementation as designers can be about specification.

    You may have jumped the gun by ending your interview with the company. Maybe they were too old school. Maybe they weren’t. Either way, you should be aware that language changes.

    • nobody

      But the problem always was that pixel-perfect was never something that should have existed in the world of web design. It was always a tacky marketing buzzword that meant nothing to those of us that actually do design *and* development. There is no pixel-perfection. There is adhering to a grid or a template that scales and reacts. You say “old school” — but even responsive tables existed in the early days of the web. Static has truly never existed in interaction design as it relates to the internet.

      If you’re having problems with developers half-assedly implementing your designs, you should get into development yourself instead of using meaningless vernacular to determine whether or not someone knows what they’re talking about. Most of the people I’ve seen that classify themselves as a “pixel-perfect” designer (or any other fad term) are amateurs that use it as a means to make themselves look better than their talent actually is.

      • YT86

        “But the problem always was that pixel-perfect was never something that should have existed in the world of web design.”

        I disagree. Display sizes in the past were far more standardized than they are now. The number of browsers were limited as well. 1024×768 lasted as a standard for a very long time. I have a long history in web design and to my clients then I could and did deliver pixel perfect design. Pixel perfection didn’t need to be all-encompassing either. The header and container for content could be pixel-perfect, but the container could stretch vertically for longer content and designers would still have patted themselves on the back for a job well done. I don’t know where your accusation comes from but it does not seem to come from a place of deep experience.

        Now, as an app designer for multiple platforms, I can admit that the work of developers is beyond my capacity.

        Either way, you are simply stating that you are not buying into a certain fashion of language. Responsive designs can still be pixel perfect if the margins are right for each browser size or zoom level. Admittedly, it’s much more about ratios nowadays. But like I said, it’s just a fashion and any designer worth their salt would know that. But ratio-perfection doesn’t sound right and it’s silly to dismiss people over a word.

  • Glauber Laender

    Just realized that I lost a few precious minutes reading that…
    And a few precious seconds posting this comment.

  • Steve O’Connor

    Maybe the commenters having a discussion about web design should read more carefully–this is a post about _native_ iOS design. And some good points for those out there who do not keep up with web trends.

  • Ryan

    I think you’re putting way too much weight on the term “pixel perfect” to the point where you actually stopped interviewing for a job. I’ll give you the benefit of the doubt and assume there was more to that decision than a loathed buzzword.

    But you know what? Your devices display everything using small rectangles called pixels… sometimes they’re squares, sometimes they’re more rectangular (i.e. TVs); sometimes they’re ultra dense (iPhone), and sometimes they’re ultra visible (like on a billboard), and in the case of our handhelds, sometimes one app supports all the densities under the sun and your designs NEED to look good like they’re designed specifically for the screen you’re looking at in this exact moment.

    Attention to detail. No blurry icons that were designed for a less dense screen. Objects aligning to the pixel grid of the device – that’s probably the most common offender of both experienced and inexperienced designers alike.
    That’s what pixel perfect means.

  • Pixelfucker

    You should check what the term “pixel perfect” means.

  • Omar

    Your own understanding of “Pixel perfect” is totally wrong, please educate yourself before writing.

  • Juan

    I think people in there did not really understand this post. This is not about pixel perfect design, it’s all about dynamic & interactive design, and what we could call “user’s data design centric”.

    Young designers (under 30) are born with interactivity, and when they create things, it comes in mind like breathing. But for others, they sometime have difficulty to project themself in an all animated environment, especially for those who started with print.

    I saw a lot flash and motion designers create amazing mobile application because they have the sense of interactivity and visual driven animation & interaction.

    It may be a harder step for more “classical” designers.