WEEK 13: Portfolio – Design (April 8)

To Do This Week:

Portfolio: Responsive Structure

Multimodal Narrative Projects Due for Critique

Notes:

Multimodal Narrative Projects

Due for in-class critique

  • Validate!
  • Resize images
  • Include a project statement (sources, AI tools, etc.)
  • Folder name: “narrative”

Narrative Project Critique

Narrative class list

Instructions:

  1. Get into group of 3-4
  2. Address the questions below on note paper. You will evaluate 2-3 students in your group.
  3. Groups will discuss/critique each project consecutively based on the notes for each work.
  4. Take careful notes on the feedback for your site.
  5. Use the critiques as guidelines for redesign; you do not have to follow all suggestions.

Critique Guide:

  • Describe the site’s visual hierarchy. Is it effective? What could make it more effective?
  • How effective is the typography? Does it help or hinder comprehension of the content? Suggest solutions.
  • Is there a color scheme of 3-5 colors? Are the applied colors effective for visual hierarchy and mood?
  • How do you experience “closure” between the site’s different media and text fragments? Does the narrative flow? What could improve the design?
  • Does the site use patterns for understanding the content? Is there variation or difference to highlight certain elements?
  • Offer suggestions for improving layout and navigation to better engage the user.
  • Other comments or suggestions?

Portfolio Project

Portfolio class list

Workshop – upload responsive wireframe with navigation bar.

/* Base styles: Mobile-first */
body {
  font-size: 1em;
  padding: 1em;
}

/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
  body {
    font-size: 1.1em;
    padding: 2em;
  }
}

/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
  body {
    font-size: 1.25em;
    padding: 3em;
  }
}

Common Issues:

  • Too many nested borders
  • Not enough padding around text
  • Center-aligned paragraphs longer than three lines
  • Word count per line: 10-15
  • Improper alignment of boxes
  • Positioning elements inaccurately
  • Include an <h1> heading with your name (or title) on each page
  • Keep menu items short or use expanded tabs—avoid breaking lines
  • Avoid <br>; use margin or padding instead
  • Efficiently use screen real estate—reduce headers and spacing
  • Consistent wrapper and/or menu styles across pages
  • Ensure visual hierarchy by varying styles (e.g., typography details) and repeating them for similar elements (e.g., headings, menus, sections)
  • Use 5+ colors from a cohesive color scheme
  • Properly format HTML and CSS

Portfolio – 15%

DUE April 22nd (last day of class)

Project Overview:

Using HTML5 and CSS, hand-code a responsive portfolio website with at least three pages (e.g., About, Portfolio, Contact) to showcase your work. This may also be a portfolio or business site for a friend or family member but must adhere to the same guidelines.

*If you wish to create a single-page scroll site with anchor links, please consult with me.

Project Statements for Projects

Include short statements for projects (e.g., Info-card, Blackbird, Recipe, and Narrative) on your portfolio site. Describe the assignment, tools, design ideas, and specific processes. These statements are essential for documenting your portfolio work.

Grading Criteria:

Design – 30%

  • Website must have a cohesive color scheme (use Adobe Kuler).
  • Typography should be legible, and text boxes properly aligned.
  • Navigation must be clear, functional, and accessible.
  • Design should be consistent across pages for unity.
  • Apply clear visual hierarchy through layout, color, and imagery.

HTML5 and CSS Markup – 30%

  • Home page must be index.html.
  • Include an <h1> heading with your name on each page; subheadings (e.g., <h2>) for “About” or “Gallery”.
  • HTML5 and CSS must be validated.
  • Use semantic elements and proper nesting.
  • One external stylesheet (internal stylesheets only for overrides).
  • Site must be responsive with percentages and media queries.
  • Hand-coded HTML/CSS; plugins for galleries are acceptable.
  • Code should be well-formatted with proper indentation.
  • Navigation should use a CSS-styled <ul> within a <nav>.

Content – 30%

  • All content must be original and complete. Attribute non-original media appropriately.
  • Text must be grammatically correct and spell-checked. Images should be optimized for the web.
  • Include brief project statements summarizing assignments and tools/skills used.
  • Portfolio must contain at least four pages (e.g., About, Statement, Resume, Gallery, Contact).

Resources:

DTC Senior/Graduate Portfolios