iOS – Graham Todman freelance UI / UX product designer http://grahamtodman.co.uk/blog Wed, 07 Oct 2015 20:00:38 +0000 en-US hourly 1 https://wordpress.org/?v=4.4.2 Freelance Apple Watch app designer – needs an Apple Watch! http://grahamtodman.co.uk/blog/2015/05/freelance-apple-watch-app-designer-me/ http://grahamtodman.co.uk/blog/2015/05/freelance-apple-watch-app-designer-me/#respond Fri, 15 May 2015 11:37:59 +0000 http://grahamtodman.co.uk/blog/?p=3368 Continue reading Freelance Apple Watch app designer – needs an Apple Watch!]]> Apple Watch app designer

Here are some early concept designs for an Apple Watch fitness app. My chums at Sensoria asked me to photoshop some concepts to show how the Apple Watch could work with the Sensoria fitness wearable device. The Sensoria smart socks have sensors woven into the fabric which can detect strike points on your feet as you run to help you improve your running technique. Sensoria are one of the leading developers of truly wearable technology and the “internet of things”.

Designing an app for the Apple Watch

Designing for the small screen and “quick glance” use case of the Apple Watch is a largely reductive process, editing the parent app down to the most essential features, then refining the graphics so they are legible on the small screen and the context of a quick glance.

Of course, all this is academic for me right now… I need an Apple Watch! Which means I also need a new iPhone 6. I’m not someone who likes to upgrade for the sake of getting the latest thing.  I’m convinced Apple have been sending “slow-down-self-desctruct” messages to my trusty iPhone 4s – it use to be lightning fast 😉

I’m trying not to listen to that inner voice that says:

You are a Freelance Apple Watch App Designer… you need this for your freelance designer business

]]>
http://grahamtodman.co.uk/blog/2015/05/freelance-apple-watch-app-designer-me/feed/ 0
Phrasewise English Learning iPhone and Android app http://grahamtodman.co.uk/blog/2015/05/phrasewise-english-learning-iphone-and-android-app/ http://grahamtodman.co.uk/blog/2015/05/phrasewise-english-learning-iphone-and-android-app/#respond Fri, 01 May 2015 19:26:10 +0000 http://grahamtodman.co.uk/blog/?p=3257 Continue reading Phrasewise English Learning iPhone and Android app]]> sketch-phrasewise01

sketch-phrasewise02

I was asked to do a UX review and help steer the design of Phrasewise, an English learning app. The app was already working well and looking really nice, but had some inconsistencies in the UI metaphor and was lacking the warmth and personality of the character animations that were the main feature of the app.

I ended up tweaking and re-drawing most of the app to give the styling a consistent voice. Some of the more novel interface concepts, which testing had shown were a bit too trixy, were replaced with more standard UI that users would be familiar with from native apps.

The app will launch in the next couple of months.

See some of the content and animations here

]]>
http://grahamtodman.co.uk/blog/2015/05/phrasewise-english-learning-iphone-and-android-app/feed/ 0
Sensoria Fitness iPhone app UX design – Wireframes http://grahamtodman.co.uk/blog/2015/04/sensoria-fitness-tracker-iphone-app-ui-design-wireframes/ http://grahamtodman.co.uk/blog/2015/04/sensoria-fitness-tracker-iphone-app-ui-design-wireframes/#respond Sat, 04 Apr 2015 18:54:20 +0000 http://grahamtodman.co.uk/blog/?p=2412 Sensoria Fitness iPhone app UI design - Wireframes

Sensoria Fitness iPhone app UI design - Wireframes

Sensoria Fitness iPhone app UI design - Wireframes

Sensoria Fitness iPhone app UI design - WireframesV1 Beta

Sensoria wearable tech running iPhone app wireframes

Sensoria wearable tech running iPhone app wireframesSensoria wearable tech running iPhone app wireframes

