Stacks Image 345

Blue Muse blog on random bits & bytes.

« Previous

Friday the 14th of February, 2014

Blue Muse Website

by Dalmazio Brisinda
The Blue Muse website has officially launched! Inspiration for the visual design comes from the fine folks formerly of Sofa. Here we describe some of our process and the top-secret technologies employed.
RapidWeaver by Realmac Software is a professional tool that is easy to use, possessing powerful expansion capabilities, a large collection of 3rd party add-ons, and a comprehensive support network.
Stacks by YourHead Software is the quintessential add-on for RapidWeaver. It is so insanely useful that I wouldn’t recommend using RapidWeaver without it.
The amazing thing about the Parallaxis theme is that it is the first RapidWeaver theme that supports the jaw-dropping parallax effect, which all by itself somehow manages to take your design to the next level.
TopBox by Stacks4Stacks stood apart from the lightbox crowd with an elegant interface and options to disable all overlays, allowing full attention to be focused on the content.
I’m not a web designer. But I can appreciate good web design when I see it. After all, the principles of good design are the same, whether you are designing websites, desktop apps, or tangible products.1

And so begins the quest for a Mac OS X app that would simplify the process of web design, without forcing me to become an expert in half a dozen web technologies. HTML and CSS are straight-forward enough, but I really wanted to avoid coding JavaScript. I also wanted to avoid web design software with a steep learning curve.

On the Mac it seems our options are somewhat limited. There is
Dreamweaver (professional audience, steep learning curve, expensive), Flux (professional audience, moderate learning curve), RapidWeaver (beginner to professional audience, low learning curve, killer expandability), and Sandvox (beginner audience, iWeb replacement, low learning curve). The decision was an easy one. RapidWeaver by Realmac Software is a professional tool that is easy to use, possessing powerful expansion capabilities, a large collection of 3rd party add-ons, and a comprehensive support network.

This decision set me on an eye-opening path of discovery down the web design rabbit hole. By itself, RapidWeaver appears it can do pretty much everything you need. But you’ll have to hand code a lot of the more advanced layout and design as custom in-app HTML, CSS, and JavaScript. That's where stacks come in.

Stacks by YourHead Software is the quintessential add-on for RapidWeaver. It is so insanely useful that I wouldn’t recommend using RapidWeaver without it. A clear killer add-on if there is one. Stacks is a general purpose plugin that makes available many common HTML elements, including column and grid elements, headers, text, buttons, images, as well as floating elements, all drag-and-drop style. But more importantly, it allows a myriad of 3rd party plugins (stacks) to be dropped into web pages as well. Things like lightboxes, galleries, tabbed views, forms, email subscriptions, social integrations, and content management system integrations, just to name a few. There are literally hundreds of stacks available for download.

Once these pieces were in place, I needed to decide on an overall design theme. Packaged templates, for most software that provide them, are often rather ho-hum with limited feature sets. RapidWeaver includes quite a few not-to-shabby ones. But I was looking for a single-page design theme that included dynamic scroll-to effects when section area links were selected. I prefer this simplified user experience for a site with minimal content: a landing area, a products section, a company section, and maybe a blog summary section. Besides, only one page is loaded, and navigation is fast.

Scouring the RapidWeaver forums, I found one theme that offers a feature-rich single-page design with a built-in dynamic scroll-to effect:
Parallaxis by Archetypon. The amazing thing about the Parallaxis theme is that it is the first RapidWeaver theme that supports the jaw-dropping parallax effect, which all by itself somehow manages to take your design to the next level. It also includes some great features such as responsive design, embedded Font Awesome 3, and unlimited customizability within the theme itself.

The next piece of the puzzle was a lightbox stack that would be needed for previewing screenshots of our apps. Most lightbox stacks I came across fell short in their design aesthetic.
TopBox by Stacks4Stacks stood apart from the lightbox crowd with an elegant interface and options to disable all overlays, allowing full attention to be focused on the content. A collection of screenshots could also be linked in a series of TopBoxes for a gallery-like experience. Awesome.

The last important piece was
CSSBox by Joe Workman. This is a nice little container stack (Joe has gazillions of stacks available for download) that allows you to easily add ‘class’ or ‘id’ tags to your stacks so you can better control the visual style with in-app hand-coded CSS. Alas, I was nearly complete. The design and coding work was ready to begin.

I must acknowledge the folks formerly of
Sofa, whose bright minimalist design I borrowed upon heavily. These guys get design, with attention to details like complimentary foregrounds and backgrounds that work in combination to reduce the psycho-visual jarring effects of reading through blocks of high-contrast text. Or details like using condensed fonts for large all-caps titles in narrow 2-column layouts to reduce unsightly title fragmentation and word-wrap (League Gothic—I think I love you).2

I hope any former Sofa designer who happens to stumble across this site, will see it in a favorable light. After all, isn’t imitation the sincerest form of flattery?

1. Dieter Rams' 10 Principles for Good Design are often employed by high-calibre design studios, and design-centric product companies like Apple.
2. League Gothic and other great fonts are available as free downloads from
Font Squirrel.