Thursday, March 4th

Class hours: 9:40am – 2:05pm
Mr. Cronin
Mr. Herr

Notes

Study for review quiz tomorrow; no new vocab, but review.
Kayne West and John Mayer high-five fail.
Pim and Jam – you need to watch the office to get this.

Example Files

9:40 Attendance and Article

9:45 Morning Web Content

backgrounds images / repetition control
pixel Stretches
partially transparent backgrounds
resources for web backgrounds

10:30 Morning Web Exercise #1: Background Practice.

In today’s first exercise, I want you to open the .html file inside of the “WebExercise1″ folder. Taking this file (that starts without any style information) I want you to:

Put content in a centered div floating in the middle of the screen 800 pixels wide. This div is to have a solid color background for legibility.
Give body a repeating background image, either stripes, bubbles, or a Tartan. Use one of the generators to make this file.

When complete create a folder inside Week 21 called “thursdayBackgroundPractice” and upload all of your work to this folder.

10:45 Break (15 Minutes)

11:00 Photoshop / Illustrator Content

Typing non-linearly

11:10 Start of Site Redesign Project for local business: New World Tortilla.

“New World Tortilla” is a Burlington based Mexican restaurant. They used to have a shop right on Rt. 15 near Subway, but moved to the new Davis Center at UVM.

Here is their current web presence. As you can see from clicking around, is they do NOT have the most developed style. It looks as if they took a template, changed the top left heading, and said “DONE!”. Many businesses do this when they don’t have the skill set of a web designer. They need to get something online, so this is better than nothing.

If we start deconstructing the design, you can see that there are not any design elements that make customers think of Mexican food. At all. In fact I would call this a rather cold design; when I think of Mexican food, or Mexico in general, I think warm colors, reds, yellows, greens, oranges, etc.

Here are some more successful Mexican Restaurant themed websites:

We are going to all act as if it is July 1st 2010. You are out of school. You don’t have any money. You like movies. You need money to go to the movies. You decide to try your hand at doing some “spec” free lance web design work. (Spec is short for speculative, where the designer does some/all of the work before going to the client.) Often this is how you will build a portfolio of work when starting out.

So…this assignment will bridge weeks in CAWD, and will be broken down into different components.

Digital Creation of Existing Logo Representation / Generation of New Ideas.
Creation of layout in Photoshop.
Deconstruction of layout from Photoshop and construction of template in xhtml/css.
Page by page construction – > Complete.

Today we will start Part 1.

Part 1: Digital Creation of Existing Logo Representation / Generation of New Ideas.

Today you will be creating two potential logos to bring to the client. They do not have any already created artwork in digital form. You are going to create their existing logo, and create a new visual look for their business.

Both logos will be at 200px by 200px in size at 72 DPI. (We use 72 for this as this project will stay digital).

First go the homepage of the existing New World Tortilla site. You can see through the glass their sun logo with the words “New World Tortilla” going around the sun. This is the first digital content you create, a replication of their existing branding.

You may want to go online and find a font which matches up with the “painted” words on the glass.

Save this first part of the assignment as as “NWExisting.png” and “NWExisting.psd(or.ai)” and upload to Week 21.

Once complete, you will use your design skills to create a new visual look/branding for New World Tortilla. Using the same sizes, and including the same words, create a new logo for them. Use the above websites as inspiration, for ideas. Think of different forms, shapes and colors that could go along with the required text that create the feel of a “Mexican Restaurant”. No photos allowed for this assignment, you must use all original content.

Save this second part of the assignment as as “NWNew.png” and “NWNew.psd(or.ai)” and upload to Week 21.

Tomorrow we start working on Part 2.

Study for review quiz!

12:15 Lunch

12:45 Attendance and Article

12:50 Afternoon Web Design / Photoshop Exercise: Web 2.0 Layout in Photoshop.

This afternoon you are going to work creating a a “Web 2.0″ style layout in Photoshop. Based on how well we did this last tutorial, I am NOT going to go through this step by step, but I have done this so I can help anyone with issues when they come up.

I found that some of the numeric values they used aren’t perfect, use the reference image (the completed tutorial) at the top of the lesson as a visual guide. Colors should be perfect, use what they give you.

Two files you will need to add to this project, the video screen and the glass-globe logo to the left of the main heading are located in today’s example files in the folder called “afternoonSourceImagery”.

When complete, save your file twice as “web2.png” and “web2.psd” and upload to Week 21.

Some students will finish early, some students will take the entire time. This not a race, make your final image match the image on the tutorial.

When complete, study for tomorrows quiz.

Click here to start. Take your time.

2:05 Dismissal