GRDSN Web/Interactive Design 2 Spring 2014

Transcription

1 College of DuPage GRDSN Page 1 Spring 2014 Semester GRDSN Web/Interactive Design 2 Spring 2014 Instructor: John Callegari Professor/Coordinator, Graphic Design at College of DuPage (630) Class Schedule: Credit Hours: Monday and Wednesday mornings, 8:00 am to 10:50 am 3 (6 lab hours) Course Location: MAC 259 Prerequisites: GRDSN 2202 Web/Interactive Design 1, or Consent of Instructor Course Description Development of web and interactive design concepts and processes through advanced projects. Planning and development of web site design, digital portfolio, mobile interface design, menus, screens, and Flash-based sites are explored using current authoring tools and techniques. Use of Adobe Flash is emphasized in creation of projects. General Course Objectives Upon successful completion of the course the student should be able to do the following: 1. Analyze client needs and audience response when undertaking web design projects 2. Develop information design flowcharts for non-linear environments 3. Apply interactive design principles to create original media-rich projects 4. Create, review, and edit content for web/interactive designs 5. Create web/interactive designs using current computers and web and media-rich authoring software 6. Combine and organize typography, imagery, and color effectively to create interface designs 7. Create, edit, and optimize graphics for use in interactive projects 8. Organize and manage project computer file assets 9. Perform usability testing on interactive design projects 10. Review and analyze aesthetic value of interactive designs in group critique presentations Topical Outline 1. Rich media interface design 2. Project research a. Client b. Audience c. Content 3. Interactive concept and design a. Research, planning, and information design b. Concept development c. Design and implementation of interactive elements d. Screen prototype development 4. Web/interactive authoring technologies and techniques 5. Web/interactive design projects a. Web site b. Mobile interface design c. Menus d. Digital portfolio 6. Usability testing 7. Presentation

2 College of DuPage GRDSN Page 2 Spring 2014 Semester Textbooks / e-learning Resources Required: Interactive Design An Introduction to the Theory and Application of User-Centered Design Author: Pratt & Nunes, Publisher: Rockport, ISBN: Recommended: The Mobile Web Designer's Idea Book, Author: McNeil, Publisher: How Books, ISBN: How to Think Like a Typographer in HTML & CSS, Author: Laura Franz, Publisher: Wiley, ISBN: REQUIRED E-LEARNING One semester class subscription to Lynda.com covering 5 titles ($37.00 class subscription) You will receive an invitation to subscribe, sent to your cod account. Photoshop for Web Design (Seeley, 4h 56m) Dreamweaver CS6: Essential Training (Williamson, 9h 24min) Responsive Design with Dreamweaver CS6 (Lowery, 2h 6min) Typography with CSS in Dreamweaver (Lowery, 2h, 30m) Layouts with CSS in Dreamweaver (Lowery, 3h, 33m) Class Resources Obtain additional class resources from your Blackboard access for this course. 2013SP_GRDSN _04966: GRDSN Web/Interactive Design 2 Required Course Supplies 1. Sketchbook (for all project ideation) 2. USB hard drive, or 2 3 USB Flash Drives for backup of projects and project resources 3. ISP (Internet Service Provider) for uploading and testing web site content. FREE: Use free academic web hosting account (+domain) a. Limited to 9 months (you will have the option to renew subscription at that time) PAID: Sign up for Domain Registration/ Web Hosting companies (such as Go Daddy)

