User Interface Design

Course Title: User Interface Design

UNIT/ORGANIZING PRINCIPLE: Principles of Design

ESSENTIAL

QUESTIONS:

CURRICULUM MAP

PACING: 2-3 weeks

Unit Number: 1

How do we create designs that incorporate the human computer interface (HCI)?

21 CENTURY SKILLS MEASUREMENT

TOPIC/OUTCOME

37.0 Incorporate

Human Computer

Interface (HCI) principles of design.

Benchmarks

37.01

37.02

37.03

CTE PERFORMANCE

TASKS

COMMON CORE

STANDARDS

Find out what human computer interface is and how it applies to computer use.



Compare and contrast human and computer factors in design.



CCSS.ELA-Literacy.CCRA.R.1 Read closely to determine what the text says explicitly and to make logical inferences from it; cite specific textual evidence when writing or speaking to support conclusions drawn from the text.

Key Terms

 Design

 Interface

 Grid

 Screen design

 Page design

 HCI

 Intuitive interface

 Usability

 Consistency

 Perceivability

 Learnability

 Predictability

 Feedback

 Observation







 Interaction

 Understanding



 Transfer of knowledge

CCSS.ELA-Literacy.CCRA.R.4 Interpret words and phrases as they are used in a text, including determining technical, connotative, and figurative meanings, and analyze how specific word choices shape meaning or tone.

CCSS.ELA-Literacy.CCRA.R.5 Analyze the structure of texts, including how specific sentences, paragraphs, and larger portions of the text (e.g., a section, chapter, scene, or stanza) relate to each other and the whole.

CCSS.ELA-Literacy.CCRA.R.7 Integrate and evaluate content presented in

Creativity and Innovation

-Think Creatively

-Work Creatively with Others

-Implement Innovations

Critical Thinking and Problem Solving

-Reason Effectively

-Use Systems Thinking

-Make judgments and decisions

-Solve Problems

Communication and Collaboration

-Communicate Clearly

-Collaborate with Others

Information Literacy

-Access and Evaluate information

-Use and manage information

Media Literacy

-Analyze Media

-Create Media Products

ICT (Information, Communications and

Technology) Literacy

-Apply Technology Effectively

Flexibility and Adaptability

-Adapt to Change

-Be flexible

Initiative and Self Direction

-Manage Goals and Time

-Work Independently

-Be Self-directed learners

Updated 12/7/2012

Course Number: 9001120

ASSESSMENTS

(Formative/Summative)

Formative

 Teacher created worksheets

 Student created summaries

 Knowledge check / class discussion

 Test on terms

Summative

 Student presentation project concerning elements of design

1


Activities / Resources

 Use curriculum from:

Lynda.com

(Interactive design fundamentals:

 http://www.lynda.com

/Dreamweaver-CS5training/Interaction-

Design-

Fundamentals/82822-

2.html )

 http://www.sylvantec

h.com/~talin/projects/ ui_design.html

 http://www.ambysoft.

com/essays/userInterf aceDesign.html

CURRICULUM MAP diverse media and formats, including visually and quantitatively, as well as in words.1

CCSS.ELA-Literacy.CCRA.R.9 Analyze how two or more texts address similar themes or topics in order to build knowledge or to compare the approaches the authors take.

Social and Cross-Cultural Skills

-Interact Effectively with Others

-Work Effectively in Diverse Team

Productivity and Accountability

-Manage Projects

-Produce Results

Leadership and Responsibility

-Guide and Lead Others

-Be responsible to others


Updated 12/7/2012 2


UNIT/ORGANIZING PRINCIPLE: Typography & Color

ESSENTIAL

QUESTIONS:

MEASUREMENT

TOPIC/OUTCOME

37.0 Incorporate

Human Computer

Interface (HCI) principles of design.

Benchmarks

37.04

37.05

37.06

CTE PERFORMANCE

TASKS

Students will be able to decipher the color wheel.

Choose appropriate web fonts.

Identify and use contrast, repetition, alignment,

 proximity and writing style in website design.



COMMON CORE

STANDARDS

PACING: 4-5 Weeks

Unit Number: 2


CURRICULUM MAP

CCSS.ELA-Literacy.CCRA.R.4 Interpret

