Compared to Android, designing screens and creating assets for iPhone use to be easy. For a ling time we’ve only had to deal with two densities, and only 2 screen dimensions. The iPhone 6 Plus introduces a new screen dimension and a new HD screen. It’s a fairly typical 1920 x 1080 format, once popular with LCD TVs. This post is a place for me to log all the new sizes, and also to compare the require assets against Android’s require set of densities. The strange this is, for the iPhone 6 Plus, the graphics have to be provided much larger than the 1920 x 1080px screen resolution, as they are set at x3 standard resolution and then scaled down to fit the hardware.

iPhone 6 Plus screen size / dimensions

• iPhone 3 – 480 x 320px
• iPhone 4(s) – 960 x 640px
• iPhone 5(s) – 1136 x 640px
• iPhone 6 – 1334 x 750px
• iPhone 6+ – 1920 x 1080px (scaled down from 2208 x 1242px)

iPhone 6 plus launch image resolution dimensions

• iPhone 4 launch images: 640 x 960px
• iPhone 5 launch images: 640 x 1136px
• iPhone 6+ launch images: 1242 x 2208px and 2208 x 1242px (the iPhone scales this down)

iPhone 6 plus Retina HD image resolution densities Vs Android density pixels

• iPhone 3 / Android MDPI | 100% | 1x
• iPhone 4, 5, 6 Retina / Android XHDPI | 200% | @2x
• iPhone 6+ Retina HD / Android XXHDPI | 300% | @3x

Some devices scale as well

Android and iOS makes it easy to create different resolutions by requiring graphics at easy scales x2, x3, x4, but manufacturers make screens to fit the design of their devices and x2, and x3 does always fit what they want. Therefore, some devices artificially scale the resolution up or down, for instance the new iPhone 6 Plus requires x3 graphics, but only has a 1080 x 1920. However, the graphics you supply to the developer still need to be x3 size for Android.

This is fine for icons, but is an issue if you’re providing full screen images as the aspect ratio may be different.

See my guide for How to start designing Android apps in Photoshop & what is a dp?

July 2014 EDIT: Android’s “L” design guidelines now supply templates in Adobe Illustrator, making it even harder for designers user to Photoshop or Fireworks. They don’t provide an answer for how you should crop and optimise your assets for the developer (I assume they’d rather you didn’t and just use their native stuff).

See www.google.com/design/

July 2014 EDIT: On consideration of comments from NexogenDev, I have removed the more explicit reference to 72dpi in the graphic above to “1dp = 1px” as this is a more literal starting point and probably better. My point was that Android supplied templates and assets tend to open by default in Photoshop as 72dpi, but dpi in general is misleading in this context.

I found it hard to know where to start designing for Android in Photoshop.

Google tries to help by providing extensive Android user Interface Design Guidelines.  There are many devices running Android that have different screen sizes and shapes. There are also different screen densities, which means the quality of the definition of the screen or how many pixels fit in the same sized area on the screen – e.g. medium screen density has 160 pixels in every inch on the device’s screen, whereas an extra high density screen has twice as many, 320 pixels, crammed in an inch. To cover the different densities you need to supply graphics and icons at various densities.

Creating a design that will work for all these devices can be daunting. You also need to create different density icons and graphics.

1. Minimum handsetscreen size

I started with a minimum mobile handset size screen first. Starting with the smallest and most limited screen size first makes sure your content and UI will fit, removing any features that aren’t completely necessary to the core purpose of the app. Then you can work out how your app will behave on larger and tablet sized screens. You need to decided if your app is going to stretch to fit larger screens, or if you’re going to have a completely different layout and design for tablet sized screens.

2. Photoshop image size

I choose to start with a small mobile handset and a small 7″ tablet screen as a base for design and then think of how that could scale elagantly.  You may need to create portrait and landscape versions if you plan on allowing users to change orientation.

Here are some Photoshop templates

3. Download Android design templates

If you are new to designing for Android, and are confused by dpi, I STRONGLY RECOMMEND you use native Android styling and assets, rather than doing a completely custom design at first.

See www.google.com/design/

It is important to keep the icons at the same proportion to maintain the correct “hit” area for the user’s finger.

4. Scale down

It’s easier to work at the higher pixel density, XXHDPI. It is always advisable to create icon art as vectors in “Smart Objects, or as “shapes” in Photoshop so they can be scaled up or down without loosing quality.

The benefit of working at XXHDPI is that you can be sure you are not loosing any quality.

XXHDPI – 300% – x3.o
XHDPI –  200% – x2.o
HDPI –  150% – x1.5
MDPI – 100% – x1.0
LDPI – 75% (don’t bother with this!) – 0.75

