Assignment 2_2: Design

Due Thursday, 11.09

Choose one of the two concepts you established with the sketches and create detailed designs in Illustrator. Create responsive designs for big screen, tablet and smartphones. As mentioned before we have 4-5 unique page designs: Home, About, (Contact), Portfolio Overview and Project page. This means you'll end up with 4-5 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 (and gradients or/and opacity). 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.

Restrictions: Images

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

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. Consider combining grid column to create un-equal proportions. Reduce the number of grid columns on smaller screens.

Use space generously. Define space between content and browser window.

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?