So, you want to start a business but have no time or money? That’s no excuse, according to Sebastien Eckersley-Maslin.
In early 2010, serial entrepreneur Sebastien Eckersley-Maslin set himself a grand entrepreneurial challenge. In seven days, he would create a new business from scratch — from concept and branding to product development and launch.
And, to make things just that bit more tricky, he would do all this with a budget of only $500. For seven days, he blogged about his adventures (and misadventures). This is what happened.
Click here to sign-up for the full eSeries.
Entrepreneurs’ Challenge: Day #5
Day five. (Well, technically day six as it’s now 12.49am as I sit to write down this blog post!)
The logo
The first thing I set about designing was the logo, because the logo is my brand.
It is the key element that ties together my website, business cards, letterheads, flyers, posters, brochures, stickers, car wraps, building facades… so it was important to spend a bit of time to develop 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.
The website
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 everything I wanted to have online using sticky notes. I then grouped the sticky notes on to individual paper pages themed on 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 first and the remainder of the website second. 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 how easy AutoCarLog was to use. Eventually this will become a video demo.
- Benefits. A summary emphasising the key benefits of AutoCarLog.
- Sign-up. A page to enter in account and payment information.
- Privacy. It is important to clearly articulate your privacy policy if you’re collecting personal information, including what you intend to do with it.
- Login. A simple page for returning customers to help them immediately 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.
Why now?
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 that 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: easy-to-use, great looking sites.
Design ‘rules’
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 that 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 white space. Use white space well. I quite like the look of open and spacious 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, so the call to action is a button linking to the sign-up 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 fits in well with the other colours and was based on the Spreadly layout I liked. See how it stands out and almost demands that you click on it!
Templates
Before I got too carried away, I jumped onto Google and searched for ‘beautiful website templates’, in case someone had already created something similar to what I had in mind that I could purchase, use or adapt.
Using templates is a great way to save a heap of time. If you use a free one, please ensure you credit the original designer!
I didn’t find anything that I could use easily for AutoCarLog, so a fresh site had to be created.
The mock-up
My first attempt at designing 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 a similar graphics package) allows you to quickly design the site with a holistic view.
After designing the look in Photoshop, I extracted elements that 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!
Outsourcing websites
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 into code yourself.
Well, it’s now 2.41am and I’d better get some rest before creating the SMS gateway!
In 2009, Eckersley-Maslin returned from duty in Iraq with a drive to storm the ‘front line’ of Australian business. In 2010, he was the subject of an international documentary, where he aspired to create the world’s smallest multinational.
