A Rapid Prototyping Toolbox for Designers with Jekyll and Foundation 4

Learn how to rapidly prototype marketing websites or blogs with a simple set of tools–Jekyll and Foundation 4. This isn’t necessarily the fastest way to build a prototype, but this is the most extensible way I’ve found that allows you to move seamlessly from prototype to production. I built WelcomeMat.co in order to test these tools in a somewhat-real-world environment.

EDIT [01/15/2015]: This post is a bit out of date. I now recommend checking out my new post for rapid prototyping static websites using gulp and jekyll.

A Rapid Prototyping Toolbox with Jekyll + Foundation 4

Check out the site (and make sure to resize the browser to notice how responsivey it is). Although it houses dynamic content which changes on a fairly regular basis, it’s a straight, static .HTML document. This is the key to Jekyll. It gives you the ability to build a site with a powerful templated structure similar to WordPress or other Blogging/CMS systems, but it compiles to good ol’ HTML. No pesky databases or giant bloated systems to worry about.

There are certainly downsides to learning Jekyll, too. There’s a bit of a learning curve (though it’s smaller than learning to build custom templates with WordPress). The community of support and plugin development isn’t as robust as WordPress or Drupal. The community that **is **there tends to be more developer-minded, which may be a bit scary for a designer (I was certainly intimidated when I started). Having said that, these tools are perfect for getting your ideas out quickly, and are much simpler to learn than you think.

Foundation is a frontend framework that gives you baked-in support for responsive grid systems, modals, image carousels, etc. It makes it easy to do 95% of what you’d want to do for a blog or marketing site, and makes CSS layout more sensical (once you learn the system).

Prerequisites

Before diving into Jekyll and Foundation 4, you should have a reasonable grasp on HTML and CSS. You don’t need to be an expert, though you should know how to Google markup structures you’re unfamiliar with. Though Javascript or dynamic scripting experience helps, it’s not required. It will simply make it easier to work with Foundation’s included Javascript components.

What the perfect rapid prototyping toolbox looks like

I’ve used a few tools during the course of my career building Internet, but certainly not all of them. I’m not out to find the very best of the best, but rather the tools that satisfy my criteria for success. They should:

  1. …have a short learning curve, with hidden power that I can introduce over time, as I have time.
  2. …be able to accommodate sweeping changes easily, without rebuilding structure or duplicating work.
  3. …be able to move seamlessly from prototype to production in order to put some real mileage on the prototype.
  4. …make it easy to add slightly more complex javascript functionality like modals, suckerfish menus, image carousels, and so on.
  5. …get out of the way and allow me to think about the product design, rather than implementation details.

(Sidenote: As I mentioned, this article is about building a blog or marketing website. For app prototyping, I recommend you check out meteor.js, and the awesome book Discover Meteor, by the eminent and productive team of Sacha Grief and Tom Coleman. I’m still too early in the book to say a whole lot about it, other than “be not afraid”—they make the topic very approachable. I look forward to the horde of designer-developed apps that will soon be released into the wild thanks to their tireless work.)

(Side-sidenote: It was pointed out by @davebarnow that Mixture.io does much of the static site generation and site management stuff for you, obfuscating some of the complexities behind a nice UI. Full disclaimer—I haven’t used Mixture for a real project yet, as I prefer to understand what’s going on under the hood first. It’s an awesome app (though the onboarding inside the app could use some work), and you should absolutely check it out if it helps you crank out your ideas quicker).

Here’s what my rapid prototyping toolbox looks like

The main stars of the toolbox are Jekyll and Foundation 4. However I’ll also point out some of the supporting tools, as well as why I picked them.

Jekyll

Jekyll is a so-called “blog aware static site generator.” This means it’s similar to blogging engines like WordPress, which are built to showcase episodic content and use a database to build a webpage from “includes” (or “partials”). Includes allow you to have a single file that contains the content for your header, a single file for your footer, and so on—allowing you to make your logo bigger in a single file instead of copying and pasting your changes to every page of your site.

Jekyll is a bit different than a system like WordPress, in that there is no database, and no admin interface. All your “posts” are simple HTML or Markdown files located in a particular directory of your site. You still have most of the functionality of a database-driven website, like being able to add your own meta data to a post (for WelcomeMat.co, I have attributes on each post called title, size, author, and authorURL). The net result of a Jekyll site, however, is that it outputs plain ol’ HTML. Few things are more performant than straight HTML. It also makes deploying your code a breeze, since you’re simply moving everything in your “_site” directory to your server. Here’s a great tutorial on getting started with Jekyll.

ZURB Foundation 4

Foundation provides you with a markup and CSS template so you can rapidly build out a design based on a 12 column grid. It’s a popular but lesser-known competitor to Twitter Bootstrap, which has made it possible for developers to build sites that all look the same for years. You could substitute Boostrap for Foundation if you know it better, or any of the other myriad frontend frameworks to the same effect. I prefer Foundation because it uses a grid system that is responsive by default, and gives you access to a small grid and a large grid. This means you can define how your site should look on mobile devices up to iPad size, and how it should look on devices larger than that. You can easily modify your CSS to add more granular breakpoints, but starting with a small device and a large device makes it achingly simple to make your site responsive by default (I hadn’t intended to make WelcomeMat.co responsive when I started building, but Foundation made it silly not to).

