Detailed schedule

GDES-315 spring 2019 (David Ramos, American University Design)
ramos@american.edu · office hours · interaction design resources

18 January

Friday

Class 02

« summary view

Type hierarchy

Projects

  • 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.

In class

Put shareable addresses for your Figma files into form so we can look at your work on the projector.

Demo files: web1-basic (ZIP)

22 January

Tuesday

Class 03

« summary view

CSS Grid recap

  • Reviewing or learning CSS Grid for layout

Reading

  • 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.

In class

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)

25 January

Friday

Class 04

« summary view

Studio

Projects

  • 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.

Reading

  • The New CSS Layout, ch. 5 (Responsive by Default)

1 February

Friday

Class 06

« summary view

Website performance

  • How do large files, frameworks, and JavaScript affect perceived and actual site performance?
  • Efficient image export
  • Design choices for performance

Projects

Reading

  • 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.

5 February

Tuesday

Class 07

« summary view

Studio/critique

Reading

  • On Web Typography, ch. 1 (How We Read) and ch. 2 (How Type Works)

8 February

Friday

Class 08

« summary view

Screen typography workshop

Reading

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 vw and vh units. Explore some of the known-good FOSS web fonts.

web1-basic (ZIP)

15 February

Friday

Class 10

« summary view

Signifers, affordances, mappings, and feedback

Reading

  • On Web Typography, Ch. 6 (Composition)

1 March

Friday

Class 14

« summary view

Critique

Reading

  • On Web Typography, ch. 4 (Choosing and Pairing Typefaces)

16 April

Tuesday

Class 25

« summary view

Design studio visit (tentative)

5 May

Sunday

« summary view

Exam period (class does not meet)

Projects

  • Turn in work by 5:00 p.m.