The Modular Approach

A visual diagram illustrating the ways that the user should move through the site or feature. We map out section flow in a general way, for instance to design how a user might get to important information in under three clicks. We also use these to map out more complex functions, such as contact form input, notifications and response.

This can be a spreadsheet or text outline format. This is where we map out the structure developed in the flowcharts with actual site content. Number of pages and styles of menu structure are decided upon. If site content is not yet written, we put placeholders with descriptions of what the content should be for the writers and admins.

Simplified charts for what content goes where. No design, just grouping information into place. We take the actual content from the outlines and place it visually into layouts. When these are approved, we are ready to design the colors, fonts, look and feel.

Global components are there on every page of the site. If you only have two, they’ll be the topmost header, and the bottommost footer. It is common to also design optional global spaces such as for an additional call to action at the bottom (“pre-footer”), or a featured content banner, to name a few.

Flexible components are pieces that can be placed on multiple pages, possibly limited within a specialized section. For example there might be a news teaser that appears on all main landing pages, but not on their child pages. It could also be a functional style of content, such as a tab-set. In this case, we are developing continuity of visual language, but housing custom content depending on the page or section that it has been assigned.

Sometimes there is special content that only has a place in one spot. These undergo the same design process but do not have to be built to work outside of their home layout.

We begin code development by creating templates and fields per component. Now we are very happy to have such nicely organized designs and wireframes! The type of component tells us how to code each one so that the content admins can easily add and edit the text and images, and that they show up in the right spot.

We build out the functionality from our flowcharts and test them on devices.

Styling is often interwoven into code development. Here we are setting up the brand identity, fonts, colors into the theme. We are making the site defaults and customizing those down to the special cases. We are continuing to test on devices, working in accessibility help, responsive behavior and confirming our functionality is still in place.

Testing is done through every development phase, and every time we make a change thereafter. We test on as many devices that we have on hand, and use testing services to be sure that the ones most important to our clients’ audience are covered.