CCT260H5 Study Guide - Summer 2018, Comprehensive Midterm Notes - Html5, Html, Cascading Style Sheets
12 Oct 2018
School
Department
Course
Professor
CCT260H5
MIDTERM EXAM
STUDY GUIDE
Fall 2018
CCT260 – Web Culture and Design
Prof. Michael Jones
Week 1, Class 1
Intro – Syllabus is on Slate
Keywords
• Code
• Design
o Industrial, interaction, graphic, environmental
• Content
• Markup
• HTML
• CSS
• JavaScript, PHP, MySQL
• Server
• Client browser
• Mobile responsive
• Apps
W3 Schools tutorials – Assignments
• Assignment 1
o User-centered design, information architecture and graphic design
o Find a Wikipedia page of personal interest and design a prototype for a stand-alone
website reframing the existing content to meet needs of specific personas
o Include one home page, one inner page design as wireframe/medium-fidelity prototype
• Assignment 2
o Build a personal branding site in HTML5/CSS3
▪ Labs 4-10 build up to this through the W3Schools tutorials
o Include at least a home page, three inner pages and appropriate graphic interaction and
user-centered design
• Tips
o This doesn’t hae to e professional – can be creative and personal
o Don’t just oerload ith features eause you an
o Do not use WYSIWYG editors (Dreamweaver) or borrow templates
Applications and Case Studies – User Experience in Physical and Digital Spaces
• Examples of poorly designed user interfaces; car dashboard, remote control, microwaves, ATMS,
planes, surgery equipment
o Importance of highlighted items of more importance (not all buttons are equal –
hierarchy)
find more resources at oneclass.com
find more resources at oneclass.com
▪ Ex. pause and play on remote should be easy to find
▪ Problematic interfaces can cause problems especially in case of transport and
medical errors
• Ex. plane crash from turning off wrong button
• Fully proficient medical professionals making equipment use errors
resulting in injury and death
o Ex. poor displays, interface, noise/distractions, stress
Website Case Studies – Interface and Usability
Lab 0 (Bonus)
• Find a website with a problematic user interface; what are the problems and how would you fix
them?
find more resources at oneclass.com
find more resources at oneclass.com
Document Summary
Industrial, interaction, graphic, environmental: content, markup, html, css, server, client browser, mobile responsive, apps. Include one home page, one inner page design as wireframe/medium-fidelity prototype: assignment 2, build a personal branding site in html5/css3. Labs 4-10 build up to this through the w3schools tutorials. Applications and case studies user experience in physical and digital spaces: examples of poorly designed user interfaces; car dashboard, remote control, microwaves, atms, planes, surgery equipment. Characteristics of web design usability and personas. Scanning vs. reading: using grid-forms, nobody spends time reading the whole thing now, so if you want to get info across you need to place things in easily scanned structured boxes, unless content is unstructured as well. Red - ff0000: ff0000 all red, f is hexadecimal (base-6, f is the max of a colour all red, ff0000 no blue, ff0000 no green, because red is a primary colour, ex. Black 000000 no colours at all: ex.