Wireframes for an iPhone app for Sensoria, a super accurate fitness tracker that tells you how well you run.  Click here to pre-order yours.

]]>
http://grahamtodman.co.uk/blog/2015/04/sensoria-fitness-tracker-iphone-app-ui-design-wireframes/feed/ 0
How to design new iPhone 6 Plus images resolutions in Photoshop http://grahamtodman.co.uk/blog/2014/09/how-to-design-for-new-iphone-6-plus-resolutions-in-photoshop/ http://grahamtodman.co.uk/blog/2014/09/how-to-design-for-new-iphone-6-plus-resolutions-in-photoshop/#comments Wed, 10 Sep 2014 08:24:13 +0000 http://grahamtodman.co.uk/blog/?p=2995 Continue reading How to design new iPhone 6 Plus images resolutions in Photoshop]]> Designing for iPhone 6 screen resolution and dimension

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?

]]>
http://grahamtodman.co.uk/blog/2014/09/how-to-design-for-new-iphone-6-plus-resolutions-in-photoshop/feed/ 2
Sensoria Fitness iPhone app UI design – Sketches http://grahamtodman.co.uk/blog/2014/08/sensoria-wearable-tech-app-design-sketches/ http://grahamtodman.co.uk/blog/2014/08/sensoria-wearable-tech-app-design-sketches/#respond Fri, 29 Aug 2014 18:41:18 +0000 http://grahamtodman.co.uk/blog/?p=2405 Continue reading Sensoria Fitness iPhone app UI design – Sketches]]> Sensoria wearable tech running iPhone app sketches

Sensoria wearable tech running iPhone app sketches

Sensoria wearable tech running iPhone app sketches

I’m very excited to be working with Heapsylon on an iPhone app for their amazing Sensoria, a super accurate fitness tracker that connects your iPhone to a smart sock and sensor that tells you how well you run. Wearable technology and smart fabrics are a fascinating new form factor, and as a runner I’m very keen to get hold of a prototype as soon as I can. Click here to pre-order yours.

]]>
http://grahamtodman.co.uk/blog/2014/08/sensoria-wearable-tech-app-design-sketches/feed/ 0
App design for iPhone and Android http://grahamtodman.co.uk/blog/2014/08/app-design-for-iphone-and-android/ http://grahamtodman.co.uk/blog/2014/08/app-design-for-iphone-and-android/#respond Fri, 08 Aug 2014 21:43:23 +0000 http://grahamtodman.co.uk/blog/?p=2750 Continue reading App design for iPhone and Android]]> Sensoria Apple Watch app design

Apple Watch app designer

Phrasewise English Learning app

Phrasewise English language learning iPhone app

Phrasewise English language learning iPhone app

Sensoria Fitness Wearables iPhone app

Connects to sensor filled sports wear for iPhone and Android

Sensoria Fitness iPhone & Android app design

Sensoria Fitness iPhone app

Justgo

Music posting app for DJs on iPhone

Justgo music posting app for DJs on iPhone

Justgo music posting app for DJs on iPhone

Grape

Location based social meetup app

Grape iPhone app screens

Last.fm Scrobbler

Playlist app to help you discover you music collection on iOS (iPhone and iPad) and Android

Scrobbler music playlisting iPhone & Android app design

Last.fm Scrobbler iPad and iPhone app - artists view

Last.fm Scrobbler ap for iPad and iPhone - now playing view

Last.fm Scrobbler playlisting iPad / iPhone music app

Last.fm Festival Finder app

Uses your music taste and listening history to find the best summer music festivals for you

Last.fm Festivals iOS iPhone app

Last.fm Festivals iOS iPhone app

Last.fm Music Discover app

Explore your music collection via similar artists on WebOS

Tablet music app

tabletscreen04

Tablet app - "Cold start" view - a tool to quickly add artists to your library

Time Out City Travel Guide apps

Find the best restaurant and things to do nearby on iPhone

Time Out Travel Guide iPhone apps