3 College of DuPage GRDSN Page 3 Spring 2014 Semester General Course Policies In-class work: Class time is for instruction, demonstration and project development, including lab time. All major projects will be started and worked on during class. Homework: *For every studio hour of credit representing one hour each week of the term in class, THREE hours of work a week are expected beyond the class meeting time. Students will be expected to complete a minimum of three six hours of additional work each week in homework and course activities. Additional computer work for projects may be performed outside of class during open lab times, or at home if you have the appropriate tools. Late Withdrawal policy: Non-attendance does not count as a withdrawal. Late withdrawal (after midterm) will require a permit to withdraw from the instructor, assigned or not at the instructor s discretion. Late withdraws will not be granted to students who are using it as an opportunity to avoid a low or failing grade. Make-up Policy: Late work will only be accepted 1 class period after it is due. Course materials: Always bring all your materials to every class session (research, sketchbook, photos, illustrations, backup media, electronic resources, reference books, etc). If you are not prepared to work, this will affect your ability to adequately participate in class activities and will have an adverse affect on your grade. Projects/due dates: Instructor reserves the right to update and/or change projects, or due dates. Projects ready on due-dates: On project due dates, there will be no lab time available for project preparation. All projects are to be ready for presentation at the beginning of the class period. Project completion: Portfolios are cumulative, not selective: you must complete every assignment. Special Needs: Any student who has special needs (difficulty hearing or a learning disability) should talk to me in the first week of class so that suitable arrangements can be made. Pass/Fail option must be requested by the end of the fourth week of the quarter. Students must maintain a C or better grade. Student conduct: All students will be expected to conform to the Standards of Conduct as described in the current ( ) College of DuPage catalog. Inappropriate use of class/lab time: Only work related to this class (GRDSN 2206) is to be done in class. Class/Lab time is not to be used inappropriately for personal social networking, checking personal , texting, or working on any assignments for any other class. Network printing: Lab printers are for the exclusive use of this class, while class is in session. Absolutely no coursework outside of the Graphic Design program is to be printed to the black and white printer. Silence phones during class periods. Use break time to return calls, texts, etc. Incomplete Grade Policy: Web Design is a rapidly evolving field: there will be no incompletes given in this class. Finals week is reserved for final exams or other culminating activities, as specified by your instructor. Final exam/culminating activity schedule is: MONDAY, MAY 12 th, 12:00pm 1:50pm Student project submissions: Always back up all coursework to your folder on the 2206 Fileserver for grading. Submitted artwork may be used in various displays such as gallery shows, hallway displays, web sites, etc. Therefore, always include the following when submitting artwork: your name, class number, and assignment name. Absence/Tardiness Policy This is the capstone course in the Graphic Design program treat this course as you would a professional job. Late work or excessive tardiness/ absenteeism will severely affect your performance and your grade. Attendance is required. A substantial amount of work is done is class. Since it is impossible to contribute to class discussions if you do not attend, your performance will suffer every time you miss a session. Thus, if you miss more than three classes for any reason, it will affect your semester grade. Do not arrive late for class: Each session is packed with information: to end on time, we must start on time. Repeated tardiness will count as an absence. Class participation: When in class, you should be prepared to work. Participation, work in class, and ability to make comments and suggestions during critiques is also very important. *NASAD/ICCB compliance

4 College of DuPage GRDSN Page 4 Spring 2014 Semester METHODS OF EVALUATING STUDENTS Grading Students will be responsible for the completion of projects for grades. Participation in individual and/or group critiques and class attendance will also be a factor in evaluation. All assignments must be completed and turned in on specified due dates, as indicated in course outline. Course grade will be determined by the total of all project grades. Final letter grades assigned will be either A, B, C, D, or F. Grade Scale (total semester points) = A = B = C = D 119 & below= F Grading Criteria Individual projects will be rated in several categories. Each category is worth 5 points. Projects total 25 points. 1. Communication: Have project objectives been met? 2. Aesthetics: Have appropriate design elements and principles been used to arrive at an effective design solution? 3. Implementation/Execution: Were computer design tools used appropriately? Was design produced and prepared at a level suitable for inclusion in a portfolio? Is design at the correct finished size? 4. Critique: Was student present for project critique? Did designer present & participate in critique discussion? Did designer successfully defend design? Did designer participate in discussion of other classmate s work? 5. Overall Creativity: How well does design display a unique and innovative approach? Critiques Students will present each project, followed by an informal, friendly and constructive critique by the instructor and the class. Project grades will be determined by appropriateness and creativity of the recommended design, and level of skill displayed in visual presentation of the recommended design. Neatness of the presentation will count for a part of the grade. An automatic point deduction of -5 points will occur for late projects or critique participation category if the student is absent on the presentation date. Academic Honesty: Plagiarism Plagiarism is defined as copying, stealing or passing off as one's own ideas, the words or works of another. The goal of Graphic Design students at College of DuPage should always be to create highly individual work, executed in a distinctly personal style. Students found to have committed plagiarism in the process of producing work for class projects are subject to severe disciplinary actions. Depending on the severity of the occurrence, penalties may range from a failing grade for the affected project to immediate withdrawal from the class where the plagiarism occurred, to outright expulsion from the College. While the appropriate use of photographic reference material created by others while developing a broader design or illustrative composition is acceptable, simply copying and "tweaking" another's work and claiming it as one's own is not. If you find yourself in an ethically questionable situation, ask the advice of your instructor before proceeding.

