Jump to site menu

Generative Studio

Work to have done:

Plan for the day:

  1. Key Concepts and Practical Takeaways (10-15 min)
  2. Homework preview and parachute prompts (5 min)
  3. Loop writing (10 min)
  4. Offline sketching (10 min)
  5. Studio (30 min)

1. Key Concepts and Practical Takeaways (10-15 min)

At your tables, work through the following questions, and be ready to discuss with the whole class if time allows. Some you should be able to go through rather quickly, while others may require more discussion.

Ask if you can’t come to a resolution!

EXT: If your group finishes early, (a) let me know you’re done, and (b) check out these example web-design sketches. What design patterns do you notice? What drawing conventions?

EXT: Want to see some sites from past years? Here are a few (more to follow):

Organizing files

  • True or False: filenames are not case sensitive, so it doesn’t matter if something is uppercase or lowercase.
  • T / F: web browsers know how to handle spaces in filenames, so it doesn’t matter if you have spaces in a filename or not.
  • T / F: all files referred to in an html document have to be in the same folder as that html document.
  • What are some html elements can you use to refer to an external file? (Hint: you should know at least three already.) Where would you put the filename within each of those elements?
  • What’s one advantage of using a relative link? What’s one risk?

HTML basics

  • What kind of information goes in the <head>?
  • How do you mark up comments in HTML?
  • T / F: every HTML element has an opening tag, some element content, and a closing tag.
  • T / F: in rendering an HTML file, there’s no difference between a space, a blank line, or five blank lines.
  • EXT: What information should pretty much every page’s <head> include?

Image basics

  • T / F: every <img> tag should specify a source file.
  • T / F: every <img> tag should specify a width and a height.
  • EXT: what happens if you only set one?
  • T / F: every <img> tag should specify alternative text with alt.
  • What makes .jpg files better for photographs than .png files? What makes .png files better for simple diagrams?

CSS basics

  • Name three different places you could store CSS rules.
  • What do the curly brackets in CSS rules do?
  • What do the semicolons in CSS rules do?
  • How do you mark up comments in CSS?
  • How can you apply a single CSS rule to multiple HTML elements?
  • What happens if you have multiple CSS rules for the same selected HTML element?
  • Why is using inline styles generally a bad idea?
  • EXT: What’s one advantage of using em as a unit rather than px?

1b. Let’s discuss!

2. Homework preview and parachute prompts (5 min)

The assignment for Tuesday includes another two chapters in the tutorial, and a proposal for your website project. In a moment, I’ll lead you through a generative writing exercise designed to help you come up with an idea to propose.

But if you’re looking for more direction, I’ve added these two more guided suggestions to the assignment repo:

  1. Showcase your classwork. Make a landing page that links to a page containing your soundscape narrative, and another page containing your rhetorical collage. Find a way to make the media files directly accessible to site visitors (i.e. they shouldn’t need to download them). As an extension, you might want to showcase work you’ve produced for other courses, in which case I encourage you to look for (and write about) a learning trajectory or insights that cross your courses.

  2. Site redesign. Choose an existing website that you think is kinda boring, or busy, or otherwise in need of a fresh start.a After thinking about why someone would be coming to the site, and what they might want to do once there, build a mock-up of a new design that better meets those needs and goals. NB: I say “mock-up” advisedly: many live sites on the open web can be fiendishly complicated. While it’s a good idea to “View Page Source” to look at the underlying html, you may well want to create your own simplified version from scratch, with just the major block elements you’ll use for layout and navigation, and write your stylesheet just for that.

If you're feeling stuck during the loop writing, you can turn to one of these options.

3. Loop writing (10 min)

Take a few minutes to think in writing about the websites you might want to make. I’ll read a series of questions aloud. Repeat them silently to yourself, and when you feel yourself answering, make a list.

These lists will remain private, unless you choose to share. I won’t ask for them.

  1. What have you been working on, in or out of this class, that you’d like to show the world? What have you made, or done, or pursued?
    • Or: if you’d rather the site not focus on you, what groups, things, or events might you represent?
  2. Is there anything else you might add to the list? A wider context for one of the projects already there, or a related next step?
  3. Is there anything you’re forgetting? Something you were recently talking about, or planning for? Add it to the list.
    • If you haven’t yet included your work for this class, be sure to add it now.

Take a moment now to read back over your lists. How might you group or divide these items? What clusters do they form? Mark these in some way.

Is there one cluster that stands out, that says, me, pick me? Choose one group to work with, at least for today, and name it in some way. Then copy the name into a clean page.

With that chosen subject, write again:

  1. What terms or images come to mind when you think of this subject? … Think about actions… things… descriptors.
  2. I’m going to interrupt you now and ask you to set aside the list, just for now, and ask: What’s the heart of this? What’s the essential component for this cluster of things? What ties them together?

    See if you can summon up the whole of this idea, like it’s right here in the room with you. Where does it live? Is it above you? Inside you? In the palm of your hand? Just sit with your idea for a moment, feeling where you connect to it.

4. Offline sketching (10 min)

And now, draw. Given what’s essential, given your knowledge of how websites work, and given the principles of designing for attention we learned last unit, make a few quick sketches of your possible website’s landing page.

Consider: How will it look on a phone? On a laptop? What might you add to the layout for a full-sized desktop monitor?

Not sure what that should look like? Here are 33 examples (but no one is asking you to be as elaborate as the most elaborate of these)

  • EXT: Will “inner” pages look the same as the landing page? Sketch out the possible differences. Consider the possibility that someone jumps directly to an inner page (e.g. from Google). What would they need to feel oriented?
  • EXT: Finished one drawing? Make another, using a different system of visually organizing your information.

5. Studio / Practice (30 min)

Options!

  • Start gathering materials toward your website, to check feasibility.
  • If you haven’t yet done so, why not start the tutorial sections from the homework?
    • I won’t assign all the sections of the tutorial; you can look ahead in the schedule to see which parts I expect you to read and do, and what’s beyond baseline.
  • Above all, call me over for help as needed.

NB: I’m not sure if the lab computers will have Atom (I think so), but they should at least have SublimeText, which is very similar.

EXT: If you’re good on what a CSS class is, and how to add it to an HTML element, read up on Bootstrap, a very widely used CSS framework. What that essentially means is that they’ve pre-created a bunch of CSS classes for you, so you can start using them to design your own layout from scratch. It’s a little like Lego for web design, only free.

Homework for Next Time

  • Do more of the tutorial, getting through at least The Box Model (5) and CSS Selectors (6), if you haven’t yet.
  • Read more about how CSS selectors work
  • Write a website proposal, posted to the Issue Queue, including:
    • some text about the idea or appeal you’re hoping to make;
    • some sense of what pages and page sections you expect to include;
    • a prospective assets chart (what you’ll need, where you might get it);
    • at least one design sketch, showing possible layouts; and
    • a link to your repository.
  • When you’ve finished that, View/Read documentation on using GitHub Pages at pages.github.com.