giant robots smashing into other giant robots
Written by thoughtbot
Design with a sip of Bourbon
- Listen Now (16.3MB mp3)
- Subscribe via RSS
- Subscribe in iTunes
Ben Orenstein is joined this week by Phil LaPier, the creator of Bourbon and a designer at thoughtbot.
In episode #2 Ben and Phil discuss the design process, fundamentals of visual design, common design errors, and how to be a better designer (even if you’re a developer), and how to work with designers as a developer. They also answer some audience questions about design: How to handle feedback from clients, and HAML vs. HTML.
To have your questions answered on the air
Call us toll-free at 1-877-9-ROBOTS x198 and leave a voicemail. That’s (877) 976-2687 x198, email your questions to info@thoughtbot.com or Tweet to us @thoughtbot.
Show Notes & Links
Designing for Touch
There is no arguing that the platform-agnostic nature of web applications is one major advantage they have over their native counterparts. Developers and designers have always aspired to reach users on a multitude of devices and contexts using the same codebase, and we’re almost there thanks to the web technology we have at our disposal today.
On the flip side, the versatility of web applications comes at a price as we transition from the traditional mouse and keyboard input setup to touch-based interactions. Our present day interfaces are optimized for the former, rarely taking into account the rise of touch as a natural interaction that may soon overtake other input methods as the de facto standard. Designing web interfaces that cater to both worlds is not an afterthought; it’s a non-trivial challenge that requires careful planning from the early stages of the design process.
Why Touch?
Most web interfaces nowadays are designed based on the premise that users will be interacting with them using a mouse and a keyboard. While that may still hold true for the most part, there is a clear trend where users are increasingly expecting web interfaces to work just as fine on touch-enabled devices. Unless you build a native application and explicitly redirect your users to it, there is little you can do to prevent them from using your web interface on an iPad and getting frustrated along the way.
That is to say that optimizing your web app for touch is critical if you value your users and strive to offer them the best experience regardless of the device they’re using.
Here is a non-exhaustive list of the most essential points to keep in mind when designing for touch.
Hover Me Not
Hover states are the bread and butter of present day web interfaces, and they do a remarkable job at decluttering the interface and leveraging the mouse as a pointing device. Notwithstanding, the absence of an equivalent state in touch input renders hover interactions ineffective: unless the same interaction can be performed using single taps, avoid using hovers in the key areas of your application.
The One Centimeter Rule
Unlike the mouse cursor, our fingers were not designed for pixel precise pointing; touch targets (buttons, links, controls, etc) should be large enough to prevent input errors and the frustration they cause users. The rule of thumb (pun intended) is to make your touch targets no smaller than roughly 1cm in either dimension. In pixels, this value would vary depending on the density of the screen. It is roughly equivalent to 60px on the original iPhone and 120px on retina devices. Even though Apple recommends a 44x44pt target size (roughly 7x7mm) in its iPhone HIG , most studies suggest that the average human fingertip is 16-20mm in diameter and a 10-11mm touch target is the absolute minimum. Regardless of these discrepancies, making touch targets large enough without compromising the native feel of the interface is key to a great user experience.
Space Invaders
Beside their dimensions, the positioning and spacing of touch targets equally affect the overall usability of the interface. Fitts’ law holds even more true in touch-centric interfaces since moving fingers around to reach dispersed targets may prove more tedious than doing so with a mouse. Place related controls and navigation elements close enough to each other such as they require minimal finger and wrist movement to be reached. For good measure, leave 1-2mm (3-6px on 72dpi screens) between adjacent targets to make them easier to hit, especially when one or more of them break the 1cm rule.
Delay No More
Most touch-optimized browsers force a delay (300ms) on single taps to make sure that the user didn’t intend to double tap or perform a gesture. While this can be useful in interfaces that rely heavily on gestures, it is a nuisance in most cases as it makes the application feel less responsive. Make your UI elements respond to touch events using Javascript as detailed here and here.
Closing words
It goes without saying that designing web interfaces which work with various input methods calls for significant compromises, which in turn may result in a sub-optimal experience across the board. Lacking a sane way to detect input methods in the browser, there is little we can do besides fine-tuning the interactions on our web apps to preserve their main functionality on touch-enabled devices.
Photo credits: Blake Patterson
Bring your grid to Yoga class
I’ll have to admit that, for years, I have resisted designing with flexible (fluid) layout mostly because I didn’t want to figure out all the math to make it work properly. My other problem was that, at certain sizes, the design just seemed to fall apart. For the longest time I was unconvinced that it was worth all of the effort that it would take to get the grid working correctly and looking good.
After reading Ethan Marcotte’s article and book on responsive design, I was convinced to try it again. I thought that I could amend the grid-width function already in Bourbon to my needs by giving the variables percentage value. I was wrong. It didn’t handle sub-containers because the ratio between columns and gutters changes.
I could still use Sass to do the math ( target ÷ container = percentage ). I gave the grid-width function a makeover to accommodate this and the result is flex-grid.
Getting Started
Start off by declaring a couple variables for the function. $fg-max-columns is the total number of columns in your grid. $fg-column and $fg-gutter define the relationship between column and gutter. I use pixels here because it is what I am most accustomed to.
// 960 12 column grid $fg-max-columns: 12; $fg-column: 60px; $fg-gutter: 20px;
The function takes two values: the number of columns that you want the element to span and its container column (which defaults to $fg-max-columns). This way the function allows you to nest containers without losing the relationship between column and gutter. For example:
body {
margin: 0 auto;
max-width: 1400px;
width: flex-grid(12);
section {
float: left;
width: flex-grid(8); // No second value needed since it's inside the main container
article {
float: left;
width: flex-grid(6, 8); // Since the article is inside the 8 column section
}
aside {
float: left;
width: flex-grid(2, 8);
}
}
}
Gutters
You’ll notice the grid doesn’t have any gutters yet. They too can take two arguments, a container column count and gutter width. Container is set to your default max columns ($fg-max-columns) and gutter is set to $fg-gutter, which you’ll almost never need to change.
section {
float: left;
margin-right: flex-gutter();
width: flex-grid(8);
article {
float: left;
margin-right: flex-gutter();
width: flex-grid(6, 8);
}
aside {
float: left;
width: flex-grid(2, 8);
}
}
The last touch
I add a max-width to my main container, mostly for me because I’m usually browsing at full screen on a 30” monitor. Since the grid is totally percentage based, I usually look to where the line-length becomes too long.
body {
margin: 0 auto;
width: flex-grid(12);
max-width: 1400px;
}
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.
Designer Tools
In addition to the basic development environment everyone at thoughtbot works with, there are a number of other apps most of the designers here use to keep our work flows efficient and our skills top notch. When I came to thoughtbot as an apprentice a little over three months ago, I was exposed to a variety of new apps that greatly improved my work-flow, so I thought I would share with you some of the apps I open up every morning and a bit on how I use them.
The basics
These apps are not necessarily design-specific apps but they are so essential in our day to day work-flows that I couldn’t leave them out.
- Propane: Chat client for 37Signals’ Campfire. This is an indispensable communication tool.
- Growl: Notifications for anything and everything. Used primarily for Campfire notifications.
- iTerm: Terminal emulation for OSX. Mostly beneficial for it’s ability to open multiple windows in tabs.
- MacVim: Text editing. If you’re not already using Vim, take the time to start learning. It will greatly speed up your development time and if you’re working with developers who use Vim it will make pairing easier.
- Divvy: Helps you keep your screens and windows spaced, aligned and organized efficiently without clicking and dragging all day.
Adobe
If you work on the web I am sure you are already familiar with the typical Adobe software that web designers use, so Im not going to get into the details of our Adobe setups here. Most of us prefer to do hand sketches/whiteboarding and move into wire framing with HTML and CSS as soon as possible any way. Static mock-ups tend to have a host of draw backs when working in an agile development process. That said, photoshop, illustrator and fireworks are still our workhorses when it comes to specific graphic design needs.
Skitch
A handy screen capturing tool that allows you to very easily draw and add notes on top of your screen shots, without having to open up photoshop or some other image editing tool.
Cloud App
Collaboration and iteration are key ingredients in doing great work and I have found this app to be an effective way of sharing screen shots with team members, clients and other designers so I can get that valuable feedback on the development of my work. When you take screen shot Cloud app automatically uploads your image to web servers and in a drop-down from the Cloud app icon in the OSX menu bar, provides you with a sharable link to that image.
Notational Velocity
Good for general note taking and the keeping of VIM and Git cheat-sheets. Especially if you are new to VIM or Git keeping track of commands and remembering how to get certain things done right can be quite challenging, so we all suggest building up robust cheat-sheets with this little app.
FontCase or FontExplorer X
Great typography is a fundamental element of great design. Managing your fonts effectively will help you find that perfect type-face faster and reduce the time it takes to get started with a solid visual design direction. Taking the time to organise your typefaces in a way that is meaningful to you can also be a good way of curating your collection and more intimately familiarizing your self with the fonts in it.
Little Snapper or Gimme Bar
Both are awesome tools for building a personally curated library of design inspiration. Saving images and examples of the things that inspire you is a great way to refine and hone your own personal style and also a great way to help kick off the visual direction for a new project. If you are not using tools like these already, start. It will be hugely beneficial to the quality of work you do.
Hues
A great little app for grabbing colors from anywhere on your screen. It provides rgb, hsl, and hex values for any color you select which makes pulling color pallets from photos and images you have stashed in your Gimme Bar or Little Snapper quite nice.
Bourbon
Bourbon is not an app, it’s a library of SASS mixins and functions that greatly speed up front-end development time. It is just as awesome for new comers to .css/.scss as it is for the most seasoned pros. It’s also one of the main reasons the sketch-to-html&css-wire frames process has proven to be so effective and efficient for us. We have extensively written about bourbon before.
So that’s it for a light-weight overview of the apps I find my self opening on a daily basis. Hopefully I have introduced you to some new and useful tools. I’d also love to hear about some of the tools your using, so feel free to add your comments below!
