Hurricane Maria's Dead guest lecture & Website Design

Guest lecture

Youyou Zhou of Quartz will visit to give us the backstory on the creation of Hurricane Maria's Dead. This award-winning project was a year in the making and involved a large-scale collaboration between multiple news organizations, college students and volunteers.

Website Design

Overview

Web design is a big topic, one that has entire classes and books devoted to it. Professional designers use a wide range of strategies to design sites, including wireframes and pixel-perfect mockups. There are many tools used in the process, from wireframe software to full-featured design suites such as Adobe Illustrator and Photoshop.

For our class, we'll keep things simple and create hand-drawn sketches -- yes, on paper! -- in the spirit of this admittedly opinionated strategy. The goal is to focus on a basic sketch and then begin implementing the sketch using HTML & CSS. This process may require multiple rounds of sketch updates and implementation as we refine our ideas.

Keep in mind that the overarching goal for our class is to create a personal portfolio site showcasing your projects. When designing the site, try to put yourself in the shoes of a potential employer or colleague hoping to learn more about you and your work. Do you want to highlight your work by putting screengrabs of projects front and center on the home page? Or perhaps you want to make a stylistic statement on the home page, and point users to a projects page that lists all your work?

Get creative, but remember that you must also implement this design, so it's not a bad idea to start simple. If you need inspiration, feel free to poke around the Internet for portfolio site examples.

Collaborative Design

As part of this assignment, we'll begin learning how to use a Github project board to collaboratively plan and track work. Each person must pick a partner to serve as an "end user" to provide feedback on their design. You can have these conversations in person, on Slack, or in comments on Github tickets -- or all of the above. If you use Github, you must add the person as a collaborator on your repo.

Assignment 5

Level up on HTML/CSS

Read and work through chapters 1-5 of Learn to Code HTML & CSS. Even if you feel comfortable with HTML & CSS, you should skim through this material as we'll be applying page layout and styling strategies from this book (e.g. a CSS reset file).

Design sketches

We'll begin building our project site next week. But first, we of course have to design the site.
For this portion of the assignment, create 3-4 hand-drawn sketches for desktop browsers only. We'll add responsive design for smaller devices down the road.

Here are the precise requirements for the assignment:

• Pair up with one person in class to serve as an "end user" for feedback.
• Create a Github project board for your website repo and add columns for To Do, In Progress and Done.
• On the project board, create tickets in the To Do column for each of the pages. As you work on and complete each ticket, move it to the appropriate column in the project board. An image of the sketch must be attached to the ticket for each page.
• Draw sketches on paper for the following pages:

  All pages must include a header with site navigation and a content section.

  • Home - The entry point into your site, including site navigation.
  • Project detail - A project "detail" page that should include a brief narrative describing the project, an image of the project, and a link to its site.
  • Projects list (optional) - If you decide not to list projects on the home page, you can add an extra page to serve as an index page for projects.
  • About - Info about yourself. For example, a brief bio and relevant social media links such as Github profile, LinkedIn, Twitter, etc.
• Have at least one feedback conversation about each page with the "end user." We'll randomly choose several teams on Tuesday to present their sketches and provide an overview of their feedback discussions.