Skip to content

Sensoria Fitness Tracker iPhone app UI design – Wireframes

2014 July 4
by Graham

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.

A scribble suffices

2014 February 4
by Graham
iPhone app sketches

Some really scrappy thoughts that may look rubbish, but are worth gold to me

Employers often state in job specs that seeing “how you work” is as important (if not more important) than as a glossy finished portfolio. Having sketches in your portfolio shows your working method and thought process in a raw state. I have a few sketches in my folio I’ve self-conciously spent more time on for this purpose.

However, doing overly polished sketches can slow you down and  defeat the purpose. If you’re tackling a complicated design task and are doing some focussed thinking, scribbling quick notes and doodles is far more efficient as you can get your thoughts down quickly.

Of course, some people can do really beautiful sketches really quickly. And I hate them ;)

 

 

Don’t take the app icon too seriously

2014 January 24
by Graham

Poo app icon

Designing your first app icon for iPhone or Android can be daunting. Trying to sum up everything your app does in a small button can be a real challenge.

I’ve worked on some pretty complicated and feature-rich apps and faced some tricky challenges. However I’ve find there is nothing about app design that causes as much head scratching, hand-wringing and discussion as the app icon. Trying to convey the app’s purpose as well as cramming in a company branding in a small square is a tall order.

But in my view, the app icon really doesn’t matter.

Do you branding and sell your app in the app store

The app store is where the user is deciding if your app is for them, and this is where you branding and marketing messaging belongs. The good news is: in the app store your icon is not on its own, there is room for marketing messages, feature bullet-points, and screen shots. It’s the screenshots that do the work. The only job the icon has to do in the app store is stand out in search results, and for this it needs to be attractive and suggest quality so that it can compete with others in the list. However, if the brand is a selling point then it makes sense to use a logo for the icon (but better if it’s just the logo), but in that case the app title text needs to do the job of explaining the app’s purpose.

App icons are homescreen bookmarks for users

Once a user has chosen your app, they have accepted your messaging in the app description and are giving you a try. From here on in your app icon will live among the all the others, and all it needs to do is says “tap me”, “Use me”, “Love me”. An app icon is a memento to users when they want to open the app – so if you crammed it full of logos and extra text, then it’s going to be hard to spot. It would also help if it reflected the purpose of the app – and that the name also says “this is what I’m for”.

Sample brief

Say a well known brand of toilet tissue makes a “public toilet finder”  app as a way to market their product. Then think of a user who is suddenly caught short and needs to find a loo. They know they have “an app for that” on their smart phone, but in the panic can’t remember who made it. They are desperately scanning their homescreen and thinking “I need a toilet”. How can we help them get to the app they need quickly?

My answer is at the top. Hope you like it.

My designs on Google Glass… tis the future!

2014 January 10
by Graham

My foot heat-map designs which I created for my friends at Sensoria Fitness are now being beamed onto Google Glass specs!!! It connects to Sensoria’s amazing smart socks and app.

Tis the future.

Find out more about Sensoria on the newly launched Sensoria Fitness store.

JustGo Music social iPhone app UI for Djs

2013 October 25
by Graham

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

Audiu: music review service – user interface design

2013 October 24
by Graham

I helped the Audiu guys with a new user interface design for their music service that pairs music producers with professional reviewers to get feedback and advice on how to improve their tracks. Take a look at the Audiu Beta site here

Audiu professional music review website app user interface UI design

Audiu professional music review website app user interface UI design

Audiu professional music review website app user interface UI design

Sensoria Fitness Tracker iPhone app UI design – Sketches

2013 October 23
by Graham

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.

Justgomusic.com fullscreen responsive web design homepage

2013 August 3
by Graham

Responsive web design header - fullscreen background image

Justgomusic.com have just launched their new homepage based on my design with some nifty animation and responsive web design from their front-end dev genius. The DJ image is a full-screen background that scales and centres in response to the screen size and proportions.

Retouching product photography in Photoshop – fast

2013 July 6
by Graham

Product photography retouching in Photoshop

I used a bit of motion blur (it’s a running app, it’s forgivable!), I also increased saturation to make the green of the foliage match the logo.

Using Photoshop motion blur and saturation

Cropping out the shoe on a masked copy of the layer

Then I masked out a copy of the original shoe image on another layer to have it un-blurred. The image is now more dynamic and blurring of the background helps shifts focus to the product.

03

Finally adding the copy, iPhone image and logo.

sensoria_indiegogo-text

