Assignment 5_2: Design

Choose one sketch/idea and create 2 detailed design variations in Illustrator for the landing (home) page and one of the building pages. These variations can, for example, differ in color, font choice, and sizes, lines and shapes etc. You should end up with 6 Illustrator screens/drawings per design (2 pages in 3 sizes = 6 screens). 2 design ideas need 12 screens total.

Use this Illustrator grid template as a starting point. If you have an older Illustrator version use this file. Add new layers so that you can view your design with or without the grid layer. Consider using elements from the previous assignment: Lines (borders), shapes (background colors applied to certain divs), image (background and regular images) as well as color. Use these design elements to organize content and create visual hierarchy.

For this part of the project use the actual text posted here (bottom of page). Copy and paste this text into Illustrator. Text in body copy should not be smaller than 12px.

Due: Nov 15., beginning of class

Fonts, Colors and Images

Since this microsite is connected to the UIC main site we'll follow the UIC design guidelines in regards to fonts and colors.

Fonts:

The main fonts are Theinhardt Medium, Bold and Black. Georgia Regular and Black can be substituted if a serif font is required (for body copy). Not more than 3 different font sizes can be used.

Colors:

Below are possible colors and gradients you can use (+ black and white.) If you work with gradients go to this page to create the gradients and copy the CSS code.

Images:

Photos of the buildings won't be provided so you'll need to collect or take photography yourself. Existing photographs of the buildings may be used but it's recommended that you take your own photos. Images can be textural (close ups, materials, light reflections, etc.). Up to 6 different images (all greyscale, no color) can be used per building.

Logo images:

Incorporate the UIC and the Open House logos. Download the logos here. There are two version for each logo (for placement on dark and light backgrounds).