When using vectors, you may want to adjust your line art to tighten up any half pixels or it can look blurry at the edges (if you’re a perfectionist like me).

5. Workflow

• Create you design PSD at XXHDPI
• Crop out your graphic assets and icons as separate PSDs
• Scale them down to the various densities: XHDPI, HDPI, MDPI

My method is to design one PSD, crop out the icons assets as PSDs, then scale them to the different densities. I often start with a PSD at XXHDPI or MDPI (providing my artwork is vector and can be scaled up or down), then I crop out the icons and assets out, then resize them.

The reason this is easier is that when you need to make design changes, you don’t have to change multiple PSDs.

What the frakk is a DP?

Here’s what I discovered after a few hours of scratching my head and moaning…

1. “dp” is a magic, made-up measurement that only exists in the world of The Matrix & Tron.
2. Android icons are 32dp x 32dp @ the medium density MDPI
3. Android supply sample icons (Edit: they don’t any more the gits) and if you open an icon from the MDPI folder in Photoshop, the icon is 32px x 32px with “image size”.
4. SO, in Photoshop:1dp = 1px @ MDPI – 100%
   1dp = 1.5px @ HDPI – 150%
   1dp = 2px @ XHDPI – 200%
   1dp = 3px @ XXHDPI – 300%
   1dp = 4px @ XXXHDPI – 400%
5. It doesn’t matter what DPI you have set in PHOTOSHOP, it’s the canvas size (the number of pixels available) that counts.

If you have a better way of getting started designing in Android, or if I’ve made an errors, please let me know.

Here are some Photoshop templates at MDPI and HDPI to give you an idea.

Please see my new guide: How to design for new iPhone 6 Plus resolutions in Photoshop

When designing an appdesigners take great care over the UI and the fine details. Apple provide a lot of built-in UI styling in the SDK for developers to produce apps of a consistent quality. However, when Apple create their own apps they add an extra layer of detail and finish that is not supplied in the SDK, this extra quality is hard to achieve out-of-the-box.

Designers are fussy by trade, and communicating this obsessive level of detail via email or Skype to a remote developer can be challenging. I have great sympathies for developers, espcially when I find myslf sending them the following documents with design revisions…

Kevin was as keen as me to get this right, so I hope doesn’t he hate me too much

I’m impressed by the stand-out of Pinterest’s cursive “p”, Beats Aduio circle, and the clarity of thisismyjam.com branding.

As well as researching music brands, I also find it’s good to have a set of brands to study and admire just because they’re cool.

The first step is to make the heading levels more distinct, so there is a clearer visual hierarchy. Heading levels should have the same effect as the old eye test, noticably diminishing in size. The current site headings are a bit samey. This helps the bowser to understand how the page is divided and gives a “vertical rythm”, making it easier to scan down the page to find omething specific.

Secondly, we need to clean up the CSS and html, so that the structure of the content follows the intended visual and semantic hierarchy . H1 for page title, H2 to divide content in main themes/sections, and H3 headings to title separate under each H2. These changes will make the page legible without the stylesheet, which is not only good practice, but also frees the content for use in multiple contexts (such as mobile/tablet).

As these changes effect the structure of the site we can’t just roll them out site-wide. They’ll be included as we update various sections of the site, the first being Last.fm Charts.

A note on accessibility

CSS gurus say you should not use units like “px” or “em”. It is naughty. In this case I have used united px values as a guiding principle, the CSS will probably be unitless.

1. Define what use cases and objectives you want to satisfy
2. Choose an app development agency
3. Have a good relationship with app development agency
4. Come up ideas
5. Define a Solution
6. Choose the technology
7. Set a deadline
8. Find a commercial partner to co-fund (if applicable)

The End of Client Services

…it’s very hard for a design studio to create digital products on a contract basis because the messy timelines and continual course corrections that are required to launch a truly effective software product are anathema to the way clients like to be billed. No matter what a design studio promises, it’s very likely that in its first iteration a digital product will take longer to complete, will cost more, and will be less effective than originally promised. The most critical time for designers to be involved in a digital product is all the time, but it’s perhaps most important for them to stick around after the launch, when they can see how a real user base is using it, and then amend, refine, revise and evolve it. But it’s at just about this time that most studios are preparing invoices and shuffling their staff on to other clients’ projects. – Khoi Vihn

And this article is a call out to designers to ditch their own studio or freelance dreams in favour of joining (or starting) a start-up in this new app landscape:

