This geometric pattern, formed by the facets of a diamond, represents “clarity”, “quality”, and “ever lasting”. The use of a geometric form reflects the precision and craft of photography.
Embossed business card and a paper design I found online
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’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.
The Audioscrobbler software is 10 years old and Last.fm is celebrating this revolutionary innovation.
The logo takes elements from exisiting branding assets.
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!
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.
This is the holding page I designed for JustGo Music which has just gone live. The CSS isn’t mine, and was done without my sign-off, so it’s not been picked to death for detail ; )
After some thought, the client decided they actually quite like the rotated “J” logo, an wanted to see some development on that version with colour option. Nearly there. Replaced the funky Chalet “S” with a customised “S” from Lucida.
In the second iteration I was asked to try a more minimal logo based around the “J”. We also had a font we really liked called Chalet London 1970 by House Industries.
The client liked the last two ideas, a combination of the clean J shape with a bit of movement.
After some thought, the client decided they actually quite like the rotated “J” logo, an wanted to see some development on that version with colour option. Nearly there. Replaced the funky Chalet “S” with a customised “S” from Lucida.
I’ve been working on the branding of a new product creating a social space for the electronic dance music scene.
Morphological matrix
After doing some research into the scene and some broad thinking on possible themes that might add personality to the brand, I start to sketch ideas using a “morphological matrix” as a way of organising the ideas, it also helps to make those lateral connections. Here’s the matrix as a whole…
I’ve been collecting a board of brands, mostly around music. There’s a definite resurgence of the graphic logo rather than a logotype alone, which makes practical sense when it comes to designing a small graphic for an app icon (like the fin of Grooveshark, or the cloud of Soundcloud). Aweditorium got around this by emphasising “AWE” on their icon. You’re onto a winner if you can claim a single letter – and happne to be a dominant social network: “f”, “p”, “t”,”v”, and “w” are gone now of course ; )
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.
A logo for a Valentine’s Day feature on Last.fm. I’m not very romantic and chintz makes me nauseous, so I wanted to avoid the cliches on this logo. As this was for a music site, I felt the Ziggy Stardust lightning bolt was a better representation of love than the typical Clintons Cards heart shape. I knew I’d found the right solution when someone commented “it looks like a heavy metal band logo!”.
The font is set in Eagle Black. The colour came about by chance… When you add a colour overlay to a layer in Adobe Photoshop, the application default colour it always applies is #ef4836 (M: 87% Y:84). I’ve always like that colour and wanted an excuse to use it.
These are sketches for a professional identity for a friend who has a very diverse skill-set: massage therapist, yoga teacher and usability consultant.
The easy route would be to treat each strand separately. But that’s no fun. There was already a nice idea of using hands as a conceptual image for the massage, the leap was to tie that into “interaction and usabilty”… oh and “Yoga”.
As often happens, there was a bit of serendipity: earlier that week a colleague had introduced me to a really nice set of “gesturecons” (illustrations used in diagrams to demonstrate how to use software on touc-screen devices) for a user-flow diagram I was doing. Massage is about touch, so why not use gesturecons to illustrate massage movements?
Trying to tie this concept into yoga was a but more work. Then I remembered that in yoga books you often have figurative diagrams to demonstrate postures, and in yoga there are postures just for the hands, called “mudras”.
It seemed to fit quite nicely as an idea, hands that massage, a hand in a meditative mudra, and a hand performing an interactive gesture.
I spent some time last night drawing the final logo artwork for Easy Gourmet. The font is Bodoni Script Pro by Parachute, chosen for the classic heritage of Fuller Benton’s Bodoni, and the script fulfilled the client’s desire for curviness and femininity. I converted the font to outlines in Adobe Illustrator so I could attached the “Heart signature” to the flourish of the “G”.
Bézier Curves
If you’re unfamiliar with Bézier curves, they are tool to draw curves and make shapes in a computer. A shape in a drawing program, such as Abode Illustrator, is made of points called “vectors” connected by lines, called “paths”, and filled with either a colour or a blend of colours called “gradients”. Initially you draw a shape using a shape tool (ovals, rectangles) or using a virtual pen tool. To change or “edit” a shape you click on or near the edge of the shape, this brings up the points as little black squares, clicking on one of these squares reveals the “control points”, which are like little sea-saw levers. Over time, using these control levers becomes quite intuitive, although at first they can drive you nuts.
It’s a skill I picked up creating hundreds of clipping paths for images at Dorling Kindersley, where the famous style was text flowing around cut out images on white backgrounds. The only way to do this then was a cruder version of the curves in the “path” tool in Photoshop.
Bézier curves were developed by Pierre Bézier (Wikipedia), a French engineer who pioneered computer-aided design at Renault where the curves were used to design care bodies.
The Wikipedia page on Bézier curves has really nice animations on the maths behind the little handles and pivots you use to control the curve. I don’t understand them, but they are pretty in a geeky sort-of-way…
In the photograph I was using to draw this logo, which represents the decoration made from a drop of cream in a fruit coulis, it looked like a leaf. They are in fact hearts. So I have updated my Illustrator rendering for this logo mark. The shape is more feminine now and will compliment the image of the (still secret) company and it’s owners. Original design is below.
Whenever I design a logo, I always look for an opportunity for a monogram.
Mongrams are great for extending the uses of a logo and if there’s a need for a smaller version, such as icons or badges and labels in the real world.
The example above is the identity I’m working on for a rather chic catering & events company, but I’m still not quite allowed to shout about it yet, I can’t help let a few ambiguous designs out of the bag ; )
In the photograph I was using to draw this logo, which represents the decoration made from a drop of cream in a fruit coulis, it looked like a leaf. They are in fact hearts. So I have updated my Illustrator rendering for this logo mark. The shape is more feminine now and will compliment the image of the (still secret) company and it’s owners. Original design is below.