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!
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.