Assignment 1_2: Responsive Layouts with Text and Lines
Due for review Tuesday, Oct 2 (beginning of class).
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 or highlight information/sections
- Visually group information/sections
Lines can have different weights and length in a composition. Use the grid measurements for the width of lines that are applied to new elements (other than already existing h1, h2, h3,, p, ul, li, span or div elements.
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 values. 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. If you don't define a side the border will be allied to all sides (third example). The fourth example is identical with the third but doesn't use the short hand property (combined properties and values = more code).
CSS code:
h1 {<br>
border-top: 5px solid black;<br>
border-right: 5px solid black;<br>
border-bottom: 5px solid black;<br>
border-left: 5px solid black;<br>
}<br><br>
h1 {<br>
border-top: 1px solid black;<br>
}<br><br>
h1 {<br>
border: 5px solid black;<br>
}<br><br>
h1 {<br>
border-width: 5px;<br>
border-style: solid;<br>
border-color: black;<br>
}<br>
Task
As a start pick 2 of the previous compositions. The create six responsive compositions with added lines. Make sure you start new HTML and CSS files for each of the composition. Just like in the previous assignment I recommend to make Illustrator/PDF versions of the layouts first (use the three-size template again). But you could try to design/code directly in Dreamweaver if you feel comfortable enough with coding already. In either case I'd like to collect PDF version of the layout for reference.
Upload/update you site folder containing PDFs and coded files in Box.
Due for review Tuesday, Oct 2 (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)