Web Design Forum: TUTORIAL: Lateral thinking in web design - Web Design Forum

Jump to content

WDF
WDF Premium Memberships Reseller Hosting
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

TUTORIAL: Lateral thinking in web design Rate Topic: -----

#1 User is online   terydinho 

  • Go go gadget xhtml
  • Group: Moderators
  • Posts: 2,828
  • Joined: 08-January 09
  • Reputation: 231
  • Gender:Male
  • Location:East London, UK
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 10 June 2009 - 02:21 PM

Lateral thinking in web design

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
0

#2 User is offline   Simon907 

  • Forum Newcomer
  • Pip
  • Group: Members
  • Posts: 3
  • Joined: 10-June 09
  • Reputation: 0
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 10 June 2009 - 02:57 PM

true true true
get to know the audience is the key to convert !!!
good post
0

#3 User is offline   a.g.r.c 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,051
  • Joined: 20-July 08
  • Reputation: 22
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 10 June 2009 - 03:04 PM

Entirely true, good, solid and experienced advice.

Once you get a few client sites this becomes sort of second nature or should atleast.

Although I do skip the sketching part, and in its place I add a markup structure to visualise what areas of the site need to be modular in markup etc.
0

#4 User is online   terydinho 

  • Go go gadget xhtml
  • Group: Moderators
  • Posts: 2,828
  • Joined: 08-January 09
  • Reputation: 231
  • Gender:Male
  • Location:East London, UK
  • Experience:Web Guru
  • Area of Expertise:Designer/Coder

Posted 10 June 2009 - 03:36 PM

Cheers guys

@AGRC: yeah it is second nature to a lot of old heads in design; but to many newbies and especially to developers (:p), the design process is a major headache so I thought this rough guide would help :)

A markup structure is a great idea too - hadn't thought about that :)
0

#5 User is offline   a.g.r.c 

  • Web Guru
  • PipPipPipPipPip
  • Group: Members
  • Posts: 1,051
  • Joined: 20-July 08
  • Reputation: 22
  • Gender:Not Telling
  • Experience:Nothing
  • Area of Expertise:Nothing

Posted 10 June 2009 - 03:44 PM

View Postterydinho, on Jun 10 2009, 16:36, said:

Cheers guys

@AGRC: yeah it is second nature to a lot of old heads in design; but to many newbies and especially to developers ( :p ), the design process is a major headache so I thought this rough guide would help :)

A markup structure is a great idea too - hadn't thought about that :)


Yep for sure.

The markup structure is just pen to paper, starting with

#wrapper
#inner
#hdr
#content
#sidebar
#post
#footer


.classes
.classes


something like that
0

#6 User is offline   mr p 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 325
  • Joined: 09-December 08
  • Reputation: 6
  • Gender:Male
  • Location:London
  • Experience:Advanced
  • Area of Expertise:Designer/Coder

Posted 10 June 2009 - 05:33 PM

some good thoughts there, terydinho, cheers.
0

#7 User is offline   T_break 

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 470
  • Joined: 06-November 08
  • Reputation: 72
  • Gender:Male
  • Experience:Nothing
  • Area of Expertise:Designer

Posted 10 June 2009 - 06:04 PM

Sound article Tel, I have just started to incorporate the sketching phase myself, and i'm finding it is acctually speeding things up for me come the photoshop stage.

One useful step I have found is using a grid system, a step heavily borrowed from the print industry, but it is a very useful tool for getting an astheticaly nice site.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users