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:
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:
Some more, fancy CSS
Letâs look at some CSS remainders/loose-ends:
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:
-
Make a new repo,
binding
, on GitHub- While weâre here, what is a
README.md
? - How about
.gitignore
?
- While weâre here, what is a
-
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 anassets
folder with some basic styles/size variables - Commit/push, then enable Pages and add the link to the repoâs About section
-
Make separate stylesheets for sketching your typographic treatments
- In the
assets
folder, createdirection-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 yourcommon.css
; then set these variables differently in eachdirection-n.css
- In the
-
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
- Make
For next week
-
Select your additional texts for Project 3: Binding, adding them to the doc:
-
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: