Visual Design Extra Credit
Due on Tue, 03/03 @ 11:59PM. 2 Points.
IMPORTANT:
- This is optional (extra credit). Only do it if you want to.
- This is an either / or extra credit assignment. You may complete only ONE of the tasks described below for 2 points.
OPTION 1: Instantiating Principled Composition via CSS
CSS is unweildy, but if you’re going to be a designer within the web medium, you have to learn it. For this extra credit option, please do the following:
Your Task
- Open the following Codepen. You can either fork it and register for CodePen to save it, or download the files and edit them using a code editor.
- Select a header and a body copy font from Google Fonts. Here is some sample code of how this is done.
- Instantiate the principles of proximity and alignment to create nice photo cards that flow. Consider using flexbox (see this sample).
- Modify the HTML / CSS so that there is one featured photo. Use the principle of contrast to make it stand out.
- When you’re done, paste a link to your file (ideally on CodePen) in this Google Doc so that we can take a look at different techniques. You will continue working on this next week, so make sure you keep track of your files.
Tips
- Use whitespace liberally.
- Play around with different font weights (and choose a font that supports many weights).
- Try not to use any borders. Let the whitespace shape the sections.
- See Lecture 12: Visual Design Part I for more details
Example Solution
OPTION 2: Style Tiles (Branding)
Your Task
- Select three values from the list of values page. Page of Values
- Create two different style tile concepts using this style tile template on CodePen (and feel free to make any changes to it).
- Submit your 2 style tiles and write a 1-page summary of how your style tiles communicate your project’s values.
Tips
- See Lecture 14: Visual Design Part I for more details