COMD 4764 Design for Mobile Devices
| Day & Time: | Wednesday, 6—9:20PM |
| Instructor: | Jerron I. Smith |
| Email: | JISmith@citytech.cuny.edu |
| Website: | https://openlab.citytech.cuny.edu/smithcomd4764sp2017/ |
Course Description
When the internet was first created the only place content could be displayed was on a smallish, computer screen with a limited color palette. Many people still design and create their interactive documents to match this paradigm. The problem is this is a completely outdated way of looking at the display mediums for interactive content. There are three major phone and tablet operating systems each with a wide range in the screen sizes of their respective devices. There are two major computer operating systems again with a wide range of screen sizes between them. Add in wearable devices, internet equipped appliances, digital signage, and email as a communication and design medium and your content has the possibility of being seen on an ever increasing and disparate set of screens.
To deal with this new reality Responsive Design was created. Responsive design is more than just a series of design or layout techniques. It is a holistic process that begins in the design and planning phases and carries through into the development phase. To work well a responsive strategy isn’t something you tack on at the end stages of a project, it has to be in the minds of the designer/developer at the beginning.
Attendance and Lateness Policies
A class roster roll will be taken at the beginning of each class. Only two absences may be allowed. After two absences, a student may be withdrawn because of unsatisfactory attendance (code WU). Students arriving after the roll is taken will be marked “late.” Students may be notified at the earliest opportunity in class after they have been absent or late. After being absent two times or equivalent (2 lateness = 1 absence), a student may be asked to withdraw from the class (code W before the College drop deadline) or may be withdrawn from the class (code WU).
Academic Integrity Standards
You are responsible for reading, understanding and abiding by the NYC College of Technology Student Handbook, “Student Rights & Responsibilities,” section “Academic Integrity Standards.” Academic dishonesty of any type, including cheating and plagiarism is unacceptable. “Cheating” is misrepresenting another student’s efforts/work as your own. “Plagiarism” is the representation of another person’s work, words or concepts as your own.
Research
A large emphasis will be placed on awareness of the design world by observing the state of design in our community: books, publications, web sources, museums and graphic art organizations. Students are expected to gather reference materials for all their projects and are encouraged to use the college’s library resources. http://library.citytech.cuny.edu.
More important than simple library research user research techniques such as but not limited to user interviews, focus groups, A/B Testing and surveys will be utilized.
Class Policies
Unless otherwise noted, projects given as Homework Assignments are due at the beginning of class and must be handed in (if physical), placed on the server, Flash Drive or sent in email to be reviewed; otherwise it is considered late.
ANY MISSED ASSIGNMENTS WILL EARN ZERO POINTS. Assignments received after the deadline will drop a grade at the end of the class. After that time period, any late assignment will earn a zero. A final folder of all projects will be handed in via DropBox, Google Drive, Creative Cloud or other file storage/sharing service along with the final project at the end of the semester.
Class Participation
You are expected to give thoughtful, constructive feedback in class. This is especially important in the UX/UI class. A large part of how we will explore UX design is via discussions. You are to be prepared for each session, meaning you will have read all required selections, performed all appointed tasks, and completed all homework. You are to do your homework with professionalism and to seek help as soon as possible.
Instructor’s Recommendations
Come to class on time: Students arriving more than 15 minutes late may be marked absent.
Attend all classes: Each week we will build on the work learned the week before. If you must miss a class, please let me know ahead of time. It is your responsibility to obtain any missed material from your fellow classmates, and to turn assignments in on time even if you are absent. Students missing more than two classes risk failing the course.
Turn in assignments on time: Homework turned in late will lose 10 points for every day that it is late. Work turned in more than two weeks from the due date will not be accepted. Project 1 and Project 2 may not be turned in late. Missing projects may result in a failing grade for the project.
Ask Questions: This is a technical class, and we will be covering a lot of information in a short time. If you are confused, lost, need clarification, etc, please don’t hesitate to ask questions in class. Chances are your fellow students will benefit from the answers AND this will add to your class participation grade! I am also available between classes via email.
SAVE, SAVE, AND SAVE AGAIN: There will be no sympathy for work lost for not saving properly.
BACK UP YOUR WORK: Murphy’s Law Applies In All Things–You will lose your flash drive or it will become corrupted. Save your work in at least two places. Cloud-based services like dropbox can work as well if not better than a computer at home.
Instructor’s Prerogative
I reserve the right to change the syllabus or grading formula as I see fit, given the composition and progress of the class. I will notify the class as to these changes in writing in a timely fashion.
Class Supplies
FLASH DRIVE: or other portable storage device. This will be used to transfer your work from home and class. Image files can be large, so make sure your flash drive is at least 8gb.
SKETCHBOOK/NOTTEBOOK: For taking notes during technical demonstrations, brainstorming sessions, and for sketching ideas for projects. YOU WILL HAVE TO PUT PENCIL TO PAPER AND DRAW. I highly recommend you use a gridded sketchbook.
INDEX CARDS & STICKY NOTES: They have a million uses.
Recommended Books
| Mobile First
Luke Wroblewski, A Book Apart (2012) ISBN: 978-1-937557-02-7 |
Responsive Web Design
Ethan Marcotte, A Book Apart (2011) ISBN: 978-0-9844425-7-7 |
| Programming the Mobile Web
By Maximiliano Firtman, Publisher:O’Reilly Media, Released: July 2010 |
Additional Class Resources
https://docs.google.com/document/d/1oWRdQ-PlJ7hql93bmsTZ-P7hya_lE23bBJC9ThYptiI/edit?usp=sharing
Grading Formula
| Grade | Numerical | Meaning of Grade |
| A (Excellent) | 4.0 | Represents exemplary work. Work consistently exceeds expectations of professional craft and quality. |
| B+ | 3.5 | |
| B (Good) | 3.0 | Work meets basic expectations of professional craft and quality. |
| C+ | 2.5 | |
| C (Satisfactory) | 2.0 | Work does not meet professional expectations of craft and quality. |
| D (Unsatisfactory) | 1.0 |
Grading Criteria
The final grade for this course will be determined by the grades each student earns on the following projects and assignments. The grading is done using a numerical point system with each gradable assignment worth a certain maximum number of points. The maximum numerical value that is possible exceeds 100, allowing a student to make up for a weak showing in one area with a stronger final project.
| Project/Assignment | Maximum Value |
| Competitive Research | 5 pts |
| SiteMap & Wireframes | 10 pts |
| Moodboard & Style Tile | 20 pts |
| Mockups | 20 pts |
| Final Responsive Site | 40 pts |
| Attendance & Participation | 10 pts |
| Total: | 105 pts |
The numerical grades are then converted to alphabetical grades based on the following conversion chart:
| Range in % | Letter Grade | Range in % | Letter Grade |
| 95-100 | A | 72-77 | C |
| 90-94 | A- | 70-71 | C- |
| 88-89 | B+ | 68-69 | D+ |
| 82-87 | B | 62-67 | D |
| 80-81 | B- | 60-61 | D- |
| 78-79 | C+ | 0-59 | F |
Project Breakdown
| 1: Competitive Research | 2: SiteMap & Wireframes | 3: Moodboard & Style Tiles |
| 4: Working Prototype | 5: Final Responsive Site |
Topical Outline
| Topic 1: Understanding the Internet of Things
History of the Internet & WWW | Web Design Layout Strategies | Understanding Frameworks and Methodologies | Separation of Content from Formatting | Screen Size & Pixel Density |
Topic 2: Navigational Methodologies
Menu Bars vs Hamburger Menus | IOS Human Interface Guidelines | Google Material Design |
| Topic 3: Modern Mockup and Prototyping Techniques
Wireframing & Prototyping | Designing in Browser | Mobile First vs Desktop First vs Simultaneous Design |
Topic 4: Responsive Image Methodologies
Flexible Images | Src Sets |Addressing Retina Displays | Preparing Images in Photoshop |
| Topic 5: Conducting Research
User Research Techniques | Competitive Analysis Techniques | Understanding Market Research |
Topic 6: User Testing
Conducting User Interviews | A/B Testing | Mock-up and Prototype Testing |
| Topic 7: Creating HTML Email
HTML Email Design Considerations | Responsive Design Techniques for Email | |
Week by Week Outline
| Session 1: Initial Meeting
Welcome to class — Review of Syllabus — Review of Facilities — Review of Student Proficiencies — Introduction of Class Project |
|
| Session 2: The Internet of Things — Modern Web Design Considerations — Review of Project Sites | |
| Session 3: Conducting Competitor and User Research — Developing Your Knowledge of Your User | |
| Session 4: Presentation of Research | |
| Session 5: Personas & Scenarios Due — Understanding Your Customer’s Journey | |
| Session 6: Site Mapping & Wireframing Due — Prototyping/Designing in the Browser | |
| Session 7: Responsive Image Solutions — Adding Media Queries | |
| Session 8: Skeleton — Prototype (Based on Wireframes) Site Due — Creating the Look & Feel of your website | |
| Session 9: Moodboards & Style Tiles Due — Creating Artboards to Mock-up Multiple Screens | |
| Session 10: Mockups Due | |
| Session 11: Lecture — HTML Email Marketing — Designing Responsive HTML Emails | |
| Session 12: Lab — Review for | |
| Session 13: Final Site Due — Ver. 1 | |
| Session 14: Lab — Review for Final Presentation | |
| Session 15: Final Presentation — Final Site Due — Ver. 2 |
