Skip to content

B. Projects

Jump to bottom
Marie Otsuka edited this page Jan 29, 2018 · 8 revisions

Projects

Compilation

  • Compile all of your work into a single website. These should all be linked from an index.html file living at your repository root.
  • Be sure to organize your files into appropriate folders (avoid spaces and capitals)
  • Be consistent in your naming
  • Every Project and Exercise should be in their own respective folder. For online exercises, simply include a screenshot image in the folder. Include any process images (sketches, etc.) in a process folder, but please do not include raw psd files. For section 2, be sure to include a link to your in-class presentation as well. Below is a sample folder structure:
repository-name(root)
├── index.html
├── style.css
├── script.js
│
├── projects
│   ├── project1
│   │    ├── index.html
│   │    ├── style.css
│   │    └── images
│   │           ├── img1.jpg
│   │           ├── img2.jpg
│   │           └── img3.jpg
│   ├──project2
│   │    ├── index.html
│   │    └── style.css
│   .
│   .
│   .
├── exercises
│   ├── exercise1
│   │    ├── index.html
│   │
│   ├──exercise2
│   │    ├── index.html
│   │    └── style.css
│   .
│   .
│   .
├── presentation
│   .
│   .
│   .
└── process
    .
    .
    .

Project 4: Final

Determine your own final project. You may begin a new project from scratch, or choose to expand upon a previous project or exercise. Your decisions in how to organize the content, format it, navigate through it, and interact with it should carefully reflect your concept.

  1. Plan (Sketch a sitemap, categorize your content)
  2. Design (Consider your layout, typography, and palette)
  3. Develop (Leverage your combined knowledge of HTML, CSS and JavaScript)
  4. Test your website (Design the responsive behavior of the site and test across devices, including phones)

Project 3: A Record

Choose a span of time to represent as a multi-page website. This might be your personal history (every year of your life), your activities over a 7 day week, or a 24-hour period.

  • Gather data and contents (imagery, etc.) Consider different forms of media.
  • Determine a navigational system suitable for your framework: is it linear or modular? How do you build a sequence?
  • How do you express the passage or experience of time? What is the website about?
  • Pay close attention to the user experience. What information orients / disorients?
  • Incorporate at least one interactive element using jQuery / JavaScript.
  • Due Tuesday January 23

Project 2: (De)design Systems

Choose and study a “default” of the web and either enhance it or subvert it. Whether you are subverting or enhancing the behavior, be deliberate; the site should demonstrate self-consciousness in its mode of construction.

  • Pick a system, convention, or trend of the web (either past or present.) Study its iterations.
  • What is / is not communicated with this? What audiences does it assume? What systems does it support / not support?
  • Determine an approach to illustrate your findings.
  • Develop your site in HTML & CSS. How does the visual and interactive language support the content?
  • Due Wednesday January 17.

Project 1: Styling Lyrics

Choose a text and use web technologies as an expressive platform for it using HTML & CSS

  • Pick an expressive piece of text: song lyrics, a poem, a manifesto, etc.
  • Combine with imagery and sketch out a design for this text.
  • Translate this sketch into HTML & CSS
  • Reference on designing for the screen: What Screens Want
  • Due Tuesday January 9.
Clone this wiki locally