Here is my latest piece of work. I've just finished a website design, a collaboration with Vale Web Design, for Woburn ARTBEAT 2010. It's a new exhibition which is run by Bedford Street Gallery in Woburn. From the 3rd until the 18th April, Woburn will be transformed into an art gallery and will provide a platform for artists and raise funds for local charities.
The website will be up shortly. In the meantime, you can find the exhibition details on Twitter.
Last October, I was working for iPLATO as a Web Application Designer. The main bulk of my work was for the careEpilepsy application, which offers mobile and internet support for Epilepsy suffers.
You can read the case study.
One of the aspects of freelancing I love is the varied projects you get to work on. Sometimes you land a project that is difficult and has a tight deadline. But I’ve found that it’s on those type of projects that I learn a lot about myself, my work methods and my abilities. One such project was for a company called iPLATO.
iPLATO specialise in web based software specifically for the NHS. In October 2009, I was hired by them to completely redesign two web applications and a mobile application. I worked on the project for a little over 6 weeks. For 3 separate apps I created over 370 screens. The most complex one was careEpilepsy, and it’s my work process on this design that I’m going to share with you.
Getting Started
During my conversations with the project manager, he made it clear what the guidelines were:
- No dark colours
- Use light positive colours
- If images are used, make sure that they are positive
- Do a complete redesign
As the technology for the project was already up and running, I was able to use it thoroughly and get a feel for how it worked, note any problems and highlight areas that needed to be simplified.
Wireframes
For this project, the use of wireframes was important for both me and the client. Why?
- It helps the designer and client focus on the important issues without colour and effects getting in the way.
- It helps you to achieve your objective(s). Does this design answer the questions in the brief? Will the user be able to understand this? How does the design flow?
- It highlights any issues before you add major detail.
- It makes the client feel a part of the process and in turn, be more open to your suggestions.
I know there has been a lot of debate about whether it's better to use Fireworks or Photoshop to produce wireframes, and that there are some pretty good web apps available (iPlotz, Mockingbird and MockFlow), but I think you should use whatever you feel most comfortable with. The first thing I do at the start of any project is grab a pen and sketch book.
Once I’ve thought things through I open up Photoshop to create a more detailed wireframe.
Final Stage
Once the wireframes were signed off, the last part of the project was adding colour and the finer details.
The logo designer on this project was Igino Fuggi. We sat together and agreed on a colour palette. The brief asked for light, bright colours and we settled on palettes of blue orange and green for the various apps. While I completed the wireframes, Igino came up with the logo designs
Overview
This project had quite a tight deadline. Overall, I’m pretty pleased with the results. Throughout the design I had 3 goals that I wanted to achieve:
Keep it simple
Instead of the multiple options that didn’t have a natural flow, I condensed each option within an intuitive layout.
Use colour for a reason
Throughout the design I use colour to highlight important actions.
I made sure that every user action was confirmed.
1. MP3 Tag
MP3tag is a free tag editor for... yes, your MP3 files.
2. Scratchville.com
As you can tell by now, I loooovvvveeee me some Hip-Hop. Scratchville.com has free, high quality mixes to download.
3. Fav4.org
A very simple, but useful website. Choose four websites that you frequently visit from the list provided and set fav4 as your browser homepage.
4. Urban Fonts
One of the better free font websites out there.
5. Codeorgan
Codeorgan scans the content of a website and makes (sometimes) beautiful music from it. You can follow Codeorgan on Twitter.
6. Robot Unicorn Attack
This is one of the most mental games I think I have ever played. There are Unicorns, mountains, stars, wishes and Erasure. Seriously addictive!
7. Free Tetris
Another online game (I do work, honest). It's a free online version of the old school classic.
If you've been watching the Winter Olympics in the UK, you may have noticed the stunning title sequence to the BBC's coverage. Designers Jon Klassen, Marc Craste & Studio AKA collaborated to create the animation and you can read about his role on the project on Klassen's blog.
<object height="303" width="500"> <param name="movie" value="http://www.youtube.com/v/9JAqz-Kn2KE&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="303" src="http://www.youtube.com/v/9JAqz-Kn2KE&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="500"></embed> </object>
It's carrying on from the amazing titles created by Jamie Hewlett and Damon Albarn (aka the Gorillaz) for the 2008 Beijing Olympics based on the Chinese folktale "Journey to the West".
<object height="303" width="500"> <param name="movie" value="http://www.youtube.com/v/Yr5ZWYRaAyw&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="303" src="http://www.youtube.com/v/Yr5ZWYRaAyw&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="500"></embed> </object>
Let's hope the BBC continues to commision talented animators and designers to produce work for their coverage of the 2012 Olympics.
Beatboxing. It's one of those talents that I wish I had (in my mind I believe I would be amazing at it, as well as breakdancing, Formula One racing and acting). Of course the truth is that I both suck and blow at it, but I came across these videos on YouTube of amazing beatboxers.
<object height="344" width="425"> <param name="movie" value="http://www.youtube.com/v/BJ_T_ASYyZU&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="344" src="http://www.youtube.com/v/BJ_T_ASYyZU&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="425"></embed> </object>
<object height="344" width="425"> <param name="movie" value="http://www.youtube.com/v/4P7sdo_Aj0o&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="344" src="http://www.youtube.com/v/4P7sdo_Aj0o&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="425"></embed> </object>
<object height="344" width="425"> <param name="movie" value="http://www.youtube.com/v/sMr2cn04wKA&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="344" src="http://www.youtube.com/v/sMr2cn04wKA&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="425"></embed> </object>
Joseph (French Idol Audition)
<object height="344" width="425"> <param name="movie" value="http://www.youtube.com/v/FyUDiw-STUM&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="344" src="http://www.youtube.com/v/FyUDiw-STUM&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="425"></embed> </object>
Unlike Simon Cowell, I think it's an amazing skill (just look at his face).
<object height="344" width="425"> <param name="movie" value="http://www.youtube.com/v/VLLAaw5Bl8o&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="344" src="http://www.youtube.com/v/VLLAaw5Bl8o&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="425"></embed> </object>
1. Instapaper
I've been using Instapaper along with Evernote to save web pages for later. It's very easy to use. You just click the Read Later bookmark and the web page is stored. It also allows you to create folders and organise your bookmarks.
2. wetransfer
Need to send someone a large file? A really quick solution is wetransfer. No registering is needed, just upload the file (up to 2GB), add the email address and a short message and it's done. Simple.
3. Flavors.me
Create your own personal website by pulling in your content from your blog, Last FM, Flickr, Twitter and more. You can see my page here.
4. LastPass
LastPass stores all of you online passwords so you'll never have to type them again, let alone remember them.
5. Google Chrome
I've been using Chrome for the last 6/7 months. I don't even use Firefox anymore. Despite some glitches here and there, it's quicker than Firefox. But will it become the most popular browser? Maybe, It's already taken over Safari.
6. Helvetical
Ad Taylor has redesigned the interface of Google Calendar.
7. Helvetireader
The same treatment has been given to the Google reader.
8. WriteMonkey
Do you ever find yourself in the middle of typing something really important, when the ping of your email notifications distracts you? WriteMonkey may be just what you are looking for. I found out about it over at Freelance Folder. WriteMonkey fills your whole screen with black, blocking out any other distractions and lets you concentrate on typing.
You may remember the DJ Danger Mouse mix album The Grey Album, which
mashed The Beatles White Album with Jay-Z's The Black Album. Well
Enter The Magical Mystery Chambers trumps that by combining The
Beatles with the Wu Tang Clan.
UPDATE - The page has been removed.
For the past week or so, I've been listening to Soul Sendikasi. It's a weekly radio show that plays old skool funk, soul and R&B. You can download the podcasts from their website and also join the official Facebook group.
I'm going to share a past experience with you. Hopefully, if you are ever in this situation, you will read this and learn from it.
The Old Comrades FC website will now be launched at the start of the
2010/11 season. In the meantime, here's a sneak peak a the new layout.
Like the rest of the World's population, I made a list of resolutions
for 2010. All very admirable. All encouraging growth. All made with
good intentions. All broken within the first week of 2010. The problem
wasn't the list. The problem was that I overestimated and plucked huge
numbers from the air instead of being realistic.
I've decided that I'm not going to beat myself up about it. I'm just
going to tear up my list, throw them in the bin and strive for goals
that I can actually achieve.
1. Glennz Tees
T-shirt designs by Glenn Jones, a graphic designer from New Zealand. He also designs laptop skins and calendars.
2. Giraffe Restaurants
A very family friendly restaurant with some fun food for the kids. Their website has had a bit of a revamp.
3. Extraverage
Possibly my favourite designer, Karoly Kiralyfalvi (aka Extraverage) creates amazing street-art illustrations and graphics on everything from trainers to posters.
4. GoMediazine
A great website for design tutorials and resources. They create some stunning vector illustrations which are available to buy.
Phenom (aka PhenomEnigma) is a rising musician, producer, rapper, and audio engineer from Michigan.
His latest album, I Got Next Mixtape, is available as a free download from his website.
There are two tracks that I can't stop listening to at the moment.
Volstok Telefunken has created these brilliantly made animated shorts.
He films live actions sequences and inserts his animated monsters, resulting in
these clever and amusing videos.
<object height="344" width="425"> <param name="movie" value="http://www.youtube.com/v/PyTJQ1xbVqk&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="344" src="http://www.youtube.com/v/PyTJQ1xbVqk&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="425"></embed> </object>
<object height="303" width="500"> <param name="movie" value="http://www.youtube.com/v/doWBg87Edik&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="303" src="http://www.youtube.com/v/doWBg87Edik&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="500"></embed> </object>
<object height="303" width="500"> <param name="movie" value="http://www.youtube.com/v/ixWA8xjUYDc&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="303" src="http://www.youtube.com/v/ixWA8xjUYDc&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="500"></embed> </object>
Check out his website.
If you're into a bit of House, check out the website of rising a DJ /
Producer David Akermanis. It includes free downloads of his tracks and
mixes.
<object height="303" width="500"> <param name="movie" value="http://www.youtube.com/v/wPy2YZJXZCI&hl=en_US&fs=1&rel=0"/> <param name="allowFullScreen" value="true"/> <param name="allowscriptaccess" value="always"/><embed height="303" src="http://www.youtube.com/v/wPy2YZJXZCI&hl=en_US&fs=1&rel=0" type="application/x-shockwave-flash" width="500"></embed> </object>
You can find him on Facebook, Twitter and YouTube.
Every month I will be listing 10 of my favourites things on the web. Anything from web apps to games, music sites to design sites. Basically, whatever has been helpful with my work, entertained me or just put a smile on my face for that particular month.
Funny anonymous stories from designers about difficult clients.
2. Evernote
Save web articles, notes, photos and voice memos in one place and access them from your computer, the web, your mobile and iPod Touch. I've had an account with them for a few months now and it's been a bit of a lifesaver.
3. iPlotz
Create clickable, navigable mockups and wireframes. Very simple and easy to use.
4. Dropbox
Store, sync, and, share files online. I use this as a way to show concepts and ideas to clients.
An excellent site for finding great, new artists. Especially if like me, you're into hip-hop.
If you're a web designer or developer, the Design widget by Sprymedia is a handy tool. It overlays an amendable layout grid over a web-page, as well as including a ruler and a crosshair tool to help with alignment.
7. AppBoy
Rates and reviews mobile apps.
Just type in your Twitter name and on one page see Tweets from the last hour, the last day and more than one day ago.
9. Taxi
A great website for design inspiration and news.
If, like me, you have a child that tends to wake up at the crack of dawn on a Sunday (or basically every day), you'll be aware of the B Boy Championships on Channel 4. If not, this website lets you see what you've missed.
From the Lovely Package website is this boxset design for the complete
series of Six Feet Under. No idea who designed it, where you can buy
it or how much it costs, but if you're a fan of the show, what an
amazing boxset to have.
01. Dolly Parton vs. Jay-Z – Jolene Is Mine
02. Four Tet vs. Method Man – As Serious As Tear It Off
03. Damien Rice vs. Outlawz – World Wide Volcano
04. The Quantic Soul Orchestra vs. Nas – Father Hope
05. Buena Vista Social Club vs. Kanye West – Two Chan Words
06. India Arie vs. Busta Rhymes – Headed In The Dangerous Direction
07. Dire Straits vs. Ce Ce Peniston – Finally Down To The Waterline
08. Bob Marley vs. Talib Kweli – I Try Roots, Rock, Reggea
09. Coldplay vs. 50 Cent – 21 Questions Scientist
10. P. Diddy vs. Tupac – Never Be Peace After Love
11. Skunk Anansie vs. Tupac – Pickin’ On Me For Love
12. Dead Prez vs. The Police – Police State Stars
13. Lauryn Hill vs. Notorious B.I.G. – To Boy Zion
14. Eric Clapton vs. Jay-Z – Heaven Encore
15. Mason Williams vs. Scarface – Smile Classical
16. Lauryn Hill vs. Birgham Singers – When David Heard Doo Wop
17. Jay-Z vs. Finley Quaye – Even Dirt
18. The Cinematic Orchestra vs. The Streets – Has It Come To All
I came across these mash-ups by KMT on The Find website. KMT's first album, ‘Waterproof London‘, is a collection of his mixes, which he is offering for free. He also has a YouTube Channel.
I am a Web & Graphic Designer based in Kent.
