Tag: design

Developers Should Learn Design, Designers Should Learn to Code

I’ve pondered the question over the entire course of my time working as a freelancer and continue to ponder it to this day: Should developers learn to design? The common advice to designers is that yes, you should learn to code. But what about the other way around? With the recent push to get more coders out into the workforce, we often forget to pull back and think of the simpler things. Such as the question of whether someone who programs should know anything about design. I say, yes. Yes, programmers and developers should know design.

But why? Isn’t it about solving problems? Clean code? Making the engine start, and keeping the gears turning? Sure, that’s a large proportion of a developer’s job. But it’s hardly the only thing. A large portion of a developer’s work–particularly front-end development, is ensuring whatever you make is usable. And usable tends to go pretty well with the idea that everything you make, ought to be well-designed.

So here’s a list, because I love those, of reasons why developers should learn design.

Usability: So many times I’ve seen developer or programmer created applications that were made (and made well) without the end user in consideration. There’s a lot that goes into the usability of a product. It’s very easy for people to forget, as they’re creating something they’re passionate about, that other people will eventually have to use it too. Design is a large part about usability, or UI/UX considerations. So, for a developer to make a highly usable, highly desirable product, something a thing or two about the good design that goes into these products is beneficial.

Possibilities: Just as designers have been told to learn code so they understand what is and is not possible, developers would benefit from learning some design. This is so that they gain a better understanding of what is and is not good user experience.

Teamwork: Working in house or as a freelancer is rarely an entirely independent exercise. You’ll have to talk to the designer eventually, get their opinion on various design choices they’ve made. This is where having an understanding of what they’re talking about when they tell you that you should, ‘increase the leading on the body type to improve the hierarchy of the layout’ is probably a good idea.

Perspective: Since when has having a narrow perspective been a good idea in a professional setting? Broadening your perspective by learning a little bit about another subject makes your work more well-rounded and allows you to approach projects and tasks with a more diverse skill set. I don’t think I’ve ever heard an employer or client say, ‘We want to hire someone who’s only good that this one thing. And if they have any other skills or abilities, then heaven help them, we aren’t giving them the job!’

Presentation: While a developer shouldn’t be tasked to sit down and layout things as their primary job, the fact that presentation is important to a project is difficult to argue with. Aesthetics matter. How something looks is the very first thing people will pay attention to. So if it looks bad, then users have a bad impression of your work–whether or not you spent hundreds of hours writing the most beautiful, clean code you’ve ever written in your life. Chances are pretty good that your users aren’t going into the code to see how you’ve written things to make the program work. But they are going to want to know what the buttons on your interface do, or how to use your menu system.

I come from a perspective shared by fellow designers who have to wear multiple hats. I have always considered myself a designer first and have always accepted that designers should know code. Initially, it was so I could be self-sufficient as a freelancer. Then it turned into a philosophical advantage and finally to the point where I’m now referred to as a developer first. While I still identify primarily as a designer, I often recommend developers look across the pond. The four reasons above are just the start. You may find it fun to learn some design.

CSS Font Weights Explained

Those not too hip with typography might at one point wonder, “Why are the font weights on a ranking scale from 100 to 900?” Where are those numbers coming from? It was actually an interesting questions brought up to me recently that I hadn’t thought much of. After all, no one’s breaking the internet over not knowing why font-weight can take a numerical value from 0 to 900 and why anyone would want to use the numerical scale over the (arguably) more intuitive, lighter, normal, bold, bolder scale.

There are a surprising, delightful and numerous amount of things about CSS that harkens back to design theory and borrows from typography principles and font-weight’s number system is a pale echo of a type family’s numbering system. Before I get to explaining the numbers, we have to explore a few terms related to typography first.

A type family (or font-family as far as CSS properties go) is a typeface and all of its total variants. Where you might have Helvetica identified as a type family. Inside that family you’ll have members like Helvetica Roman, Helvetica Italic, Helvetica Bold.

Variants within a type family are different styles of that same typeface. For example, the Italics for a typeface is an example of a variant. Small caps style within a type family is another example of a variant. Within CSS, we declare different variants for our font-families by using font-variant.

Weights within a type family are generally considered how thick or thin a typeface appears. On the lowest end of the scale, you have the thinnest of thin characters. On the other side, you have big, bold and thick characters. As you’ve probably guessed by now, font-weight is what you generally use to affect the weight of your web typefaces. And it is with font-weight that we’re going to dive into the numbering system.

The Typography Numbering System

Most large type families have a numbering system that dates back to some of the earliest examples of variant and weight-rich typefaces such as Univers and Helvetica. These typefaces typically have family members that run the gamut of thick, thin, condensed, wide, and so on. So a type numbering system was devised to easily catalog and describe the various members of–let’s say, Univers. Where you could say, Univers Normal, you could also say Universe 430. Why does 430 mean normal?

  1. The first digit identifies the weight of a typeface.
  2. The second digit identifies its amount of compression (ex. condensed, ultrawide, etc).
  3. The third digit signifies the stance (roman or italic).

Typically in the numbering system, 400 is identified as “normal” weight, 30 signifies normal compression, and 0 would mean that the typeface is roman or upright. So that is what we mean by Univers 430. It is of the type family, Universe. It is normal in weight, normal in compression and upright roman in stance.

Another example might be Times New Roman 631. This would mean a Bold and Italic Times New Roman. 600 typically represents bold, 30 would indicate normal compression and the 1 identifies it as an italic variant.

Last example, Helvetica 620. This is Helvetica bold, upright and condensed. The 600 indicates Bold, the 2 is meant to represent condensed, and the 0 identifies this as an upright variant.

