Fungible Convictions

When I started this blog several years ago, it coincided with a professional study of print design—which meant I got more interested than the average geek in type-level CSS and options/standards for web typography. It’s to the point where I’ve now volunteered to teach a 2-hour course later this month during MIT’s Independent Activities Period (IAP) on typographic principles for the web.

Typography for the web: Principles and tools
Andrew Whitacre, Communications Manager, CMS/C4FCM
Tue Jan 26, 02-04:00pm, 2-142

Enrollment limited: advance sign up required (see contact below)
Signup by: 25-Jan-2010
Limited to 20 participants.
Single session event

There’s nothing better than good typography to make your website more readable, searchable, and beautiful. This class starts with the first principles of typography and applies them to the web. By the end of the class, you will know 1) how to choose the right font for the job, 2) how to design your text beautifully without sacrificing accessibility for the visually impaired, and 3) what tools are available to expand your skills and make your type-on-the-web life a whole lot easier. This class presumes basic knowledge of Cascading Style Sheets (CSS).
Contact: Andrew Whitacre, Communications Manager, CMS/C4FCM, awhit@MIT.EDU
Sponsor: Comparative Media Studies

When each person registered (it’s up to about a dozen folks now), I ask them to describe what they hope to get from the class and if there’s anything in their work they could especially benefit from learning about. (IAP courses are open to anyone at MIT—students, faculty, staff, anyone.) So I’m going to write up a set of blog posts here thrashing out my thoughts to their responses. One person wants to know about picking the right font for the job, another wants advice on marketing considerations, and everyone wants guidance on CSS.

I think they’ll be surprised to find out how much there is to know about accessibility—everything from proper contrast for older users to fluid widths to accommodate various screen sizes. I’ve budgeted twenty minutes for that section, but I can easily see it running over.

Anyway, overall this should be a blast. The posts coming over the next couple weeks should be interesting as I teach myself what I need to teach on the 26th.

A simple website I designed for a couple friends starting their own business just went live yesterday: http://bulldogms.com/

I had a lot of fun drawing the logo:

Which as I mentioned in another post is just a tracing of their superawesome pet bulldog Fiona:

If anybody is looking for experienced consumer product marketers, you know where to go: Bulldog Marketing & Sales.

Recently finished two new tutorials, both of which I’ll use for work…

I still have to sit back and admire these tutorial writers’ ability to walk people through combining dozens of tools to achieve a very particular result.

Good friends of ours are starting their own marketing company. First off, that’s awesome. But just as awesome is that they asked me to design a logo.

They’ve named their business—Bulldog Marketing and Sales, Inc.—after their love of bulldogs. So incorporating a bulldog into the logo was a no-brainer, especially since chances are they will focus on marketing pet products. And after skimming my 1,000+ typefaces, Rockwell Sketch seemed to be the bulldoggiest font.

The funniest part of the process was having one of them sign off on the design but with the caveat, “How much does the bulldog image royalty cost?” I laughed and wrote back, “What royalty? You mean you don’t recognize your own dog?”

Their dog:

My outlining:

And the final head:

Certainly there’s room for improvement, but they seem pretty stoked, and then so am I.

(Click photo to see it without blog’s frame style)

Digital photograph made to look hand-developed from film

Film grain effect on photo = slight. 2 grain; 0 highlight area; 1 intensity

Black rectangle one layer down, used for border

Paper = one shade darker than white. 0.2% noise, gaussian, monocromatic

Drop shadow = 40% opacity; 1px distance; 25% spread; 4px size

Photo itself and frame both rotated -0.2% and set off-center

Tested roughing up the edges of the paper but was a little distracting

It’s also incredibly easy to swap in other photos:

It’s been relatively quiet at work this week (with the exception of helping put together two conferences). But one of the things that seeps into your bones at MIT is an impatience with quiet.

As I’ve mentioned before, something I need to work on is my proficiency with design programs, so often my way of dealing with that impatience is to do Photoshop and Illustrator tutorials.

Here are two I conducted today and yesterday.

Disco Ball

Papercraft Text Effect

To keep things in line with work, I almost always use the letters “CMS” for Comparative Media Studies when a logo is involved. Even in sillier examples like this.

I do most of my book shopping at Porter Square Books. Besides its proximity, it’s well-run and courteously staffed—it’s pretty much what you’d want from an independent bookstore.

The only thing I’ve been disappointed in is their visual branding. Their logo has almost a kids’ bookstore look to it:

So as a first (admittedly rudimentary) attempt at branding, I made this today:

It’s an illustration based on a photo by Flickr user moroccanmary of the large mobile outside the Porter Square subway station:

The typeface is Myriad bold with a 3-point light-gray stroke.

What would people suggest to make this better?

This is how it looks 95% of the day.

Needed to do a last-minute down-and-dirty Photoshop job in support of an IAP class at MIT about Obama and the media. The instructor wanted an image of Obama looking both enabled by, and trapped by, his own technology.

One new thing I learned: how to draw wires: www.tutorio.com/tutorial/photoshop-wire-tutorial