685_spring14-onsite

UW- Milwaukee, School of Information Studies

INFOST 685 E-Pub & Web Design

Electronic Publishing & Web Design (3 credits)

INFOST 685

Instructor: Rebecca Hall rjhall@uwm.edu

NWQ 3521

Ph: 414.229.2855

Office Hours:

By Appointment

Skype: rebeccahall

PLEASE READ THIS DOCUMENT CAREFULLY. IT IS EXPECTED THAT EVERYONE BE FAMILIAR WITH AND

ADHERE TO THE GUIDELINES ESTABLISHED. ** If you need special accommodations in order to meet any of the requirements of this course, please contact the instructor as soon as possible. **

Required Text: None

Required Software: Students will need access to the following software: Adobe Illustrator; Adobe

Photoshop; Adobe Dreamweaver; and Adobe Acrobat. All of these programs are included in the

Adobe CS6 Web Premium Package ( CS5/CS4 would also be acceptable ).

Students will have access to this software in the SOIS Computer Labs/SOIS Virtual Lab and most

Campus Computer Labs. If you choose, you may purchase software from WISC (Wisconsin

Integrated Software Catalog) at a discounted rate. ( http://wiscsoftware.wisc.edu/wisc/ )

Recommended Text:

Jennifer Niederst Robbins. (2012). Learning Web Design: A beginner’s Guide to HTML, CSS,

JavaScript, and Web Graphics. O’Reilly Media, Incorporated. 4 rd Edition – This book is highly recommended for students with no prior web design experience.

Jason Beaird. (2010). The Principles of Beautiful Web Design O’Reilly Media, Incorporated

( http://www.sitepoint.com/books/design2/

) See Sample PDF

Edition

Description:

An introduction to principles of visual communications related to electronic media with emphasis on website development, electronic documents, and production and dissemination of electronic information.

Course Objectives:

Upon Completion of this class students will:

1.

Understand the process of web design

2.

Understand the principles of design in electronic media

3.

Demonstrate the skills needed to create web graphics

4.

Demonstrate the ability to construct web sites and electronic documents with effective and aesthetically pleasing design

5.

Understand the limitations of electronic publishing as they relate to the World Wide Web.

Page 1 of 14



Course Requirements (500 pts)

Attendance & Participation

Points are earned for participation in discussions, reviews and critiques.

Exercises (15 pts each)

Five (5) exercises. Exercises are designed to reinforce technical skills learned in class.

UG

25 pts

(5%)

75 pts

(15%)

G

25 pts

(5%)

75 pts

(15%)

Assignments (25 pts each)

Five (5) assignments. Assignments are designed to provide experience applying concepts learned in class.

Graduate Student Assignments (25 pts each)

Five (5) assignments. Expectations will vary slightly on grad student assignments and additional requirements will be distributed and discussed in class.

Mid-term Exam

125 pts

(25%)

125 pts

(25%)

Final Web Site Development Project

Part 1: Creative Brief / Project Profile

Part 2: Information Architecture

Part 3: Interface Design

Part 4: Final Site Production

Part 5: User Testing

Graduate Research Project

Students will use their critical thinking skills to evaluate the effectiveness and organization of websites. Based on their analysis, students will make recommendations and present solutions for effective web development.

Project Details will be distributed in class.

75 pts

(15%)

200 pts

(40%)

75 pts

(15%)

150 pts

(30%)

50 pts

(10%)

*Late Assignments: You are expected to turn in your assignments on time. Late assignments will receive a deduction of 2 points per day late.

Grading Scale:

A

A-

B+

93-100

90-92

88-89

B

B-

83-87

80-82

C+ 78-79

C 73-77

C- 70-72

D+ 68-69

D 63-67

D-

F

60-62

0-59

Page 2 of 14



UWM AND SOIS ACADEMIC POLICIES

The following links contain university policies affecting all SOIS students. Many of the links below may be accessed through a PDF-document maintained by the Secretary of the University: http://www.uwm.edu/Dept/SecU/SyllabusLinks.pdf

. Undergraduates may also find the Panther

Planner and Undergraduate Student Handbook useful

( http://www.uwm.edu/Dept/OSL/DOS/Handbook2005-06.pdf

). For graduate students, there are additional guidelines from the Graduate School

( http://www.uwm.edu/Dept/Grad_Sch/StudentInfo/ ), including those found in the Graduate

Student and Faculty Handbook: http://www.uwm.edu/Dept/Grad_Sch/Publications/Handbook/ .

Students with disabilities. If you will need accommodations in order to meet any of the requirements of a course, please contact the instructor as soon as possible. Students with disabilities are responsible to communicate directly with the instructor to ensure special accommodation in a timely manner. There is comprehensive coverage of issues related to disabilities at the Student Accessibility Center

( http://www.uwm.edu/Dept/DSAD/SAC/MainOffice.html

), important components of which are expressed here: http://www.uwm.edu/Dept/DSAD/SAC/SACltr.pdf

.

Religious observances. Students’ sincerely held religious beliefs must be reasonably accommodated with respect to all examinations and other academic requirements, according to the following policy: http://www.uwm.edu/Dept/SecU/acad%2Badmin_policies/S1.5.htm

. Please notify your instructor within the first three weeks of the Fall or Spring Term (first week of shorter-term or

Summer courses) of any specific days or dates on which you request relief from an examination or academic requirement for religious observances.

Students called to active military duty. UWM has several policies that accommodate students who must temporarily lay aside their educational pursuits when called to active duty in the military

(see http://www3.uwm.edu/des/web/registration/militarycallup.cfm

), including provisions for refunds, readmission, grading, and other situations.

Incompletes. A notation of “incomplete” may be given in lieu of a final grade to a student who has carried a subject successfully until the end of a semester but who, because of illness or other unusual and substantial cause beyond the student’s control, has been unable to take or complete the final examination or some limited amount of other term work. An incomplete is not given unless the student proves to the instructor that s/he was prevented from completing course requirements for just cause as indicated above

( http://www.uwm.edu/Dept/SecU/acad%2Badmin_policies/S31.pdf

).

Discriminatory conduct (such as sexual harassment). UWM and SOIS are committed to building and maintaining a campus environment that recognizes the inherent worth and dignity of every person, fosters tolerance, sensitivity, understanding, and mutual respect, and encourages the members of its community to strive to reach their full potential. The UWM policy statement

( http://www.uwm.edu/Dept/SecU/acad%2Badmin_policies/S47.pdf

) summarizes and defines situations that constitute discriminatory conduct. If you have questions, please contact an appropriate SOIS administrator.

Academic misconduct. Cheating on exams and plagiarism are violations of the academic honor code and carry severe sanctions, ranging from a failing grade for a course or assignment to

Page 3 of 14


INFOST 685 E-Pub & Web Design expulsion from the University. See the following document

( http://www.uwm.edu/Dept/OSL/DOS/conduct.html

) or contact the SOIS Investigating Officer

(currently the Associate Dean) for more information.

Complaints. Students may direct complaints to the SOIS Dean or Associate Dean. If the complaint allegedly violates a specific university policy, it may be directed to the appropriate university office responsible for enforcing the policy.

Grade appeal procedures. A student may appeal a grade on the grounds that it is based on a capricious or arbitrary decision of the course instructor. Such an appeal shall follow SOIS appeals procedures or, in the case of a graduate student, the Graduate School. These procedures are available in writing from the respective department chairperson or the Academic Dean of the

College/School ( http://www.uwm.edu/Dept/SecU/acad%2Badmin_policies/S28.htm

).

Examinations, Finals. The Secretary of the University is authorized to prepare the final examination schedule. The time of the final examination for an individual or a class may be changed only with the prior approval of the dean or director of the respective college/school. The change will involve a postponement to a later date. For individuals with exam conflicts, a separate week at the very end of the exam week will be reserved to take one of the conflicting exams

( http://www.uwm.edu/Dept/SecU/acad+admin_policies/S22.htm

).

Page 4 of 14



COURSE CALENDAR

**Following is a TENTATIVE schedule of readings and assignments. Additional readings MAY be assigned throughout the semester and listed on the course website.

WEEK 01 Jan 21

Exercise 01 Design Evaluation Exercise Due: 01| 28

Topics:

Course Introduction & Expectations

Design Principles (Print vs. Web)

Design Elements

Readings:

Beaird, J. (2010) The Principles of Beautiful Web Design. O’Reilly Media, Inc.

Chapter 1 http://www.sitepoint.com/books/design1/

McClurg-Genevese, J. (2005) The Principles of Design.

Available: http://www.digital-web.com/articles/principles_of_design/

McClurg-Genevese, J. (2005) The Elements of Design

Available: http://www.digital-web.com/articles/elements_of_design/

WEEK 02 Jan 28

Assignment 01 Logo / Identity Design Project Due: 02|11

DUE: Exercise 01 - Design Evaluation Exercise (01|28)

Topics:

Introduction to Computer Graphics

Working with Vector Graphics

Introduction to Adobe Illustrator

Working with Selections

Basic Shapes and Transformations

Tutorials: Working with Selections | Basic Shapes & Transformations

Readings:

No assigned readings. Please experiment with the software introduced this week. Spend some time viewing some of the online Adobe Illustrator tutorials and experimenting with the tools in Illustrator and/or other vector graphic program.

Adobe TV Video Library: http://tv.adobe.com/product/illustrator/

Lynda.com: http://www4.uwm.edu/sois/resources/it/lynda/

Page 5 of 14



WEEK 03 Feb 04

Exercise 02

Web Site Design

Web Site Design

Web Site Design

Web Site Design

Vector Tool Exercise

Part 1: Project Profile – Creative Brief


Part 3: Interface Design

Part 4: Development

Due: 02|11

Due: 02|25

Due: 03|11

Due: 04|01

Due: 05|06

Topics:

Typographic Concepts

Logos & Branding

Vector Graphics (Cont.)

Working with Adobe Illustrator

Bezier Curves – Pen Tool

Exercise 02: Vector Pen Tool Exercise

Readings:

No assigned readings. Please experiment with the software introduced this week. Spend some time viewing some of the online Adobe Illustrator tutorials and experimenting with the tools in Illustrator and/or other vector graphic program.

Adobe TV Video Library: http://tv.adobe.com/product/illustrator/


WEEK 04 Feb 11

Exercise 03 Resolution / Editing Exercise

DUE: Exercise 02 Vector Tool Exercise (02|11)

DUE: Assign 01 - Logo / Identity Design Project (02|11)

Topics:

Working with Bitmap (Raster) Graphics

Understanding Resolution

Introduction to Adobe Photoshop

Basic Image Editing, Manipulation, and Correction

Tutorials: Selection Tool Practice | Resolution Editing Exercise

Readings:

McGoldrick, D. (2010) Understanding Image Resolution For Printing

Available: http://www.brighthub.com/multimedia/ publishing/articles/22196.aspx

Due: 02|18

Eismann, K. (2011) Digital Photography Fundamentals: Understanding Resolution and Bit

Depth Available: http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=984

Arah, T. (2002) Understanding Bitmap Image Resolution

Page 6 of 14



Available: http://designer-info.com/Writing/image_resolution.htm

Please experiment with the software introduced this week. Spend some time viewing some of the online Adobe Photoshop tutorials and experimenting with the tools in Adobe

Photoshop.

Adobe TV Video Library: http://tv.adobe.com/product/photoshop/ (Ex: Making Tonal

Corrections; Making Lighting Corrections; Retouching and Repairing Photographs)


WEEK 05 Feb 18

Exercise 04

Assignment 02

Layers Exercise

Interface Re-Design Project

DUE: Exercise 03 Resolution / Editing Exercise (02|18)

Due: 02|25

Due: 03|04

Topics:

Color Concepts

Images – Literal, Concrete, Iconic, Abstract

Introduction to Adobe Photoshop

Working with layers, Interface Design

Readings:

Beaird, J. (2004) Color for Coders - Color and Design for the Non-Designer

Available: http://www.sitepoint.com/print/color-for-coders

Beaird, J. (2010) The Principles of Beautiful Web Design. O'Reilly Media, Inc. Chapters 2-

Color, 3-Texture and 5- Imagery - Recommended Reading

Niederst, J. (2012). Learning Web Design O’Reilly Media, Inc.

Chapter 1: Where Do I Start - Recommended Reading

Chapter 2: How The Web Works - Recommended Reading

Chapter 3: Some Big Concepts You Need to Know - Recommended Reading

Lynch, P. Horton, S. ( 2009) Web Style Guide, Chapter 1 – Process

Available: http://webstyleguide.com/wsg3/index.html

WEEK 06 Feb 25

Assignment 03

Web Site Design

Hand-Code HTML Exercise


DUE: Exercise 04 – Layers Exercise (02|25)

DUE: Web Site Design – Part 1: Project Profile (02|25)

Topics: Web Design Process

Introduction to HTML (URL Structure | Linking)

Introduction to CSS

FTP – Web Space

Due: 03|11

Due: 03|11

Page 7 of 14



Tutorials: Hand-Code HTML/CSS Exercise

Readings:

Keith, J. (2010) A Brief History of Markup. A List Apart

Available: http://www.alistapart.com/articles/a-brief-history-of-markup/

Niederst, J. (2012). Learning Web Design. O'Reilly Media, Inc.

Chapter 4: Creating A Simple Page Recommended Reading

Chapter 5: Marking Up Text- Recommended Reading

Chapter 6: Adding Links- Recommended Reading

Chapter 7: Adding Images- Recommended Reading

Beaird, J. (2010). The Principles of Beautiful Web Design. O'Reilly Media, Inc. Chapter 4-

Typography - Recommended Reading

Lynch, P. & Horton, S. Web Style Guide

Chapter 2 – Usability

Chapter 3 – Information Architecture.


W3Schools - Introduction to HTML: http://www.w3schools.com/html/html_intro.asp

- Recommended Reading

W3Schools - HTML Tutorial http://www.w3schools.com/HTML/default.asp

- Recommended Reading

WEEK 07 March 04

Exercise 05 Web Graphics Project

DUE: Assign 02 – Interface Re-design Project (03|04)

Due: 03|18

Topics:

Web Graphics – Optimizing Images

Tutorials: Creating Web Graphics

Guest: Jim Schultz - Web Hosting

Mid-Term Review

Readings:

Beaird, J. (2010). The Principles of Beautiful Web Design. O'Reilly Media, Inc. Chapter 5-

Imagery - Recommended Reading

Niederst, J. (2012). Learning Web Design. O'Reilly Meida, Inc.

Chapter 7: Adding Images- Recommended Reading

Chapter 8: Table Markup- Recommended Reading

Chapter 21: Web Graphics Basics - Recommended Reading

Chapter 22: Lean & Mean Web Graphics - Recommended Reading

Lynch, P. Horton, S. ( 2009) Web Style Guide

Chapter 2 – Usability

Chapter 3 – Information Architecture


Page 8 of 14



WEEK 08 March 11

Web Site Design Part 3: Interface Design Due: 04|01

DUE: Assignment 03: Hand-code HTML Project (03|11)

DUE: Web Site Design – Part 2: Information Architecture (03|11)

Topics:

Interface Design

File Management

Introduction to Web Authoring Tools – Adobe Dreamweaver

Defining a Site

Simple Formatting

Images

Linking (relative, absolute, internal bookmarks, email links)

Mid-Term Exam Available (March 11 – March 30)

Readings


Chapter 8 : Table Markup - Recommended Reading

Chapter 9: Forms- Recommended Reading

Chapter10: What’s Up, HTML5?- Recommended Reading

Chapter 11: Cascading Style Sheets Orientation- Recommended Reading

Lynch, P. Horton, S. ( 2009) Web Style Guide

Chapter 4 - Interface Design


Adobe Developer Center - David Powers Tutorials

Building your first website - Part 1: Set up your site and project files http://www.adobe.com/devnet/dreamweaver/articles/ first_website_pt1.html

Additional Resources:

Adobe Dreamweaver CS6 Reference http://helpx.adobe.com/dreamweaver/topics.html

(Note: this resource is also available from the help menu within Dreamweaver)

Dreamweaver Developer Center http://www.adobe.com/devnet/dreamweaver/

Please experiment with the software introduced this week. Spend some time viewing some of the online Adobe Dreamweaver tutorials and experimenting with the tools in

Dreamweaver.

Adobe TV Video Library: http://tv.adobe.com/product/dreamweaver/ (Defining a Site;

Creating New Pages)


