Assignment: Build a case study web page
- 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.
- 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.
- 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...
- Start creating/gathering the images and text for your project -- sketches,
wirefarames, logos, personas, etc.
- 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
- Begin with a blank canvas!
- 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.
- Is the first section responsive? Test it in your browser!
- Next, duplicate that section, and modify it for your content needs.
- Test it and repeat...
- 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.