HTML Graphic Size Correction

For your name/logo jpg, the size in the lecture deck says 313 X 38 px...it is in fact 313 X 58 px. Sorry for the confusion.

Also, we've confirmed that WIX DOES NOT let you upload a site or files made in Dreamweaver or other programs.  If you're using Wix, try hosting from your dropbox account. You'll find easy directions on how to do that.

Thx
Scout

Flash/HTML Project

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:

- As discussed, go ahead and purchase your domain and hosting items. There will be less headaches if you get both from the same place such as GoDaddy or Register.com. Doesn't matter where you purchased these...just want to ensure they have good support should you need it.

- Refer back to the domain/hosting deck from last week for more details. Once you purchase, they will send you several emails with your login credentials and info you need to use with Fetch for loggin in.

- Next week, we'll be having group mood board critiques which will give us additional time to have more time to discuss the Flash/HTML assignment. I'll explain more on that next week.

- Refer to the lecture deck for details on the assignment. At the end of the assignment, you should have the following

- We will be critiquing everyone's assignment using your live domain address vs. launching from the class folder. Refer to the lecture deck for what's due and how we'll be presenting.

I'll start off our next class answering questions and reviewing anything that you need more clarification on for the Flash assignment. ALSO, I typically hold lab hours on the Saturday before the  assignment is due. I'll be at the lab on the 20th - time TBD - I have to request they open on that day. This will given you some additional time to ask questions and get more detail on techniques. 

Jessica is also availalable for questions so feel free to email her at aurorasc@bu.edu.

HTML template wireframe
PSD Template
HTML Template Files

Attached Lecture Deck

Required Reading - Love The Internet

Here's a link to a few past Flash examples that students completed for their assignment. However, we've retooled this particular assignment so they probably won't give you much insight.

This is your chance to jump start your own portfolio site. Do a good job on this. I'm only requiring this one page but the assignment is scalable for you to keep adding pages.

50 most beautiful Flash sites

-----------

Domain Name & Hosting Required - Due 10.18.12

Hey guys,

As discussed, I'm going to do things a bit different this year…with our Flash/HTML lecture coming up, it will be great to learn how to host it online so you can start sending people to your very own domain name/site. To prep for this, you have a bit of work to do. I've outlined the steps and a couple of choices below for hosting and domain names. Lets discuss next class. I'm also attaching a deck that does a good job giving an overview of domains and hosting as well as step by step process for acquiring your own.

Domain & Hosting Deck

1. First, you have think up a name to use for your site. This is called a Domain Name. You can go to godaddy.com or register.com and type in a potential name to see if it's available. There are numerous suffix choices - .com, .net, .biz, etc...I only register .com. Call me old fashion. I usually only register ".com" names but if it's not available as a .com, you can use a .net or a .info.

2. Second, if your name is available, you have to purchase it. Prices vary depending on the site you're at. Godaddy is pretty cheap, Register.com is a little more…go for the cheaper site for purchasing your domain name. They're usually between $5-$15/yr for use of a domain name.

3. Once you purchase, you have to have the name hosted somewhere AND have hosting storage for your files and site.…typically, the place where you purchase it will also offer to host the name.

4. You also need to purchase a hosting package for your site as mentioned above. Godaddy, Register and MediaTemple all offer hosting packages. Godaddy is pretty cheap but not sure how good their customer service is…Register and MediaTemple both have reps that answer phones and help people out..

5. Once you purchase a domain name and hosting package (be good to do it all with one provider), they will send you access information for uploading your files, etc…I usually don't use the web based tools for uploading files. I use a free program called Fetch for uploading and downloading files to my hosting space

6. Go and download Fetch for using to access your hosing space and files. They have a trial that you can start out with. We can configure in class if you have issues.

7. Don't get suckered into purchasing any design tools, templates, SEO services or anything else from them….all you want is a domain name and hosting package.

8. Get going on this right away…that way, we can start uploading your Flash files to your domain address and having fun bringing it to life.

9 You won't get much out of this unless you get this in advance…otherwise, you're just going to watch me doing in on the projector and it won't mean anything…

Here's some providers of both domain names and hosting solutions. Many of them have package deals…Just purchase the domain and hosting for a year….

http://www.register.com/index.rcmx

http://www.godaddy.com/default.aspx

http://mediatemple.net/

http://fetchsoftworks.com/

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.

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

s

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

Class Lecture Deck
Example Mood Board from AT&T

A good example of an Organic Mood Board

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.