Page 9 of 14



BREAK Spring Break - March 16 – March 22

Exam Available (March 11 – March 30) Mid-Term

DUE: Exercise 05 – Web Graphics Project (03|18)

WEEK 09

Due: 03|30

March 25

Web Site Design Part 4 - Development

Mid-Term Exam Available (March 11 – March 30)

Topics:

Introduction to Web Authoring Tools – Adobe Dreamweaver

Simple Formatting

Images

Linking (relative, absolute, internal bookmarks, email links)

Introduction to CSS

Tutorials: Creating A Website Using Dreamweaver

Readings:

Introduction to CSS

Available: http://www.w3schools.com/css/css_intro.asp

Due: 05|06


Chapter 11: Cascading Style Sheets Orientation- Recommended Reading

Webmonkey (2010). Web Standards for Beginners.

Available: http://www.webmonkey.com/2010/02/ web_standards_for_beginners/

Please experiment with the software introduced this week. Spend some time viewing some of the online Adobe Dreamweaver & CSS tutorials and experimenting with the tools in

Dreamweaver.

Adobe TV Video Library: http://tv.adobe.com/product/dreamweaver/


WEEK 10 April 01

Assignment 04 CSS Re-Design Project

DUE: Web Site Design – Part 3: Interface Designs (04|01)

