Electronic Publishing & Web Design (3 credits) INFOST 685 Spring 2017 (online)

Transcription

1 Electronic Publishing & Web Design (3 credits) INFOST 685 Spring 2017 (online) Instructor: Rebecca Hall NWQ 3521 Ph: Office Hours: By Appointment (M-F 9-4) ** 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 SOIS students can access these programs using the SOIS Virtual Lab. Please see written/video documentation for access to and instructions on using the virtual lab environment: If you choose, you may purchase a student subscription to Adobe Creative Cloud. This membership includes all the latest Adobe creative apps and services. For more Information visit: 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 th Edition This book is highly recommended for students with no prior web design experience. Jason Beaird & James George. (2014). The Principles of Beautiful Web Design SitePoint Pty. Ltd. 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 13

2 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. 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 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 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. UG 25 pts (5%) 75 pts (15%) 125 pts (25%) 75 pts (15%) 200 pts (40%) G 25 pts (5%) 75 pts (15%) 125 pts (25%) 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 B B C C C D D D F 0-59 Page 2 of 13

3 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: Undergraduates may also find the Panther Planner and Undergraduate Student Handbook useful ( ). For graduate students, there are additional guidelines from the Graduate School ( ) Students with disabilities. Notice to these students should appear prominently in the syllabus so that special accommodations are provided in a timely manner. Religious observances. Accommodations for absences due to religious observance should be noted. Students called to active military duty. Accommodations for absences due to call-up of reserves to active military duty should be noted. Students: Employees: (Editorially Revised, 03/25/09) (Editorially Revised, 12/06/2016) 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 substantiated cause beyond the student's control, has been unable to take or complete the final examination or to complete some limited amount of term work. Discriminatory conduct (such as sexual harassment). Discriminatory conduct will not be tolerated by the University. It poisons the work and learning environment of the University and threatens the careers, educational experience, and well-being of students, faculty, and staff. Academic misconduct. Cheating on exams or plagiarism are violations of the academic honor code and carry severe sanctions, including failing a course or even suspension or dismissal from the University. Complaint procedures. Students may direct complaints to the head of the academic unit or department in which the complaint occurs. If the complaint allegedly violates a specific university policy, it may be directed to the head of the department or academic unit in which the complaint occurred or 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 the established procedures adopted by the department, college, or school in which the course resides or in the case of graduate students, the Graduate School. These procedures are available in writing from the respective department chairperson or the Academic Dean of the College/School. Page 3 of 13

4 LGBT+ resources. Faculty and staff can find resources to support inclusivity of students who identify as LGBT+ in the learning environment. Other. The final exam requirement, the final exam date requirement, etc. Page 4 of 13

5 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 Sept Exercise 01 Design Evaluation Exercise Due: Course Introduction & Expectations Design Elements Design Principles (Print vs. Web) Introduction to Computer Graphics Introduction to the Virtual Lab Beaird, J. (2014) The Principles of Beautiful Web Design. O Reilly Media, Inc. Chapter 1 - Recommended Reading McClurg-Genevese, J. (2005) The Principles of Design. Available: McClurg-Genevese, J. (2005) The Elements of Design Available: McClurg-Genevese, J. (2006) Principles and Elements of Design Available: WEEK 02 Sept Exercise 02 AI: Vector Tool Exercise Due: Assignment 01 AI: Identity Design Project Due: DUE: Exercise 01 - Design Evaluation Exercise (09 10) Typographic Concepts Logos & Branding Working with Vector Graphics Introduction to Adobe Illustrator Working with Selections Basic Shapes and Transformations Tutorials: Working with Selections Basic Shapes & Transformations Adobe Illustrator Drawing techniques Bezier Curves Pen Tool Exercise 02: Vector Pen Tool Exercise Page 5 of 13

