Illustrator Artboard dimensions for mobile ui design?

Question

I want to create one document with multiple (3) artboards in Illustrator for mobile wireframing/ui design. One for iPhone, Android and iPad. Can I create artboards with different 'resolutions' within the same document, or do I just scale up for retina etc? What pixel dimensions for artboards are recommended/most-frequently-used when designing ui for mobile apps for these three devices? Have worked for years with Illustrator, but I'm from a print background – these virtual dimensions are giving me a headache! Any suggestions gratefully accepted.

Answer 1

My recommendation: create an Illustrator document using the "Web" profile, to ensure that "Align New Objects to Pixel Grid" is on. That way when you place new shapes onto any artboard, they are pixel-perfect, and will look clean on export at 72dpi. Also, make sure you are in Pixel Preview mode when designing so you can align shapes to the pixels.

Edit: Yes you can create more than one artboard at different dimensions. Just use the Artboard tool, and drag out new artboards in the Illustrator document.

Then, create each artboard at whichever size you prefer to work at: either @2x or not. Here is my goto list, in px:

1. iPhone 6: 750 x 1334
2. iPhone 6 plus: 1242 x 2208
3. iPhone 5s/5c/5: 640 x 1136
4. iPad: 1536 x 2048
5. HTC One: 1080 x 1920 [this is the device I have, but its pixel ratio is equivalent to the most popular Android phones, namely the Samsung Galaxys, etc]

As you can see, I prefer working at full @2x (or more) resolution because during export of artwork I have to do less work. In general, the best way to gauge screen size is to just take a screen capture off of the device you are designing for, and look at the pixel size for that image.

Now, the part you are most interested in. As you already know, working in vector graphics is awesome. Infinite resolute support and (almost) infinite scalability. When you are ready to export the artboards do the following:

1. Select the artboard you are working with
2. File > Save for the Web
3. In the dialogue that opens, select the PNG-24 setting. Toggle transparency on/off as you wish
4. Look to where it says Image Size. Here you can export the artboard at any size without loss of quality. You can do 50% size for your low-res devices. Or 100% size for the @2x device sizes I mentioned above.
5. When you change a size, make sure all values get updates in image size. You may have to click around into the width/height boxes a bit before that happens. Otherwise your export will come out at the original size.
6. Finally you will have a file at the right size, with minimal headache, and compressed in file-size for use anywhere you want. My favorite from here is to import the files onto an actual Phone/Tablet and then thumb through them to get a feel for what the interface might look like on an actual device.

Questions?

Answer 2

There is a plethora of scripts out there for saving graphics from Illustrator for mobile. It's way faster than using "save for web". Here is one, but there are dozens. Plus you can write or edit them yourself. https://uncorkedstudios.com/blog/export-to-ios-photoshop-script