Topics:

Introduction to CSS – Rules & Formatting

Cascading Style Sheets (CSS)

Internal | External Style Sheets

Type, ID and Class Selectors

CSS Properties & Values

Due: 04|22

Page 10 of 14



Introduction to CSS environment/tools in Dreamweaver

Tutorials: Creating A Website Using Dreamweaver

Readings:

Introduction to CSS

Available: http://www.w3schools.com/css/css_intro.asp


Chapter 12: Formatting Text- Recommended Reading

Chapter 13: Colors and Backgrounds- Recommended Reading

Webmonkey (2010). Web Standards for Beginners.

Available: http://www.webmonkey.com/2010/02/ web_standards_for_beginners/

Please experiment with the software introduced this week. Spend some time viewing some of the online Adobe Dreamweaver & CSS tutorials and experimenting with the tools in

Dreamweaver.

Adobe TV Video Library: http://tv.adobe.com/product/dreamweaver/


WEEK 11 April 08

Grad Project Web Style Guide Due: 05|16

Topics:

Cascading Style Sheets (CSS) –Properties & Values

CSS – Formatting & Presentation

CSS – Positioning & Layout

Personal Web Space and File Transfer Protocol

Tutorials: CSS Layouts | Modifying a template based CSS layout

Readings:

Niederst, J. (2012). Learning Web Design. O'Reilly Media, Inc.

