Week 9, October 25

Project 2 Feedback #

Each group has had at least one of 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, and much too quickly. Initial sketching should be “looser”—less about a pristine/full comp and more about trying (different, varied) things out.

  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.

• Print Is Not Just Another 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—likely 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 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.)

  As you get into your print media query, look to MDN for some printing-specific break properties.

  And For folks making heavy use of details/summary elements—here’s a bit of JS (goes in your head) to open them all when printing:

  		<script>
  	const details = document.querySelectorAll('details')
  
  	onbeforeprint = () => details.forEach(detail => detail.open = true)
  	onafterprint = () => details.forEach(detail => detail.open = false)
  </script>
  
  	

• Web Pages Are Not Posters

  Relatedly, we get the impression many folks are still bogged down in a “trad design” mindset, here—laying out a whole, beautiful, but static page. Many of them look great, but is it comfy to read the text on your phone? Does it feel like it isn’t a PDF/PNG export? Is it web-y?

  The web can be so much more! We want you all to think more about the viewport, scrolling, and interactivity. Remember that your users will only ever see a little slice of your work at once, pushed away by their finger.

• 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. (There was a fair amount of desktop-first sketching.)

  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.

Grid #

Building on our knowledge of flexbox from last week, we’ll take a look its spiritual continuation in grid:

And (CSS) Grid

Your Presentations #

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

Project 2 Notes on Format

IRL Feedback #

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 four groups—let’s try to… Spread to the corners:

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

• We’ll hopefully have 5–6 minutes with each duo

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

• Have your work up on your laptop and a phone

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

• Be prepared to write down quick feedback!

• When we are not with your group, we expect you to do the same with your peers

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

For Next Week #

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

  Project 2 Print and Refinement

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

• Revisit our overall notes as well as your individual feedback for Project 1! 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 2 Notes on Format

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