Easel: A WYSIWYG Bootstrap Page Builder

by on 20th November 2012 with No Comments

screenshot

Twitter Bootstrap makes creating complex page layouts a breeze. Drop in a few lines of HTML, apply a few classes and you’ve got yourself a decent looking, minimal working mockup.

Wouldn’t it be nice if things were even easier though? What if Bootstrap had a visual interface? What if you could build Bootstrap pages by dragging and dropping elements onto an empty canvas? With Easel.io, you can do exactly that. Let’s see how it works.

Getting Started

Once you go through the quick sign up process, you’ll be taken to your Dashboard. Here you should see an included demo page and some controls for creating a new document from scratch.

screenshot

Right off the bat, I find myself wishing there were some basic page layouts that could be used as building blocks. It would be great to see a bunch of starter templates in here in the future.

In lieu of this, hit the “Create a Document” button to get started. From here, name your document and set the permissions using the drop down.

screenshot

UI & Tools

The UI here is awesomely simple. There’s just one big empty canvas and a set of tools running down the left side.

screenshot

The standard Bootstrap toolset is split into eight collapsable categories: typography, table, forms, buttons, navigation, containers, thumbnails, and miscellaneous.

screenshot

There’s also a basic, icon-based toolset off to the right with some typical tools: move, rectangle, type, zoom, and pan. In addition to the Bootstrap elements, there are a few custom styled elements in the “Easel Pack” and a set of free icons that you can use in your design.

screenshot

Workflow

Easel has a fairly an open-ended workflow. Just drag items onto the canvas and shuffle them around. However, if you want your resulting code to be structured properly and the end result to be responsive, you’ll need to follow a much more specific process.

There’s not much documentation to speak of, so I’m admittedly a little hazy on the details myself, but here’s how I think it works.

Start with a Container

The first thing that you’ll want to do is drag out a container. This is located in the “Containers” section of your tools.

screenshot

Think of this in terms of your typical grid system, containers contain rows of content, each of which contains a specific number of columns.

screenshot

When you have a container or any other item selected, the right side of the screen comes alive with various options for tweaking the size, roundness, etc. of whatever you have selected.

screenshot

These options are context-sensitive and change depending on what you have selected.

Now a Row

Now that you’ve got a container to work with, it’s time to drag in a row. Make sure that you drag it into the container that you created into the previous step. You should see a highlight on hover that helps you see where you’re placing the row.

screenshot

By default, a row shows up with two columns. As you click and drag to resize the bounds of one, the other automatically adapts to take up the rest of the space.

screenshot

If you want more columns, just select one and his the duplicate button near the top of the right side menu. You can also manually set each column width using the drop down under the “Custom” tool menu.

screenshot

Drag and Drop Elements

Now that you’ve got some columns to work with, you can begin filling them with various elements. Here I used the three boxes that I set up to lay out some nice looking text.

screenshot

From here, simply repeat this process over and over again. You can use the existing container, just drag out new rows and continue adding items to those rows. Here I’ve included another row of text and some thumbnail images.

screenshot

Customization

Once you’ve got some elements on the page, you can begin tweaking and customizing those elements. For instance, select some text and try changing up the typeface. Easel has great web type options from both Typekit and Google.

screenshot

Other Goodies

Before we wrap up, it’s worth point out a few more features. First, as I mentioned above, there’s a huge set of great icons built into the app:

screenshot

There are also some super helpful grid view options that allow you to really get a good look at what’s going on with the Bootstrap layout. You can both view and customize your grid in this menu.

screenshot

Since we followed a responsive workflow, we can use the icons at the top right to change the viewport size and see how our design responds to different scenarios.

screenshot

Finally, once you’re finished with your design, you can download the code and resources that were used. This feature is by far the best part of the app as it makes your prototypes something that you can actually use.

screenshot

The code that’s generated here is nice and clean; very close to what you get when you work by hand with Bootstrap.

How Is It?

Despite the fact that I’m always droning on about WYSIWIGs, I was pretty excited to get my hands on Easel. I’ve thought for a while now that Bootstrap’s clean code system would be easy to automate and have been hoping that someone would jump on an interactive Bootstrap page builder.

Once I got my hands on Easel, my thoughts were mixed. Let’s examine a few specific areas and how they fared.

Concept: Awesome

The people behind Easel are off to a great start. They have a stellar concept and a solid foundation in place to build something that is truly useful for Bootstrap users (of which there are many).

Instructions: Nearly Nonexistent

Currently, I can seem to find any real documentation for how to use Easel (maybe it’s there and I just don’t see it!). Granted, it is the type of app that you want to just pick up and run with, but there’s still enough complexity here that some in-depth documentation is necessary.

There are at least some helpful tooltips when you hover over various UI elements. These are nice, but aren’t sufficient on their own.

Layout Workflow: A Little Wonky

Building a page with Easel is super easy, just drag and drop items onto the page. Unfortunately, as you begin to do this, you get the sneaking suspicion that you’re doing something wrong.

Then you discover the “Containers” section and you realize that perhaps you were supposed to use containers and rows in your layout. If this is really the first step though, why aren’t these at the top of the tool list?

Once you realize that you should be creating rows, dividing those rows into something other than two columns is actually pretty tricky. It took me a long time to figure out how to do it and I’m still not sure that I’m doing it correctly.

I would completely rethink how layout works. First, put the layout tools at the top of the tool set. Next, once a row is dropped onto a container, show some controls that allow me to easily increase and decrease the number of columns in that container as well as tweak each column width.

Also, give me a few prebuilt layout modules to drag out. They might look something like this:

screenshot

These would allow you to quickly drag out and create common layout structures with almost zero effort, greatly reducing the current layout frustration.

Placeholder Images: A Mess

There definitely needs to be a better system for placeholder images. When I drag in a single placeholder image, I can’t seem to get it to resize effectively. This functionality is super buggy and it jumps between a tiny image or an unusably huge one. Give me a straightforward way to toss in a placeholder image that takes up twelve columns and is 300px tall, one that is four columns wide and 100px tall, etc.

Further, the thumbnail grid isn’t very easy to work with either. I think there should be simple controls that allow me to set the number of images to use in each row and column, but there’s no such system. Instead, you get three images by default and have to go through an awkward and clunky process to copy and paste your way to the gallery that you actually want.

Pricing: Great

I actually really like the pricing strategy. I fully expected them to block code download for free users similar to Gridset, but I found that I could actually do almost anything I wanted on the free plan.

The premium plans essentially charge you for increased collaboration and unlimited pages, which is definitely fair. If you legitimately find a way to dish out sites faster with this product, then $15 a month is a no-brainer.

screenshot

Go Try It!

I was pretty harsh on Easel in my feedback, but that’s only because I see a ton of potential here and know that this could go from “something neat to play with” to an “indispensable tool” with some time and attention.

In its current form, Easel is a good static mockup tool, but for live, responsive prototypes, I found myself continually thinking about how I can code up any Bootstrap layout that I want much quicker. Ideally, the tool should save me time.

All of that being said, I highly recommend that you give Easel a try for yourself. Give it a shot and leave a comment below to let us know what you think.

Comments & Discussion

No discussion just yet... Get things started!

Leave a Comment

Subscribe
Membership
About the Author