Week 3 - Branding & Mood Boards

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.

Some examples 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, antiquated and doesn't prominently feature artwork on the home page...maybe one board articulating how busy and out of date the current site is and one that articulates clean, engaging, artwork-rich and text-light direction...maybe it feels aspirational and easy to scan.

OR

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 tourists or non-business travelers...that board 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 - usually portrait.

▪ 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 Gator Board 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 (empty template provided)

- save as 2 separate JPGs for projection

- see syllabus for when assignment is due

Thx

s

Week 2 - Site Mapping & Wireframing

Couple of timely announcements to supplement our Site Mapping Lecture:

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

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

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.  If you're downloading MindManager to a lab computer, 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 (probably should) just download it to your personal computer (easier). You won't need it for more than this one assignment.

Assignment 3 (2 parts):

1. Create a site map of the current taxonomy for the site you're about to redesign. This requires getting to know the site inside and out and mapping every page.
2.  Create a home page paper wireframe/schematic for your new home page. This is not for the current home page structure...this is the beginning of the creation process. Create a wire frame of what you want the structure to be. This is only the foundation. You will be designing on top of this in a couple of weeks.

For the site map:

Just follow the navigation. Don't worry about mapping promos or other links that live outside the main, global and footer navigation. Only follow this down to quaternary (4) 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. 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 MAJOR CLIENT DELIVERABLE AND A PORTFOLIO PIECE FOR MANY OF YOU, SO PUT THE TIME IN. ** Your site map should be the size it NEEDS to be....I'll demonstrate how to find this out in class but directions below:

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

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

All files including syllabus, class lecture, artifact examples, templates and required readings can be found at this DropBox link.

----------

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.

Week 1 - Welcome

Welcome to the Class. Following are the assignments, handouts, required reading and templates for the first week. Please contact me with any questions.

All files including syllabus, class lecture, artifact examples, templates and required readings can be found at this DropBox link.

Required Reading - One Process fits all - in DB

Required Reading-Analyzing the Competition - in DB

Assignment 1:

Get your feet wet...pick an industry from the list below and do an analysis of 6 competitive sites within that industry. Once you pick one, you will be playing designer/client and picking one of the six to redesign within our process:

Zoo/Aquarium

Automaker

Museum/Art gallery

Amusement Park/Recreation

Airline

Charity/Fund Raising

“Analysis Criteria”

What’s the mood of the site?

Site aesthetics (visuals)/on brand with messaging?

Any cool features/functionality/other?

Competitive analysis example and template in DB.

Always save your assignments in both the native file format (the program you created it in) as well as a PDF or JPG and upload to class folder. Refer to syllabus for details on presenting formats and dates. Also, keep all your screen shots together for your competitive analysis or Illustrator won't be able to find them and open properly.

Assignment #2

Author a creative brief for your newly proposed site. A creative brief is a summary of the overall visual and conceptual goals for the site, identifying the target audience, proposed visual and brand styles as well as any executional considerations.

Creative strategy example and template in DB.

Save in both assignments in both native format and as a PDF and upload to class folder with your last name on the folder. Also, give your files a name that makes sense such as "stevenson_cs.pdf" (for creative strategy) and "stevenson_CompAnaly.pdf" for your competitive analysis...