Date post: | 30-Dec-2015 |
Category: |
Documents |
Upload: | ann-harper |
View: | 219 times |
Download: | 4 times |
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. 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 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!