Chapter 14: Thinking Inside the Box- Recommended Reading

Chapter 15: Floating and Positioning- Recommended Reading

Chapter 16: Page Layout with CSS- Recommended Reading

Online Resources

W3C's Standards: http://www.w3.org/Style/CSS/

CSS Zen Garden: http://www.csszengarden.com/

Free CSS Templates.org: http://www.freecsstemplates.org/

CNET Web Hosting Reviews: http://reviews.cnet.com/web-hosting/

Page 11 of 14



WEEK 12 April 15

Topics:

Cascading Style Sheets (CSS) cont.

Positioning & Layout

Interface Design – Converting layouts to HTML/CSS

Tutorials: Converting design layouts to HTML (using CSS)

Readings:


Chapter 17: Transitions, Transforms, and Animation- Recommended Reading

Chapter 18: CSS Techniques- Recommended Reading


A List Apart: http://www.alistapart.com/

Position Is Everything: http://www.positioniseverything.net/

W3C's Standards: http://www.w3.org/Style/CSS/

CSS Zen Garden: http://www.csszengarden.com/

Free CSS Templates.org: http://www.freecsstemplates.org/

WEEK 13 April 22

DUE: Assignment 04 – CSS Re-Design Project (04|22)

Topics: Work Week

This week is a work week. No additional lecture material.

