WEEK 13: Portfolio – Design
(November 13-17)

To Do This Week:

Portfolio: : Responsive Structure 

Notes:

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

narrativeprojects-355-01-fall2023
narrativeprojects-355-02-fall2023

Portfolio Project: Build HTML structure/ Add Colored borders

portfolioprojects-355-01-fall2023
portfolioprojects-355-02-fall2023

Watch Helvetica – a feature-length documentary about typography, graphic design

 

Typopgraphy Discussion

Helvetica doc

Back to basics – flow, positioning, grid, navigation, typography

PositioNing:

CSS Positioning –
position: fixed; (move element from sides of browser window)
position: relative; (move element from sides of itself)
position: absolute; (move element from sides of positioned parent)

TYPOGRAPHY:

  • use “em” values for font-sizes
  • CSS properties: color, font-size, text-align, letter-spacing, line-height, font-weight, text-shadow, text-transform : typography css reference
  • Typography assignment, by former student Natalie Hendren

RESPONSIVE DESIGN PRINCIPLES:

mobile first!
flexible design (using % instead of px)
percentages! (do the math)
html flow
cascade principle
inheritance (only change styles that need to change)
max-width and min-width (set limit with max or min width)
height values are tricky
responsive images (100% of container parent or img {width: 100%;})
modular design
“breakpoints” based on design not device
display: none and display: block
turning off iOS resize

Media Queries Overview
workflow – sketches, create boxes of content

Portfolio HTML and responsive design / upload files

WORKSHOP: Portfolios

Portfolio  – 15%

Sites Completed for Peer Critique 
DUE  Dec 6/7 (Wed/Thurs in the last week of classes)

Sites Due for Grading  –
DUE  Dec 12 (Tuesday of exam week at midnight)

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: