Creating a Website : Style-First Design

Before we started on Project Shylock, we were very badly burned by an extremely high maintenance web form. When we first started designing it, we made a screen mockup that was pixel-perfect and would dynamically resize its windows according to which panes you toggled open and shut. We created a screen first, then made unique design rules that would allow it to be possible.

It looked beautiful!

Only it wasn’t. It was a hot mess of intertwined javascript resize events that would cascade from parent events down to any dynamic child. A form resize or a toggled pane would trigger the display calculation of up to 10 items. By the time we delivered the form, it worked well and responsively, but the cost of sticking to the pixel-perfect screen layout cost us a few weeks of person-hours.

The Lesson : Style First, the rest will follow

When a graphic designer makes a pixel-perfect layout, there is a less-than-complete understanding of how all the pieces are grouped and how they will all push and pull upon each other.

Know your direction

Work out your fonts, your site’s persona, your flavor.  Make some designs on how you want your site layout, look and feel to flow.

Create your styles

Preferably with something like Sass or Less, lock in a gentle css reset, then start building up your styles. Make css modules of related rules. Typography module, color module, padding, layout, buttons, grids, forms, dialogs…  start with the essentials and expand as you need, but make your rules, work out how it all is going to flow

Communicate your rules to designers

If you are working with designers or graphic design team, communicate your styles and rules.  Make a prototype page with examples of how various objects will interact with each other and let them see and play with them.

When they make designs proposals for new functionality, make them use your rules to make the forms.

The pages will follow the design…

If you stay flexible and Keep It Simple (my mantra!), then when you create your pages, they will start naturally fitting in amongst each other and dictating their own flow.  This works especially well in a web site that has to be dynamic or responsive, because as your controls change or your available space, the controls will adapt as well, with minimal developer intervention.

Leave a Reply

Your email address will not be published. Required fields are marked *