WEEK 13: Portfolio – Design (April 8)

To Do This Week:

Portfolio: Responsive Structure

Notes:

Multimodal Narrative Projects

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

Portfolio Project

Upload Responsive Structure Today

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 Dates:

  • Peer Critique:
    • SEC 01: DUE Wednesday, Dec 4
    • SEC 02: DUE Friday, Dec 6
  • Final Grading:
    DUE Tuesday, Dec 10 (6pm)

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

 

 

 

 

 

 

To Do This Week:

Portfolio: : Responsive Structure 

Notes:

Multimodal Narrative Projects:
– validate!
– resize images
– visual hierarchy
– statement ( sources, AI tools etc.)
– folder name: “narrative”

Multimodal Narrative List 01
Multimodal Narrative List 02

Portfolio Project: Upload Responsive Structure today

Portfolio List 01
Portfolio List 02

Common issues:

  • too many nested borders!
  • enough padding around text
  • center aligned paragraphs for more than 3 lines
  • word count per line: 10-15
  • alignment of boxes 
  • positioning elements
  • h1 heading with your name (or title) on each page
  • short menu items  or expanded tabs- avoid breaking lines
  • <br> – use margin or padding instead
  • screen real estate – reduce header and spacings
  • wrapper and/or menu changes from page to page
  • visual hierarchy – create difference with style changes (typography details), repeat styles for similar items (headings, menu, content sections)
  • use 5+ different colors from a color scheme
  • format HTML and CSS

Portfolio  – 15%

Sites Completed for Peer Critique  – 20%
Sec 01  DUE: Dec 4 (Wed in the last week of classes) 
Sec 02  DUE: Dec 6 (Friday in the last week of classes) 

Sites Due for Grading  – 80%
DUE  Tuesday Dec 10 (6pm)

Using HTML5 and CSS, hand-code a multiple-page* (at least 3 pages: about, portfolio, contact) responsive portfolio website that allows you to present and promote yourself and your work to potential employers and friends.

*If you would like to design a single-page scroll website with anchor links, please see/message me. 

Project Statements for Projects
Include a short statement about the Info-card, Blackbird, Recipe and Narrative projects on your portfolio site. Always include a short statement on projects in your portfolio. What was the nature of the assignment? Describe the tools, design ideas, code and/or specific processes. This is for you to properly document your work for your portfolio.

It is important that you finish a majority of  your site’s design and content for the scheduled critique/usability testing. On this day, I will grade this portion of your portfolio.

Portfolio website grading will be based on the following criteria:

Design 30%

  • Website must have a color scheme that is in harmony (use Abobe Kuler!).
  • Typography is legible and text boxes are aligned properly,
  • Navigation is functioning, clear and accessible. 
  • Pages are consistent throughout the site; there is unity in the design.
  • Clear visual hierarchy is used in overall design. Layout, color and imagery evoke information (difference) and context (repetition) effectively.

HTML5 and CSS mark-up  30%

  • The start home/page is index.html
  • Your name is the main heading or  <h1>  for each page of the site. The subheading for “about’ or “gallery” pages would be the <h2>.
  • HTML5 and CSS mark-up is “validated”.  Semantic elements and divs are properly nested with good hierarchical page structure.
  • A single external stylesheet (inline styles and internal stylesheets can be occasionally used to override external css).
  • The site is responsive to device widths, using percentages and media queries
  • HTML and CSS are hand-coded; no WYSIWYG editors or templates. Plugins for galleries are OK. Please see me if you have questions about this.
  • HTML and CSS are well formatted – indentation is used  to indicate nested elements.
  • Navigation must be in the form of a CSS-styled unordered list <ul> and enclosed in <nav>.

Content 30%

  • Content is your own and complete. Images that are not created by you and/or in the Public Domain must be clearly labeled with ownership and copyright information. Text is  grammatically correct, spell-checked and images are compressed for web with proper aspect ratio.
  • You have brief statements for each of the works in this class that is in your Portfolio. Describe the assignment and what HTML/CSS skills you used.
  • The website must have at least 4 pages all together. Suggestions include: About or bio, Statement, Resume or discussion of your skills and abilities, Samples or Galleries of your writing, photography, or artwork, Contact information, Information about your favorite causes, Links to resources or other things you think are worthwhile, etc.

DTC Senior/Graduates Portfolios: