COMD3562: UX and UI Design
Total Page:16
File Type:pdf, Size:1020Kb
Communication Design Dept New York City College of Technology The City University of New York Department of Communication Design COMD3562: UX and UI Design Course Description Building on skills learned in COMD 3551, topics include advanced CSS, Javascript and Flash integration. Students work with clients to design and construct a professional working website following contemporary web and accessibility standards. Software such as Dreamweaver and Flash are used for construction and maintenance. A working knowledge of XHTML and CSS is required. 2 cl hrs, 2 lab hrs, 3 cr. Prerequisites COMD 2451 Web Design I Course Objectives INSTRUCTIONAL OBJECTIVES ASSESSMENT For the successful completion of this course, students should be able to: Evaluation methods and criteria Define and explain basic concepts of Students will demonstrate competency in UI/UX, Information architecture, product written exercises and presentations management and the role of Designers. leading up to an investor pitch. Define and explain the applications of Students will demonstrate competency by UI/UX, Information architecture and completing two projects and presenting product management. Demonstrate their process. production workflow methodologies (like AGILE) to tackle complex problems in order to come up with a pertinent design solution. 1 Communication Design Dept INSTRUCTIONAL OBJECTIVES ASSESSMENT Demonstrate a proficiency in using current Group and individual interaction projects. industry-standard IA tools and methods. Demonstrate how to choose the most appropriate method or approach for a specific project. Speaking: the student will demonstrate the Evaluate through class discussion and ability to articulate him/herself using two project presentations. relevant industry-specific vocabulary Social Interaction: The student will Evaluate the collaboration and integration demonstrate the ability to work in teams, of the team during the group project, including people from a variety of class participation and group backgrounds, and build consensus. presentation. Teaching/Learning Method ● Lectures and readings ● Demonstration ● Project based labs ● Research assignments ● Blackboard Required Text None Suggested Text: Web Analytics Demystified Eric T. Peterson Celio Media Group ISBN:0974358428 Attendance (College) and Lateness (Department) Policies: Attendance is taken and is important to success in this class. Both absences and arrival more than 15 minutes after the start of class will be marked. If excessive, the instructor will alert the student that he or she may be in danger of not meeting the course objectives and participation expectations, which could lead to a lower grade. Academic Integrity Standards Students and all others who work with information, ideas, texts, images, music, inventions, and other intellectual property owe their audience and sources accuracy and honesty in using, crediting, and citing sources. As a community of intellectual and professional 2 Communication Design Dept workers, the College recognizes its responsibility for providing instruction in information literacy and academic integrity, offering models of good practice, and responding vigilantly and appropriately to infractions of academic integrity. Accordingly, academic dishonesty is prohibited in The City University of New York and at New York City College of Technology and is punishable by penalties, including failing grades, suspension, and expulsion. Grading Assignment 1 - Group Project ....................20% Assignment 2 - Investor Pitch 1 .................10% Assignment 3 - Individual Project Part 1 .....10% Assignment 4 - Individual Project Part 2 .....25% Final Presentation .......................................15% Class Participation........................................20% Total............................................................100% Topics WEEK Lecture Topic Laboratory Exercise Homework Assignment ● 1 ● Introduction & ● Review course ● Reading + Identifying Terminology syllabus problems and pain ● Confirm prerequisites ● Break students into points of daily life. ● fining basic UX & UI groups who are terms, introduction to the assigned website AGILE workflow. with significant traffic for analysis. This is a group project. ● 2 ● Proposing a design ● Assignment 1 kick- ● Reading + Problem problem off: Conducting Definition (300 words) ● Methodologies for user research, + PDC Outline. defining a Design Site/Content Map, Problem. The Product Wireframing Development Cycle. basics, Technical considerations. ● Balsamiq overview ● 3 ● Defining the user ● Implement lecture ● Reading + Features vs. ● Problem Definition into assignment 1 Benefits outline + Review, Features vs. PODs + 3 Personas + 3 Benefits, Competitive Use-Cases analysis, ● Points of Difference, Intro to Use-Cases & Personas. 3 Communication Design Dept WEEK Lecture Topic Laboratory Exercise Homework Assignment ● 4 ● Business Models & ● Business model ● Reading + Fill the Market Research canvas, Five Force BMC, FFMA and MS Market Analysis, + 3 Use-Cases. Market Sizing. ● 5 ● User Research & ● Assignment 1 due. ● Reading + Conduct Wireframing ● Conducting user User Research (10-20 research, Users) + Site Map + Site/Content Map, Initial Clickable Wireframing ● Wireframing (Home + basics, Technical Navigation) considerations. ● Balsamiq overview ● Assignment 2 kick-off. ● 6 ● Assignment 2: ● Research for ● Research and Presentations Review Assignment 2 documentation for ● Site Maps, Wireframes & Assignment 2 Presentation Guidelines. ● 7 ● Assignment 2 Final ● Presentations ● Begin research and Presentation documentation for ● Assignment 2 due. Assignment 3 ● Group Presentations. ● Assignment 3 kick-off. ● Present & Select Assignment 3 Ideas. ● 8 ● Building a Brand I ● Research and ● 10 Identity Sketches + ● Creating brand guidelines design for brand 3 Personas + 3 Use- for interactive development Cases applications. ● Select final Assignment 3 Idea ● 9 ● Building a Brand II ● Development and ● Complete design ● Selecting & expanding a design of brand process for brand design for interactive identity identity applications. ● HW: Develop selected design into brand guideline + 3 Use-Cases + Initial Wireframes ● 10 ● From Brand to UX ● Assignment 3 due. ● Sitemap + Refined ● Wireframing workflows ● Presentations Initial Wireframes + 3 ● Translating brand User Flows guidelines to UX for interactive applications. ● Sketch 3 Overview. 4 Communication Design Dept WEEK Lecture Topic Laboratory Exercise Homework Assignment ● 11 ● Wireframing ● Research and ● Finished Wireframes, ● Wireframing review. development of Home Page Branded ● Sketch 3 Q&A wireframes Design + ● Pitch Guidelines Presentation Outline ● Assignment 4 kick-off ● 12 ● UI Design ● Sketching ● Reading + Expand ● Final wireframe critique. following UI design Design to demonstrate ● Sketch 3 Q&A parameters User Flows + Pitch Sketch ● 13 ● UI Design ● Group critique and ● Reading + Refine User ● User Flow Review workshop Flow Design + Refined (Group Crit) + Pitch Sketch Workshop. ● 14 ● Individual Reviews ● Individual reviews ● Finish Pitch ● Assignment 4 due. and design pitch Presentation ● 15 ● Finale Presentation: ● Final presentation Investor Pitch Investor pitch Bibliography http://en.wikipedia.org/wiki/Web_analytics Accessed 1/11/09 Advanced Web Metrics with Google Analytics Brian Clifton Web Analytics Demystified Eric T. Peterson Celio Media Group ISBN:0974358428 http://www.seomoz.org http://www.searchengineland.com http://www.toprankblog.com http://www.gottaquirk.com http://thelinkspiel.blogspot.com http://www.google.com/webmasters/tools http://googlewebmastercentral.blogspot.com http://www.google.com/analytics/ http://analytics.blogspot.com http://www.mattcutts.com http://ysearchblog.com 5 .