Syllabus
Interactive Web Design I · DM2280B spring 2013 · Corcoran College of Art + Design
Instructor: David Ramos
alberto_ramos@corcoran.edu
We are in an astonishing moment. What does it mean when a person can carry the Internet in a pocket? What happens when books start to think and to move? How might mobile computing shape culture and society? This course operates in the area where technology and design meet, seeking to answer questions about what the mobile world can be.
Description
New handheld, touchscreen devices have brought us to the edge of a new way of reading, one that brings together print, time-based, and interactive media. This course explores ways of telling stories and creating experiences in this new environment. Projects target the iPad, with workflows built around InDesign, but incorporating images, sound, video, and interactivity.
Approach
“Anything that can be connected to the Internet, will be.” (Luke Wroblewski)
Students will study the design challenges and possibilities that mobile devices bring. The class considers the effects of touch interfaces, Internet access everywhere, location awareness, and unpredictable contexts for use. It asks whether new, mobile devices can, perhaps, make the world slightly easier, more equitable, and enjoyable.
The class introduces three current approaches: Adobe’s digital publishing platform, HTML/CSS-based mobile-friendly websites, and interactive and paper prototypes. Prototyping and documentation are central concepts.
At the level of culture, this class examines changes in publishing, the future of technology and reading, and the broadening scope of design practice. Projects are open-ended, and require students to bring an editorial stance to their work.
Objectives
Students will:
- Explore art direction and narrative for tablet publications
- Study interaction design for mobile applications
- Apply user-centered design methods
- Build paper and electronic prototypes
- Study ways of building responsive websites for mobile browsers
- Produce projects in Adobe Folio Producer, PDF, and HTML/CSS/JavaScript
- Consider usability and accessibility
- Examine the social effects and potential of mobile computing
Structure
This class will be a mix of demonstrations, discussion, critiques, and studio working sessions. It requires extensive self-scheduled project work outside of the classroom.
Projects
Students will produce a mixture of sketches, prototypes, documentation, and finished artifacts. Projects are student-driven, using prompts as the starting points for more extensive research, asking students to create their own content and to supply their own point of view.
Sequence
The course opens with a one-week-long project, introducing design concepts that are essential to work later in the semester. This project explores type and image, sequencing, and the reading experience on screen.
Location
Design a mobile website or smartphone application that responds to a user’s geographic location. Develop your design through critiques and usability testing. Explain your design in a screen/print booklet.
Narrative
Working from a prompt, create an electronic publication that explores a topic. Design for a tablet. Bring together text, images, and time-based media, advantage of the tablet’s screen and multimedia capabilities. Consider narrative structure and navigation systems.
Semester project
Imagine a design question that you would like to study, within the framework of mobile computing. Examine that question by making something that runs on a mobile computer – a book, an app, a magazine, a website, or something entirely different. Create working prototypes, documentation, or final pieces, using the tools and methods taught in this course.
Process book
Create a PDF process book. Include sketches, versions of projects as they progressed, and images of final projects.
Grading
20% Location
25% Narrative
33% Semester project
12% Process book and other projects
10% Participation
Code/No Code
If designers do not learn to work with technology, they surrender their say in shaping new media. Some topics covered by this course involve work with HTML, CSS, and JavaScript; and some in-class exercises will require writing code. Nevertheless, student experience and familiarity with development tools varies, and for all graded projects, students will be able to choose between coding and non-coding approaches.
Tools + resources
Texts
This course draws on assigned readings and two required textbooks.
Wroblewski, Luke. Mobile First. New York, N.Y.: A Book Apart, 2011.
http://www.abookapart.com/products/mobile-first
Moggridge, Bill. Designing Media. Cambridge, Mass.: MIT P., 2010.
www.designing-media.com
Mobile First is available in print and as an ebook. Throughout the course, we will be reading excerpts from Designing Media, available in print and as free PDF downloads.
Required software + tools
- Google Chrome Canary
- Adobe InDesign CS or CC, with Folio tools installed
- USB flash drive
- Backup system (three devices in two locations)
- Paper or sketchbook; pen or pencil
- Scissors or craft knife; tape or glue
Recommended
- Smartphone or tablet – any OS and manufacturer
- PDF viewer software for mobile devices (like GoodReader for iOS)
- iOS Simulator (part of Apple Xcode)
- HTML/text editor or Dreamweaver
- CSS editor
- Adobe Photoshop (available in Corcoran labs)
- Digital camera
- Grayscale and colored markers
Smartphones and tablets
Develop and test by making browser windows smaller or by using environments like Apple’s iOS Simulator and Adobe’s Folio Producer preview tool.
Backup strategy
Loss of data is not an excuse. Back up your work. An adequate backup plan involves duplicating your work across three different storage devices, kept in two separate locations.
Work
Process
This course seeks to help students to develop their own working processes. Good final projects invariably come as the result of diligent, structured work earlier in the semester. Do not leave work for the last few weeks. You will need to turn in your process work as part of your grade. Keep versions of your files and paper sketches as they progress. Never delete the files for anything you show in a critique.
Presenting work
If you are bringing work on paper for critiques – an excellent idea for sketches, wireframes, and design documentation – remember that other people in the class must be able to see your work. You need not mount any work from this course.
In the interest of efficiency and equity, HTML-based projects will be evaluated using a current build of Mobile Safari on iOS. You should test projects using real or simulated devices.
Submitting work
Follow these steps to submit files. If your instructor cannot readily identify or review your projects, you will not receive a grade.
- Put the files into a folder.
- Name the folder with your first and last names and the project title.
- ZIP compress the folder.
- Make sure that the name of the ZIP file contains your first and last names, and the project title.
You may send the following file formats: PDF, .folio, HTML/CSS/JS, JPG, PNG, MOV, MP4, MP3, AAC, and TXT. Your instructor will not grade InDesign, Illustrator, or Word files.
Policies
Attendance
Students are expected to attend scheduled class sessions and course-related activities. Two unexcused absences will reduce a student’s semester grade by one letter grade. A third unexcused absence is cause for failure of the course. Grounds for excused absences are illness, family emergencies, jury or military service, and religious obligations.
Grading scale
A 4.0 Outstanding work
A- 3.7
B+ 3.3
B 3.0 High-quality work
B- 2.7
C+ 2.3
C 2.0 Acceptable work; meets expectations
C- 1.7
D+ 1.3
D 1.0 Seriously deficient work
D- 0.7
F 0.0 Failure (no credit)
Resubmitting work
Students may revise and resubmit projects for a new grade before the end of the semester. Late work will be marked down.
Classroom rules
- Please silence ringers on phones
- No cellphone conversations in the room
- No headphones, email, texting, IM, or web browsing during critiques, discussions, and presentations
Intellectual honesty
The Corcoran Honor Code applies in this course. Please cite the work of others. Do not borrow projects from other students or reuse work from other classes without permission. Plagiarism or cheating are grounds for failure on an assignment; repeated plagiarism or cheating results in failure of the course. If in doubt about how and when to cite, please ask the instructor or a librarian.
Code citations: If you use any code from a source outside of the textbook and class demonstrations, insert a comment describing the material that you used, along with a URL for the original code.
College policies
Please review the Corcoran Honor Code and Attendance Policy, as published in the Student Handbook.
Academic accommodations
If you have specific learning, attentional, psychological, or physical disabilities and require accommodations, please let me know early in the semester so that your learning needs can be appropriately met. All discussions will remain confidential.
If you have not already registered with Amanda Kleinman, the Learning Specialist in Student Affairs, you will need to register and provide documentation of your disability. Please contact Amanda to request an appointment at akleinman@corcoran.org or 202-639-1865. You can also stop by Amanda’s office in Student Affairs, at the downtown campus.
Published 2013-08-05.