Define and create an effective website identity through a logo and branding.

Key Terms



 words and phrases as they are used in a text, including determining technical, connotative, and figurative meanings, and analyze how specific word choices shape meaning or tone.

CCSS.ELA-Literacy.CCRA.R.5 Analyze

 Typography

 Color scheme

 CMYK

 RGB

 Graphic

 Tone

 Contrast

 Alignment

 Repetition

 Proximity

 the structure of texts, including how specific sentences, paragraphs, and larger portions of the text (e.g., a section, chapter, scene, or stanza) relate to each other and the whole.


21 CENTURY SKILLS


-Think Creatively




-Reason Effectively



-Solve Problems







Media Literacy

-Analyze Media






-Adapt to Change

-Be flexible



-Work Independently


Updated 12/7/2012


ASSESSMENTS


Formative

 Make a color palette for a website or logo

 Font identification activity

 Student led discussions about logos

Summative

 Create logos for websites

(educational, entertainment or ecommerce)

3


 Writing style

 Logo

 Identity

 Branding

 Color wheel


 Use curriculum from:

Lynda.com



 Typography for web designers

(http://www.lynda.co

m/Web-Fontstutorials/Typographyfor-Web-

Designers/79411-

2.html )

 Working with color


m/Fireworks-MX-

2004tutorials/workingwith-color/83-2.html)

 Websites o http://www.wo

rqx.com/color/i ndex.htm o http://colorsch emedesigner.co

m/ o http://www.ho

wtogeek.com/h owto/30065/ho w-to-

Updated 12/7/2012







-Manage Projects

-Produce Results





4

Course Title: User Interface Design understandtypographylike-aprofessionaldesigner/ o http://justcreati ve.com/2009/1

1/02/logodesign-tutorial/

 Helvetica movie

CURRICULUM MAP Course Number: 9001120

Updated 12/7/2012 5


UNIT/ORGANIZING PRINCIPLE: User Interface

ESSENTIAL

QUESTIONS:

CURRICULUM MAP

PACING: 3-4 Weeks

Unit Number: 3

How do you incorporate and plan for content rich design?


TOPIC/OUTCOME

38.0 Research and obtain information for use in designing the user interface

40.0 Demonstrate proficiency creating a logical website file structure

Benchmarks

37.07

37.08

38.01

38.02

38.03

38.04

38.05

40.01

40.02

CTE PERFORMANCE

TASKS

COMMON CORE

STANDARDS

Key Terms

 Primary audience

 Customer expectations

 Functionality

 Target Audience

 Demographics

 Keywords

 Analytics

 Directory structures

 Site root

 Subfolders

 File path

 Relative path

 Site root relative

 Absolute links










 http://edexchange.ad

obe.com/files/45c238



 CCSS.ELA-Literacy.CCRA.R.5 Analyze the structure of texts, including how specific sentences, paragraphs, and d9a5/ddcg_cs5_unit3.

pdf

 http://sixrevisions.co

m/usabilityaccessibilit y/informationarchitecture-101techniques-and-bestpractices/

 larger portions of the text (e.g., a section, chapter, scene, or stanza) relate to each other and the whole.



-Think Creatively




-Reason Effectively



-Solve Problems







Media Literacy

-Analyze Media






-Adapt to Change

-Be flexible



-Work Independently


Updated 12/7/2012


ASSESSMENTS


Formative

 Create a storyboard/wireframe.

 Create a customer needs analysis.

 Develop a rubric for defining user tasks.

 Create an appropriate directory structure.

Summative

 Create a mock scope of work packet detailing layout, file structure, target audience(s) and other relevant data used in the website creation process.

6


 http://www.netmecha

nic.com/news/vol5/de sign_no8.htm

 http://www.webdesig

nermag.co.uk/blog/sit e-storyboarding-and-

 design/

 http://www.webdesig

nerdepot.com/2011/0

1/what-to-ask-aclient-before-youstart-their-project/







-Manage Projects

-Produce Results





Updated 12/7/2012 7


UNIT/ORGANIZING PRINCIPLE: Cascading Style Sheets

ESSENTIAL

QUESTIONS:

CURRICULUM MAP

PACING: 6-8 weeks

Unit Number: 4

What are the advantages of using Cascading Style Sheets (CSS)?