5 College of DuPage GRDSN Web/Interactive Design 2 Spring 2014 Course Outline page 1 Week 1 Semester Begins 1/15 KEY n = Project 1: Content-Based Website n = Project 2: Responsive Design n = Project 3: HTML Newsletter n = Project 4: Native Mobile App n = Project 5: Interactive Portfolio Course overview Assign Project: Design blog Project 1a: Content-Based Website Planning Topic: Dreamweaver Review Site definition, FTP setup, Linking CSS Homework: Project 1a Planning > Research, content, wireframes, design brief Week 2 NO CLASS MLK DAY 1/20 1/22 Project 1b Dev: Dreamweaver Site setup, Develop CSS wireframe Project 1a: Planning Due Topic: Wireframing CSS Layout Blog Post 1: Project 1a Research, Content, Sitemap Lynda.com: Dreamweaver CS6 Essential Training (review) Week 3 1/27 Project 1b: Complete CSS wireframe development, Kits, customize html tags Assign & discuss: Project 2a-Responsive design Blog Post 2: Project 2a: Responsive Design research, site map Lynda.com: Responsive Design Fundamentals Dreamweaver CS6 Ess Training -Topic: Styling content -CSS list navigation -CSS3 code hacks Lynda.com: Responsive Design Fundamentals 1/29 Week 4 2/3 -Develop minimum of 2 pages Topic: Techniques for creating illustrative type using css Blog Post 3: Project 2a-Wireframes, concept sketches (+3 desktop, tablet, phone) Lynda.com: Responsive Design Fundamentals -2 pages minimum -Upload to ISP. Backup of 2206 fileserver Lynda.com: Photoshop for Web Design 2/5 Week 5 2/10 -Project 1 due today 2 pages minimum developed -Project 1 QUICKCRIT -Upload to ISP. Backup of 2206 fileserver Lynda.com: Photoshop for Web Design 2/12 Project 2a: Responsive Design mockups in (Photoshop +3 screen sizes) Topic: Creating mockups for multiple screen sizes -varying screen size, grid, image size Blog Post 4: Project 2a Responsive Design -Rough comps drawn (desktop, tablet, phone) Lynda.com Photoshop for Web Week 6 2/17 Project 2a: Responsive Design mockups in Photoshop -Develop 3 mockups for each screen size (desktop, tablet, phone) Topic: Optimizing images for the web Lynda.com Photoshop for Web Responsive Design Fundamentals Week 7 2/24 Topic: Managing fluid-grid.css, adjusting fluid grid Responsive Design Fundamentals -Site setup, Develop CSS fluid grid in Dreamweaver Topic: Fluid grids and media queries -creating a fluid grid layout in Dreamweaver Blog Post 5: Project 3-HTML research Topic: HTML Blog Post 6: Project 3 HTML wireframes and concepts 2/19 2/26 Week 8 3/3 Topic: Media queries Responsive Design Fundamentals Topic: Testing responsive designs Blog Post 7: HTML banner rough comps (drawn) 3/5

6 College of DuPage GRDSN Web/Interactive Design 2 Spring 2014 Course Outline page 2 Week 9 3/10 Topic: HTML standards (Due today) -Project2b QUICKCRIT Blog Post 8: Project 4 Native Mobile App research, site map, wireframes 3/12 Week 10 3/17 Project 3: HTML Newsletter Design -Create Mockup in Photoshop Topic: Rapid prototyping in Fireworks -working with pages, layers, text and graphic elements Project 3: HTML Newsletter Design -Complete HTML Newsletter Mockup -Newsletter Design development in Dreamweaver Topic: Constructing newsletter using tables and inline CSS Blog post 9: Project 4 Native Mobile App concepts, rough comps 3/19 Week 11 3/24 Project 3: HTML Newsletter Design development Topic: Native App Interface Design -Native vs mobile web Project 3: HTML Newsletter Design development -Complete HTML Topic: Creating an campaign in MailChimp 3/26 Blog post 10: Project 5 Interactive Portfolio Design research, site map wireframes Week 12 NO CLASSES SPRING BREAK 3/31 Project 4: Native Mobile App Interface Design rough comps Blog post 11: Project 5 Interactive Portfolio Design research, logo & screen concepts 4/2 Week 13 4/7 Project 4: Native Mobile App Interface Design -Develop mockup in Photoshop -use supplied iphone chrome (on server) -Creating and setting master page creating pages from master & adding pg content Research / Personal logo / wireframes / visual design concepts Project 4: Native Mobile App Interface Design -Develop mockup in Photoshop -Complete mockup - 3 screens Blog post 12: Project 5 Interactive Portfolio Design rough comps + logo 4/9 Week 14 4/14 CRITIQUE DAY Project 3 QUICKCRIT Project 4 QUICKCRIT Project 5: Evaluate Interactive Portfolio rough comps Homework: Revise comps per disscussion -Develop portolio screen mockups in Photoshop Blog post 13: Project 5 Interactive Portfolio Design Logo design & Mockup creation 4/16 Week 15 4/21 Topic: Gallery image size consistency, optimization Homework: Assigned reading e-learning Week 16 4/28 Topic: Creating gallerys / lightbox -Customizing lightbox jquery & CSS Homework: Assigned reading e-learning Week 17 5/5 Topic: Interactive elements Blog post 14: Project 5 Interactive Portfolio Design Mockups Topic: Creating gallerys / lightbox -Customizing lightbox jquery & CSS COMPLETE BLOG PROJECT DUE TODAY Project 5: Interactive Portfolio Design - Critique Interactive Portfolios 4/23 4/30 5/7 Week 18 5/12 FINAL EXAM: 8 AM 9:50 AM -Submit final Digital Portfolio with revisions to server -Deploy digital portfolio