I was recently involved late in the process of a web project. The design and development were all but complete with only last minute adjustments and fine tuning of new content required. The hard part of the design work had already been done. Getting the site completely finished though took longer than it should have because some basic parts of the design had broken down along the way.
Type Hierarchy & Spacing
The site in question had a very visually appealing design and most pages worked in isolation, but during the development process some consistency had been lost between various levels of the design hierarchy. Most pages had a top-level H1 heading, but not all; the H2s were usually a specific size, but not always. The spacing between a heading and the next element wasn’t always the same and the reasoning for the colour of a given element wasn’t always consistent. During the iterative refinement at the end of the project these pages were styled individually which caused them to break down as a group, requiring more rounds of refinement to unify them again.
There wasn’t a guiding principle for the size, colour and hierarchy of elements, so these decisions had to be made several times over–and for multiple pages–which added quite a bit of time to the process.
Design Groundwork
The type hierarchy and element spacing was not the sexy part of the design. It’s not something users would notice when it’s right, but the absence of that groundwork definitely made getting the to the final result more difficult.
The lesson for me was a reminder that the basic elements like spacing, alignment, repetition and consistency enable more interesting things and should be a guiding force later in the process when you’re short of time and needing to implement things quickly.