Week Nº 9

Each group has had us go through your Figma sketches, and we’ve seen a bit of your in-progress code. Some overall notes:

• Less Figma Typesetting, More Figma Exploration

  Many folks went right into “whole page” layout again, and much too quickly. Initial sketching should be “looser”⁠—less about a pristine/​full comp and more about trying (different, varied) things/​components/​combinations/​motifs out. Our “posters” got skinnier/​taller, but were still encumbered by whole-frame thinking!

  You should only keep going down a page (frame) if it is giving you more information or insight about the direction. Otherwise it’s just pushing pixels around, and that time can be better spent!

  Remember: we aren’t here to make Figma comps; we’re here to make web pages!

• Type readability (particularly size/​line-length)

  On mobile, we had lots of big-gutter/​too-narrow, too-large base paragraphs making for bad wraps/​rags. When width-constrained, we are essentially trying to maximize the scale distance/​space between our “floor” (paragraphs) and “ceiling” (headings) while keeping these readable/​legible. Also, we generally hold our phones closer to our faces than we do other screens⁠—so smaller base type here, as a general rule.

  On larger breaks, we have more “room”⁠—for both width and for scale. And the screens are usually further away. Our “floor” base type size can come up (within reason), as can our line-lengths⁠—and the corresponding “ceiling” heading size can be proportionally higher.

  Remember, Figma leads us astray in judging this! In seeing the whole thing and being able to zoom in and out⁠—that’s not how our audience sees it. Look at your work on-device (always easier in code) to get the real feel.

  Who looked at their mobile comps on their phone? Or printed their sketches?

• Print Is Not Just Another, Grayscale Width

  Some teams really didn’t think about print styles as their own medium, with their own constraints! We want you to interpret your design within these specific considerations⁠—black and white, usually no full-bleed/​edge, always discrete pages and no (screen-like) interactivity. Imagine we’re running these off on the lousy staff lounge copier!

  The point here is to find/​hone the core of a design vocabulary across different constraints. Much like the limitations of mobile can inform a more resilient desktop design, so too can considerations for print! (This is no different from mobile not having :hover, for example.)

  Likewise: mobile is not just tiny desktop; desktop is not just centered mobile.

• Progressive Enhancement as an Organizing Principle

  In Figma⁠—and then even more so in code⁠—we want you to start with the basics and build up from the fundamentals.

  Land that exquisite, readable, comfortable base paragraph⁠—before you go deep/​noodley on some header minutia. Rough out your whole page DOM before putting in a line of CSS. Land your entire mobile design/​build before you even think about those wider widths. Make the layout and form work without color before developing the palette.

  This is not a license to ignore those⁠—we want to see much more desktop enhancement, for example⁠—but reframe “small to large.”

In this course (as in life, and in everything), we are time-constrained. We want to encourage you to continually weigh/​reevaluate the tradeoffs of your efforts! And building up is often a helpful framework for this.

Today we’ll be looking at some CSS remainders, loose-ends, and enhancements⁠—to enliven and bring nuance to our work:

Some Additional, Advanced CSS

You’ll be be presenting your second projects next week! Let’s talk about the format:

Project Nº 2: Notes on Format

We want to check in with each group, seeing where you are at now after pair programming. This room isn’t ideal for this, but we’re going to break up into two groups⁠—let’s try to… Spread out:

The plan:

• Our goal is that you’ll each see one of us

• We’ll shoot for 6–7 minutes with each duo

• Give us some brief background and then right into your live sites⁠—we’re past Figma now!

• Have your work up on your phone (and… maybe, on your laptop)

• We want to focus on the Big Picture, to start⁠—let’s save specific/​technical minutia for later/​Slack

• Be prepared to write down quick feedback!

• Feedback for one group is often feedback for all; let’s be actively listening to each turn

• If we have time or folks would like, we can stay a bit longer for a Second Opinion

• You and your partner will be finishing the last milestone for your Spread projects:

  Project Nº 2: Print and Refinement

  You’ll be both interpreting your page for print, while also iterating on the implementation based off our feedback and material today. Apply yourself equally to both goals this week!

• Revisit our overall notes as well as your individual feedback for Manuscript⁠—particularly your own notes on presentation! This is an opportunity to improve.

• When you are done, submit a link to your URLs:

  Submission Form

  As always, check that these work on other computers! And now on your phones.

• And prepare to present your work next week! We’ll all be together:

  Project Nº 2: Notes on Format

We’re really excited to see your work and collaboration! We know this is a quicker turnaround, but have been encouraged by what we have seen!