Sensoria Fitness Wearables app
Connects to sensor filled sports wear for iPhone and Android
Music posting app for DJs on iPhone
Location based social meetup app
Playlist app to help you discover you music collection on iOS (iPhone and iPad) and Android
Last.fm Festival Finder app
Uses your music taste and listening history to find the best summer music festivals for you
Last.fm Music Discover app
Explore your music collection via similar artists on WebOS
Time Out City Travel Guide apps
Find the best restaurant and things to do nearby on iPhone
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.
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.
The JustGo Music app helps DJs manage their social media presence with combined posting to Facebook and Twitter, and engagement statistics.
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
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).
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.
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.
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).
- 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…
- “dp” is a magic, made-up measurement that only exists in the world of The Matrix & Tron.
- Android icons are 32dp x 32dp @ the medium density MDPI
- 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”.
- SO, in Photoshop:
1dp = 1px @ MDPI – 100%
1dp = 1.5px @ HDPI – 150%
1dp = 2px @ XHDPI – 200%
1dp = 3px @ XXHDPI – 300%
1dp = 4px @ XXXHDPI – 400%
- 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.
- 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
*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!
Wireflows for the local music library stats and playlists app I’m working on.
Obsessive, fussy… Me?
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
Here are some sketches on an iOS app I’m currently working on, laying out possible ways to interact with your local music collection using listening data.
or even better, here…
My friends @JustGoMusic needed some help tidying up their app for the Escapade Dance Music Festival. The app needed to be submitted to iTnes the next day, so I had great fun coming up with icons under the stopwatch.
You can download the App here
To get some inspiration and user focus for design the Time Out City Guide apps I interviewed users about their use of information while travelling, and then asked them to sort cards to arrange possible travel app features in order of importance.
In my last few months at Time Out I was asked to create some concepts for a Time Out London iPad app. The designs were intended as a discussion point for possible commercial opportunities such as advertising and paid-for content, but also to have something visual to get excited about.
Time Out are the best known for providing “What’s on” information for London to help people find something to do, but they also have strong editorial content on life in London, such as: opinion pieces, cultural commentary and reviews.
The brief I was given for this app concept was that it should feel like a magazine, but have a prominent search facility, however as started mapping out the use cases (below) I quickly came to the conclusion to that there should be a browsable magazine style app (this was a whole year before Newstand and Adobe’s iOS publishing tools), and a separate productivity app for finding things to do. In general, apps are best when they are focused on one purpose or solving one user goal, which makes for a simpler UI. For me, the use case of a productivity tool and a sit back and browse a magazine felt somewhat at odds with each other.
Many businesses want to develop apps but don’t have in-house resource. As an in-house designer I’ve designed a fair few apps and worked with both in-house teams and external agencies. Obviously, building a strong in-house team is best, but it’s often hard to find to recruit at the moment. In my humble experience, this is the best steps to plan your project. I have seen this done in reverse!
- Define what use cases and objectives you want to satisfy
- Choose an app development agency
- Have a good relationship with app development agency
- Come up ideas
- Define a Solution
- Choose the technology
- Set a deadline
- Find a commercial partner to co-fund (if applicable)
I’ve been checking the reviews for the Time Out Travel Guide apps I worked on last year. It’s good to think of someone using a product you’ve designed and even better that it’s helping them have a good holiday. Dubrovnik, London, New York, Paris, & Zagreb
Berlin – Take full advantage
This is a great app and successfully navigated us to some top spots in Berlin over Easter. Currently free, which is an absolute gift – take full advantage. By Sazzle_81
Paris – Discovered a new Paris
I have been to Paris hundreds of times and have even lived there, but I discovered a completely new side to it this weekend through this app. We followed the editor’s picks and used the what’s nearby part of the app and we had the best weekend ever! Next time I will plan more and use the bookmarks to organise each day. No Improvements necessary. By Dysynni
Berlin – Absolutely essential
We used this app around 10 times a day instead of getting charged for data raoming and it was brilliant. I would have paid for this so can’t believe it’s free. If you’re travelling to Berlin, why haven’t you downloaded it already!!! By Tom Hughes
Barcelona – Absolutley indispensible…
Almost flawless in execution, this app is all you need if you turn up to Barcelona without a guide book or any clue what to do.
We spent 6 days there and filled them with things we found on here. The user interface is superb, the ability to bookmark and then view on the map was genius, and all without using any data allowance.
Only occasionally was the GPS slightly off and one or two places weren’t quite where the map thought they were, but overall it’s the best and most useful city guide app that I’ve ever used. By Doug Bryson
New York – Amazing
It made my trip to New York much easier when wandering around. Offline map, great restaurant recommendations, nice photos. I am totally getting the London and Paris guides. Please make a Lisbon one. By syt8
Some interesting articles – I’ve had a lot of experience using externl agencies to develop apps , this articles outlines why that model doesn’t often lead to a great product:
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.
Brief: Conceptualise and a music discovery app for WebOS. Timeline: 1-2 weeks.
Concepts, wireframes and visual design for a Last.fm music discovery app. Currently without a stable home (As of 18 Aug).
Wireframes below – the notes have ben removed (so I don’t have to worry about too many typos out in the wild ; ) !
Cold start experience – a way for new users to quickly add artists to their library
Exploring artists and recommendations
Exploring artist’s biography, images and top tracks
Playing personalised radio with slide show and listening stats overlay
Initial sketches of the interaction model
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)