Exercises are designed as a means to become familiar with and explore the functions of various software environments. Each exercise focuses on specific tools and requires experimentation within those tool sets to discover their potential. Exercises are intended as brief studies to quickly generate many compositions or images for investigative purposes. Most exercises will be due the class period immediately after they are assigned. All exercises must be posted to the class blog prior to the start of the next class and tagged with the student’s name and exercise number. Please categorize all of your posts with your name, so I can see all of your work throughout the semester.

Exercise 1_1
Find a recipe for a simple dish.

This recipe should include:

  • Title
  • Cooking time
  • List of ingredients
  • Directions
  • A footnote (such as origin of the recipe, for example)

All text should be digital which means you either copy it from a website or you type it. The text should be free of all formatting previously applied to it (such as bullet points for list etc.). We won’t use images for this assignment.

Create a design for the first five layouts (prior to coding them) in Illustrator, Photoshop or InDesign. Try to code the other five layouts directly without creating a static design first. Upload JPGs (screenshots) of your first 5 designs to this website by Monday, Sept 02.

Dimensions: Fixed width = 780px, centered on the screen. Height can be treated as needed.
Colors: A maximum of 3 colors can be used and grey scale. Keep the color palette consistent throughout your designs.
Fonts: Not more than 2 different font-family choices per composition

Exercise 1_2
Write the HTML markup 

Writing this will help you get more familiar with HTML tags. Keep in mind that line breaks and text indents/tabs have no effect on the result rendered in a browser. The way to setup the markup this way is a matter of personal preferences.

BUT beside that code is VERY sensitive in regards to writing the opening and closing tags correctly. Be very careful with those. One missing “>” or misspelled tag will most likely break the layout.

Exercise 1_3
Create a CSS file

Exercise 1_4

The page layout should be based on a multiple column grid in combination with a 960px fixed width. 960 pixels is a common width for websites and can easily be divided into 12 or 16 column grids. Click here to download grid templates that you can use in either Illustrator, Photoshop or InDesign (your choice). These templates contain guides and will speed up the process overall. Open the template in your layout program and make a few layout variations for home page and recipe page. Draw rectangles in different shades of grey (see below). Think about possibilities on how to use the grid for your page divisions. Since we’ll be coding a layout for different screen sizes (desktop, tablet and mobile) you need to work on 3 versions for each page.

Desktop: 12 grid units, width = 960px. Tablet: 9 grid units, width = 720px, Mobile: 4 grid units, width = 320px.

“A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.[1] The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.[2] The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.[3] In other words, it focuses on “what a screen does, not what it looks like.” (from wikipedia)


left: home page, right: recipe page.



left: desktop, middle: tablet (iPads etc.), right: mobile device


Exercise 1_5
Organize Site Content—site map

Exercise 1_6
Static Page Design

Exercise 1_7
Structure your HTML file

Exercise 1_8
Create the CSS file

Assignment 02

Exercise 2_1
Select a Story

Find a short story with a good amount of text that can be cut and reworked if necessary.

Exercise 2_2
Visual Research / Brainstorming

Find action words and descriptive qualities.
Write out major points of the narrative (beginning, middle, end) Create options for overall aesthetic (colors, styles, typefaces, etc…)

Exercise 2_3

Develop the pace and sequence of the story in fully designed steps.

Exercise 2_4
Preparing Code

Making and properly saving images and videos
Creating webfonts
Separating layouts into div layouts
Organize website files and folders (use index.html)

Exercise 2_5
Code HTML page

Write html markup without CSS
Add js as needed
post to blog

Exercise 2_6
Code CSS

Leave a Reply