TOPIC/OUTCOME

39.07

39.08

39.09

41.01

41.02

41.03

41.04

41.05

41.06

41.07

39.0 Create an intuitive interface using Cascading Style

Sheets (CSS)

41.0 Create a CSS formatted informational website

Benchmarks

39.01

39.02

39.03

39.04

39.05

39.06

CTE PERFORMANCE

TASKS

COMMON CORE

STANDARDS

Key Terms

 Div

 Table-less layout

 ID selector

 Class selector

 Pseudo-class

 Template



 Style sheets

 Fixed layout

 Liquid layout

 Elastic layout





 Optimization practices

 Plug-Ins

 Client-side technologies





obe.com/posts/702d1



 CCSS.ELA-Literacy.CCRA.R.5 Analyze the structure of texts, including how specific sentences, paragraphs, and

2b3ff

 www.csszengarden.co

m

 Lynda.com


m/Web-Interactive-



CSS-training/CSS-

Page-Layouts/86003larger portions of the text (e.g., a section, chapter, scene, or stanza) relate to each other and the whole.



-Think Creatively




-Reason Effectively



-Solve Problems







Media Literacy

-Analyze Media






-Adapt to Change

-Be flexible



-Work Independently


Updated 12/7/2012


ASSESSMENTS


Formative

 Find an external style sheet from a resource online and attach it to an html page.

 Create an external style sheet using WYSIWYG software.

 Create class and ID selectors using the CSS property inspector.

Summative

 Create an informational website about one of the following topics:

1) Financial Literacy

2) Civic Literacy

3) Health Literacy

4) Environmental

Literacy

(see 21 st century skills for specifics)

Website should include a tableless layout, div tags, and

CSS.

8


2.html?srchtrk=index

%3A4%0Alinktypeid%

3A2%0Aq%3Acss%0A page%3A1%0As%3Ar elevance%0Asa%3Atr ue%0Aproducttypeid



%3A2 )







-Manage Projects

-Produce Results





Updated 12/7/2012 9


UNIT/ORGANIZING PRINCIPLE: Publishing

ESSENTIAL

QUESTIONS:

CURRICULUM MAP


Unit Number: 5

How do you publish your website to a hosted domain via File Transfer Protocol (FTP)?


TOPIC/OUTCOME

42.02

42.03

42.06

42.09

42.14

42.15

42.0 Demonstrate proficiency publishing, testing, monitoring, and maintaining a website

Benchmarks

42.01

CTE PERFORMANCE

TASKS

COMMON CORE

STANDARDS

Key Terms

 Local site

 Remote site

 Domain name

 Host

 Traffic

 Blogging

 Podcasting

 Social Media

 FTP

 Put

 Get



obe.com/posts/4c276











57fd7

 ginner_no8.htm

 http://www.youtube.c

om/watch?v=daa4ZcJ nx3Y&safety_mode=tr ue&persist_safety_mo de=1&safe=active

 http://www.netmecha

nic.com/news/vol3/be






-Think Creatively




-Reason Effectively



-Solve Problems







Media Literacy

-Analyze Media






-Adapt to Change

-Be flexible



-Work Independently


Updated 12/7/2012


ASSESSMENTS


Formative

 Download a file using FTP.

 Upload a file using FTP.

 Manage sites to include remote name and domain name.

Summative

 Prepare a presentation for

Foundations of Web

Design students detailing how to publish, test, monitor, and maintain a website. Should include information on how to purchase domain names and hosting, use various

FTP resources for file transfer, increase site traffic, and utilize social media resources.

10










-Manage Projects

-Produce Results





Updated 12/7/2012 11


UNIT/ORGANIZING PRINCIPLE: Testing & Monitoring

ESSENTIAL

QUESTIONS:

Who’s coming to our site?!

MEASUREMENT

TOPIC/OUTCOME

42.07

42.08

42.10

42.11

42.12

42.13

42.14

42.15

42.0 Demonstrate proficiency publishing, testing, monitoring, and maintaining a website

Benchmarks

42.06

CTE PERFORMANCE

TASKS

Key Terms

 Validation

 Website testing

 Browser tools

 Usability testing

 Security measures

 Validation tools

 W3C s/google_analytics_fla sh.html

 http://www.google.co

