Emily Kauffman

Back to teaching

CIS 275 Lecture 21: Personal Sites

Goals

  1. Work on personal project planning

Intro

No formal lesson today! We are a day ahead in what I had planned for our original schedule and so I am going to give you today to work on project planning before we jump into responsive web design next week.

Last week, we talked about the web design and development process. We want to start on that for our final projects. You'll take an approach similar to what we did in Lecture 19 with Alice's website.

These steps do not need to be done by the end of this week. They are simply part of the process of making your website, which is due at the end of the semester and you have all of today's class to work on them.

Final Project

We are going to start a simple project proposal for our final projects. I have an example one that I use occasionally here that you are welcome to steal as an example. This is not something you need to hand in. It's for your own benefit and will help you make a better website. A common interview question is how you go about planning a project from start to finish. The skills you learn here will allow you to succintly answer that question. Take the output of each of these steps and incorporate them into the proposal, so you have a document to refer back to when developing.

Step 1: Brainstorming

Start thinking about what you want out of a website. If you were making this for someone else (like you did for Alice's bike shop), this stage could be in the shape of an interview. The goal is to brainstorm what you'd like to show off about yourself. You don't need to use any format for this. I like to just make a bulleted list of notes that I can later organize. See Lecture 19 for an example of the Alice interview notes for some guidance.

Step 2: Understanding the Problem

These steps might look familar because you did them in Lecture 19. You do not need to do all of them again but you should write a few as practice and to better understand who you're trying to serve with your website.

  1. Write a succinct statement defining the goal of the website. You can use this statement to guide your decisions about your site. If the content or new feature you want to add do not contribute to solving this problem, then you probably don't need it!
  2. Write four question about the people who might be interested in the site (see pg. 455).
  3. Create two fictional visitors and create a table that answers your five questions (see pg. 456).
  4. What are they trying to achieve? Write a story for each of your users (see pg. 458).

Step 3: Features

Now that you know the problem you're trying to solve and who/how people will use your site, come up with a list of features. These could include social media integration, a photo gallery, about page, contact form, etc. They should be features that help to showcase your skills and are geared toward your audience.

Step 4: Designing the Infrastructure

  1. Create a sitemap for the new website that encompasses the information from your brainstorming.
  2. For the features that require copy, start writing this. Remember, content drives design and so you should have a basic idea of the text you're going to include before you design the page.
  3. Create wireframes for the pages. If you have access to the Adobe Suite through W&J, XD is a great program for this. You can also use Photoshop, find free wireframing applications, or just drawn them out on a piece of paper. They do not need to be pixel-perfect (meaning they don't need to look exactly like your final site).

Step 5: Make it!

Now that you have a plan and a proposal, start building your website using all of the skills you've developed over the semester: HTML, CSS, keep in mind CRAP principles, typography, accessibility, color theory...This project is as much about design as it is development.

Timeline

This is not a project you want to wait until the last minute to start, but you'll be working at your own pace. I've come up with an example schedule that you can use to stay on track.

  • April 18, have a good idea of what you want to create and which features you'll need
  • April 25, completed the planning steps and be ready for development
  • April 30, we'll have a partner usability study where you'll review each others progress and give feedback.
  • May 12, project is due

In Class Exercises

Comment in the Lecture 21 channel:

  1. A comment on the website you'd like to make for this project. Are you showcasing your writing? Your graphic design projects? Photography?
  2. One question or confusion that you may have on planning, development, or deadlines.