Detailed schedule

Intro

• Introduction
• Figma for visual prototyping

Projects

• Start Typographic processes.

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)

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)

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)

Studio

Projects

• Look at content for Resource conservation. Start sketching designs and exploring type, image, and color choices.

Reading

• Liz Stinson, Low-tech Magazine’s Solar-Powered Website is Rewriting the Rules of Web Design

Website performance

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

Projects

• Typographic processes is due
• Resource conservation

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.

Studio/critique

Reading

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

Screen typography workshop

Reading

• On Web Typography, ch. 5 (Typographic Systems)
• Very optional: UX Brutalism
• Very optional, via Rebecca: simple angry website and more

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)

Studio

Signifers, affordances, mappings, and feedback

Reading

• On Web Typography, Ch. 6 (Composition)

Studio

Reading

• Hotel Buffets, a Culprit of Food Waste, Get Downsized, about IDEO’s work, consulting with hotels on reducing waste at buffets while maintaining guest experience

Critique

Projects

• Resource conservation is due
• Start Information architecture

Reading

• On Web Typography, ch. 3 (Evaluating Typefaces)

Content management / Information Architecture

Reading

• Mark Boulton, Visual Design is Not a Thing

In class

• Content management systems and static site generators
• Information architecture

Demo files

• Jekyll project site
• web1-jekyll on GitHub

Jekyll workflow + IA

Reading

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

In class

• Jekyll workflow
• IA introduction
• Studio

Studio

Projects

• Have sketches for layouts, site map, and a table of content and classifications
• Work in class

Design portfolios

Project background

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.

Portfolio workshop

For class

If you would like advice on your portfolio—in progress or complete—bring a copy or a web link.

Reading

• Look through some example portfolios on the list

Studio

Critique

Reading

• Usability.gov, Organization Schemes and Organization Structures

Users and contexts

Projects

• Information architecture is due
• Start Publishing systems

Critique

Reading

• Interview with the designers of Bloomberg Business Week’s redesign

Studio + critique

Reading

• Optional: Rachel Andrew, How to Align Things in CSS

Studio

Visiting designer: Alice Packard

• Visiting designer: Alice Packard, Brunch

Critique

Studio

Reading

• Working File Verbal Design (podcast episode with transcript available)

Studio

Semifinal critique