Welcome and Introductions

ARTCC 1100000

Designing Effect Websites

!Instructor: Bruce Caraway

Office: Lone Star - University Park Campus Bldg 13 Rm 708

bruce.caraway@LoneStar.edu 281-401-5394

Web Developer168 hr

HTML I

32 hr

WordPress II

32 hr

Designing Effective Web

Sites16 hr

WordPress I

24 hr

Photoshop I

24 hr

HTML II

24 hr

SEO: Analytics and

Tracking16 hr

Where are we?

Remind101

Remind101

Course Objectives

• Look at processes and concepts of design.

• Review the elements of Visual Design.

• Have practical exercises using tools & methods.

• Discuss the latest design strategies.

• Responsive and Mobile-first design.

Topics Covered• Motivations

• Design Process

• Identifying Our Users

• Sitemaps and Wireframes

• Content Design

• Working with Text and Images

• Visual Design

• Mobile First Strategy

• Types of Layout Design

Break

Unit 1: Design

is the "Web" today?WhatWhere

Where are the users?• Worldwide, there are over 2.1 billion mobile web

users

• In the U.S., 25% of mobile Web users are mobile-only

• We have to look beyond the Desktop

http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats/b

What’s the Effect

• For an existing site, revisit our original design requirements

• For a new site, have we consider all of our use cases

Another question...

What is Design?

The Process• Understand our audience (visitors) and what

information they are seeking

• Determine how to best organize that information

• Present that information to maximize our visitors success

• Refine the design for aesthetics, attractiveness, etc.

Starts with our Users

• What attracts someone to our site?

• What information are they looking for?

• What is their background?

• Are they individuals or organizations/companies?

Class Exercise: Who is our User?

• Take about 5 minutes to think of the visitor(s) who would come to your site.

• What characteristics or things do you need to know about them?

• Create a list of these, each one in the form of a question. E.g., "What country do they live in?"

Target Audience: Individuals

• What is the age range?

• Will our site appeal more to women or men?

• Can we identify the geography(ies) of origin? Are they urban or rural?

• What is their income level?

• How often do they use the web?

Target Audience: Individuals (cont’d)

• What is their marital and/or family status?

• What is their occupation?

• How many hours do they work?

• Do they come to our site during work or outside of work? Or both?

• What kind of device do they usually use to access the web?

Target Audience: Organizations

• What is their size?

• What is the position of those who visit our site from that organization?

• Will visitors use the site for themselves or on the behalf of others?

• How large is the budget they oversee?

• Are they coming to our site as a potential customer?

Create a Set of Visitor Profiles

• Representative of the typical visitors to your site.

• Give these visitors a name and even a profile photo or caricature.

• Place these visitors in different use cases, capturing their steps in using the site

A Simple Set of Visitor Profiles

Jeff Kelly Will Mary Sue

Gender M F M F F

Age 25 38 52 20 48

Locale Houston Dallas New York New Orleans

Atlanta

Occupation Doctor Attorney Insurance Agent

ER Nurse Paramedic

Income $180K $220K $55K $38K $29K

Web Use 3-5 days/wk Daily 2-3 days/wk Daily Daily

Class Exercise (Part 1): Build Your Own Visitor Profile Set

• In a text document, create a Visitor Profile for 3 different user types of your site.

• Provide the following data points for each:

• Name

• Gender

• Age

• Occupation

• Income

• Save your file - we will reference this later

Looking Deeper...

• Why do people visit our website? What are their motivations and goals?

• What information are they seeking?

• What specific tasks are they trying to accomplish?

• How often will they visit our site?

Class Exercise (Part 2): Build Your Own Visitor Profile Set

Continuing in our Visitor Profile document, add some narrative to each profile that answers these questions:

• Why do you (visitor) come to our website?

• What motivates you to visit our site?

• What information are you seeking?

• What do you want to specifically accomplish on our site?

• How often will you visit our site?

Example Visitor Profile

• For more formal development efforts, a Visitor Profile document may be appropriate.

• Example: http://www.sigmer.com/documents/Example_Website_User_Profile.pdf

Specific to our website what do we know now?

…in terms of content

• What content needs to appear on our site

• In what order should that content appear (Priority)

• The grouping of how that content should appear

Site Map

• We've seen this before

• Simple box and line diagram

• Can help us group content

• Helps identify pages or page sections

• Analog may be best

Sample Site Map

Home

About Articles Visit Online Store Contact

History

Trade Shows

Customer Service

Founders

Times

Location CartNews

Press

Class Exercise: Creating Your Own Site Map

• Using notecards, post-its, whiteboard, pen and paper, etc...

• Write down each piece of information that a visitor might need to know on its own piece of paper (notecard, post-it, etc.)

• Organize the related information pieces into groups - you may duplicate a piece of information if it is shared across groupings

• Focus on the goals of the visitor, not you as the web owner/creator.

Homework• Complete the Class Exercise: Build Your Own

Visitor Profile Set (Parts 1 and 2)

• Complete the Class Exercise: Creating Your Own Site Map

• Read: SixRevisions.com article on Wireframes vs Prototypes (http://sixrevisions.com/user-experience-ux/wireframes-vs-prototypes-difference/)