iphonetravel1

]]>
http://grahamtodman.co.uk/blog/2014/08/app-design-for-iphone-and-android/feed/ 0
JustGo Music social iPhone app UI for Djs http://grahamtodman.co.uk/blog/2013/10/justgo-music-social-iphone-app-ui-for-djs/ http://grahamtodman.co.uk/blog/2013/10/justgo-music-social-iphone-app-ui-for-djs/#respond Fri, 25 Oct 2013 17:07:41 +0000 http://grahamtodman.co.uk/blog/?p=2492 The JustGo Music app helps DJs manage their social media presence with combined posting to Facebook and Twitter, and engagement statistics.

Music iPhone app UI and UX

Music iPhone app UI and UX

Music iPhone app UI and UX

Music iPhone app UI and UX

]]>
http://grahamtodman.co.uk/blog/2013/10/justgo-music-social-iphone-app-ui-for-djs/feed/ 0
Grape app iPhone app UI design http://grahamtodman.co.uk/blog/2013/03/grape-app-iphone-app-ui-design/ http://grahamtodman.co.uk/blog/2013/03/grape-app-iphone-app-ui-design/#respond Wed, 27 Mar 2013 18:54:43 +0000 http://grahamtodman.co.uk/blog/?p=2183 iPhone app iOS icon primer

I’m pleased to see Grape has launched. Grape is a full-featured mobile messenger with functionality to coordinate get-togethers with friends. I worked on the UI design and styling  of the beta release.
Download the Grape app on iTunes

Grape iPhone app screens

 

ypography and colour mark-up
An early UI style guide, including type and colour mark-up for the developers. This is the early beta design, the Grape team made a lot of refinements to the final app.
Initial design and user flow
This was the first iteration which ahows the tab nav was agreed quite early on. This version has an early logo and colour scheme, as these were still in development by logo designer Graham Smith. My initial design used a lot of native iOS UI, whereas the inventors of Grape wanted to offer direct “in situ” input of data, minimising the need for standard modal windows.

 

]]>
http://grahamtodman.co.uk/blog/2013/03/grape-app-iphone-app-ui-design/feed/ 0
How to start designing Android apps in Photoshop & what is a dp? http://grahamtodman.co.uk/blog/2013/02/how-to-design-android-apps-in-photoshop-what-the-frak-is-a-dp/ http://grahamtodman.co.uk/blog/2013/02/how-to-design-android-apps-in-photoshop-what-the-frak-is-a-dp/#comments Wed, 20 Feb 2013 13:41:17 +0000 http://grahamtodman.co.uk/blog/?p=2080 Continue reading How to start designing Android apps in Photoshop & what is a dp?]]> Google Android Screen and Icon size illustration

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.

 

Android screen resolution and density

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.

downloads_stencils

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

]]>
http://grahamtodman.co.uk/blog/2013/02/how-to-design-android-apps-in-photoshop-what-the-frak-is-a-dp/feed/ 93
Scrobbler tablet & mobile music app design http://grahamtodman.co.uk/blog/2012/12/last-fm-scrobbler-playlisting-ipad-iphone-music-app/ http://grahamtodman.co.uk/blog/2012/12/last-fm-scrobbler-playlisting-ipad-iphone-music-app/#respond Mon, 10 Dec 2012 16:44:53 +0000 http://grahamtodman.co.uk/blog/?p=1956 Continue reading Scrobbler tablet & mobile music app design]]> Last.fm tablet & mobile iOS iPad & iPhone app – Scrobbler

Available on the app store

Features

  • Enhance your music collection on iPad & iPhone
  • Smart playlists created for your mood and favourite genres
  • Artist galleries and listening stats
  • Scrobble* music to your Last.fm profile
  • See who’s on tour

Last.fm Scrobbler iPad and iPhone app - artists view

Last.fm Scrobbler ap for iPad and iPhone - now playing view

Last.fm Scrobbler iPad and iPhone app - smart playlisting

*scrobble: skrob·bul (ˈskrɒbəll) [verb]
To automatically add the tracks you play to your Last.fm profile with a piece of software called a Scrobbler
If I’m not scrobbling the music I hear, it doesn’t count!

]]>
http://grahamtodman.co.uk/blog/2012/12/last-fm-scrobbler-playlisting-ipad-iphone-music-app/feed/ 0