From Prototype to Website with Foundation

Lately we’ve been using Zurb’s Foundation framework for most of our projects.

We wanted to standardize on one framework to make it easier for everyone. And we wanted a framework that was well-suited for many parts of the process. We keep it in a git repository and start from there on new projects. It has Foundation along with a bunch of other stuff we often use, and our preferred defaults for some things.

Here’s how we use it.

Sketching

We don’t use Foundation for that. Often we just use Marvel. The basic plan is free and you can take photos of your sketches with your phone, then turn it into a click-able prototype. It’s amazing.

Sharing paper sketches with Marvel is pretty easy
Sharing paper sketches with Marvel is pretty easy

Wireframing

When it comes time to wireframe a website, Foundation is an excellent choice. There are a number of ways to grab its source files, and applications made for this kind of thing often include easy access to the latest version.

We generally use Sublime Text or Coda for working on code. At this point, you’re building off lots of their great templates. These are amazing prebuilt chunks that show you good ways to get started, and using something like Hammer for Mac gives you a great way to include standard headers and footers on all the pages, link things together easily, compile your SASS and image files, and more.

Some great templates in Foundation for wire framing and prototyping
Some great templates in Foundation for wireframing and prototyping

This is a good time to set up your grid structure. The defaults that come with Foundation are good, but we like to set the maximum width for a typical website to be much wider than what Foundation limits you to by default (1440px, vs about 1000px as a default).

Also very helpful are simple shapes with panels and simple tools like equalizer. This makes a text editor an extremely powerful design tool because you really are working only with content.

When you’ve built a wireframe, you can post it via a button in Hammer, which gives you a short URL that works for two weeks. You can also grab the built ZIP file to share, or post it elsewhere.

An interesting option is to start a git repository and put this in a branch. Or put it in an early “release” of your project. You are using git, right?

Prototyping

It’s trivial to link between pages using includes and variables in Hammer. And the simple navigation options (top bar, sidebar drawer, inside-page, and more) in Foundation are great for quickly prototyping because the general behavior comes remarkably close to what a real website would do.

Foundation doesn’t have any animation library, and these can be really helpful for prototyping because they quickly give you an idea of how it will feel, which is something that’s always lacking from a static mockup. A library like animate.scss requires some work outside the HTML pages… unless of course you set up your common defaults ahead of time, in, say, a custom.scss file. Then you can just add classes to your HTML elements to get whatever behaviours you typically use.

Good use of simple effects add a lot of life to a prototype
Good use of simple effects add a lot of life to a prototype

For shapes that can be used as if they were a stencil set, the included icons and social icons are handy. They are brilliant for prototyping because they are used as an element in HTML with a class describing the glyph. So you never have to touch the CSS.

In the prototyping stage, we basically try to work quickly and never touch the CSS/SASS at all. We’re just building a bunch of HTML pages. This keeps it really simple. The automatic reload and image placeholder features of Hammer comes in handy and works great with a text editor and web browser side-by-side.

One thing we haven’t used much, but might be very handy, is the joyride component of Foundation. It could be used to walk viewers through your ideas on a particular page, if appropriate.

Designing

Foundation includes a _settings.scss file that defines how all grids, typography, widgets, and other elements behave. It’s a straightforward format that you can edit quickly to set up proper defaults for your whole project.

Change one number, and all the rounded corners change, everywhere
Change one number, and all the rounded corners change, everywhere

Foundation lacks a good way to work with vertical rhythm of text, doesn’t have inbuilt calculations like golden ratio and such. We usually wrap in a simple parallax or animation or background video library to get closer to the visuals we want.

We love to work with real images at this stage… but if we can’t we at least upgrade our image placeholders to look somewhat like real images might.

For a style guide, the kitchen sink page is a good reference. We include the relevant chunks of that page, for the things we’re designing, as well as examples of the colors and fonts we’re using, and some dimensions and notes. This becomes a document maintained throughout the life of a project, and becomes a handy reference.

The "Kitchen Sink" is a decent starting point for a style guide
The “Kitchen Sink” is a decent starting point for a style guide

Developing

While Foundation has a load of strengths for getting started building sites, and for those less savvy about the more technical aspects of coding a modern website, it grows nicely into something that is well-written and often best-practice.

One of the nicest things about Foundation is that it supports both a declarative (a bunch of crap in your HTML) style of quick-and-dirty coding, and a semantic style. The semantic style lets you take all the crap out of your HTML and declare it in SASS. This makes you feel much better and makes your output a lot cleaner.

The whole system is built from very modular SASS and JavsScript components, so that you can choose just the parts you need. In this way it is not going to bloat your project any more than an equivalent set of libraries would. The pages load fast.

Since we most often build sites with WordPress, our favorite has become the JointsWP theme.

Conclusion

We are huge fans of Zurb and all the work they’ve put into Foundation 5. In our experience, no other framework can take you through so much of your process and grow with the project. We’re certainly looking forward to what’s next.

Raymond Brigleb

Creative Director, dreamer, partner, father, musician, photographer. Has been known to ride the rails. Pulls one heck of a shot.