Louisa Lambregts, Algonquin College

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

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

1.Concept a) meet with client b) determine goals and audience c) do competitive analysis d) create a wireframe layout 2.Design a) create visual mock up b) determine site structure and navigation

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

 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

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

First Meeting with a Client What questions should you ask? Keep in mind: you need to understand: 1)Purpose of the Website 2)Goals

First Meeting with a Client Ultimate outcome of client meetings: Commonly understood expectations and agreement on the project terms: a)Budget b)Deliverables c)Timeline d)Look and feel ideas

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?

First Meeting with a Client For 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?

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?

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

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

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)

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

Interface Design Mock-Up

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 edit Test all links! Test on different browsers!  Usability Testing -test with sample group – collect information through form  Launch!

Usability Testing: Sample Form Questions  The look and feel appeals to me.  Navigation was intuitive and easy to follow  Content was easy to read  Language of text content was easy to understand  The web pages loaded quickly Observe users interacting with your site and record their observations Have them do a specific task -

Usability Testing: Observation  Observe individuals navigating your site  Watch their reactions and behaviour  Record their comments

Feedback  links on page  Send out a survey periodically  Will likely tweak content and layout over time  Feedback or other events may require a re-design