Thursday, April 5, 2012

Pimp'N & primp'N Lecture and Assignment for next week

Hey guys,

Hope you picked up some tips on prepping yourself for the real world. attached is the lecture deck. Below is the homework assignment due next week. It's pretty simple.

Homework:

Go online and find 2 examples of personal portfolio sites. These could be a typical portfolio site or maybe it contains a blog or videos or something interesting and unique. Once you find your 2 examples, create a blog and write 2 paragraphs about each example detailing why you picked them, what's good about the site, etc.

For creating a blog, you can use one of the below links. Creating a blog is very straight forward. Just follow the directions on whichever one you pick. Don't forget to include a picture, screenshot, video or some other graphical device for each posting. The final deliverable back to me and Erin is a link to your newly created blog. We'll probably critique a handful of them next class.

This is due 4.12.12 - NEXT WEEK.

www.blogger.com
www.tumblr.com

Email your blog link to BOTH me and Erin

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

Here's some personal portfolio sites that I found. This should give you an idea of what a personal portfolio site is

1. www.londonlee.com
2. http://www.jlern.com/
3. http://www.americancheese.tv/
4. http://www.ourcommon.com/
5. http://www.bradfritz.com/
6. http://www.jamesvictore.com/


Here's some useful Links to some tools and information for getting started on your vessel and site.

http://www.pinazangaro.com/index.html

http://www.jewelboxing.com/index.php

http://www.lost-luggage.com/store/home.php

http://www.acmemade.com/

http://www.twelvesouth.com/

http://www.cherryflava.com/photos/uncategorized/2007/12/12/mcardusbbusinesscard.jpg

Suggested Reading - Making your work sing



thx
ss

Friday, March 30, 2012

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

Friday, March 23, 2012

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.


Thx
Scout

Thursday, March 22, 2012

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.
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

Friday, March 9, 2012

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

Friday, February 17, 2012

Branding & Moodboards

You made it to branding and everyone's doing a great job!

We now continue along the web design process and discover how brand and mood boards all play an important role in establishing the right brand voice and tone for your upcoming proposed site redesigns. Feel free to develop one mood board for the current site and one for the one you're redesigning based on your most primary audience(s) OR one board for one audience and one for another - many ways to do this so have fun with it.

Example on how to think about it:

1. One board for current site and one for future site

Lets say you're redesigning a museum site cause the current one is too busy and doesn't prominently feature artwork on the home page...maybe one board articulating how busy and plain the current site is and one that articulates clean, artwork-rich and text-light direction...maybe it feels aspirational and easy to scan..

2. One board for one audience and a second one for the secondary or other primary audience (you can have 2 primary audiences)

Lets say you're doing an airline site...maybe one board that feels more "tool" or resource=centric...where business people can easily interact with scheduling, tickets and other airline services. The other board might be for typical tourists or travelers...that might feel more destination and lifestyle-centric...


These should be 20 X 30 inches...we'll project instead of printing...this is my gift to you...

So what should be on your mood boards? Anything that g­­ets your creative point across. This can include colors, typography, imagery, illustrations, white space (or lack thereof), and messaging. If you were working with a content strategist or copywriter, you might include taglines, slogans, brand attributes (adjectives), or a vision statement. This helps the client to not only visualize the proposed style, but to see how the verbiage can support the overall experience.

Mood boards can be extremely helpful when you’re searching for an overall tone or visual language, but they can also expedite the approval of a creative direction before heading into interface design. In the past, we have noticed that separating initial creative ideas from the mechanics of the site allows the client to make clear and concise design decisions without impacting time or budget.

There are a few things to keep in mind when creating mood boards.
Choose an orientation that best fits the subject matter.
Take into account the audience and how you’ll be presenting to them. Your mood boards can be digital or printed (or both) depending on whether your meeting is virtual or in person.

And finally, have fun. Creating mood boards is not a rigidly define activity. Use whatever pieces you can to express your vision, whether it is cutting and pasting magazine bits to Gatorboard or adding minute details and a custom polish to every serif. Do the research on mood boards...use a mixture of pictures, type, color, icons or non of those or all of those...the board as a whole should help articulate a vibe or mood for your intended direction....

Questions?


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




Assignment 1:

Use stock photography/illustration, objects, colors, icons, type and/or anything else it takes to get your mood across and develop 2-mood boards (see different combinations of mood boards above) using pictures, brand attributes, color blocks, icons, etc. You can also use www.tonystone.com or www.gettyimages.com for other photo choices.

Guidelines:

- 20 x 30 format in illustrator

- save as 2 separate JPGs for projection

Assignment 2:
For next week 2/13/12) have your "coming soon" placeholder page created and uploaded to your hosting site. Send both Erin and myself the link by the beginning of class. Let us know if you have any questions. See syllabus for mood board due date.

Thx
A bad example of a picture collection Mood Board
Required Reading - 3 out of 4 visitors...

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

Some Resources:

