Assignment 2_2: Design

Due Thursday, 11.13

Create detailed, refined, responsive designs in Illustrator. As mentioned before we have 3-4 unique page designs: Home, About, Portfolio Overview and Project page. This means you'll end up with 3-4 Illustrator documents. Each Illustrator document contains 3 art boards for the different screen sizes.

Below a schematic example of this:

Elements and Restrictions

Elements

Lines, background-color, type, images. Use these elements to create visual interest, organize and group related content as well as to establish visual hierarchy.

Restrictions: Type

Choose a Google font from this given list. Since you may want to use your site later outside of UIC we use the Google Font service to avoid license issues and potential penalties. To read more about web font services and how to use Google Fonts please read this article.

Restrictions: Color

Black/White plus one color (with opacity or/and gradients). Use color carefully especially on the project pages. Too much color used for the page design visually competes with the color in the project images. If you use the color for color coding more than one color can be used. You could color code the main sections or the portfolio sections (visually identify each section with a different color on the page and navigation).

Restrictions: Images

Project images and monochromatic background textures or patterns (optional, of course).

Goals

Create a coherent visual system of styles. Like in assignment 1 identify pieces of information (title, headlines, subhead, text...) and apply styles systematically. Apply similar styles to similar pieces of information (headlines, subheads).

Organize content in the grid. Reduce the number of grid columns on smaller screens if necessary.

Use space generously.

Use contrast to create visual hierarchy (small/big, light/bold, black/white, positive/negative (type and background). How can elements such as lines and background color enhance the hierarchy?