giant robots smashing into other giant robots
Written by thoughtbot
Ruby Science Redesigned
We just pushed a new design for Ruby Science. Previous purchasers and Prime subscribers can grab the update on Learn.
The new design includes a new layout, which is much more appropriate for a book. We updated the typeface and font size to improve the experience when reading the book on a screen as opposed to a printed page. The margin size is also greatly reduced, making it easier to zoom in on a laptop screen and bring the text right to the edges.
Get your copy of Ruby Science today.
Now Available For Free With Learn Prime
We recently announced the launch of our subscription service: Learn Prime.
For just $99/month, you get ongoing access to everything we teach, including books like Ruby Science. You’ll even get access to all our in-person and online workshops. Get access to exclusive subscriber content, as well as access to our private Campfire room, where you can get live help from thoughtbot designers and developers.
Typography PSA: Stop putting two spaces after a period
I have lots of typographic pet peeves. Lots. But the biggest one is when people put two spaces after a period. It leaves me looking like this:
Every well-designed typeface already includes extra space for the first space after the period. This gives the reader just enough breathing room to recognize that this is the end of a thought. When you add two spaces after the period you are breaking the reader’s flow.
Now, you might be thinking ‘Why was I taught to do this in grade school?’. That’s the remnants of the days when we were typing on typewriters. The monospace fonts used in typewriters couldn’t accommodate for the extra space needed at the end of a sentence, so to make that break obvious people were taught to add two spaces. This became obsolete once personal computers had variable-width typefaces but some people never left the habit behind.
Need more than just my word? Every major manual of style holds this rule, including MLA and the Chicago Manual of Style. HTML follows this rule too: it will collapse two spaces down to one.
Please: for my sanity and your reader’s flow, stop putting two spaces after a sentence. Save your spaces for your code.
Design 101: Stop Yelling
How do you make yourself heard in a loud room? BY YELLING! And when it comes to design, that’s often the approach used for drawing attention to elements. LOUDER! BIGGER! FASTER!
But there’s a better way.
Imagine yourself in that loud room again. Now imagine that instead of yelling to get above the noise, you could just turn down everyone else. Instead of shouting at the person you’re talking to and ending up with a strained voice, you’ll be able to have a nice, thoughtful conversation with them.
While it’s hard to turn down the volume of a room, it’s easy to quiet the background noise in your design and let the important parts speak clearly. Let’s take a closer look at this idea.
Below is an example of a composition where everything is shouting at you. The big red headline at the top is trying to assert itself, but so is everything else, which means, in the end, nothing stands out.
So let’s turn down the volume. You have to decide what you’re trying to communicate and how to say it in a clear and concise way. This will drive your design decisions. In the example below, we’ve established a clear hierarchy between each bit of text. The headline still dominates, but we’ve toned down the other text so that your eye moves comfortably and naturally from headline, to subhead, to body text.
Let’s try another iteration that makes more dramatic use of white space. I tell students in my workshop that white space is the secret ingredient in design. Effective use of white space can transform a mundane design into something that feels elegant and timeless.
In this example, I’ve made the headline and subhead the same size as the body copy. I’m relying on white space to create the hierarchy, isolating the elements within the composition so they can establish their presence without competing with surrounding elements. Think of that loud room again. Not only have we quieted the voices in the room, we’ve moved everyone to their own corner so they can talk without distraction.
When thinking about how to create emphasis, don’t be so quick to turn up the volume. Think about how to use hierarchy and white space to communicate your message without shouting it at your audience. You’ll create something more elegant and respectful that still accomplishes your communication goal.
I’ll be teaching more visual design principles and strategy in my workshop, Design for Developers, which is running Feb 27–28 in our Boston office.
Showing off
Over the last few months we have been looking for another designer to join our team. We’ve seen a bunch of portfolios ranging in experience and style. I’ve found it intriguing to see how other designers present themselves and their work through their portfolio.
When it comes down to it you want your portfolio to show your work in the best light possible. You want to make the person hiring to be looking for more and eager to talk to you. Here are a few things that I am always looking for in portfolios.
Master the basics
I can’t put enough emphasis on design basics in both your portfolio and the work that you decide to put into it. There are in particular two things that I am really looking for: a proper grid and outstanding typography. You should have a solid understanding of both and be able to show it in your portfolio.
A grid is something no design should be without and there is no excuse not to use one for your portfolio. Its benefits are well documented and accepted; it adds form structure and flow. If you think you need help in this area pick up Grid Systems: Principles of Organizing Type by Kimberly Elam.
Choose a solid typeface and set it perfectly. Pay close attention to line-height, letter-spacing and the hierarchy in your type. I feel like every designer should have a copy of Robert Bringhurst’s Elements of Typographic Style, and have read it at least twice.
Best work and only the best
Don’t show anything less than your very best work. If that means that you can only have one portfolio piece then you only have one. Don’t just put in a bunch of work that doesn’t show your full capabilities. The work in your portfolio site should be shown well. It seems obvious but don’t have lots of distractions and useless ornaments around it unless it serves to better show your work.
Client work proves that you’ve done it before. It indicates that you can handle clients, handle project timelines and everything that comes with being a designer on a team.
If you don’t have this kind of work look for projects that you have done that might fill that gap. They can range from a goofy tumblr account, to contributing to open source, to maintaining a blog. They show that you have a passion for this thing you want to do, that you are eager to learn and that you eat, drink and breathe this stuff. Even if you have a bunch of great client work it’s still great to see projects that you have started or contributed to showing your passion for your work.
Play to your strengths
All in all, you want to play to your strengths. If you are right out of school you won’t have much client/in-house experience so play up those projects you take on in your free time. If you have a bunch of solid work select the few you consider the very best and switch out pieces depending on the job you are looking to get. Make sure that who you are and your core design principles are reflected in the design of your portfolio and the pieces that you have chosen for the portfolio.
Need a review?
I’d like to start giving portfolio reviews if there is an interest in it. It’s something that I wish I had the opportunity to have when I built my first portfolio (it was pretty bad). So if you are in the Boston area, come to the next Design with Boston. Just ask me and we can sit down and go over it sometime during the night.
Font Battle 2011
A recent straw poll of text editor fonts at thoughtbot found these results. Not all thoughtbot precincts have reported in. Perhaps you’d like to explore some new font options for those walls of text you stare at for 8+ hours daily.
Some links to these fonts:
