Skip to main content

Intro to Web Design and Generative Studio

Work to have done:

Plan for the day:

  1. Key Concepts and Practical Takeaways (10-15 min)
  2. Web Design in 4 Minutes (10 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! I’ll share my answer key at the end, so maybe write down your answers for a quick comparison.

Speedy teams, note the EXTs at the end.

Organizing files

  1. True or False: filenames are not case sensitive, so it doesn’t matter if something is uppercase or lowercase.
  2. 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.
  3. T / F: all files referred to in an html document have to be in the same folder as that html document.
  4. What’s one advantage of using a relative link? What’s one risk?
  5. EXT: 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?

HTML basics

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

Image basics

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

CSS basics

  1. Name three different places you could store CSS rules.
  2. What do the curly brackets in CSS rules do?
  3. What do the semicolons in CSS rules do?
  4. How do you mark up comments in CSS?
  5. How can you apply a single CSS rule to multiple HTML elements?
  6. What happens if you have apply two CSS rules to the same HTML selector, but with different values?
  7. Why is using inline styles generally a bad idea?
  8. EXT: What’s one advantage of using em as a unit rather than px?

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):

1b. If time allows, we can discuss! (5-8 min)

Any tricky ones?

2. Web Design in 4 Minutes (in 10 minutes)

This is what we didn’t get to last time. I’m going to try to be brief, but I want to make sure you see this, because many of the suggested design elements / CSS rules make good defaults so your site doesn’t look “unstyled.”

And now you’re in better position to understand the rules as they come up!

http://jgthms.com/web-design-in-4-minutes

3. Loop writing (10 min)

The assignment for Tuesday includes another two chapters in the tutorial, one blog post about advanced CSS selectors, 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.

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

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? To get to other pages on the site? (What would you suggest they view next?)
  • 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.

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. (I use it on this site, for example.) What “framework” 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.
  • Also 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.