Louisa Lambregts, Algonquin College

Today, we will review: 1. website design process 2. main client project and deliverables 3. what is effective web design? 4. meet with your client (me) 5. homework: do a competitive analysis

1.Concept 2.Design 3.Implement 4.Evaluate

1.Concept Planning a) meet with client b) determine goals and audience c) do competitive analysis d) create a wireframe layout

Building a Relationship with Your Client Goal is to understand, before you begin building a site: 1)Purpose of the Website 2)Goals Project success means meeting client needs and expectations.

2Design a) create visual mock up b) determine site structure and navigation flow chart

Interface Design Mock-Up

Navigation Home Page About Us History Mission Statement Staff Staff Bios ProductsSuppliers Supplier ListProduct List Store Information Location List

3.Implement a) build website b) usability testing c) add analytics

4.Evaluate a) review analytics and feedback over time b) make appropriate changes

Develop a website for a client. Focus will be on:  Web design process  Rationale for design decisions  Usability of basic design

1.Concept a) meet with client b) determine goals and audience b) do competitive analysis c) create a wireframe layout

First Meeting with a Client a)Fully understand the client’s needs and wants b)Gather enough information to write a creative brief or Project Summary Document

Why Create a Creative Brief or Project Summary Document?

a)Agree upon what will be deliverables to prevent “project creep”. b)Ensure that you understood, from meeting, what client would like to have built. c)Ensure the client understands what your will deliver.

Understanding Your Client What do you need to know about your client and their web project?

Understanding Your Client Things 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 Audience Age, gender, sex, socio-economic status. Also, why they would be interested in the service/products offered.

Understanding Your Client Things 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 Plans Can they maintain their own content? If so, how often? Are they tech savvy? Do they need a CMS?

Client Questions See your hand-out

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?  What competitor features and ideas should be used in your project site?  What can be added or done on this project site that competitors haven’t done?

Competitive Analysis Document See what the competitors are doing on their website See wiki

What you are required to do:  Use Dreamweaver  Will create a template completely using CSS  Must be your own design  Will create all own graphics and web content  Special Functionality: don’t need to develop – just map out the functionality in a storyboard

Banner with Logo HOME About Us Products Contact Us Site Map Search Body Content Clickable specials Read testimonials Footer – copyright information and Wireframe of Content Layout

 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

 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.

 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

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?

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 seating section 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

Programs 1. MS PowerPoint 2. MS Visio 3. Concept Mapping a) Inspiration b) Mindmap (free)