Concepting continued

Hey guys.

As mentioned, we'll be using the last few classes as a working lab to give you a dedicated block of time to work on your design, for me to share techniques and to get your pages looking at good as possible. Mixed within these last few labs, we'll have one more minor lecture on pimping and primping to help you start thinking about internships and jobs.

Any questions? Just email me.

Thx

Scout

Flash Assignment Due Next Thursday

Just a reminder that your Flash assignment is due next Thursday.

For this critique, you must follow these steps in order to be successful.

1. Publish out your Flash project. The default settings will publish a .swf and a .html file.

2. To test it, you can drag your html file into a browser and see what the movie looks like.

3. As discussed, the published files will render your project swf to the upper left section of the browser. To center your swf and/or add a background color, follow these steps:

1. Open the html file that publishes out of Flash, in Dreamweaver (step 1 png)

2. Do not click directly on the swf file (step 2 png)

3. Instead, try to click right at the edge of the swf file. If you do it incorrectly, you'll see the anchor point all around your swf. (Step 2 png) If you do it correctly, you'll see a very thin cursor line blinking...(step 3 png). what you're doing is selecting the table cell that the swf is in vs. selecting the swf itself.

4. Once you have the cell selected, click the center alignment icon (below) to center that table cell. You'll see the swf move over into the center. (step 4 png)

5. You may also change the background color while that cell is selected. Just select Page Properties below the center alignment icon (Everything you need is in the Dreamweaver properties palette). Once you select page properties, you will see a background color swatch which when clicked on, will give you background color choices (step 5 png)

6. Once you close the properties palette, you'll now see your swf centered with the background color. (step 6 png)

7. Save your dreamweaver file, change the name to index.html and drag it into a browser to test (step 7 png)

---------------

After you complete these steps, upload your newly modified index.html file along with your .swf file to your hosting environment and test at the live domain.

That's it. This stuff is very very hard to demonstrate in words. There are numerous ways to do these types of tasks in DW. I'm trying to show you the simplest way I know. If this doesn't make sense or you're having issues, I suggest you come to the 1 hour lab on Sunday from 12-1.

Here's a pdf with the various steps I annotated within these instructions.

Thx

Scout

Concepting

Hey guys,

We're on the home stretch....For the next several classes, we're going to be using much of the class time as a lab for designing your concepts as well as working on technique and style. If you presented mood boards that expressed a spectrum such as a museum or art gallery, then you should do one concept for each mood board. If you presented mood boards with one that articulated or expressed the current brand and one that targeted the new brand, then you should base both your concepts on the future brand. Play with "volume." In the case museums, maybe one concept is more about the visitor and another is more about the museum and it's work - each with the "volume" turned up on and down on pictures, color, type, etc. You get the idea. Ask lots of questions over the next week. We'll be working on ways to interpret two unique concepts based on your wire frame.

Lecture Deck PDF

WebTechniques

Below are the assignments for this week, required reading and templates. Go get em!

Final Assignment #1:

Integrate and utilize all the materials (tools) you’ve developed over the course and develop 2 alternative homepage concepts that are on strategy, architecture and brand. As discussed, design your home pages for a 1024 x 786 screen resolution which means your PSD should be 990px X 768....

Final Assignement #2:

Pick one of your final home page designs and develop a simple 2 page style guide detailing typefaces, colors, links and other vital information for a smooth handoff.

Adobe InDesign style guide template provided.

Save both the your home page concepts as JPGS and style guide as PDF. These files should be uploaded to the class server/folder to a folder with your name on it.

FOR CRITIQUE:

1. Web Pages - save as jpgs into your folder for projection
2. Wire Frame - Also save as jpg in your folder for projection
3. Style Guide - Save as PDF into your folder for possible projection

We will be reviewing all of the above deliverables for your final presentation.

If you're one of many that need more support in Photoshop, now is the time so ask questions, schedule time to meet with me or Yang and look at plenty of examples.


------------------------

Here's a PSD for a past website page that has some elements within that may be useful - drop shadows, gradients, reflections, etc - MeetTheStreet PSD. We'll talk more about this next week.

Required Reading:

Read Visual Design and Testing

Some other sites I like:

www.k10k.com
www.lessrain.de
www.iht.com
www.metadesign.com
www.ourcommon.com

Flash Quickie

Good job last night. Below are some other cool examples of Flash as well as the attached presentation from class.

A couple of date reminders:

Being we missed a class, the Flash assignment will be due 3.29.12 which gives us one more class together after spring break to answer any questions.

Here are the requirements for the Flash assignment - There are 2 parts to the assignment:

Part 1 - For the final assignment, there should be your .swf and index.html file in a folder with your name on it within the assignment folder on the class server. Flash will publish out both a .swf and .html file for your assignment. Put both of these files in your folder.

Part 2 - I also want you to upload both of those files to your hosting environment. The .swf is fine as is. The associated .html file will have to be renamed "index.html" so that it will come up in the browser when we type in www.domainname.com. Make sure you test the link to ensure it works properly. We will be critiquing everyone's Flash assignment using the domain address vs. launching from the class folder. I'll show you how to add a background color behind your Flash piece as well as how to center it within the browser window when we meet after spring break.

I'll start off our next class answering questions and reviewing anything that you need more clarification on for the Flash assignment. ALSO, I typical hold a 1 hour Saturday lab class on the weekend before the Flash assignment is due. This will given you some additional time to ask questions and get more detail on techniques and bugs you may have questions about. I'll let you all let Erin and I know if you'd like to have the lab. It would be on Saturday 3/24. So start thinking about that if you run into trouble.

Attached presentation.

Required Reading - Love The Internet

Here's a link to a few past Flash examples that students completed for their assignment.

This is your chance to jump start your own portfolio site. Do a good job on this. I'm only requiring you to blow out the contact page...but use the time to go above and beyond...

50 most beautiful Flash sites

-----------

Other Site examples. Keep in mind that these links sometimes change so there is a chance that the link is no longer valid or something else replaced it.

1996: GaboCorp

1998: NRG

2001: 2Advanced

2003: RoadRunner

2004: Bill Harvey

2006: NikeAir

OLA- Banners:

BannerBlog

• HP- Big Prints

• GTI Road Block

Flash Guys

Grant Skinner

Eric Natzke