Assignments are opportunities to synthesize and apply ideas explored through the exercises, required readings, writing, and class discussion. These are invitations to invent and experiment creatively with the vast potential of these ubiquitous design tools. Creative and ambitious experiments are encouraged. Obvious and easily attained solutions will be evaluated less favorably. All assignments must be completed to pass the course. Assignments are only considered as completed when they are available on the class website.

Research Presentation
The select designers are influential and relevant to web design. Present this person and his/her work to the class, citing specific images, videos, or quotes. Include a brief bio of the designer’s career, 3-5 important projects, and your own critique or response. You will present to the class directly from the class website. Post the material to be presented on the site with embedded images and/or links to external sources. 10 min presentation followed by discussion.

List of Web Designers
1. Jacob Gube—Molly
2. Jakob Nielsen—Ethan
3. Jeffrey Zeldman—Dustin
4. Fabio Sasso—Nolan
5. Veerle Pieters—Shalina
6. Mike Kus—Lindsay
7. Jason Santa Maria—Rachel
8. Dan Cederholm—Rebecca
9. Ethan Marcotte—Mitch

Presentations will take place at the beginning of class on Wednesdays, starting the fifth week of classes. Order of presentations to be determined on the fourth day of class.

Project 1

Recipes: HTML & CSS Layouts

The task is to style the same HTML in many different ways using pure CSS (no images). This means that once the HTML is setup it won’t change (or just minimal when necessary). You’ll modify the CSS style sheet files instead. Since we don’t use images yet you’ll focus on two aspects: Styling type and making layout variations using some of the basic dimension and positioning techniques within CSS. Pay attention to quality/originality of the composition and the technical execution. The color, type choice and composition should be a visual representation of your specific dish.

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

Experiment with typography (sizes, placement, color, background-color…) and composition. Multi-column/grid layouts are possible. Also consider the browser’s background-color as a design element of your composition. Your layout (780px wide) should appear horizontally centered in the browser window (left and ride sides are identical even after re sizing the browser). Create (at least) 10 coded recipe layouts.

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.

Exercise 1_1: Find a recipe for a simple dish.
Exercise 1_2: Write the HTML markup
Exercise 1_3: Create a CSS file

File Organization
You should have 10 folders, one for each different recipe card design. Within each folder, you should have one HTML file and one CSS file. filesandfolders


Cooking Site: Responsive Page Layout

The task is to create 2 example pages of a fictional cooking/recipe website (home page + recipe page example). You design the layout first and code it afterwards.

The recipe page should contain the recipe you experimented with in the previous assignment. But create a new design for this assignment since the dimensions are different and the recipe itself should just be part of the page layout in this case. Have one section of your home page be a link to your recipe page (this section on your home page could be “the recipe of the month”, for example). This will be the only “working” link for this assignment. Although technically we still need to create links for all navigation items in order to show mouseovers etc. Instead of linking to an HTML page (link to a URL) just use the # sign as a placeholder (I’ll explain).

In this assignment we’re focusing on a web page layout and it’s typical divisions. Often sections are divided as follows:
— Header (may contain site title/logo, big image area, navigation elements)
— Navigation (main links of the site, may contain site title/logo, can appear horizontally at the top of a page or vertically in a sidebar)
— Feature area on home page with big image
— Main content (your full recipe on the recipe page)
— Side bar(s) (may contain navigation links, site highlights, ads, embedded twitter feeds…)
— Footer (my contain site links, social media icons/links, copyright info, contact information etc.)

Divide your layout into those sections. Header and navigation sections may be combined. You may also add sections if necessary. Use generic images (dishes, food and ingredients only, no illustrations, no people etc.). You can use greek text for all copy and navigation links (except the one that leads to the recipe page).

Content suggestions for sections:
(all visible text has to be selectable HTML, no images for text elements or navigation). You can use greek text and generic food images (except the ones for your recipe).

Site title: (or any other title you can come up with)
Header: Site title and a few links (social media icons, contact, sitemap…).
Navigation: About, Featured Recipe, All Recipes, Tips & Tools, News, Blog, Contact (navigation could also go inside a sidebar)
On Home Page: Feature area highlighting one recipe as the “recipe of the month”, use a big image of your recipe on this section.
Main content for home page: highlight 3-4 other recipes (generic food images and greek text).
Main content for recipe page: Your recipe with Title, ingredients, instructions, cooking time etc.
Side bar (1 column, all greek text): “News” (3 news items with title and short excerpt, “Blog” (3 blog feed excerpts with date and title)
Footer (3-4 columns): copyright info, main navigation links, contact info, social media icons

Exercise 1_4: Wireframes
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

Due 10/14/13

Project 2
Interactive Storytelling

/ two weeks

/ assigned group project
/ design an interactive visual narrative
/ using a found short story, create a website that takes the viewer on an active journey through the narrative.

/ work as a team to develop an appropriate aesthetic. Each team member will have different strengths and weaknesses in the [web] design process. Use each other to develop a unique and high quality final piece.


Assigned Groups

Group 1

Group 2

Group 3

Exercise 2_1: Select a Story
Exercise 2_2: Visual Research / Brainstorming
Exercise 2_3: Storyboarding
Exercise 2_4: Preparing Code
Exercise 2_5: code HTML
Exercise 2_6: code CSS

Due 11/11/13

Final Project
Personal Online Design Portfolio

Due 12/11/13

Leave a Reply