Tiny Designers, Big Ideas

We gave a talk this past Saturday at the D8 Conference in Boston. Neither of us were actually in Boston during the presentation, I just did it virtually over ichat. It was a 10 minute talk, and I didn’t get into as much details as I would like, so this is an annotated version of that talk, with links and resources to the things I mentioned during the presentation. You can download the presentation here.

So there’s this gap between Designers and Developers, we each speak our own languages, and sometimes we have a hard time understanding or empathizing with one another.

We need to bridge this gap. As Aza Raskin, the former creative lead at Mozilla said on his article So You Want to be a Designer: Top 5 List

“The most important trait a team can have is empathy. Without it, the implementers will not care, and the designers will not be realistic.”

We need to learn to speak each other’s languages, so that we can meet each other half way. So how do we go on about doing that? 

Let’s take a brief look at the language of Design:

We have technical things like The Golden Ratio.

From there we also derive the grid system, like the rule if thirds. In traditional graphic design the golden ration and the grid system derived from it is a great way of creating well balanced compositions. However, as Jason Santa Maria pointed out on his article, on the web, these rules may not always apply. The web is not a static page like the book pages these ratios are originally applied to. The web is fluid, people resize their window browsers, and nowadays there are numerous ways people could be viewing a page (on a computer, on mobile devices, an iPad). These guidelines are not absolute. They’re still a good foundation to know, but don’t count on them to always work. 

Actually, there are many things about design that are not absolute. Actually for the most part design is pretty fussy, it deals more with feeling and subjectivity than with straight-edge logic. Take this general idea of contrast for instance: contrast makes things look good. Don’t you agree? It gives a composition a sense of movement or dynamism, it gives hierarchy and tells the viewer where to look first, it just makes something a little less blah. But this isn’t really a rule, there’s no formula for it, it’s one of those things that you just have to learn by doing, knowing which combination of type or color or shape makes the best contrast to make a dynamic composition.

The same could be said about typography. We know that fonts have feelings. Different typefaces convey different emotions and thoughts. But there’s no formula for this either. Knowing the history and context of a typeface, like who designed it, when, what for, all these background knowledge might give us a better idea of when to use what typefaces, but still, in the end we must rely on our own judgements, and our own eye to know what’s good. And really, the only way to have a trained eye, is just by doing.

Now how about a quick look at the language of Development:

For designers trying to learn the most basic language of web development, the best place to start would be knowing your CSS and HTML, all the foundation you need to build a functioning site. But there are no absolutes here either. Yes, you have to write things in a certain way, but there are always more than one right way of making something work.

How do you go about learning these different languages?

Here’s our short list of books:

• The Universal Principles of Design - A great overall look at the design, as it’s applied to the world.
• A Book Apart series - Short books on web design best practices.

Here’s our list of online resources:

On grid systems

• The Grid System - A great collection of grid related resources
• Gridulator - A grid calculator
• Fluid grid system - Resources for creating fluid grids that adapts to the width of the browser.

On typography

• Typophile - For all the typographers to-be it’s a great place to get input, criticisms, answers, and other opinionated responses from professional type designers for all your type-related questions.
• I Love Typography - One of the best type blogs around, for all your type-related news.
• Nice Web Type - A good overview to get caught up on web typography.

On web development

• W3 Schools - Good place to start for newbies to learn about HTML/CSS with quick reads and tutorials.
• A List Apart - The ultimate blog for people who make websites, with write-ups on the newest techniques and tricks on web design best practices, things like CSS Positioning, HTML 5,  CSS Sprites, and tons of other topics.

Online and book resources are great. But we like people better! We like to find mentors, people who are doing things that we want to be doing, to learn from, and seek advice from. Here are a few of our mentors (in no particular order):

• Tyler Thompson - Creative Director at Squarespace
• Jessica Hische - Designer, illustrator, typographer, famous for her Drop Caps
• Aza Raskin - A user interface guru, passionate to make the web a more humane place
• Nicholas Felton - A designer obsessed with data and its collection, famous for his personal annual reports.
• Kevin Cornell - An illustrator seen around the web from his water-color illustrations on A List Apart
• Jason Santa Maria - Designer known best for the expressive layouts of his personal blog.
• Frank Chimero - Designer, known for his thoughtful blog posts, and his talks on The Shape of Design.
• Linda Eliasen - Designer at Mailchimp
• Tim Van Damme - A freelance designer who writes about web/design related things on his blog Maxvoltar.
• Kyle Jones - Web designer/developer/animator, known for his illustration. 
• 37Signals - A web application company known best for under-doing the competition, they write about design, business, the web, and simplicity on their blog, Signal vs. Noise.
• A List Apart - Written by and for people who are passionate about web design.
• Eight Hour Day - A husband and wife design team, they own a design boutique, keep up a blog, and travel around the country together.

So go find your own mentors. Expose yourself to inspiration all the time because it’ll expand your idea of what is awesome.

But to know what you need to learn you must know why you want to learn it. Find something you’re passionate about. The way to move forward is to have something you want to build and just learn how to build that. Find out how other people have done it and not just copy it, but steal their ideas and make it your own, make it better. 

The League of Moveable Type started as someone posting an idea on Typophile to start an open-source font project. It got so much negative reaction from the type designers in the community, saying that open-source in type design would never work. So we decided to stir the pot and started an open-source font project of our own. Turns out that people really like the idea. Granted people like The League because we give away free fonts, but it’s not just that. It’s more than giving away free stuff, people like the idea of collaboration and freedom that comes with the open-source type movement. 

From a topic of conversation in a Typophile thread, this open-source font project has gotten to a point where designers are contributing their typefaces to The League, someone even took League Gothic and expanded the font to include extra characters. People working together for the benefit of everyone, that’s the whole point of this open-source project.

So if you’re interested to know what a day in the life of a designer is like, well, we learn, every day. We learn things that are not always within our field of expertise, or even things that we necessarily want to learn, but we learn things that would make us better at what we do do.