Web Design/A small website project

You're ready to create your first small website? Great! This activity aims to help you continue building your HTML and CSS skill-set while working on a fun project!

Web Design → A small website project

This page is part of the Web Design project.

A beautiful small website design by Dieter on OpenSourceWebDesign.

Who is this activity for? This learning activity is most suited to people who already feel confident with some basic HTML and CSS skills. If not, you may first want to look through the activities of Build a basic web page and/or complete A step-by-step web design project instead.

How does it work? If you're learning together with some other people, this would be a great activity to team up with another person. The idea is that, together with your partner, you:

Choose from one of the scenarios below (or add your own scenario!)
Plan your initial client contact meeting (some ideas below)
If you have a facilitator (or willing friend or local willing business person), conduct your initial interview for the experience!
Develop a prototype (on paper or in a graphics program initially) based on the requirements listed below and your initial interview
Begin the process of documenting your client requirements (see ideas below)
Code the HTML and CSS prototype of your website
Present your prototype and completed documentation to your facilitator (or friend or local business person).

Make sure that you choose (or create) a scenario that is of interest to you (it'll help to keep you motivated).

Example scenarios to choose from

Browse through the example scenarios below with your partner and choose a scenario that suits you. You may know a local shop where you could ask permission to take some photos and get some inspiration too. If you go about it the right way (and have some luck on your side) you could even turn this activity into a real client project!

A local Pie shop

Espresso brewing in the Pie shop

Situated along a tourist route, a gourmet pie shop in your local area is keen to build its customer base to include small tour operators who do day trips from a nearby city.

Owner: Sandy Harrison

Owners comments:

We already do a great trade with the locals with our special coffees and gourmet pies, but there are also loads of small tour operators that drive past here every day. We thought that getting a simple brochure-type website up for the store would enable us to hand out business cards with the web address to tour operators who might be looking for a cosy atmosphere with great food and coffee on a rainy day.

I guess if I had to sum up what I wanted people to think of when they looked at the site, it would be the same thing that I'd want them to feel entering our cafe: great coffee, tantalizing food in a classy but comfortable atmosphere. I'd love to chat to someone about what's possible...

A Wedding Cake shop

Scenario:

A new designer cake shop in Sydney that knows very little about computers, but wants to take their business online. The main focus of the business is wedding cakes, however they are looking to expand the business to possibly cater for other types of cakes such as birthdays and other Celebrations.

Company: Cakealicious

Owner: June Carter

Owner's comments:

Ok we don't know so much about websites but the main things we want would have to be:

A easy to update site(wordpress or blog) we would like to keep people up to date with our latest events or plans.

Nice look you know make people feel like they want to eat the cakes, but nothing too confusing.

Ingredient and Price listings.

Contact order form.

We make Cakes to Hyderabad for a wide range of people from young to older people some with disability's, so the site has to cater for all these different types for people.

A local radio station

A local veterinarian

Love pets? Then this is the project for you!

A Mail-order CD Business

Company: Mars Cheese Castle Music

Scenario: We are a specialist mail order music business supplying CDs and LPs of innovative music to a world wide audience

Owner: sundaramoorthy

Owner Comments:

1. Site needs to be quick and easy to navigate around.

2. Each individual release needs its own cover image.

3. Needs an Order Form.

4. Needs a Music Club Form (email newsletter, specials etc).

5. Needs to be easy to update.

6. Needs to include postal and email address.

7. Must include MCCM logo.

8. Must use the MCCM existing color palette.

9. Overall the site needs to purvey the MCCM company's policy and image.

Local Chocolate & Coffee Shop

Situated in the main street of Wentworth falls, opposite the railway station, so therefore very easy to access. There are enjoyable walks to several tourist attractions close by, such as; the Charles Darwin walk which features a water whole and beautiful flora and fauna scenery, the Wentworth falls lake if you fancy an experience with native wood ducks.

We sell:

Drinks:

coffee made from the finest grounds of Arabic coffee beans, a wide range of teas, and soft drinks, juices, and water are served chilled.

Food:

a variety of home made chocolates, a delicious range of cakes and biscuits, home made of course. We also provide nice snacks for your picnics, including sandwiches, pastries, salads, and more.

Requirements for your website

The following requirement are more to do with learning the skills for Build a small website, so be flexible.

On the design side, you should:

Create a new prototype on paper or in Photoshop, clearly showing the look-n-feel of the site. Make sure you get lots of feedback from others about this!
All images should be optimized for the web.

On the technical side, your project website should:

be around 4-6 pages in size
be valid HTML (or XHTML) - you choose your doctype.
use CSS for your presentation (background images, all aspects of fonts, colors and, where possible, layout)
demonstrate a 2-column layout on at least one page (or something that requires you to practice page layout with CSS)
include a site navigation that is just a simple list with some great style (see Listomatic for some great examples).
include a simple contact form styled appropriately for the site (even though the form may not yet do anything)
if possible, a table used to display tabular data, such as a product list or fees and charges table.
still function correctly if the stylesheet is disabled (your first taste of accessibility)

Ideas for initial client meeting

Ideally, you will get a chance to do a role-play and actually conduct the interview. You'll need to create the following before conducting your interview:

Meeting agenda
Do some research to find sites from a similar industry to show your client what is already out there (a competitive analysis). This will also help you familiarize yourself with different ways that the particular industry is using the web.
Start with a small list of questions to discuss (add links for resources). The initial items you find out about are:
- What the actual purpose of the site is (Why will your site exist? Why will people visit your site?)
- Identify your target audiences (Who do you expect will be viewing your site)
- Define content requirements (What content do you need to provide to fulfill the purpose of your site for your target audiences?)
- Make a list of other questions you might want to ask your client in order for you to design the site that meets their needs

Ideas for your client documentation

As this is your first project, it is good to get into some documentation habits that will stand you in good stead for the rest of your web career- be it in the classroom or in the world.

Start by collecting information about your client in a Client File.

For this project, the client file should ideally include the following documents:

1. A copy of your client questionnaire for your first interview.

2. Results of the first interview including the following relevant information:

Identify the purpose of website
Identify target user audiences
Outline of requirements- design issues [fonts, colors, placements, images]
Basic site structure diagram- this can be a story board or other visual representation of the site structure

Develop good presentation habits and present your information by including all of the above with:

a cover page with a title, your clients contact details and your contact details.

If you're really keen, you might also include:

a competitive analysis for your client- include the url's of the sites you showed to your client.

As we progress through the course, we will add more information into the client file.

...