Week 11

Session recording

Project 2 recap

Overall, these were really great! We were both very impressed with how far you’ve all progressed.

We’re still finalizing our evaluations/feedback on your Spread projects—we’ll be sending DMs as we did before, probably sometime later this week.

Reading discussion

We’ll begin our third unit, Typography as interface, with a discussion of our selected readings:

Unit 3 reading synthesis

Further reading

You should again go through these additional texts on your own schedule, over the next few weeks:

• Design Interface: How Man and Machine Communicate
  Gianni Barbacetto, 1987

• Typeface As Programme
  Jürg Lehni, 2011

• Interface Writing: Code for Humans
  Nicole Fenton, 2014

Our third project

Then we’ll go through your last project for the semester:

Project 3, Binding

Some more, fancy CSS

Let’s look at some CSS remainders/loose-ends:

Additional, advanced CSS

And a demo

We want to “connect the dots” today, going through some of the particulars of sketching in code and putting multiple pages together into a website. Our agenda:

1. Make a new repo, binding, on GitHub

   • While we’re here, what is a README.md?
   • How about .gitignore?

2. Clone it down and create an index.html landing page—same as before

   • Add some basic HTML structure
   • Pull in our reset, locally/self-contained
   • Create a common.css, in an assets folder with some basic styles/size variables
   • Commit/push, then enable Pages and add the link to the repo’s About section

3. Make separate stylesheets for sketching your typographic treatments

   • In the assets folder, create direction-1.css, direction-2.css, direction-3.css
   • Give each a different base font-family, to tell them apart
   • Link all of these to your index page
   • Comment them out/in to switch between them!
   • Associate elements (like h1) to size variables (like --typography--h1) in your common.css; then set these variables differently in each direction-n.css

4. Create three folders/index pages for your entries (instead of sibling HTML files)

   • Make ul with links to the entries on the landing page (and/or on each page)
   • Add a shared navigation (home, previous, next) on the entries
   • Edit the navigation, updating per-page instances to your order
   • Link to a page-specific CSS file with a relative path

For next week

• Select your additional texts for Project 3: Binding, adding them to the doc:

  • Project 3 reading selections

• You will also start sketching in code. After some starter semantic DOM, develop your three typographic directions. Make these distinct! Not just riffs on the same thing.

• When you’ve covered the basics—enough to get the feeling—submit your URLs:

  Assignment submission