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.
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
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”.
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 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.
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
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 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.
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.
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.
Finally adding the copy, iPhone image and logo.
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.
I 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.
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.
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
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
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
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.
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.
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”
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.
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“.
3. What do you feel like listeing to?
- high energy
- low energy
- punchy dynamics
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?
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.
If you have an iPad, iPhone or iPod Touch please give our little Scrobbler app a try by downloading it here.
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”.
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).
Pantone: 1797 U
CMYK: 0 / 100 / 99 / 4
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.
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.
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.
Designing apps and creating graphic assets that adapt to the bewildering range of devices, sizes, and resolutions can be bewildering. Google tries to help by providing extensive Android user Interface Design Guidelines. However, the screens designers use are typically 72 dpi (written as “Retina MacBooks were launched), whereas mobile screens tend to have a higher density (160 dpi and higher). Therefore Google has come up with the “density pixel” unit of measurement, which makes knowing where to start a design in Photoshop pretty confusing.
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
1dp = 1.5px @HDPI (or 150% of the canvas size, half pixels are impossible in Photoshop)
1dp = 2px @XHDPI
1dp = 3px @XXHDPI
- 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.
I’ve had my first play with responsive web design and CSS, which was great fun.
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.
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.
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.
- 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!
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.
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.
The Audioscrobbler software is 10 years old and Last.fm is celebrating this revolutionary innovation.
The logo takes elements from exisiting branding assets.
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!