Start up in 7 days series:
- Day one – The Idea
- Day two – The Setup
- Day three – The Pitch
- Day four – The Function
- Day five – The Graphics
Day five, (well technically day six as it’s now 12.49am as I sit to write this blog!)
The first thing I set about designing was the logo as the logo is my brand. It is the key element which ties together my website, business cards, letter heads, flyers, posters, brochures, stickers, car wraps, building facades…. so it is important to spend a bit of time to get something I like. (Changing the branding after being in operation is painful and confuses the hell out of everyone.)
Looking at my mood board you can see where the inspiration for the logo came from, a combination of the odometer photo, the Touareg Speedo and the DayOneFitness logo.
When designing your website you need to plan ahead. How many pages? What is the aim or call to action for each page? What keywords are you going to target for SEO? Will I use Adobe Flash or HTML?
Each page should stick to a single topic (e.g. benefits) and have at most seven points. Any more and your reader will be confused or get bored and miss your many key points.
For AutoCarLog I wrote down every thing I wanted to have online using sticky notes. I then grouped the sticky notes on to individual paper pages in similar topics. After a bit of shuffling, I had my website:
- Homepage. The landing page will briefly state the key benefits and drive the user to the sign up page 1st and the remainder of the website 2nd. The landing page content has to be interesting to capture your audience’s attention, testimonials are very good at doing this.
- Tour. I wanted people to see the how easy AutoCarLog was to use. Eventually this would be a video demo.
- Benefits. A summary emphasising the key benefits of AutoCarLog.
- Signup. A page to enter in account and payment information and sign up.
- Login. A simple page for returning customers to login to the admin section.
- FAQ. A long list of questions likely to be asked by potential customers, with the answer always being a positive phrase.
Additionally, on every page would be a large call to action button in a prominent location to encourage people to sign up.
I would just like to quickly explain why I’m doing the graphic design now, after the functional code. Yesterday I explained that I aim to build sites which are easy to use and have a great user experience.
I build a fully functional website in the default HTML style and then when it is complete, I design the graphics to fit the functions and enhance the experience. The other way around means your functions are restricted by the design, and doing it concurrently leads to many design iterations.
The end result is my sites are easy to use and look great too.
Artists will argue that there are no rules in art. I don’t believe this is true for functional website graphic design (as art is that which only exists for itself, is it not?). Fortunately for me, rules do exist which can be applied and followed.
The key rules I considered when designing the AutoCarLog website were:
- The Flow. On the public pages this is a measure of how the user is driven around the site to the call to action. By contrast on the customer back-end pages, it is a measure of how easy the user can drive the site.
- Fonts. Pick one or two at most. If you’re going with two, then have one for headings and the other for content and be consistent. I used Geneva for the body and Georgia for the navigation and headings.
- Colours. The colour is very important, I generally get my colours from a photo I like (using the eye drop tool on the Mini in my mood board). Pick one or two colours with matching contrasts and an additional colour to use for your call to action.
- Layout and whitespace. Use whitespace well, I quite like the look of open sites but make sure your hard hitting content is above the fold and can be seen by most browsers. Remember most users don’t like scrolling.
Call to action
The call to action is the most important part of your page. It is what you use to achieve the aim of your page in the precious few seconds someone is looking at it. If your aim is for people to contact you for example, then your call to action could simply be large prominent text “call us now for a free quote on 1800xxxxxxx”. The aim for AutoCarLog was to get people to sign up on the spot, a button to the signup page.
The colour of your call to action is very important as it subconsciously influences how people feel. The colour needs to stand out against the background and should provoke an emotion, excitement and desire. Orange, yellow and red are good colours to use. I used red as it fit in well with the other colours and was based on the Spreadly layout which I liked. See how it stands out and almost demands you click on it!
Before I got too carried away, I jumped on google and looked up ‘beautiful website templates’ in case someone had already created something similar to what I had in mind which I could purchase, use, or adapt.
Using templates are a great way to save a heap of time and if you use a free one, please ensure you credit the original designer!
For AutoCarLog there was nothing which I could use easily, so a fresh site had to be created.
The mock up
The first step to create the site was on paper. In my notebook I made a very rough sketch of how I wanted the site laid out, using inspiration from my mood board. Then I designed it in photoshop. (There are many great and easy to follow tutorials explaining how to do this.) Photoshop (or similar graphics package) is used as it allows you to quickly design the site with a holistic view.
After designing the look in photoshop, I extracted elements which couldn’t be done easily in HTML and saved these as images, then using guides I worked out where my page divisions (div) would be and coded a ‘blank template’. I abstracted the top (navigation) and bottom (footer) into separate files and voila! AutoCarLog had a face!
Just like outsourcing development it is quite easy to outsource the graphic design. See yesterday’s post about how to go about outsourcing the design. Also, if you’re a handy developer who is just stuck for a bit of inspiration, consider getting a photoshop website designed, which you can cut up and turn in to code yourself.
Well it’s now 2.41am and I’d better get some rest before creating the SMS gateway!