Assignment 1_2: Responsive Layouts with Text and Lines
We'll be adding lines to the compositions. Lines shouldn't be simply used for the purpose of decoration.
Lines should rather be used to:- Enforce/enhance visual hierarchy (combined with headlines, for example)
- Separate information/sections
- Visually group information/sections
Lines can have different weights and length in a composition.
Restrictions and Rules
Same as in previous assignment (no color, just black, no shapes, only 1 font (Proxima Nova).
CSS
Write the CSS rules using so called short-hand border properties. In the case of lines it's a combination of thickness, kind and color. For now, only use the "solid" kind with different thicknesses .
In the first example below the border is applied to each side of the h1 element. In the second example the border is applied only to the top side. "Left" and "right" values are also options.
CSS code:
h1 {<br>
border: 5px solid black;<br>
}<br><br>
h1 {<br>
border-top: 1px solid black;<br>
}<br>
Task
Make 3 responsive compositions using lines and text. You can either pick an existing composition and add lines or create a new composition. Make sure you start new HTML and CSS files for each of the composition. Just like in the previous assignment make Illustrator/PDF version of the layouts as well for reference (use the 3-size template again).
Upload PDFs and coded files to box.
Due for review Thursday Sept 28 (beginning of class).
Tips
- Don’t mix up too many different sizes and weights
- Avoid centering elements
- Combine different proportions
- Create contrast (big/small, thin/bold, tight/open, narrow/wide..)
- Group chunks of information and look for relations between those groups (sizes, spaces, alignments)