3 credits, 2 hours lecture, 2 hour lab
Building on the principles learned in introduction to multimedia, students will learn to manipulate graphics and text in more sophisticated ways for use in print layout as well as multimedia. An emphasis will be placed on design concepts for the creation of pages.
A course repository of HW Readings, Lab Praxis, and Final Project Directions/Commentary/Resources https://github.com/EliCash82/MMP-200
This course is praxis based. Students will be asked to share their work via the VOCAT system. This will be done by sharing screenshots of HTML/CSS/JS files as well as raw media files for evaluation.
"Developed at the City University of New York in dialogue with faculty and staff, Vocat extends the boundaries of the classroom by facilitating detailed formative and summative feedback on a variety of media types."
MMP 100
| Course Student Learning Outcomes (Students will be able to…) | Measurements (means of assessment for student learning outcomes listed in first column |
|---|---|
| Create web pages compliant with HTML web standards. | All assignments and quizzes |
| Use CSS to style web pages. | All assignments and quizzes |
| Use visual design principles to design HTML/CSS layouts. | Assignments and final Project |
| Choose, organize and label content appropriate to site’s purpose, audience and context. | Assignments & Final Project |
| Plan and develop a complete website that responds to predefined goals and is organized and designed to serve specific audience groups. | Final Project |
| Design rich media and/or interactions that enhance meaning and user experience. | Final Project |
- HTML Cheat Sheet: https://github.com/gendx/html-cheat-sheet
- Bootstrap documentation: https://getbootstrap.com/docs/4.1/getting-started/introduction/
- PureCSS framework documentation: https://purecss.io/start/
- Online text will be assigned (Not preplanned to keep with current design trends, data feed articles from across channels)
- https://www.reddit.com/r/web_design
- O'Reilly HTML5 Pocket Reference
- CSS Zen Garden: http://www.mezzoblue.com/zengarden/alldesigns/
- Why's poignant guide to Ruby: https://poignant.guide/book/
- A USB drive https://www.amazon.com/SanDisk-Cruzer-Glide-Flash-Drive/dp/B008AF380Q/ref=sr_1_1_acs_ac_1?s=electronics&ie=UTF8&qid=1535600069&sr=1-1-acs&keywords=usb+flash+drive. - any flashdrive, this was the cheapest one I saw after a quick search. Most homework will be turned in via VOCAT, but some may opt to use flash drive to turn in assignments.
- Github Access (NO PERSONAL ACCOUNT REQUIRED - ONLY ACCESS TO PROFESSOR'S GITHUB COURSE REPOSITORY IS REQUIRED)
- Students will use computers and Adobe software to work on web design projects in class.
- Professor will be using GIMP (GNU Image Manipulation Program) https://www.gimp.org/ for several in-class demonstrations, for those with their own computer this is a free and open source software package. Those that are more comfortable using Photoshop are welcome to do so.
- You will need a text editor for this class, while there are some minimalist options like Notepad, professor recommendation is ATOM https://atom.io/ A class website is forthcoming.
Grades will be decided based on timely submission, efforts and results of assignments.
- Assignments 1-6: 40%
- Midterm Proposal: 25%
- Final Project: 25%
- Class participation: 10%
- HTML/CSS
- HTML5 semantic elements
- CSS selectors
- CSS Typography
- HTML/CSS layout (with floats)
Website project planning
- Development of project objectives
- Understanding target audience, personas and scenarios
- The creative brief
Information Architecture
- Content selection
- Content outline
- Taxonomy
- Site mapping
User Interface design
- Visual principles: visual hierarchy, grouping, consistency
- Information design: data-ink ratio, chunking
- Interaction design: Feedback, affordances, constrains, visibility
- Mental models
- UI Patterns
- Common patterns of responsive UI
- Wireframing
Visual design
- Typography for the web
- Layout and Grid design for the web
- Style tiles
Prototyping with CSS frameworks/Bootstrap
Using Bootstrap components and jQuery plugins
Below are the college’s general education learning outcomes, the outcomes that checked in the left-hand column indicate goals that will be covered and assessed in this course. (Check at least one.)
| General Education Learning Outcomes | Measurements (means of assessment for student learning outcomes listed in first column |
|---|---|
| Communication Skills- Students will be able to write, read, listen and speak critically and effectively | Class critiques, project briefs and quizzes |
| Quantitative Reasoning: Students will be able to use quantitative skill and the concepts and methods of mathematic to solve problems. | n/a |
| Scientific Reasoning– Students will be able to apply the concepts and methods of the natural sciences | n/a |
| Social and Behavioral Science– Students will be apply the concepts and methods of the social sciences | n/a |
| Arts & Humanities– Students will be able to develop knowledge and understanding of the arts and literature through critiques of works of art, music, theatre and literature. | Design assignments and class critique discussions. |
| Information & Technology Literacy– Students will be able to collect, evaluate and interpret information and effectively use information technologies. | Design assignments, project briefs and quizzes |
| Values– Students will be able to make informed choices based on an understating of personal values, human diversity, multicultural awareness and social responsibility. | Design assignments, project briefs and class critique discussions. |
At BMCC, the maximum number of absences is limited to one more class hour than the contact hours as indicated in the BMCC college catalog. For example, you may be enrolled in a four-hour class that meets four times a week. You are allowed five hours of absence, not five days. In the case of excessive absence, the instructor has the option to lower the grade or assign an F or WU grade. ACADEMIC ADJUSTMENTS FOR STUDENTS WITH DISABILITIES Students with disabilities who require reasonable accommodations or academic adjustments for this course must contact the Office of Services for Students with Disabilities. BMCC is committed to providing equal access to all programs and curricula to all students. BMCC POLICY ON PLAGIARISM AND ACADEMIC INTEGRITY STATEMENT Plagiarism is the presentation of someone else’s ideas, words or artistic, scientific, or technical work as one’s own creation. Using the idea or work of another is permissible only when the original author is identified. Paraphrasing and summarizing, as well as direct quotations, require citations to the original source. Plagiarism may be intentional or unintentional. Lack of dishonest intent does not necessarily absolve a student of responsibility for plagiarism. Students who are unsure how and when to provide documentation are advised to consult with their instructors. The library has guides designed to help students to appropriately identify a cited work. The full policy can be found on BMCC’s web site, www.bmcc.cuny.edu. For further information on integrity and behavior, please consult the college bulletin (also available online).