Web Graphics I

Hey there new budding web designers!

Welcome to Web Graphics (or Introduction to Professional Web Design). I’m looking forward to us working on some fun, challenging projects these next 10 weeks. To get us started, please make sure you bring in your homework assignment from Monday’s first class.

If you need a reminder, here’s what you need:

• 3 Screengrabs of websites
• 1 Content-focused
• 1 Application-focused
• 1 Retail-focused
• Print each out in color on no less than 11″x17″

During class on Wednesday we will be breaking each example down and discussing the merit and appropriateness of the design and implementation. At the completion of our critique, we’ll collectively choose the worst implementation of each. Those poor examples will be the fodder for our next homework assignment; sketch new homepages for each.

But don’t worry about that for now. Just be prepared for our 2nd class, Wednesday.

Read this short article and pay close attention to Key Concept #3. It makes sense to duplicate important call-to-actions in the footer!

http://www.grokdotcom.com/2010/06/14/scroll-with-me-baby-the-80-20-rule-strikes-again/

Really nice site; well organized content with enriching illustration. It has some bonus animations if you view it in Safari.

This design reminds me of old science textbooks from the 70′s and 80′s. Check it out and see if it doesn’t inspire you to take your AEA project to new heights.

http://newadventuresconf.com/

Pretty sweet web app that allows you to test out any FontFont web fonts on any site. While it is definitely a marketing and sales tool for FontShop, it’s still fun to play with: http://fontfonter.com/

Online font comparison applications:

• http://www.typetester.org/
• http://www.typechart.com/

Articles:

• http://www.alistapart.com/articles/on-web-typography/
• http://24ways.org/2009/type-inspired-interfaces
• http://24ways.org/2006/compose-to-a-vertical-rhythm
• http://informationarchitects.jp/the-web-is-all-about-typography-period/

My mind is blown. I am really amazed at the level CSS3 transform-stuff going on in this latest 2010 version of MacHeist. (If you don’t know what MacHeist is, it’s a great way to get some cheap Mac-specific software. I was a first-time purchaser in 2009.)

Check out this site on Firefox first: http://www.macheist.com/

And then, for giggles, check out the same site on Safari.  There is one typographic detail on the homepage that completely made me do a double-take.

Interested in reading a single tweet that acted as the lit match that ignited a truck load of C4 already doused with napalm?

Start here.

Then read this.

…and then catch up on the twitter fire hose of responses once Happy Cog Studios tweeted the question to the masses.

SVA Dot Dot Dot Lectures: Jason Santa Maria from MFA Interaction Design on Vimeo.

SVA Lecture: Jason Santa Maria

There’s a little here for everyone. Look at all these sites that use a mix of beautiful typography and compelling imagery/illustration/art direction/etc.

http://www.thedesigncubicle.com/2010/01/30-websites-with-lovely-layout-and-typography/

Who reads anymore?  YOU DO!

For next Wed, the 20th, please read these articles concerning web typography techniques and practice.  We will be discussing in class (and don’t forget, class participation is part of your grade.):

http://www.alistapart.com/articles/on-web-typography/

http://ilovetypography.com/2009/07/20/web-fonts-%E2%80%94-where-are-we/

http://24ways.org/2009/type-inspired-interfaces

How is your personal type cache looking these days?  Upgrade your type library with these free, @font-face ready fonts:

http://www.theleagueofmoveabletype.com/