On top of that, Foundation is a tad plainer by default, which encourages you to do something other than the default styling. As a designer, I give this two thumbs up. If you’re a lazy designer, then use Bootstrap (but don’t be a lazy designer). The Foundation Docs are well-written and a very complete place to start learning about it (I’m told by many they’re not that great, so I withdraw this assertion). Another big reason I prefer Foundation is that it’s written in SASS by default. Which leads me too…

SASS/Compass

CSS preprocessors completely changed my life (at the apex of a period when I arrogantly thought there was nothing new to be learned with CSS. D’oh!). Foundation is written in SASS, which makes it very easy to use with SASS/Compass. Compass is a library that extends SASS, though I largely use it because it makes compiling your SASS to CSS very easy and doesn’t require you to learn new syntax. This allows me to write the same CSS I’m used to, and only bring in the more powerful features (like variables, mixins or functions, etc.) when I have a reason to. This satisfies criteria #1: short learning curve, with hidden power I can learn over time. In fact, you can copy over straight CSS into an SCSS file (the extension for SASS/Compass) and it’ll still work.

People who know stuff about things will tell you 1,000 reasons why LESS is better than SASS, or Stylus is better than everything else. I try not to get dragged into discussions like that, and instead focus on the tools that make me more productive (needing to re-read the documentation for every project you start because you can’t settle on a toolset is the definition of unproductive, in case you were wondering). You don’t even have to use the terminal to use Compass if you don’t want to (though seriously, suck it up). Scout gives you a GUI alternative, though I’ve personally never used it before. The Compass Docs are a decent place to start, as is CSS-Tricks.

Icon Fonts

I’m currently in love with both Geomicons and SymbolSet Pika. Icon fonts give you the ability to rapidly add icons by simply adding classes to your markup like “icon-home.” Plus, you can control the look with CSS rules in the same way you can control the look of text with CSS (since the icon is text). Additionally, they’re vector based so will look good no matter how pixel-dense the screen. Icon fonts allow you to stay in the code without futzing with image exports (and @2x exports for high-density screens). Overall, this will make you faster. Again, allow me to let the illustrious Chris Coyier convince you that you should be using icon fonts.

To build your own icon font from SVG files or pick from some awesome icon font sets, check out IcoMoon.io or Fontello. I used IcoMoon to generate the icons for this site.

Webfonts

Google Fonts, Typekit, and numerous other services give us access to real typography like we’ve never had before. We’re no longer restricted to Georgia, Helvetica, et al. In fact, we’re really only limited to the fonts that are available on these services. Many ridiculously more qualified people than myself have written copious amounts about the state of web typography, so suffice to say, when you start a design, see what’s available before you settle on typography. I like to pick my type by looking at Google Fonts and Typekit and taking a screenshot to mock it up. It’s currently a little tough to get these typefaces loaded on your machine to play around with in Photoshop or Illustrator (though Google Fonts do allow you to download your choices). This is supposed to be changing soon with many major webtype services launching desktop versions.

Amazon S3

Amazon S3 has made hosting a complete breeze. I no longer have to worry about getting a hosting account set up, or worry about what getting an influx of traffic will do to my hosting bill. S3 will adapt to the needs of your site, and it’s pretty cheap too. For your prototypes that get no attention, it’s basically free to keep them running (aside from your yearly domain registration). Synching your files to S3 is still a bit of a chore, and a topic for another day. The benefits far outweigh the cons, though.

Conclusion

This toolbox isn’t necessarily the best one out there, but it’s allowed me to transition my janky coding skills to being able to release reasonably stable websites–quickly. There are many alternative configurations, but I’d encourage you to create your own list of success criteria for what you want your tools to accomplish. Since web designers are raccoons, it’s easy to get distracted by bright, shiny objects. A list of success criteria will help keep you productive instead of distracted.

Do you have a rapid prototyping toolbox? What does it look like?

Hi, I'm Zac Halbert. I'm a digital product designer and lifelong learner living in San Francisco, California with my wife, son, and sheepdog. I currently run the Product Design & UX track at Tradecraft, where we train smart people to succeed in traction roles at high-growth startups.

I also own independent product design consultancy Scout Hawk Product Design Studio, where I help entrepreneurs turn hazy ideas into concrete digital products, and Foliotwist, a portfolio and marketing SaaS company for visual artists. I also advise a number of companies on the intersection of user experience design, product design and management, and rapid prototyping and idea validation that draws heavily from the Lean Startup philosophy.

My background is a mixture between formal graphic design and fine arts education, mixed with a long history of self-taught frontend programming skills. I began to learn HTML, CSS, and UI design at age 12 (I was a huge nerd), and got my first job as a web designer at age 15 — and have been doing it and loving it ever since. I eventually got my degree in graphic design, but have diverse interest in nearly every field that blends technical and creative work.

While I'm not very good at keeping my portfolio or blog up to date, I always love connecting with fellow designers, entrepreneurs, and developers. Here are just a few of the companies I've had the pleasure to work with.