GDES-220 spring 2019 (David Ramos, American University Design)
firstname.lastname@example.org · office hours · interaction design resources
Intro to interaction design, HTML/CSS, and this course
Demo files: Intro demo (ZIP)
Capturing meaning with HTML/CSS typography
- Brief history of the web
- HTML basics
- CSS basics
Demo files: Basic site (ZIP), Shape of Design excerpt (TXT), Text Fixer
Reading assignments and project deadlines appear under the class when they are due.
Do you know how to manage files and folders on a Mac? You will struggle in this class if you don’t have an excellent command of those skills. If you have the slightest doubt about your abilities, start working through sections two and three of the Lynda Computer Literacy for Mac course. (Sign in through the AU Library.)
The box model; Classes and IDs
- The CSS box model
- IDs (use sparingly)
Demo files: Layout/typography demo (ZIP)
You should be using Firefox as your primary browser for development, because it has the best CSS layout developer tools. Good practice involves checking sites in several browsers, but we will use mostly Firefox.
Complete HTML for Recipe
DIVs and sectioning content
- New HTML5 elements
- Typographic elements and class naming exercise
A piece of advice about screen sizes: don’t present sites in full-screen mode, and don’t code with your browser in full-screen mode. Most desktop/laptop users aren’t browsing in full-screen mode, and sites need to be able to adapt to varying screen sizes. Working in full-screen mode guarantees nasty surprises later. Stop doing it, now.
Links and images
- The A (anchor/link) element, and links as the currency of the web
- Locating resources: file paths and URLs
- The IMG (image) tag
- Finding, compressing, and using images
Links demo: Links files (ZIP)
Good practices for where to put your CSS
It’s technically feasible for your CSS to live in a number of places:
- In a separate .css file
- Inside a
<style> element, as part of the current HTML file
- Inline, as part of a CSS attribute
<p style="margin-top: 1.5em;">)
Tutorials scattered around the web might suggest all of these approaches. For our class, you should almost always put your CSS in a separate .css file, linked to from every page in your site. This tactic encourages you to think about designing systems and reusing code, it is more maintainable and easier to troubleshoot, and it makes CSS specificity easier to understand.
Layout methods and CSS Grid
- Imaginging and building multicolumn layouts with CSS grid
- More on Firefox Developer Tools
- Browser support
See Can I Use.
Demo files: layout demo (ZIP)
Grid exercise; Color models and transparency
This quiz covers basic HTML and CSS syntax, typographic elements, typographic and box CSS features, and lists.
- HSLA, RGB, and named colors
- opacity() vs transparent colors
- Problem-solving grid exercise (files, ZIP)
- Turn in Image/layout exercise
- Start Story
- Typography basics
- Type hierarchy
Demo files: type details and layout (ZIP)
Process + sketching/prototyping tools
- Story: give a three-minute presentation about two possible Wikipedia articles.
- Type/layout/color and site map work, in class
- Design process
- Introducing Figma
- Quick look at site maps and information architecture
Style tiles in Figma
Flexbox + navbars
- For Story, show three design concepts as style tiles, produced in Figma. (Use fonts from the class font list.) Email a shareable link before class.
- Complete background research into your topic and review comparable sites
- Flexbox and navigation bars
Quiz: setting type in HTML/CSS; know CSS type features from HTML & CSS ch. 12. (Not typeface terminology; not pp. 271, 272, 275, 278, 291, or 292.)
- Start listening to Manoush Zomorodi, The Privacy Paradox (complete the activities, if you’d like)
Navigation + usability
Privacy and ethics
Mobile and responsive
- Design for mobile devices
- Responsive web design and media queries
Remember: every website is mobile friendly, until your design starts to break it.
- Mobile design reading t.b.a.
- In-progress design critique for Conference
Responsive layout exercise
- Responsive layout reading t.b.a.
Interactive prototypes + usability testing
- Prototpying and usability testing exercise
Hosting; Professional practice
- Domain registration, the DNS system, and web hosts
- A few words about dynamically generated or content-managed websites
- Professional practice
- Semifinal critique for Conference