We recently worked with Gary and Ollie from RapidWeaver Plugs to develop some icons for their latest RapidWeaver plug-ins Partitions and Styled Text Plus. We worked from Gary’s ideas and developed them from there.

His original idea for Partitions was to have separated areas, or columns, of colors that would jut up and off of a web page.

While doing some initial sketches for this idea I did a little brain storming and came up with the following idea of separating the colored objects with physical partitions:

Gary was happy with this direction and we decided to step it up a bit. He requested we add a divider horizontally. In doing so I decided to take a chance and develop the colored blocks into actual objects. The next iteration was a big leap forward:

I wanted to convey to the user the sort of items that could be placed onto the page inside of Partitions. We discussed other items to add to the empty bays and to leave one empty, inviting the user to place their on content. This is the final version of the icon:

Since finishing the icon we’ve also created an alternate version of the icon for Gary:

Included in the project were a few internal icons for navigating the plug-in, representing the body of the content, the header and footer, and the settings:

Another of our icons for Gary recently was for his back-to-basics plug-in, Styled Text Plus:

Tags: Partitions, design, icon

I have recently 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, and the user interface we developed and a little bit of the process behind developing the icons.

Slices
Each Stacks page in RapidWeaver 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 to make it easy for users to discern what they were at a glance. Isaiah had a general 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. Working with Isaiah was a dream as he not only had an idea of what he wanted, but he was also very receptive to my ideas on both the icon and interface design. Here’s a look at his initial sketches and the finished icons for the slices.

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, but I wanted to try some very different approaches as this was not to be your ordinary plug-in. The ideas were roughed out and we finally chose a more traditional, yet standout setup and look.

In the end we settled on the matte black library. We 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.

Iconic
We were quite lucky in developing the main 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 below. We actually never varied too far from these early ideas, for the most part. Seems we hit it on the head from the get go.

Here is the final icon we settled upon to represent Isaiah’s wonderful new plug-in. I just love the bright, contrasting colors!

Tags: Stacks, RapidWeaver, icons, design