Every thing you need to know about designing your website from start to finish… - Stage 2 (Part 1)
by Jill McMahon / Pretty Pollution
Hopefully you have had a chance to record your thoughts from the key points I raised in the first article. In Stage 2 we will use the information you collected to form the reference point for your concept designs.
Before starting Stage 2, your target market and site map should be finalized. This is a must!
The first thing to do in Stage 2 is to gather reference material to make mood boards with. Mood boards will give you and your designer a starting point to aid in the creation of the “look and feel” of your site. Mood boards are basically collages of ideas, images, colour swatches, fonts, graphics etc. Anything you think links to your target market should go on your mood boards.
To make a mood board start by buying magazines you know your target market reads. Visit internet sites and image galleries to download any images, fonts, graphics etc. you think fit with your site. You may need to make a few mood boards to help you better understand your target market and the product you are selling.
* Note: You should never copy any of the images/graphics you find – you are just using them as reference. A teacher once told me “been done, don’t work.” I use that phrase as one of my rules in design and you should too.
Throughout stage two I will use my client Frou Frou Designs as an example. Frou Frou Designs sells unique, high fashion jewellery with 1930’s/1940’s French inspiration. I made three mood boards (pictured below) to help me in the creation of Frou Frou’s site design. The first (Fig. 1) was made up of existing graphics, fonts and images the client liked. The second (Fig. 2), was of Art Deco type furniture, graphics and items, and the third (Fig. 3) was of 1930/1940’s style and icons. I included Frou Frou’s jewellery throughout the mood boards to tie together the designs. As you can see from the mood boards below we now have a starting point to base our concept designs on.
Fig.1 – Images, graphics and fonts the client liked.
Fig. 2 - Art Deco type furniture and images.
Fig. 3 – 1930/1940’s style and icons.
Now put your thinking cap on and start being creative! Get a sketchbook out and draw all your ideas on paper. Study your mood boards and pull out colours, graphic devices, symbols, shapes, fonts, patterns etc. - anything you think you might want to include in your designs. Examples of some initial sketches I drew for Frou Frou’s site is shown below (Fig. 4).
Fig. 4 – Initial sketches of ideas.
After you have written/drawn all your ideas on paper it’s time to get to the computer. I initially always design my concepts in Adobe Illustrator because it’s easier to move things around and play with type/graphic styles than other programs. As you are designing your site determine a size. I usually start off with 800px by 600px (px means pixels which is a form of measurement for web/screen documents.) Never use millimeters when designing for web or it will affect your proportions in later stages. 800px by 600px is a standard screen size that everyone, no matter how big or small their computer screen, will have no problems viewing. This size is not written in stone - you can make your site any dimensions that fit in an 800px by 600px window. If you make the website larger than this, people with smaller screens will have to scroll left and right to view the whole page which will ruin your design (and probably be really annoying to the person who has to scroll).
Start by creating a new document in Illustrator which is 800px by 600px (make sure you set your rulers to pixel as well) and begin to play around with layouts, colours and graphics. See Fig. 5 below.
Fig. 5 This is an example of my illustrator file… playing around with layouts, graphics, symbols and colours.
A few things to think about when laying out the main design of the site.
- Logo position – Where will your logo be placed? top left, top center, top right, bottom left, bottom center, bottom right, etc… ?
- Menu and Navigation– Will you have a horizontal or vertical menu? What graphics will you add to your navigation ie: tabs, buttons, plane text etc?
- Background image – Are you going to have a solid colour or an image for a background? If it’s going to be an image it needs to be small in file size so it doesn’t take too long to load. Usually background images are turned into pattern squares so they can tile across the page.
Always save a copy of all your designs even if you don’t like them so you can go back to them at a later date… you never know when you may need to revisit some of your old ideas. A few initial layout designs I created for Frou Frou are shown below in figure 6.
Fig. 6 An example of two finished concept designs.
After you are happy with some of your designs send them to the client for feedback. (Of if you are the client get other people’s opinions.) You may need to do more than one concept but mostly I find one or two different ideas is enough. Feedback from other people is the main way to make your designs the best they can be. Try not to let negative feedback affect you personally – you need to be critical about your design. Everyone’s opinion will be different but it’s a matter of sorting out which opinions you need to take into consideration and which opinions you don’t.
Frou Frou liked my initial concept designs but wasn’t happy with the border. She wanted it to be more feminine and ornamental. Back to the drawing board for me!
Fig. 7 – I printed out my original design and started drawing new ideas for border.
After refining your designs from all the feedback you received it’s time to get final approval. An example of the final approved designs for Frou Frou Designs are shown below. You can also view them at www.froufroudesigns.com.au
Fig 8. – An example of the approved designs.
That’s it for this month, but next month we will be finishing off the concept stage. Part 2 will cover flash animations, grids, templates, efficiency vs bells and whistles and preparing your designs for Photoshop.
Til next month,
Jill McMahon
Read more articles >