Marks of Excellence:

Finding the roots of trademarks in heraldry, potter's marks, monograms, and other such ancient devices, this book traces the history of the corporate visual lexicon and produces a taxonomy of the commercial age. An alphabetical section covers motifs from animals to waves, with short definitions and analyses beautifully complemented by daringly cropped and crisply photographed images. Pictures of this quality and interest would steal the show in most volumes, but the text stands up well to the challenge of images that gain force because of the familiarity of their subjects (corporate trademarks), and the unusual sense that the book's context lends to them. Marks of Excellence is a worthwhile exploration at the modern language of ownership.--This text refers to an out of print or unavailable edition of this title.

Designing Brand Identity:
From an interactive website to a business card, a brand must be recognizable, differentiated and help build customer loyalty. This indispensable resource presents brand identity fundamentals and a comprehensive dynamic process that help brands succeed. From researching the competition to translating the vision of the CEO to designing and implementing an integrated brand identity program, the meticulous development process is presented through a highly visible step by step approach in five phases: research and analysis, brand and identity strategy, brand identity design, brand identity applications and managing brand assets.

Thursday, February 2, 2012

Site Mapping / Wire Framing

Couple of timely announcements to supplement our Site Mapping Lecture:

Please do your wire frames as 11 X 17 vs 8.5 X 11. These can be B&W and the reason for the larger size is so we can all see them during critique vs. having to use binoculars...

Erin will be emailing several of you and giving you the opportunity to tweak your competitive analysis documents. The tweaks include making sure the screen shots are large enough, have the key-line around them, having the numbers in the right place and just general tightening up so they look fantastic.

Please remember that your domain name and hosting will be due on the 16th. I'll review in detail this coming week.

Erin will also be giving a pop quiz in the next couple of weeks so make sure you're doing al the required reading, etc.

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

Welcome to the Site Mapping.

This week is all about Information Architecture, Site Mapping, Wireframing and Page Schematics. As we migrate from "Discovery" to "Design", we are learning essential practices, tools and deliverables that are invaluable while also ensuring you have a solid structure and flow to your site prior to applying graphics or "pixel-pushing."


COUPLE OF ANNOUNCEMENTS:

1. Make sure you read all your required reading. There might be a quiz in the next week or two...Erin will be administering the quiz.

2. When you're downloading MindManager to your account/computer in the lab, you're going to need one of the teach guys to type in a password so you can install it. I've spoken with them and they're fine with doing it. You can also download it to your personal computer. You won't need it for more than this one assignment.

Assignment 3:

Create a site map of the current taxonomy for the site you're about to redesign AND a home page paper wireframe/schematic of what you think your revised (home page) structure will end up looking like prior to comping.

For the site map:

Just follow the navigation. Don't worry about mapping promos or other links that live outside the navigation. Only follow this down to quaternary levels. Ensure you differentiate main nav from global/footer nav as well as any pages that go off the site or are orphan pages (pages that live outside the nav).

Take advantage of Mindjet's MindManager 9 30 day trial download. It's fairly new for the Mac platform and pretty intuitive. Don't forget to take the tutorial as well as check out the map gallery. **Also, for our presentation next week, if you're using MindManager, don't forget to save as PDF for projection presentation.

**LASTLY, DON'T PRESENT SOMETHING THAT IS UNREADABLE, SLOPPY OR TOO SMALL. THIS IS A PORTFOLIO PIECE FOR MOST OF YOU, SO PUT THE TIME IN. ** Your site map should be the size it NEEDS to be....more on that later...and in color.

Here's how to tell the actual size you should print this out at:

1. Do your thing in MindManager
2. Export as a PDF
3. Open in Acrobat (not preview)
4. Under "file", select "properties." That will tell you the size of the paper.
5. For most of you, this will be larger than 11X17 so you'll have to submit that PDF to the lab crew for printing


For the wire frame:

Just use gray boxes and simple type to describe what's going to be in that box or section - a rotating flash brand piece, news, updates, etc. ** Your wire frame should be 11 X 17 (Landscape) B&W (no color needed). Use PPT, InDesign or Illustrator to do this. No template provided.

Remember...just think structure & flow, not design.

Print both out and pin up for critique. Ensure both are in PDF format in your folder as well.

Both assignments due NEXT WEEK! Refer to syllabus.

Here's some past student examples of a site map and wire frame.


Class Lecture Slides
Wk 2 Required Reading - Site Mapping
Wire Framing PPT - An Example

----------

Some Resources:

Information Architecture: Blueprints for the Web - If you want to learn how to structure and organise websites, then this is the book for you. From data chunking and card sorting to scenarios and task analysis, this book contains everything you ever wanted to know about information architecture for the web, and then some.

The Art and Science of Web Design: When it comes to Web design, style guides are often too boring and predictable to capture the attention of caffeine-riddled Web developers. But not The Art & Science of Web Design; this book strategically equips readers to design sites effectively.