Designing for Gumby

We've made sure to make designing for Gumby just as easy as to develop with it. There are a few things that you may not know about Gumby that we encourage you to read over. Then get started with our UI Kit and PSD grids. We can't wait to see what you create!

If you're not already familiar with responsive web design, a term coined by Ethan Marcotte on AListApart, we highly suggest reading that entry as well as others on the idea of RWD(responsive web design). Gumby is a responsive framework and as a designer, understanding the idea of this and how it works is crucial.

Intro to Variables

Something else that designers should know is that Gumby is extremely customizable. All the main elements, their colors, sizes and fonts can be changed very quickly. So go ahead, swap out a font mid-way through a project. You or your developer co-workers will no longer wish to sacrifice you to the local deities.

Modular Scale

Modular scale is a new ideology that we've adopted for Gumby v2. Short and sweet, it determines typographic rhythm with ratios and math. But don't be afraid. Sass handles all the math for you. Read more about the thought behind modular scale on AListApart.

By default, Gumby uses the golden ratio. A great tool to use for this is the modular-scale site itself. Here are Gumby's defaults for reference. From those two numbers modular scale determines the font sizes of all heading elements. As a designer you should use this scale for many reasons. Two of them being that it establishes a harmonic balance between your type sizes and because all the data will already be included in Gumby when you or the developers start to write the CSS for the pages. As long as the same numbers are used, what you see on the PSD will reflect on the developed page.

UI Kit + Templates

We've created a few documents for your design pleasure. First is the standard 12 grid PSD that is a blank canvas to design on. (Yes it's supposed to be blank). Similarly, we supply a 16 column grid PSD for those of you who prefer a 16 column grid. We also have a UI kit that you can use as a starting point for all your designs or just borrow some UI elements and style them in your own way.

Download the whole set right here.

Take Gumby wherever you want to go with it!