So that’s the typography numbering system in a nutshell. Many designers typically prefer to identify the typefaces by name–because many of us are not creatures particularly fond of nondescript numbering systems. I don’t blame you, I’m not hip on it most of the time either. But even I have to admit to its simplified, condensed elegance. However, it should be more obvious now how and where font-weight gets its numbers and considering how many web fonts have large swaths of weights, why not keep in mind what the numbers mean?

100 – The lightest of the light.
200 – Light.
300 – Book.
400 – Normal.
500 – Semibold.
600 – Bold.
700 – Extra Bold.
800 – Ultra Bold.
900 – Black.

Maybe some day CSS spec will catch up to the type family numbering system and we’ll be declaring our font-families as Proxima Nova 431. For more fabulous insights on typography as well as a quick and useful read about typefaces, check out Erik Spiekermann and E.M. Ginger’s, Stop Stealing Sheep & Find Out How Type Works (2nd Edition).


Fontfeed, It’s All in the (Type) Family
Great resource that showcases a more visual chart of the original font numbering system with Univers’ two digit example. Also takes a jab at Helvetica and I’m always for a bit of that.

A Few Words About Logo Salads

Here I thought I was the first person to use Logo Salad. Evidently, others have been thinking the same thing:

Logo Salad on Urban Dictionary

Stop using logo salads on your websites. It’s cliche, and pretty meaningless. I mean, unless you designed those logos, in which case, you’d probably get better results from displaying them in a better way that tossing them into a section where the user doesn’t know where to look because there’s logos everywhere.

That and I hear logo salad isn’t nutritious.

Two Easy Ways to Pair Typefaces

Typography is the love of most graphic and web designers. But for some, it can be an intimidating task. Pairing together the right typefaces to create a cohesive design comes from years of experience studying type and understanding how one typeface interacts with another can depend on a huge amount of factors. Here are some tips for combining and using different typefaces on the web to help get the edge off of typography.

There are many different methods that designers use to determine typeface combinations. I will go over some of them in this post and hopefully give you some ideas on how you can pair off type for your next project.

Method 1: Type Systems and Super Families

Type Super Families are typefaces that have a large variety of variations. Within a super family, one typeface could have different variations for body text, headers, subheaders, italics, there may even be a serif and sans-serif version of the type. One example of a type super family is Lucida:

Lucida Std, Lucida Bright, Lucida Grande.

Lucida Std, Lucida Bright, Lucida Grande.

Super families generally contain typefaces with relatively the same structures and proportions, thus ensuring the types in a super family are harmonious but at the same time have elements that allow them to stand out from one another. Some examples of super families in use:



Method 2: Compare and Contrast

Contrast in choosing typefaces can mean a number of things. What it achieves is essentially an accentuation of the type that you use. You can mix and match things in different ways to achieve contrast. For instance, you might want to pair a sans-serif typeface with a serif. Or round typeface with an angular one. Maybe you could also mix a fun type with a neutral one.

When relying on contrast for your type choices, try to focus on weight, scale, proportion, and texture. Remember that you are not looking to draw attention to the type by highlighting their differing personalities. Things need to be done in moderation when choosing type too. Try looking for elements that help discern hierarchy while also harmonizing the text.

Some examples, using contrast by paring a sans-serif with a serif:



And an example of a distinct type paired together with a neutral one:


With a little bit of time and thought, pairing typefaces together won’t seem as intimidating anymore. If you’re interested in other ways to pair together typefaces, check out these helpful articles:

Best Practices of Combining Typefaces
Four Ways to Mix Fonts


Resources: Some Useful Design Books

Most of my first two years of higher education were spent in a dark room with ten to fifteen other people, drawing from a still life or live model. Sometimes we were loosed outside to sit in the frigid autumns of Canada to commit a landscape to paper. Later on, I started getting more design, more web development, more programming and the days spent sitting in the frigid autumns of Canada turned into days and nights sitting in the frigid autumns of Canada with a laptop. In that time, I was given a list every semester of the textbooks I’d need. I would go out and purchase these textbooks and promise myself every single semester that I would read them and be enlightened. I amassed fifty or so books, possibly more than I don’t remember and I didn’t read a single one all the way through.

It wasn’t until I graduated that I finally sat down and went through any of those books. Well, it’s never too late to be enlightened. Of those books, here are some useful design books (including some I went out of my way to read after graduation).

Some Useful Design Books

Design is a Job by Mike Monteiro
Monteiro is one of the founders of Mule Design, and is a treasure trove of practical knowledge related to the web design industry. He talks about everything from the importance of contracts, how to deal with clients, how to work with other creatives, and how and why it’s important you get paid for what you do.

Thinking With Type by Ellen Lupton
Not the most detailed book on type, but if you’re intimidated by typography, Thinking With Type lays out the basics in an easy to digest manner. Great for undergrads who need to get their feet wet in typographic basics. If you’re a practicing professional who just needs a refresher, this book is a great quick read.

The Elements of Typographic Style by Robert Bringhurst
Bringhurst’s book seems to be required reading for most type enthusiasts and designers. It outlines ideas and theories all related to typography and design. I found it to be equal parts clever and useful. Be aware that this can be a bit of a slog, so take your time.

The Elements of Typographic Style Applied to the Web by Richard Rutter & Steve Marshall
The quintessential typographic style concepts applied to web design. I found this invaluable, and best of all, it’s free!

Making and Breaking the Grid by Timothy Samara
Describes various grid structures used in graphic design that could easily be reworked for the web as well. Invaluable book about organizing information and presenting it in fascinating ways.

Responsive Web Design by Ethan Marcotte
Tablets and mobile device use is on the rise and web designers need to stay on top of the game. Responsive Web Design applies CSS and Design techniques for the mobile device.

There are more useful design books where that came from because design and especially web design is an ever evolving beast. Reading and gathering inspiration is as much a part of being a designer as actually designing.