VICO 3173 / 5173 Assignment

Case Study Project

Let's build a case study webpage. You'll need to choose a project to get started.

Read More About the Bootstrap Layout Grid

Some portfolio websites with great case studies to inspire us

These case study examples were shared by designer (and design coach) Chris Courtney.

Assignment: Build a case study web page

  1. Choose a project that will be the subject of your case study. It can be a project from your portfolio, from the VICO 2162/5162 UX class, or a project from another class. It could even be this very project -- a case study about this assignment.
  2. Create an outline of the sections you will include in your case study. Look at the example websites for inspiration.
    Reading: Some helpful case study writing tips.
  3. Possible sections: the project summary, the challenge, your solution, your collaborators, your roles, what you learned, apps/tools you used, thumbnails, sketches, UX analysis, personas, wireframes, site maps, user flows, prototypes, photos, what you learned...
  4. Start creating/gathering the images and text for your project -- sketches, wirefarames, logos, personas, etc.
  5. Update your website for each class. We will be working in code pairs on the layouts in class over the next week or two.

Getting started: Simplify your HTML & CSS coding

  1. Begin with a blank canvas!
  2. Then build just one section that's responsive and has two or three simple design elements that you will re-use throughout your case study -- think font styles, colors, layout options, margins... "Lorem ipsum" text is OK at this point.
  3. Is the first section responsive? Test it in your browser!
  4. Next, duplicate that section, and modify it for your content needs.
  5. Test it and repeat...
  6. After the basic framework is built, add your real text, add images, and then make some design or layout variations to the sections of the case study.

Repetition

Practice and repetition are the best ways to learn coding and web design. We'll be working on several versions of this project throughout the semester. Keep your files and folders organized, save your work frequently. Force yourself to start over with a blank canvas, again and again, as you learn more HTML & CSS. Ultimately, you will build at least three versions of this case study project!

Grading

I will be looking for:

  • Good coding -- a responsive webpage, proper indenting of HTML code, use of annotations and spacing, use of Bootstrap's "container > row > cols" for your layout, and organized project folders.
  • Good content -- a compelling narrative about your creative process, use of your own work for the text and images.
  • Good design -- customization, use of color, fonts and typography and strong images.