6 Beaird, J. (2014) The Principles of Beautiful Web Design. O Reilly Media, Inc. Chapter 4 - Typography - Recommended Reading Spend some time viewing some of the online Adobe Illustrator tutorials and experimenting with the tools in Illustrator and/or other vector graphic program. Lynda.com: Adobe Illustrator Tutorials: WEEK 03 Sept Exercise 03 PS: Resolution / Editing Exercise Due: Web Site Design Part 1: Project Profile Due: Web Site Design Part 2: Information Architecture Due: Web Site Design Part 3: Interface Design Due: Web Site Design Part 4: Development Due: DUE: Exercise 02 AI: Vector Tool Exercise (09 17) Working with Bitmap (Raster) Graphics Understanding Resolution Introduction to Adobe Photoshop Basic Image Editing, Manipulation, and Correction Tutorials: Selection Tool Practice Resolution Editing Exercise Lynch, P. Horton, S. ( 2009) Web Style Guide, Chapter 1 Process and Chapter 2 Universal Usability Available: McGoldrick, D. (2010) Understanding Image Resolution For Printing Available: publishing/articles/22196.aspx Eismann, K. (2011) Digital Photography Fundamentals: Understanding Resolution and Bit Depth Available: Arah, T. (2002) Understanding Bitmap Image Resolution Available: Page 6 of 13

7 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. Lynda.com: Adobe Photoshop Tutorials: WEEK 04 Sept Exercise 04 PS: Layers Exercise Due: Assignment 02 Interface Re-Design Project Due: DUE: Exercise 03 Resolution / Editing Exercise (09 24) DUE: Assign 01 AI: Identity Design Project (09 24) Color Concepts Images Literal, Concrete, Iconic, Abstract Introduction to Adobe Photoshop Working with layers, Interface Design Beaird, J. (2004) Color for Coders - Color and Design for the Non-Designer Available: Beaird, J. (2014) 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 3 Information Architecture and Chapter 4 Interface Design Available: WEEK 05 Oct Assignment 03 HTML/CSS Coding Due: Web Site Design Part 2: Information Architecture Due: DUE: Exercise 04 Layers Exercise (10 01) DUE: Web Site Design Part 1: Project Profile (10 01) Web Design Process Introduction to HTML (URL Structure Linking) Introduction to CSS FTP Web Space Page 7 of 13

8 Tutorials: Hand-Code HTML/CSS Keith, J. (2010) A Brief History of Markup. A List Apart Available: 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 Lynch, P. & Horton, S. Web Style Guide Chapter 2 Usability Chapter 3 Information Architecture. Available: W3Schools - Introduction to HTML: - Recommended Reading W3Schools - HTML Tutorial - Recommended Reading WEEK 06 Oct Exercise 05 Web Graphics Project Due: DUE: Assign 02 Interface Re-design Project (10 08) FTP Web Space Web Design Process Web Graphics Optimizing Images Mid-Term Review Tutorials: Creating Web Graphics Beaird, J. (2014) The Principles of Beautiful Web Design. O Reilly Media, Inc. Chapters 5- Imagery - Recommended Reading Niederst, J. (2012). Learning Web Design. O'Reilly Media, 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 5 Site Structure and Chapter 6 Page Structure Available: Page 8 of 13

9 WEEK 07 Oct Web Site Design Part 3: Interface Design Due: DUE: Assignment 03: HTML/CSS Coding Project (10 15) DUE: Exercise 05 Web Graphics Project (10 15) Mid-Term Exam Available Due October 22 Interface Design File Management Introduction to Web Authoring Tools Adobe Dreamweaver Introduction to CSS Tutorials: Creating A Website Using Dreamweaver Readings Niederst, J. (2012). Learning Web Design. O'Reilly Media, Inc. 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 7 Page Design Available: Additional Resource: Adobe Developer Center - David Powers Tutorials Building your first website - Part 1: Set up your site and project files first_website_pt1.html 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 Dreamweaver Tutorials: Lynda.com: Dreamweaver Developer Center Page 9 of 13

10 WEEK 08 Oct Web Site Design Part 4 - Development Due: DUE: Mid-term Exam (10 22) DUE: Web Site Design Part 2: Information Architecture (10 22) Introduction to CSS Rules & Formatting Cascading Style Sheets (CSS) Internal External Style Sheets Type, ID and Class Selectors CSS Properties & Values Introduction to CSS environment/tools in Dreamweaver Tutorials: Creating A Website Using Dreamweaver Introduction to CSS Available: Niederst, J. (2012). Learning Web Design. O'Reilly Meida, Inc. Chapter 12: Formatting Text- Recommended Reading Chapter 13: Colors and Backgrounds- Recommended Reading Webmonkey (2010). Web Standards for Beginners. Available: 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 Dreamweaver Tutorials: Lynda.com: Page 10 of 13

