Think of a website you visit often. Recreate one page using Figma. Do you notice any repeated elements (e.g. headings, buttons, cards, etc.)?

The purpose of this exercise is to begin understanding the internal “structure” of websites, and to get used to Figma which is an industry-standard wireframing and prototyping tool. Figma is so useful for prototyping web design layouts and can help you save time on code.

It does NOT need to go to a second page! (But it’s good practice for aspiring UX designers). You don’t need to add the actual images or match typefaces. Just do your best!

When you’re done, share a link to your Figma prototype in the class spreadsheet.

• → Create components.
• → “Link” to another webpage.

Create a website introducing yourself. You can add images, decorate the text, or whatever suits your fancy. This will serve as your class website for the rest of the semester.

The purpose of this project is to begin coding and learn how to incorporate HTML elements into a web page. Remember that this is a beginner-level class. I’m not looking for “fancy” websites. I just want you to begin coding!

• → 2 headings
• → 1 link
• → 1 paragraph
• → 1 image
• → 1 list about anything
• → 2 other elements
• → and at least 1 example of text formatting (e.g. bold)
• → NOTE: In EXERCISE 3, you will make a second list to link to all of your exercises/class projects.

When you’re done, share a link to your website in the class spreadsheet.

• → Create a list of your New Year resolutions, favorite musical/visual artists, places you’ve been, or books.
• → Write a poem.
• → Create a list of links.
• → Write a journal entry.

Now, it’s time to personalize your class website from EXERCISE TWO using CSS! A lot can be done with color, borders, filters, etc. How can you make a website that really feels like you? This is a way to experiment with self-presentation on the web with fewer limitations than platforms like Instagram, TikTok, etc.

TThe purpose of this assignment is to practice styling your page using CSS styling, as well as using #id and .class.

• → Create at least one #id
• → Create at least one .class. (use it at least 2 times).
• → Use at least 5 different CSS properties

Make sure that the link to your class website in the class spreadsheet and that you pushed updates to your GitHub repository.

• → Try using a custom font.

Create a website that mimics the “holy grail.” The holy grail is a web page layout which was commonly used: a header, a central area for sidebars and content, and a footer. Using flexbox or grid, try to create a variation of this layout.

• → Use a grid or flexbox.

• → When you’re done, share a link to your website in the class spreadsheet.
• → Link to this page from your class website.

• → Find a way to make it your own. If you change the holy grail slightly, it’s okay. I just want to see a clear demonstration of using CSS Grid or Flexbox.

Create a responsive “screensaver.” How can you use animations or movement to express an idea or a feeling?

• → Include 4 responsive states (they do not all need to have CSS animations, but they should all be different).
• → Include at least 1 CSS animation.

• → When you’re done, share a link to your website in the class spreadsheet.
• → Link to this page from your class website.

• → Could you tell a story as you move through each responsive state?
• → How can code help you reimagine graphic or generative forms?
• → What does motion convey that static things do not?

Create a website with an interactive function. For example, it can trigger an alert, change text/color/images on the page, etc. Include at least one event listener, such as ‘click’.

• → Write at least 1 JavaScript function.
• → Use at least 1 event listener.

• → When you’re done, share a link to your website in the class spreadsheet.
• → Link to this page from your class website.

• → How can you make a website experience delightful through a simple interaction?
• → Try pulling from real life experiences, even mundane ones (e.g. turning on and off a light).
• → What is the smallest action that someone can take?
• → Are there multiple kinds of actions that users can take? How much control are you willing to give the user over your website?

Create a website that involves both an event and randomness. The randomness aspect does not necessarily need to be caused by an event.

EXERCISE EIGHT is basically Part 2 of this exercise, so I recommend you take a look at that one as well!

• → Write at least 1 JavaScript function.
• → Use at least 1 event listener.
• → Incorporate randomness.

• → When you’re done, share a link to your website in the class spreadsheet.
• → Link to this page from your class website.

• → You can continue to think about the questions from EXERCISE SIX.
• → How might you explore tensions between control/action and randomization?

Experiment with AI chatbot like ChatGPT, Claude, etc. Ask it to write JavaScript for your EXERCISE SEVEN website. Think about how you could make this website more interactive, and see what ChatGPT comes up with. Afterwards, please describe your experience in a short paragraph. Incorporate both the code from ChatGPT* AND your written response into your EXERCISE SEVEN website.

/* Please comment in your code which parts used ChatGPT. */

AI is improving faster than we ever imagined. People believe that AI is taking jobs away from human coders (who previously believed they had job security) and other human workers. Or at the very least, AI is used to justify smaller workforces in tech. Similarly, AI has taken jobs away from artists and designers, especially as AI has become more accessible to everyone. Our media literacy is also being challenged, as users encounter more and more convincing “AI slop” everyday.

Whether you are pro-AI or not, I believe it is important that everyone understands what AI is capable of, and that means having some exposure to using it. My goal is not to convince anyone to be for or against AI but to be informed about what it can do.

