welcome and introductions - caraways class · welcome and introductions artcc 1100000 designing...
TRANSCRIPT
![Page 1: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/1.jpg)
Welcome and Introductions
ARTCC 1100000
Designing Effect Websites
!Instructor: Bruce Caraway
Office: Lone Star - University Park Campus Bldg 13 Rm 708
[email protected] 281-401-5394
![Page 2: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/2.jpg)
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?
![Page 3: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/3.jpg)
Remind101
![Page 4: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/4.jpg)
Remind101
![Page 5: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/5.jpg)
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.
![Page 6: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/6.jpg)
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
![Page 7: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/7.jpg)
Break
![Page 8: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/8.jpg)
Unit 1: Design
![Page 9: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/9.jpg)
is the "Web" today?WhatWhere
![Page 10: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/10.jpg)
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
![Page 11: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/11.jpg)
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
![Page 12: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/12.jpg)
Another question...
What is Design?
![Page 13: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/13.jpg)
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.
![Page 14: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/14.jpg)
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?
![Page 15: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/15.jpg)
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?"
![Page 16: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/16.jpg)
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?
![Page 17: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/17.jpg)
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?
![Page 18: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/18.jpg)
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?
![Page 19: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/19.jpg)
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
![Page 20: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/20.jpg)
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
![Page 21: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/21.jpg)
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
![Page 22: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/22.jpg)
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?
![Page 23: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/23.jpg)
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?
![Page 24: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/24.jpg)
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
![Page 25: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/25.jpg)
Specific to our website what do we know now?
![Page 26: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/26.jpg)
…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
![Page 27: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/27.jpg)
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
![Page 28: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/28.jpg)
Sample Site Map
Home
About Articles Visit Online Store Contact
History
Trade Shows
Customer Service
Founders
Times
Location CartNews
Press
![Page 29: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/29.jpg)
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.
![Page 30: Welcome and Introductions - Caraways Class · Welcome and Introductions ARTCC 1100000 Designing Effect Websites ! Instructor: Bruce Caraway Office: Lone Star - University Park Campus](https://reader034.vdocument.in/reader034/viewer/2022042308/5ed40ef28d46b66d22636013/html5/thumbnails/30.jpg)
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/)