Dear Graphic and Web Designers, please understand that there are greater opportunities available to you.

The internet, at this time in history, is the greatest client assignment of all time. The Western world is porting itself over to the web in mind and deed and is looking to make itself comfortable and productive. It’s every person in the world, connected to every other person in the world, and no one fully understands how to make best use of this new reality because no one has seen anything like it before. The internet wants to hire you to build stuff for it because its trying to figure out what it can do. It’s offering you a blank check and asking you to come up with something fascinating and useful that it can embrace en masse, to the benefit of everyone.

Your press checks are bullshit
Your personal logo is bullshit
Your employer is bullshit
Your studio is bullshit

I’m not suggesting that you shouldn’t start your own company. I just think that for a lot of designers, from what I’ve seen, this is jumping the gun. Unless you have a friend who is an engineer, it is going to be difficult for you to find someone of quality to build something for you, the professional landscape for those people is just too competitive right now for much of that. But I guarantee you’ll develop relationships with engineers if you go work at a startup, and from working relationships good conversations brew and companies are born.

Full article

In an effort to maintain consistency and quality of our application icons, I have been collating a GUI (Graphical user interface) reference doc. As we produce applications on different devices and platforms, we need to take native UI styles and features into account. Although there can be no “generic” iconon all platforms, we can still achieve a consistency of drawing shape and general ‘character’ of icons across apps. For instance: to create tab and activity icons in iOS you  provide white shapes on transparent backgrounds, the “blue gloss” styling is added dynamically within the app.

This matrix is more of “how are we doing” document to see if Last.fm style shines through the veneer of native UI styling. The grid shows platforms in columns (names removed for confidentiality of work in progress) and the rows display the various activity states: rest, hover, press)

We made notes on post-its, one observation per note, with quotes from users to back up observations. We used rolls of brown paper to collect and store the notes for taking away later, the paper was divided into the broad themes we were testing. Back at the office we sorted the post-its more thoroughly into columns under more exacting topics. Several people were taking notes so we had to de-dupe, however it was important to keep similar comments if made by different users, as this indicates that the issue might be more common to a wider group.

The death of a thousand notes

Affinity Sorting

The next step is to do an “affinity sort” to look at each comment individually and sort them into groups based on perceived patterns, rather than features. It’s important to start quite freely and not to place a heading above the group or draw a conclusion too quickly. It’s basically finding groupings based on a gut feeling that different users were having similar issues. In this research session we were testing different features, such as “Events & Festivals” and “Artist Library”. In afinity sorting I noticed that a user who couldn’t find  their recommended events was probably having a similar issue to a user who couldn’t find their recommended artists in the “library” section. These two notes were moved from their former “feature” headings into a new group called: “Issue with finding personal recs”. The issue had nothing to do with events or radio, it was a issue around users needing a uniform place to access all their personalised info.

BEFORE: Basic sorting by feature or topic

AFTER: Sorted by affinity – patterns emerge

Immersive Vs productivity apps

In a productivity app, like email, its better if a user can drill in and out of tasks in a straightforward way. Therefore the folder based metaphor of desktop operation systems makes sense. But for a more immersive experience where you want the user to get “lost” in the experience, you need a more “open’ and loose heirachy. In my experience, “Open” is very hard to develop… as it’s harder to anticipate all the possible routes and outcomes, so the UI presents consistent behavious where ever the user is.

In this example I’m looking at an immersive touch-screen way to explore music artists. A list of artists is presented as a photo grid (or quilt), and the user can zoom into the grid to look at an individual artist. They can then swipe left and right to see the next artist in the grid. This mixes two existing navigation metaphors: picture thumbnail gallery and a page-turn magazine experience. Phew.

But now the hard bit…

Every artist has similar, or related, artists. Daft Punk has: Justice, deadmau5, Digitalism, etc. We want to encourage the user to follow these connections and explore more artists freely, but at the same time, need to give them a clear way back to the start of the app.

Model 1

The user zooms in on an artists, then when the click on a related artists, that opens another grid. In the programming model, each artist opens as a new level in the app, and each related artist grid is another level on top. Phew! The layers build and build, and for to get back to the start, do they have to press “back” through each of these layers?

Model 2

The user can zoom in and out of the grid to see artists, but if they want to click on a related artists, that launches a new grid in a new session. To get back, the user goes from grid to grid. It’s more like a concept of islands of artists, than levels. This will be much easier to develop, as each time you press to see a set or related artists, you are clearing he grid before, much like performing a new search.

If this comes across as an incoherent ramble, it is because my mind has been broken by too long in front of the whiteboard!