Grad Student Project Resources:

Neville, K. (2010). Designing Style Guidelines For Brands And Websites. Smashing

Magazine

Available: http://www.smashingmagazine.com/2010/07/21/designing-style-guidelinesfor-brands-and-websites/

Cousins, C. (2013). How to Build a Brand Bible & Visual Style Guide

Available: http://designshack.net/articles/graphics/how-to-build-a-brand-bible-visualstyle-guide/

Style Guide Examples:

US Enviromental Protection Agency - Web Style Guide http://www2.epa.gov/webguide/web-style-guide

University of Pennsylvania Style Guide http://www.upenn.edu/webservices/styleguide/

IEEE Web Site Requirements and Style Guide http://www.ieee.org/about/webteam/styleguide/index.html

University of North Carolina at Chapel Hill Web Style Guide http://creative.unc.edu/h/printable-web-style-guide/

Page 12 of 14



WEEK 14 April 29

Assignment 05 PDF Production Project Due: 05|06

Topics:

Electronic Publishing –Portable Document Format (PDF)

Introduction to Adobe Acrobat

In-Class Tutorials: PDF Production Project

Navigation Examples (Optional)

Readings:

Alspach, J. (2005). Linking up with Acrobat

Available: http://www.adobe.com/products/acrobat/tutorials/acr7sdcreatelinks.html

