I have decided to write a short tutorial on thinking outside of the box when designing for the net. I see too many designs that are copy-cats of current sites and have no individual style. So this tutorial will get you thinking laterally as well as allowing you to really focus your design for your client's needs.
So here is the scenario; a client approaches you to build her new corporate website. She currently owns a shop that sells vintage sweets from the 70s, 80s, 90s that are difficult to get hold of from most mainstream shops.
Everyone has a different way to approach this type of job, but this tutorial will show you a method of design that will make you challenge everything about the new site and will ultimately result in a more highly targeted and bespoke site.
I have tried to break this tutorial down into five easy to manage chunks so here goes:
1. Define a target market
It sounds weird, but you would be surprised at how many designers I speak to who say "I don't really know the market, but if I like it, it works!"
It is so important to realise that what you the design likes, usually isn't the solution. You are part of a very niche market. You understand the internet and different browsers and their functions.
So the first step to a good design is to know your target audience. Visit the same sites they will visit (not always your competition either) and really take in the design, colour schemes, font types and sizes etc...
2. Define a key proposition
After you have a clear idea about your target market, it is time to define your key proposition. This is another part of the process that eludes a great many designers. Without a key proposition you will end up with a site that could be used for anything from 'Fishing Breaks' to 'Mobile Phone Reviews' with a new logo thrown in.
Your key proposition is at the heart of your design and you will use it as your foundation.
To define your proposition you only have to ask one simple question: What is the one thing I want the user to do/think/feel when visiting the site?
Take Google for example; they wanted people to do one thing... SEARCH! and the design shows that off to great effect. The Google homepage is devoid of any unnecessary clutter and distractions.
This is the same principle you need to take with your design. Find your key proposition and design around that.
3. Start a sketch
Ok, so now you have a good idea about your key proposition, but how does that help you with an initial sketch? Well take your key proposition and think about what it means for a minute. Lets take an example of a vintage sweet shop (selling all old sweets from bygone years); their proposition will be: Rediscover your childhood!
So we design around that - already, instead of thinking about white boxes and a green background, I am thinking about a middle aged man climbing a tree or riding a bike, something a bit eye-catching that will convey your proposition.
Sketch up a few ideas based on these thought tangents about rediscovering your childhood, and before you know it, you will have a whole host of sketches that are so far from a template site, you won't believe they came from you.
It is really important to remember that if you are a very bad artist... IT DOESN'T MATTER!! As long as you can understand the sketch is all that matters
4. Research and more research
"Ok, I know what my site should look like" I hear you cry, but don't fire up Photoshop/Fireworks just yet, you need to do a bit of research first. Ask yourself a few simple questions... what screen size does my target audience use? Just because you use 1280x1024 doesn't mean Mrs Smith from Dorset does. Knowing the average screen resolution of your target market is the most important thing to know. But also be aware of what browser they use, other sites they use regularly etc... the more you know about your audience, the more you can target them and the better your site will be.
5. Mock up in photoshop
You have finally got some sketches together that work, you know you have to design for a 1024x768 resolution and you know that enough of the audience use IE6 to make it an issue for you, so get going with your mock up!
This tutorial isn't a 'how to mock up sites in photoshop' tut, but if people want something like that then I could probably sort that out
This is my first ever Tut so I hope you liked it and it will maybe help you out in your next design when you are struggling to get that flash of inspiration
Tel
Help


















