GDES-315 spring 2019 (David Ramos, American University Design)
firstname.lastname@example.org · office hours · interaction design resources
- Figma for visual prototyping
- Fill out class survey
- Typographic processes: present two different design concepts, produced in Figma
- During class, start on HTML/CSS based on one concept
The reading and assignments appear on the day when they are due.
Put shareable addresses for your Figma files into form so we can look at your work on the projector.
Demo files: web1-basic (ZIP)
CSS Grid recap
- Reviewing or learning CSS Grid for layout
- The New CSS Layout, ch. 1 (Where We Came From) and ch. 3 (The New Layout). We are, by and large, setting aside the layout methods in ch. 1 and adopting the ones in ch. 3. Spend your effort accordingly.
Demo files: grid example (ZIP), grid exercise (ZIP)
Browser support: Can I Use
Grid resources: Grid by Example (Rachel Andrew), Jen Simmons Labs, and Layout Land (Jen Simmons)
- Typographic processes: have code for an initial layout finished. Reflect on the results and the process so far, and revise your design on paper and in Figma.
- The New CSS Layout, ch. 5 (Responsive by Default)
- Look at content for Resource conservation. Start sketching designs and exploring type, image, and color choices.
- Efficient image export
- Design choices for performance
- Tim Kadlec, The Ethics of Performance. “Sites that use an excess of resources, whether on the network or on the device, don’t just cause slow experiences, but can leave entire groups of people out.”
- Optional: Jen Simmons, Layout Land: Viewport Units
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.
- On Web Typography, ch. 1 (How We Read) and ch. 2 (How Type Works)
Screen typography workshop
In-class typographic exercise
Take four or more lines from Robert Frost’s Mending Wall and set them in type, on one page, in a browser. Explore font choice, but also scale and how a reader experiences a web page over time, through scrolling.
Tips: think about making elements big, or surround them with negative space. Play with
vh units. Explore some of the known-good FOSS web fonts.
Signifers, affordances, mappings, and feedback
- On Web Typography, Ch. 6 (Composition)
- On Web Typography, ch. 3 (Evaluating Typefaces)
Content management / Information Architecture
- Content management systems and static site generators
- Information architecture
Jekyll workflow + IA
- On Web Typography, ch. 4 (Choosing and Pairing Typefaces)
- Jekyll workflow
- IA introduction
- Have sketches for layouts, site map, and a table of content and classifications
- Work in class
See example code for a Jekyll/GitHub Pages site that displays a collection of nine images from FSA/OWI photographers. There is Jekyll/Liquid template code to list every photo, photos by time period, and photos by creator, with images. There is also code to display images on detail pages. Source code on GitHub and
public-facing site on GitHub Pages.
If you would like advice on your portfolio—in progress or complete—bring a copy or a web link.
Users and contexts
Studio + critique
Visiting designer: Alice Packard
- Visiting designer: Alice Packard, Brunch
- Working File Verbal Design (podcast episode with transcript available)
Exam period (class does not meet)
- Turn in work by 5:00 p.m.