WEEK 14: Build Portfolios
(November 18-22)

To Do This Week:

Work on Portfolios

  • Build HTML/CSS for Portfolio Projects (this project must be responsive)
  • Work at Responsive Design (apply media queries)
  • Work at Typography and Color for good visual hierarchy
  • Validate often!

Notes:

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)

The Portfolio Projects should be in a folder called “portfolio”

Portfolio List 01
Portfolio List 02

LAYOUT

Avoid  float! Use only for wrapping text around and image or div.

Instead use CSS Grid or Flex:

CSS GRID/flex

CSS Positioning – use only for special cases
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)

 

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

 

Color Schemes

(with Adobe Kule)

  • Explore the colors that best align with the website’s purpose and target audience. Consider cultural associations and emotions tied to colors.Look at nature, art, or existing successful websites for color ideas. Use mood boards to visualize the overall feel of your scheme.
  • Start with a Base Color: Pick one dominant color that reflects the website’s primary theme or branding.
  • Explore Color Schemes: complementary (opposites), analogous (side-by-side), or triadic (evenly spaced) color schemes based on the color wheel. Monochromatic schemes offer a subtle and cohesive look. 
  • Consider Contrast and Accessibility: Ensure sufficient contrast between text and background for readability. Check: https://coolors.co/contrast-checker/112a46-acc8e5
  • Limit the Palette: Stick to 3-5 main colors: primary (60%), secondary (30%), and a few accents (10%). Neutral tones (black, white, gray) can balance bold or vibrant colors.
  • Test Across Devices: Colors can appear differently on screens. Test on multiple devices to ensure consistency.

Principles for Applying Color for Visual Hierarchy

  • Prioritize with Color Contrast: Use high-contrast colors for the most important elements (e.g., call-to-action buttons, headlines). Subtle or low-contrast colors work for secondary or background elements.
  • Guide the User’s Eye: Apply bright or bold colors sparingly to draw attention to key features. Neutral or muted colors should dominate less critical elements.
  • Consistency in Usage: Use the same color for similar functions to create intuitive navigation (e.g., all links in blue). Avoid overusing too many colors in one area, which can overwhelm users.
  • Emphasize Interactivity: Highlight interactive elements like buttons or links with distinct colors. Use hover states or slight color changes to signal interactivity.
  • Layer with Opacity: Use rgba(r,g, b, a) to change color opacity to create depth or soften the background without distracting from content.
  • Separate Sections with Background Colors: Alternate background colors for different sections to visually break up content. Use gradients sparingly for modern and sleek designs.
  • Hierarchy Through Saturation and Lightness: Brighter, more saturated colors attract attention; softer, less saturated ones recede. Light backgrounds paired with darker text improve readability.
  • Use Color Coding Sparingly: Assign specific colors to categories or features but ensure users can differentiate without relying on color alone (important for colorblind users).
  • Test for Balance: Step back to see if the color hierarchy feels natural and supports the user’s journey through the site. Iteratively tweak based on user feedback or usability testing.

Typography

Rules of Thumb:

  • Chunk Text: Analyze the text and break it into manageable, scannable parts. Long paragraphs can overwhelm users, so breaking text into smaller chunks creates a more readable experience.
  • Organize Text for Visual Hierarchy: Arrange text elements (e.g., headings, subheadings, body text) to signal importance visually using size, weight, and placement. A clear hierarchy guides readers through the content.
  • Create Difference and Repetition: Combine varied elements (e.g., font sizes, weights) with repeated elements (e.g., consistent styles) for balance. Repetition creates unity, while difference draws attention.
  • Organize for Rhythm and Tension: Use consistent spacing and alignment for a predictable flow (rhythm) and occasional contrasts (tension). Align text to a baseline grid for steady vertical rhythm. Baseline rhythm in typography refers to the consistent vertical spacing between lines of text across a web page or document, aligning them to an invisible grid. This grid is based on a fixed baseline, where the bottoms of the text lines (or baselines) align with a uniform spacing interval.
  • Choose 1–2 Fonts: Limit the design to one or two typefaces, using variations like weight (bold, light), size, style (italic), or color for emphasis. A limited palette ensures cohesion.
  • Create Difference in Text Areas: Use contrast (light vs. dark), proportion (large vs. small), and space (tight vs. loose) to differentiate text sections. Differentiation helps readers identify and focus on key content.
  • Keep Line Length to 10–15 words per line: Optimize line length or smoother reading. Lines that are too short or long hinder readability.
  • Use Padding on Text Boxes with Borders: Add space between the text and its container edges to prevent a cramped appearance. Padding improves legibility and aesthetics.
  • Use CSS for Body Text: Apply line-height: 1.5; and text-align: left; in CSS to ensure adequate line spacing and natural reading flow. Avoid justified text, which creates awkward spacing.
  • Create Strong Lines of Continuance: Use vertical alignments, rule lines, borders, gutters, and consistent alignment to guide the reader’s eye and maintain organization.
  • Avoid Underline and Bold for Emphasis: Underlines and bold text can overwhelm the design. Use italics for subtle, elegant emphasis instead.
  • Repeat Styles for Similar Semantic Elements: Consistently style elements with the same meaning or purpose (e.g., headings or captions). Repetition reinforces structure and improves navigation.

Typography Basics:

Working with Fonts

Typography assignment, by former student Natalie Hendren

Typography demo
/ demo PDF