Pre-order your Sensoria smart sock and fitness tracker

Grape iOS app – icon and UI sketches

2013 April 26
by Graham

Grape iOS app icon and UI sketches

My 1st Website

2013 April 11
by Graham

My FIRSTs are often disasters…

My first print design went out with millimetres and centimetres mixed up
– a sticker came back the size of a dinner plate.

My first app, which hit the app store the day of the office Christmas lunch, received such horrendous reviews that no one ate their turkey. Probably deservedly so.

My first website was different. Websites are lovely things you know. Unlike careless printers and incensed iTunes reviewers, they forgive you, they let you learn, experiment, and make as many mistakes as you like. Ctrl-F5. Happiness.

Sick of print.

Macbeth Gallery Records, c. 1890-1964I was in my lates 20′s at the time (early 2000′s), working as print designer in Covent Garden and desperately want to get into web design. Although I still love the smell of a freshly inked brochure, I come from a long line of neurotics and the fear of making mistakes was making me ill. Every print job I sent to the printers left me in shivering in dread: the terror of the typo, the curse of a bad colour profile.

Some good friends took pity on me and had me over for dinner to teach me the basics of teriyaki chicken and HTML. Right away I loved the naughty magic of using data tables to layout your text and images, forcing something designed for dry information into a funky piece of graphic design. I left with enough knowledge to make my first website, all I needed was a subject for a site to practice on.

Mervyn Peake

Mervyn Peake in 1940

Mervyn Peake in 1940

You may have heard of Gormenghast, the fictional city-castle from the novel printed in the 1940′s; it’s less likely you would have heard of its author Mervyn Peake, the late writer, poet, playwright, artist, illustrator, and genius.

I’ve been obsessed with the work of Mervyn Peake since my art school days, and I couldn’t think of a better, or wider, subject. I didn’t want to make a “fan-site”, so I contacted the author’s son Sebastian Peake, who ran the family estate’s website and worked tirelessly to promote a wider knowledge of his father’s work, and offered my services for free.

Painting of Meave Peake, wife of Athor Mervyn PeakeThis started a tradition of regular curry meet-ups at his flat in Camberwell, magically festooned with giant oil portraits by Mervyn Peake of his wife, Sebastian’s mother, the beautiful Maeve Peake.

My first website for mervynpeak.org was created using an early version of Macromedia Dreamweaver, and featured a bewildering set of nested tables, which was so convoluted that I had a hard time making even the simplest of changes! You can watch as the spacer.gifs load! For the colour scheme, I went with what was supposed to be a “muted parchment” colour, but due to my diligence with ”websafe” colours, came out pinky-orange. Yum. It even had an “ENTER” welcome page, very 1990!!!

 1st iteration – 2003

1st iteration mervynpeake.org – Click to see the web archive in all it's nested table magic!

 

1st iteration of mervynpeake.org

Looking at it again, I still like the illustrative elements. It’s not bad, even if it is ORANGE!
See the webarchive from 2003

 

2nd iteration – 2008

2nd iteration design

 

2nd iteration

The 2nd iteration kept the “parchment” theme, but now was redeveloped in CSS and semantic HTML.
I was into using “found objects” then, the pape was scanned from a real handmade paper.
See the webarchive from 2008

 

Sebastian Peake– 1940 - 2012

Sebastian Peake – 1940-2012

The site was redesigned, redeveloped, converted to <div>’s, and then redesigned again in a friendship that lasted 10 years until Sebastian suddenly passed away in September last year. He will be sorely missed,  mervynpeake.org lives on.

As I have just quit my fulltime job to go freelance, I’m hoping a NEW design for mervynpeake.org will be MY FIRST freelance website.

Be sure to check out this great competition to Win A MacBook at 123-reg.co.uk

Last.fm brandguide

2013 April 9
by Graham

I’ve been updating the Last.fm brand guidelines site to include the new “refined logo”. The site is not open to the public, so here are a few logo usage illustrations from the site.

Last.fm logo exclusion area

Last.fm logo exclusion area

LFM_Ticket_sizeLast.fm logo sizes

LFM_Ticket_sizeLast.fm logo sizes

LFM_Ticket_sizeLast.fm logo placement

LFM_Ticket_sizeLast.fm logo placement

LFM_Ticket_sizeLast.fm logo - inproper usage

LFM_Ticket_sizeLast.fm logo – inproper usage

 

 

 

Why I ♥ Scrobbler for iOS

2013 April 2
by Graham

I worked on the design for the Scrobbler for iOS and I’m very proud of it. The technology powering the app is incredibly cool and this post is to explain why I love it, and why I hope you might give it a try…

1. “Sorry Dave, I don’t know that track”

sorry-dave

Knowing what track you want to listen to is easy, but what about the next track, and the one after that? iTunes Genius solved this problem by creating a playlist of similar tracks. The only thing is… it’s not always that smart. For over a decade now Last.fm users have been building the world’s largest music catalogue by sending the artist, album and track name of every song they’ve ever played to their profiles, this is called “scrobbling”. This data is then taken to dark room in the bowels of Last.fm where actual PHD geniuses have been teaching a machine to understand music. This machine goes by various names, I call it the Scrobot. It would take a very obscure song for the Scrobot not to find a similar match to play you.

Genius versus the Scrobbler

2. Making lists is boring

I hate making lists, and I’m too lazy to curate my music collection. Scrobbler for iOS does all the work for you by sorting your music into “smart” playlists based on mood and audio features, and “tag” playlists based on genre or theme. Ironically, I really enjoyed making this Spotify playlist called “Boring“.

Boring playlist

3. What do you feel like listeing to?

  • fast
  • slow
  • high energy
  • low energy
  • punchy dynamics
  • relaxing
  • atmospheric
  • smooth
  • sad
  • happy

I have a very varied taste in music, ranging from funk to metal, and indie to electronic. I find listening to one genre gets boring very quickly. When we’ve spoken to Last.fm listeners about how they choose music they would say things like: “depends what I’m in the mood for” or “what I feel like listening too”. They often tells us they make playlists based mood on activity such as: “relaxing’, “working” or “party”. How can an app choose music based on moods or activity? The answer lies in the dark art of “music information retrieval” and the study of “audio feature analysis’. You can tell a lot about the mood of a track by studying it’s rythm, tempo, energy, and dynamic range. The PHDs here at Last.fm have are on the theoretical edge of this study, and the Scrobbler for iOS uses cutting-edge audio analysis. We have added the emotive playlists “happy” and “sad” – although our Scobot doesn’t read the lyrics! So a track may sound happy, but have sad lyrics such as “Pumped Up Kicks by Foster the People.

4. What music are you into?

People I meet often ask me this question when they find out I work for a music service, and I always struggle for an answer – at least an answer that doesn’t make me sound out-of-date or just boring. Scrobbler for iOS visualises your music tatse using millions of artist pictures from Last.fm artist profiles. What does your taste look like?

playlist-small

5. Who is this track by?

Ever been listening to a track you own but can’t recall who it’s buy? Scrobbler for iOS draws on the artist biography, listening stats and a gallery of images.

Artists info and gallery

If you have an iPad, iPhone or iPod Touch please give our little Scrobbler app a try by downloading it here.
Thanks ;)

New Lego logo to suit Americans

2013 April 1
by Graham

In response to consumer demand in the US, Lego have introduced a new “Legos®” logotype. Head of Global Communications, Dumme Mursten-Hjernen explained: “The plural for “Lego” has always been, simply: “Lego”, it’s an irregular plural like ‘sheep’ of ‘fish’. However, despite numerous advertising campaigns, we found the American toy buying public were not capable of retaining this simple fact in memory. Therefore we have taken steps to adapt our brand for the US consumer. In Europe we will continue to use “Lego” plural”.

Legos logo for Amercians

Grape app iPhone app UI design

2013 March 27
by Graham

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.

 

Last.fm logo refined

2013 February 28
by Graham
Last.fm logo

Last.fm official logo

Rebrands can be costly and re-drawing a logo can take weeks of refinement, but not this one. I was simply asked to “stop the logo being all wonky” (see below).

Last.fm red

Last.fm official red - Pantone 1797

Pantone: 1797 U
CMYK: 0 / 100 / 99 / 4
Web: #e31b23
RGB: 227 / 27 / 35 

The old Last.fm logo

I quite liked the “ticket” logo as it was, but had to admit it was an awkward fit in layouts as it wouldn’t align to anything. Also the fancy gradient and shadow effects meant we needed to offer multiple file types to support different uses (CMYK and 1 colour printing, and RGB). I also increased the height of the red box to make it closer to a square, as I felt the logo looked too oblong when it was rotated back from it’s 12.5 degree angle.

logo_web

Old Last.fm logo

Brand guidelines