• → Incorporate code from an AI chatbot into your EXERCISE SEVEN website (it doesn’t have to be a lot of code!).
• → In your code, please /* comment */ which parts were AI-generated
• → Write a short response (200+ words) describing your experience using ChatGPT and try to explain the code that ChatGPT generated.
• → Incorporate this paragraph into your EXERCISE SEVEN website somewhere.

• → Make sure your link for your EXERCISE 7 website is in the spreadsheet and class website.
• → Make sure you’ve pushed your updates to GitHub.

Find two websites: (1) one website you really enjoy and use often; (2) one you dislike.

For the first website, describe why you like this website from a UX design perspective. What makes it a user-friendly experience?

For the second website, can you describe why you dislike it? Is there anything about it that does work? What improvements would you make to improve it from a user’s perspective and why?

Try to articulate why it might be important to make these websites user-friendly. Are there UX principles or decisions that you might consider in future web design projects?

We’ve spent most of the semester with the freedom to explore web design and coding in experimental ways. In commercial design, the reality is that we are often designing for particular users who have specific needs in mind. For example, a banking or medical website needs to be predictable and easy to navigate for all users. Therefore, designers have to balance innovation/experimentation and convention.

• → Please write at least 300 words for each website that you choose.

• → Upload a document to your Class Drive.

Buy a domain and use it for any website that you’ve made this semester (including exercises or your class website)!

NOTE: If you are not able to purchase a domain (e.g. financial reasons), just talk to me.

• → The domain does not need to be related to your website. I just want you to gain experience learning how to buy and set up a domain for your website.

You will all be contributing to a class collection. In a Google document, find three websites that you enjoy and write a short paragraph (100 words minimum) describing why you like the website. Is it the user experience? Aesthetics? The content itself? Does it inspire you?

• → 3 urls for each website
• → 3 paragraphs

• → Upload to your Class Drive.

Create another web page about anything you want! It should be a collection of 10 or more links that focus on a specific topic or interest of yours. Create a second page which extends the topic in some way.

The world is your oyster! Scroll down to see PART A and PART B.

• → 2 .html pages
• → The first .html page must link to the second page.
• → On your class website (from Exercise 2), create a new list for future exercises/projects. You must have a link to this new page.
• → There should be 10 links (they don’t all need to be on the same page).
• → Use Flexbox OR Grid (hint: you can use this to organize your collection)
• → Create at least one #id
• → Create at least one .class (use it at least 2 times)
• → Use at least 5 different CSS properties
• At least 1 heading, 1 paragraph, and 1 image

• → Turn in PART A into the Class Drive.
• → Share your final website in the class spreadsheet.
• → Link to this page from your class website.

• → Typeset an existing article about something you’re interested in (just be sure to credit and link to it in an obvious place!).
• → Better yet, write your own article!
• → It’s best to think about a topic for the website before gathering links.
• → This website requires a minimum of two webpages. How can you tell a story between two webpages?

Write a short proposal for the topic (minimum of 200 words) and a preliminary list of things you might add to it. Why do you want to make a collection about this topic? Does a collection like it already exist? What makes your collection unique or different? What is your perspective on this topic?

Then, draw a few sketches to convey ways you might create this website (remember that it needs to have a second page!). Your sketches can be rough pencil sketches, or they can be done in Figma.

Now, it is time to begin coding. Begin with your sketch and try to break it down into HTML elements. Are there HTML divs nested within other divs? Are there repeated elements, like headers? Think about how your website design supports the story or idea that your collection might be trying to demonstrate.

You should also include your proposal from Part A somewhere on the website (feel free to edit it if you don’t want to put the whole thing online!). You can use the proposal as an introduction to your collection, or maybe it can go on a separate “About” page.

The final project can be whatever you want it to be, but you should be able to articulate the purpose and intent of this website. Think about the kinds of places you want to see online. How would you want to contribute to or participate in the “small web”? How might this website shape or reflect your web design practice? This website can serve as a starting point for a larger digitally-native practice.

• → Because this project is open-ended, there are no hard requirements. However, you should be able to demonstrate your knowledge of HTML/CSS and JavaScript through experimentation, yet intentional coding.

• → Turn PART A into the Class Drive.
• → Share your final website in the class spreadsheet.
• → Link to this page from your class website.

Write a proposal for your final (minimum of 300 words) describing your vision, purpose/intent for your goals, and ways you might achieve it via web design.

Try to describe the output you have in mind. For example, is it a series of small experiments? Does it relate to a previous project or practice? Are you creating a tool for someone else? Do you want visitors to feel a certain way?

Feel free to include sketches, presentations, images, links to articles, etc. if it helps you describe your intentions. Please include a few wireframe sketches to convey how web design comes into play.

Think about some of the websites you’ve looked at over the last few weeks.

The website must be made with HTML/CSS. JavaScript is recommended.