Website Project DevelopmentLouisa Lambregts, Algonquin College

Agenda

Today, we will review:

1. website design process

2. what is effective web design?

3. main client project and deliverables

4. meet with your client (me)

5. homework: do a competitive analysis

Website Design Process

1. Concept2. Design3. Implement4. Evaluate

Website Design Process

1. Concepta) meet with clientb) determine goals and audiencec) do competitive analysisd) create a wireframe layout

2. Designa) create visual mock upb) determine site structure and navigation

Website Design Process

3. Implementa) build websiteb) usability testingc) add analytics

4. Evaluatea) review analytics and feedback over timeb) make appropriate changes

Client Project

Develop a website for a client.

Focus will be on:

Web design process Rationale for design decisions Usability of basic design

This week’s focus

1. Concepta) meet with clientb) determine goals and audience b) do competitive analysisc) create a wireframe layout

Principles of Effective Web Design

Start With a Purpose: Determine your goals. Specific Measureable Realistic

Understand How Users Behave On the Web People scan rather than read Are impatient and will leave if not simple to use

Principles of Effective Web Design

Know That Content is More Important than Design If the content is good, people will tolerate bad design Unless the user completes the task they set out to do,

cool feature will quickly lose their novelty.

Use Website Conventions Past surfing behaviour determines a user’s expectations

of how websites should work. Users should be able to learn how to navigate your site

quickly.

Principles of Effective Web Design

Write Concisely Use plain language and a scannable layout (with

headers, white space etc.)

Keep It Simple Often, less is more in that it does not interfere with the

user’s experience.

Use “Visible Language” Organize Economize Communicate

Principles of Effective Web Design

Use “Visible Language”Organize:

clear and consistent elements

same conventions applied throughout

Economize:

do the most with the least amount of cues and visual elements.

Communicate

balance legibility, readability, typography to match audience needs

Stage 1: Concept

First Meeting with a Client

What questions should you ask?

Keep in mind: you need to understand:

1) Purpose of the Website2) Goals

Stage 1: Concept

First Meeting with a Client

Ultimate outcome of client meetings:

Commonly understood expectations and agreement on the project terms:

a) Budgetb) Deliverablesc) Timelined) Look and feel ideas

Stage 1: Concept

Understanding Your ClientThings You Need to Know

1. Purpose of the business/organization.Why it exists and what it aims to be. {Mission and Vision]

2. Products & services of the business.What does it have to offer its customers?

3. Demographics of Target AudienceAge, gender, sex, socio-economic status. Also, why they would be interested in the service/products offered.

Stage 1: Concept

Understanding Your ClientThings You Need to Know

4. Identity/personality of the organization/individual.What makes it unique and special?

5. Why they want to re-design or build new site.What do they expect to gain through this new design?

6. Determine their indicators of success of failure.Clarifying what their expectations of success are will determine how your effectiveness will be measured.

7. Maintenance PlansCan they maintain their own content? If so, how often? Are they tech savvy? Do they need a CMS?

Stage 1: Concept

First Meeting with a ClientFor a business site:

What does the company do?

What is your role in the company?

Does the company have an existing logo or brand?

What other advertising does the company do?

Stage 1: Concept

First Meeting with a Client

What is your goal in developing a web site?

What information do you wish to provide online? *

Who comprises your target audience? What common demographics, like age, sex, or a physical location do they share?

Who are your competitors and do they have web sites?

Do you have a web host and domain name?

Stage 1: Concept

Working out what information to in website

Can Brainstorm with Post-it Notes

create some initial categories

rearrange topics into categories

add new categories as you go along

see if you can consolidate topics

Stage 1: Concept

Post-meeting homework

See what the competitors are doing on their website

What features are on their website?

How does this website seem to tie in with their overall marketing strategy?

User Tasks

What are your target users trying to accomplish?

Create scenarios for your key users and determine key tasks they will carry out. E.g. find store hours, want to book an appointment etc.

Is there functionality your

Storyboarding

Maps out user experience

Chart out tasks required of the user (e.g. filling out a form, purchasing tickets)

How does this website seem to tie in with their overall marketing strategy?

Storyboarding

Purchasing a Ticket

1) Set up an account

2) Search for event tickets

1. Type in First and Last Name

2. (mandatory field)

3. Type in Address

4. Type in Visa Card Number

…..etc

3) Select Seating

1. Click on “Events”

1. Click on “Diagram” to see map of seating sections

2. Click “close” to get back to main screen

3. Select seatingsection

4) Purchase Tickets

1. Click on “number of tickets “ and select the number.

2. Click on “buy these tickets”

3. Receive confirmation that will receive email

Stage 2: Design

Banner with Logo

HOME About Us Products Contact Us Site Map Search

Body ContentClickable specials

Read testimonials

Footer – copyright information and email

Wireframe of Content Layout

Stage 2: Design

Interface Design Mock-Up

Stage 3: Implementation

Building and Launching the Site

Build a test site in Dreamweaver

Work with programmer, if necessary, for special functionality

Insert content and do a final on-screen editTest all links! Test on different browsers!

Usability Testing-test with sample group – collect information through form

Launch!