A quick image search in Google for “Last.fm logo” illustrates the problem when you don’t have easy to access brand guidelines and sample logo files. Last.fm is an open-source service with a large community of developers creating their own apps using APIs, each app needs a logo and, without guidance, you get a lot of interpretation.

Screen shot 2013-02-28 at 17.53.07

How to start designing Android apps in Photoshop – UPDATED Jul 2014

2013 February 20
by Graham

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
    1dp = 1.5px @HDPI
    (or 150% of the canvas size, half pixels are impossible in Photoshop)
    1dp = 2px @XHDPI
    1dp = 3px @XXHDPI
  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.

Responsive web design – sarahburgessyoga.com

2013 February 11
by Graham

I’ve had my first play with responsive web design and CSS, which was great fun.

Sarah Burgess Yoga website design

This new site for yoga teacher Sarah Burgess is to provide information and class schedules for her yoga practice. It was designed to be friendly, informal, and uses “in-situ” photography of Sarah doing yoga as a main focal point.

Responsive WordPress theme customisation

I designed the site and customised a theme in WordPress which was used as framework for the content and to make updates easy. I used the theme “Twenty twelve” as a base. It’s a responsive theme created by WordPress’ in-house team and is a great foundation for exploring media queries and getting into designing layouts optimised for mobile, tablet and large screens. It is interesting in that it loads the CSS in the functions.php, rather than in the header.

Sarah Burgess Yoga responsive web design for mobile and tablet

For the full screen background slideshow I used the excellent MaxImage by Aaron Vanderzwan. I found this to be the most reliable and platform agnostic. This meant that I had to add the slideshow code directly to the .php files rather than using a WordPress plugin, which I found either didn’t work very well or slowed the site down too much.

Design & logo

If a brand is about a person or an individual’s service, it appeals to me to use something personal about them in the design. In this case, Sarah had chosen to wear her favourite colour in the photography, so it was an easy choice to sample that for the colour scheme of the site. For the logo, I know that Sarah has quite unique handwriting, so rather than selecting an impersonal font, I asked her to write her name a few times, then scanned it in and cleaned it up a bit.

 

Last.fm homepage concepts sketches

2013 January 8
by Graham

Sketches for the “logged out” homepage of Last.fm. The purpose of the page is: to introduce the service, encourgae signup, and offer a taster of the content. In these initial sketches I was exploring the idea of focusing the page on the different use cases: listening to radio, scrobbling listening history, and music recommendations.

Last.fm homepage concept sketch

Last.fm homepage concept sketches

Twitter comments for Scrobbler for iOS

2012 December 20
by Graham

Some very nice comments on twitter from people using the new Scrobbler iOS app.

Scrobbler tablet & mobile music app design

2012 December 10
by Graham

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!

Last.fm 10 years of scrobbling infographic

2012 December 7
by Graham

To mark the 10th anniversary of scrobbling, my colleague @stefansperber and I created this infographic showing how the top music genres have changed over the last 10 years. Stefan ran the data queries and produced vectors for the stream graph, I did the final infographic.

Last.fm infographic Christmas card

2012 December 7
by Graham

Last.fm infographic Christmas card

My dear colleague @dawhiting had the idea of looking at the scrobble graphs for the top 10 Christmas songs leading up to the 24th Dec. Over the last few years there has been a consistent spike. I did a bit of “pretty” work and now we have this year’s Christmas card design.

Last.fm 10 years of scrobbling logo

2012 November 16
by Graham

Last.fm 10 years of scrobbles logo

 

The Audioscrobbler software is 10 years old and Last.fm is celebrating this revolutionary innovation.
The logo takes elements from exisiting branding assets.

Sketch

10 years of scrobbles logo sketch

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!

Scrobbler tablet & mobile music app design – icon family V1

2012 November 15
by Graham

Following the iOS design principle of “do one thing really well” we decided to spilt the Last.fm service into three distinct apps which serve clearly different use: radio streaming, exploring and scrobbling your music collection, and finding events to see. This meant coming up with a family of icons that were different enough to be distinct, yet belonged together and clearly reflected the brand.

The solution was inspired in part by the style of exisiting brand illustrations, but simplified and using geometric shapes. Each icon has a loose concept:

Radio: (Obvious!) is personal radio, so radiating waves… no brainer.
Scrobbler: The Scrobbler enhances your local music collection with Last.fm UGC tagging data and creates automated personal playlists. The icon shows inverted triangles, representing  focusing lots of music down to the point of the tracks you really want to listen to.
Events: The icon shows a horizon with points radiating out, representing the points of a globe where you can see your music live.