m/analytics/




 http://www.adobe.co

m/devnet/flash/article





 http://validator.w3.or

g/





 www.onguardonline.g

ov

 http://www.usability.g

ov/basics/index.html


ov/articles/index.html


ov/methods/process.h

tml

 https://www.cu.edu/ir

COMMON CORE

STANDARDS


Unit Number: 6


CURRICULUM MAP






-Think Creatively




-Reason Effectively



-Solve Problems







Media Literacy

-Analyze Media






-Adapt to Change

-Be flexible



-Work Independently


Updated 12/7/2012


ASSESSMENTS


Formative

 Conduct website testing on 3 different domains on a variety of devices.

 Identify security measures in a website.

 Use at least 2 different validation tools on a website.

Summative

 Redesign a template to apply to a pre-existing website that has been properly validated, had usability testing, and various security measures conducted.

12

Course Title: User Interface Design m/stds/usability/

 http://www.alistapart.

com/articles/usabilitytesting-demystified/









-Manage Projects

-Produce Results




Updated 12/7/2012


13


UNIT/ORGANIZING PRINCIPLE: Teams and Ethics

ESSENTIAL

QUESTIONS:

Is it legal and ethical?

MEASUREMENT

TOPIC/OUTCOME

80.0 Describe the roles within teams, work units, departments, organizations, interorganizational systems, and the larger environment

83.0 Describe the importance of professional ethics and legal responsibilities

Benchmarks

80.01

80.02

80.03

80.04

83.01

83.02

83.03

83.04

CTE PERFORMANCE

TASKS



COMMON CORE

STANDARDS

CURRICULUM MAP


Unit Number: 7

Key Terms 

 Business organizations

 Quality control systems

 Global economy

 Ethics

 Policies

 Procedures

 Ethical behavior


 Junior Achievement






CCSS.ELA-Literacy.CCRA.R.4 Interpret words and phrases as they are used in a text, including determining technical,



Ethics Unit

(Teacher Discretion)

 Types of Businesses

PowerPoint

 http://www.youtube.c

om/watch?v=rWlHtvZ connotative, and figurative meanings, and analyze how specific word choices shape meaning or tone.

CCSS.ELA-Literacy.CCRA.R.5 Analyze the structure of texts, including how

HbZ8&safety_mode=t rue&persist_safety_m ode=1&safe=active specific sentences, paragraphs, and larger portions of the text (e.g., a section, chapter, scene, or stanza) relate to each other and the whole.




-Think Creatively




-Reason Effectively



-Solve Problems







Media Literacy

-Analyze Media






-Adapt to Change

-Be flexible



-Work Independently


Updated 12/7/2012


ASSESSMENTS


Formative

 Describe the pros and cons of a larger corporation versus a smaller one.

 Business Organization

Terminology

 Explain a quality control system.

Summative

 Choose a corporate identity and research the following*:

1.

Business Structure

2.

Quality Control System

3.

Workplace policies & procedures

4.

Ethical statements

*This assignment must be modeled to the student(s).

14










-Manage Projects

-Produce Results





Updated 12/7/2012 15

MEASUREMENT

TOPIC/OUTCOME

77.01

77.02

77.03

77.04

77.05

77.06

77.07

78.01

78.02

78.03

78.04

77.0 Use oral and written communication skills in creating, expressing and interpreting information and ideas.

78.0 Solve problems using critical thinking skills, creativity and innovation.

Benchmarks:


UNIT/ORGANIZING PRINCIPLE: Project-Based Learning

ESSENTIAL

QUESTIONS:

CURRICULUM MAP

What is it like to create a website for a client?


Unit Number: 8

CTE PERFORMANCE

TASKS

Key Terms
















COMMON CORE

STANDARDS







-Think Creatively




-Reason Effectively



-Solve Problems







Media Literacy

-Analyze Media






-Adapt to Change

-Be flexible



-Work Independently


Updated 12/7/2012


ASSESSMENTS


Formative

 Periodic status checks

(could possibly include storyboard check, template progress, client meeting notes & correspondence…)

Summative

 Client’s Website

16










-Manage Projects

-Produce Results





Updated 12/7/2012 17

User Interface Design

Related documents

Products

Support

User Interface Design

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib