We noticed you're using Internet Explorer. Our site works fine in IE. Though we do recommend the standards compliant browsers Safari and Firefox.
Design

Stylish Stacks

I have been working with Isaiah, from YourHead Software, on designing the user interface and icons for his latest RapidWeaver plug-in, Stacks. I’d like to tell you a little about the plug-in and show you some of the icons we developed and a little bit of the process behind developing the icons.


stacksicon

Slices
Each Stacks page is built from slices that are defined by you, the user. Anything from a Styled Text slice to an Image or Columns slice. You can create a complex layout quickly and with ease. Each slice needed a simple, clear icon to represent it. Isaiah had an idea of the sort of icons he was looking for to represent most of these slices. So I took his sketches and turned them into finished icons.

stacks-sketches

Text_128x128Stacks Icon_128x128Columns_128x128Image_128x128
Align Image Left_128x128Align Image Right_128x128Code_128x128Text Image_128x128

Interface
I also worked with Isaiah on developing the User Interface for Stacks. Below are a few of the initial ideas I came up with for the Library design and main content interface. Some were more ‘out there’ than others.

stacks-notebook
stacks-wood
stacks-black1


In the end we settled on the matte black Library. We also added a non-standard, classy library trigger in the lower right corner of the interface. The final UI design came out rather well, I think, and is easy to use and navigate.

stacks-final

Iconic
Isaiah and I were quite lucky in developing the Stacks icon. After sketching some ideas out for myself to start from I jumped right into Cinema 4D to mockup some icon ideas. Luckily these early renders were what Isaiah was looking for and the metaphor fit well with the title and functionality of the plug-in. Some of the early ideas can be seen here:

icons-early

Here is the final icon we settled upon to represent Isaiah’s wonderful new plug-in.

icon-final