How do you design for retina displays?

almost 7 years ago from , Product Design Director & UX Lead

I have a iMac 27" and I'm still designing for non-retina displays because I don't see the whole page at 100% zoom and I don't like to design at 50% zoom, should I start designing for @2x? Should I get a new display?



  • Marc EdwardsMarc Edwards, over 6 years ago (edited over 6 years ago )

    Here's my thoughts on the topic: My app design workflow

    Sorry for the self-promotional article pimpage, but I’ve spent a bit of time trying to solve the workflow needed for Retina design, so hopefully others benefit.

    Also related:

    12 points
  • Clark WimberlyClark Wimberly, over 6 years ago

    You could use an app that supports "Retina Mode", like Sketch, but that basically turns 100% zoom into 50% zoom, so I'm not sure how much you would like it.

    The short answer is that there is no short answer.

    4 points
    • Jaffar KhorshidiJaffar Khorshidi, over 6 years ago

      Out of curiosity, I find this a little bit confusing being completely new to Sketch (and a little rusty in design) — how does this function work when using an actual retina screen?

      If I wanted to design for non-retina, do I turn this option off or keep it on? Sorry if it's a silly question.

      0 points
      • Matt SharpeMatt Sharpe, over 6 years ago

        There's a @1x and @2x option on Sketch, so id you're designing on a Retina display you can save at 50% for non-retina screens

        1 point
  • David BlumDavid Blum, over 6 years ago (edited over 6 years ago )

    Actually I use Adobe Muse combined with Photoshop Image-Assets (auto-generated @2x of each asset). And I'm testing the Adobe Muse Prerelease, which supports a high-resolution mode. I use Muse for Wireframes & HiFi-Design Mockups. And sure, I dont use the code.

    2 points
  • Mike HeitzkeMike Heitzke, over 6 years ago

    Retina <3's CSS3 and SVG.

    0 points
  • Jaime Ascanio, over 6 years ago

    Thanks a lot for all your answers! Very helpful stuff and I hope this will help other as it helped me :)

    0 points
  • Philip AmourPhilip Amour, over 6 years ago

    Personally, I design on my MacBook Pro with Retina Display (15') and got a thunderbolt display as a secondary display for chats, etc.

    I use Sketch and design on a retina canvas when I work on an iPhone & iPad App (there's still that legacy iPad mini and iPad 2 but I don't spend too much of time on making the design pixel-perfect on those, I just downscale the retina artwork - let's be honest - there's not enough of users that care and not enough time to spend time on that + Apple does the same with iOS artwork). When it comes down to web, I use 1024 x 768, design in movable blocks, display it on 200% and sometimes open artboard preview on my secondary screen to see how's the page going to look like on a non-retina display. It's guaranteed to be pixel-perfect because you're designing in a legacy resolution, just rendered on retina. If you need to have pixel preview, just turn tap the show pixels button in toolbar and zoom in.

    Couldn't be happier with my workflow.

    0 points
  • Ryan Hicks, almost 7 years ago

    The short answer is know your audience and design for it.

    Keep designing for non-retina IMO and adjust accordingly as you need. You might be surprised that the majority of people do not own macs (let alone the retina) like a lot of us might do. Heck I don't even own a retina mac yet.

    I'm redesigning a major cooperate website right now, and over 60% of their user base through both of their brands still uses IE.

    0 points
  • Nic TrentNic Trent, almost 7 years ago (edited almost 7 years ago )

    Design at the same size as always... 72dpi. Just 2 things... 1) Make sure all your icon/graphic elements are vector (either using the shape tool in Photoshop or using illustrator smart objects). 2) Photography: in a separate photoshop file make all your images twice as large as they are in the psd. This will allow the developer to create retina optimized images for the site. 2b) You could use these larger image files as smart objects in your original psd if desired.

    0 points