11 WEEK 09 Oct 29 Nov 04 Assignment 04 CSS Re-Design Project Due: DUE: Web Site Design Part 3: Interface Designs (10 29) Cascading Style Sheets (CSS) Properties & Values CSS Formatting & Presentation Review - Personal Web Space and File Transfer Protocol Tutorials: Box Model Properties Niederst, J. (2012). Learning Web Design. O'Reilly Media, Inc. Chapter 14: Thinking Inside the Box- Recommended Reading Online Resources W3C's Standards: CSS Zen Garden: Free CSS Templates.org: CNET Web Hosting Reviews: WEEK 10 Nov Assignment 04 CSS Re-Design Project Due: Cascading Style Sheets (CSS) Properties & Values CSS Formatting & Presentation CSS Positioning & Layout Tutorials: CSS Layouts Modifying a template based CSS layout Niederst, J. (2012). Learning Web Design. O'Reilly Media, Inc. Chapter 15: Floating and Positioning- Recommended Reading Chapter 16: Page Layout with CSS- Recommended Reading Online Resources W3C's Standards: CSS Zen Garden: Free CSS Templates.org: WEEK 11 Nov DUE: Assignment 04 CSS Re-Design Project (11 12) Page 11 of 13

12 Cascading Style Sheets (CSS) cont. Positioning & Layout Interface Design Converting layouts to HTML/CSS Tutorials: Converting design layouts to HTML (using CSS) Niederst, J. (2012). Learning Web Design. O'Reilly Meida, Inc. Chapter 17: Transitions, Transforms, and Animation- Recommended Reading Chapter 18: CSS Techniques- Recommended Reading Online Resources A List Apart: Position Is Everything: W3C's Standards: CSS Zen Garden: Free CSS Templates.org: WEEK 12 Nov Grad Project Web Style Guide Due: Work Week This week is a work week. No additional lecture material. Grad Student Project Resources: Laurinavicius, T. (2014). How To Create a Web Design Style Guide Available: Lambert, S. (2016). Creating A Living Style Guide: A Case Study Available: Cousins, C. (2013). How to Build a Brand Bible & Visual Style Guide Available: Style Guide Examples: University of Pennsylvania Style Guide IEEE Web Site Requirements and Style Guide University of North Carolina at Chapel Hill Branding & Visual Identity Guidelines BBC Programmes Styleguide Page 12 of 13

13 WEEK 13 Nov 26 Dec 02 Assignment 05 PDF Production Project Due: or Electronic Publishing Portable Document Format (PDF) Introduction to Adobe Acrobat In-Class Tutorials: PDF Production Project Navigation Examples (Optional) Alspach, J. (2005). Linking up with Acrobat Available: Adobe Creative Team. (2007). Learn How to Create Adobe PDF Files Available: Adobe Acrobat - Customer Stories customerstories/#generalbusiness Read a few of the customer success stories to learn more about how PDF is used in business/industry. Online Resources Adobe Portable Document Format: Adobe Acrobat Tutorials: Lynda.com: WEEK 14 Dec Web Site Design Part 5: User Testing Due: Work Week This week is a work week. No additional lecture material. Page 13 of 13

14 WEEK 15 Dec Web Site Design Part 5: User Testing Due: DUE: Assignment 05 PDF Production Project (12 10 or 12 20) DUE: Web Site Design Part 4: Development First draft for user testing (12 10) 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 Kirby, L. (2000). Professional Website Usability Available: FINAL EXAM WEEK (Dec 16-23) Due: Web Site Design Part 4: Development (12 17) Final edits based on user testing Web Site Design Part 5: User Testing (12 17) Graduate Research Project: Web Style Guide (12 20) Final Exam Period: May (Final Web Site Design Project must be submitted by in lieu of final written exam) Page 14 of 13