welcome and introductions - caraways class · welcome and introductions artcc 1100000 designing...
Post on 28-May-2020
1 Views
Preview:
TRANSCRIPT
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/)
top related