Adobe Creative Team. (2007). Learn How to Create Adobe PDF Files

Available: http://www.adobepress.com/articles/article.asp?p=698126&seqNum=6

Adobe Acrobat - Customer Stories http://www.adobe.com/products/acrobat/ customerstories/#generalbusiness

Read a few of the customer success stories to learn more about how PDF is used in business/industry.


Adobe Portable Document Format: http://www.adobe.com/products/acrobat/adobepdf.html

Please spend some time viewing some of the online Acrobat tutorials in the Adobe Video

Library ( http://www.adobe.com/designcenter/video_workshop/ ) and on Adobe TV ( http://tv.adobe.com/product/illustrator/ ) Experiment with the tools in Adobe photoshop and/or another raster graphics programs.

Defining a Site

Creating New Pages

WEEK 15 May 06

Web Site Design Part 5: User Testing Due: 05|13

DUE: Assignment 05 – PDF Production Project (05|06)

Web Site Design – Part 4: Development (05|06) – First draft for user testing

Topics:

Website Usability

Final Web page construction

Activity: User-Testing

Note: You must have your websites at a point where you can conduct user testing this week. After testing and feedback from your users you can make modifications to your site before final grading. Final sites must be completed by 05|13.

Readings:

Kirby, L. (2000). Professional Website Usability

Page 13 of 14



Available: http://www.sitepoint.com/print/website-usability http://www.hennigweb.com/presentations/simmons/outline.html

FINAL EXAM WEEK (May 10 – May 17)

Due:

Web Site Design – Part 4: Development (05|13) – Final edits based on user testing

Web Site Design – Part 5: User Testing (05|13)

Graduate Research Project: Web Style Guide (05|16)

Final Exam Period: May 10-17, 2014 (Final Web Site Design Project must be submitted by 05|13 in lieu of final written exam)

Page 14 of 14

685_spring14-onsite

Electronic Publishing & Web Design (3 credits)

INFOST 685

Related documents

Products

Support

685_spring14-onsite

Electronic Publishing & Web Design (3 credits)

INFOST 685

Related documents

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib