To Do This Week:
- Info Card: Visual Hierarchy DUE Friday September 27
- Blackbird: CSS Design DUE Friday September 27
Notes
Blackbird Project Due
- one external link
- one internal or anchor link
- one image insert
- one background image
- an external stylesheet
- formatted CSS and HTML (identing)
- applied visual hierarchy in CSS – layout, color and typography
Validate the html and css of your Blackbird site:
Validator.w3.org
Visual Hierarchy Primer:
Difference: where the eye is drawn
Repetition: where the eye sees pattern and context
Grid System:
- proportion, alignment, balance
- to grid or not to grid?
- use grid paper for your sketches!
Golden Ratio Calculator (multiple or divide a width by 1.62%) : total length a + b is to the length of the longer segment a as the length of a is to the length of the shorter segment b
Rule of Thirds
Layout examples:
Texture and Imagery:
Applied Web Color
web color values: RGB, 0- 255
rgba. “opacity” vs rgba
ImageColorPicker – get color scheme from an image
Mandatory Midterm Meeting (5%) – by Wednesday, October 9
Please set up a mid-term meeting with me by messaging me on Slack. This meeting is to check in about how you are doing so far with HTML and CSS.
Below are my times to meet. You can either set up a 30 minute slot or just 5-10 minutes if you are feeling comfortable with the material so far. For longer sessions, we can meet on Zoom. For shorter, we can meet after class.
My Availability:
MW – 10:00pm-12:00pm, 1:30pm-3:00pm
TTH – 12:00pm-3:00pm
Typography
Rules of Thumb:
- chunk text (analyze the text)
- organize text for visual hierarchy, create difference and repetition
- organize for rhythm and tension (explore what baseline rhythm is)
- choose 1-2 fonts (make differences with weight, size, style, color)
- create difference in text areas (contrast, proportion, space)
- keep line length to 45-90 characters per line or 10-15 words
- use padding on text boxes with borders
- for text body, use CSS rules: “line-height: 1.5;” and “text-align: left”
- create strong lines of continuance (verticals, rule lines, borders, gutters and alignment)
- avoid underline and bold for emphasis ( italic is best)
- repeat styles for similar semantic elements to create repetition
Typography Basics:
- 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
- add padding to text boxes – move away from borders
- Lorem ipsum
- Entity Code – A Clear and Quick Reference to HTML Entities Codes
Working with Fonts
Typography assignment, by former student Natalie Hendren
Student Info-Card Designs:
CSS GRID