Assignment 1_3: Responsive Layouts with Tex, Lines and Shape
Due for review Tuesday, Oct 16 (beginning of class).
We'll be adding shapes/background color to the compositions. Shapes shouldn't be simply used for the purpose of decoration.
Shapes/backgrounds should rather be used to:- Enforce/enhance visual hierarchy (combined with headlines, for example)
- Separate information/sections
- Visually group information/sections
Restrictions and Rules
Same as in previous assignment (no color, just black and white, 1 font (Proxima Nova). Shapes here are technically speaking background-color declarations in CSS. The backgrounds are "naturally" rectangular or square, no other kind of shape should be used at this point. The background-color declarations can be applied to elements such as h1, h3, h3, p, span, div etc.
CSS
Write the CSS rules witch background-color declarations. If necessary, add div elements to the HTML for additional boxes.
Background-color example (each of the value examples result in a black color, there are just different ways to define a color in CSS):
CSS code:
h1 {<br>
background-color: black;<br>
}<br>
h1 {<br>
background-color: #000000;<br>
}<br>
h1 {<br>
background-color: rgb(0,0,0);<br>
}<br>
h1 {<br>
background-color: hsl(0, 0%, 0%);<br>
}<br>
Task
As a start, pick one composition from 1_2 and create at least 3 new responsive compositions using text, lines and shape/background. It's fine to make adjustments to the existing compositions you start with (take elements such as lines out or add new ones) . I recommend to start with the Illustrator templates but you could also try to directly design/code the composition in Dreamweaver or your code editor of choice. In any case I would still like to collect all compositions as PDF for reference.
Make sure you start a new HTML and CSS file for the composition (in a new folder!). Only one of the layouts needs to be coded.
Upload/update you site folder containing PDFs and coded files in Box.
