Designing For Gumby

Written by in Creative on

Expecting to read about bridging the designer-developer gap for a more beautiful web? Well, too bad because this is actually an article all about me… and my growing affinity for the Gumby Framework.

Sanity & Sanitation

We’ve all been there. The trifecta of good, fast, and cheap is an impossible fantasy, but I’ve found the Gumby Framework to be a powerful leg up in every project so far, without hindering creativity. Keeping your mind, spirit, and code clear and intact by the end of your assignment isn’t guaranteed when you use the Gumby Framework, but it does save a heck of a lot of headache, especially in a time crunch. Like, when you have to ask a dev genius to tweak the global brand color to a different shade of red two hours before a midnight launch. Don’t tell anyone I told you, but the secret behind the almighty power of the framework is variables. To put it simply, they make for speedier builds and increase maintainability.

Alright, it’s party time. Let’s dive in to the details…

Breaking Good Ol’ Reliable

Raise your hand if you design on the 960 grid system! Oh, just about everyone? That’s what I thought. When designing a website, the first thing I do is pop open old reliable too. The great thing about Gumby is that it’s based on the grid system we’ve all grown to cherish, but is flexible in that you can create any number of columns with your choice of width. For instance, if I wanted to create an 1100px grid, and maintain the traditional 60px columns offered by trusty ol’ 960, I can just tack two columns onto a 12-column template. Personally, I find this wider layout to be much more flexible and modern, so doing a little grid yoga is well worth it. And if you want to really mix things up, you can do a little bit of grid inception. That’s right guys, you can have a grid within a grid. I encourage you to play around with this idea a bit. It could really change your how you distribute your content.

Plug & Play

No pressure, but typography is about 90% of web design. It’s all about clarity, readability, and (since most of our users are typically lazy or in a rush) scanability. Fortunately, the Gumby Framework calculates the size hierarchy of typography via modular scale. This typographic scale is based on tried and true ratios to create visual harmony. The Gumby default is based on the Golden Ratio (the most beautiful ratio in nature!), but you have a number of options to choose from, so explore and find the right one for your design. I know what you’re thinking. “Woah, that sounds like a lot of math.” Deep breaths guys, it’s simple. Just read all about it and check out the modular scale calculator in this thorough article on more meaningful typography. But for now, here’s a quick and dirty breakdown of the value entries for the calculator:

• Ideal Text Size = Body Copy (Gumby default is 16px)
• Important Number = Line height of your largest headline
• Output = List of font sizes

Designer Brownie Points: The benefit of working with modular scale is that it’s definitive. Once you establish your header tags, applying text styles becomes a single-click process if you plug the values into your character or paragraph style palettes. Ah, the beauty of variables. And the happily ever after is that it becomes a reference tool for devs later.

Cutting the right corners

GUIs | Whether you’re going custom or you need something done quick, Gumby has a few clean ui options available. The Metro kit is super minimal while the Pretty kit has a pinch of dimension. You’ve got everything from buttons to badges to form validation. And say hello to Sass! It’s your best friend when it comes to customizing the UI kit because the main color palette and style guide elements are all Sass variables so they’re implemented almost automatically. You can alter basic global styles like primary button colors or typographic styles by modifying a minimal number of lines of code or go crazy and make everything unique. Easy peasy.

Ok, I have a confession to make. When I started designing for Gumby, I was a little skeptical about have a premade UI kit and color palette to start working from, concerned that it’ll stunt creativity or make me progressively lazy. Fortunately, quite the opposite happened. As counterintuitive as it sounds, designing around Sass variables forces you to be consistent, which is actually liberating! And this consistency serves as a common language between designers and devs. But it doesn’t stop there!

Style Guides | In-browser style guides also allow us designers to work with developers more easily to ensure a perfect transition from psd to the web. We’ve been using Gumby’s ui.html file for that. It’s basically a file with all the typographic styles and UI elements that Gumby has to offer. I remember back when we were developing Borderfree’s website redesign, I just sat down with Adam Chambers and tweaked leading and font weights to compensate for any browser mis-renderings. You’re basically QCing early on in the process so you can focus on the big stuff later. Around here we never really have a “handoff.” We musketeer the project throughout its lifespan.

Iconography | Don’t let the devs have all the fun of making your beautiful websites load faster and work on every version of every browser known to mankind. Do your part by using (or building your own) symbol fonts for iconography because images hinder performance. Icon fonts are incredibly flexible and can be resized on the fly without having to create even more images. And it’s super easy to include additional icon fonts with Gumby. It’s just a matter of creating a few new variables for the developer and including your icon font in _fonts.scss!

Behind-the-Scenes Magic

Alright, let’s talk designer to designer. The Gumby Framework is consistently evolving, and most of this growth doesn’t necessarily affect our design processes, but it does ensure that our laborious efforts gracefully transition to every possible viewport. For instance, killer mix-ins like Fancy Tiles help grid-based elements respond seamlessly in an expected way. Fat footers or product grids that look good are a breeze to create with Fancy Tiles. There’s also Shuffle, which allows you to customize the order of content items at various breakpoints. Responsive just keeps getting more powerful, guys.

Don’t be shy. Check out all that the Gumby Framework has to offer! All the developers are doing it…

Oh, you’re already using the framework? What an overachiever. Go ahead and check out Responsive Comments to one-up the performance of your already-flexible sites.

Discuss on Twitter