The Modular Approach

Edit icon: Pencil hovering above paper

The modular approach to site building and project planning that helps us serve our clients with the most efficiency.

Edit icon: Pencil hovering above paper

Planning content flow and information architecture

A successful website should have a structure that guides the user directly to the content they are looking for. The three main tools we use for this important stage are:

flowchart icon

Flowchart

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.

outline or sitemap icon

Outline and sitemap

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.

wireframe icon

Wireframes

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.

Designing components and “modules”

To go from wireframe to visual design in a way that is efficient and makes sense for development of the code, we review our charts and plans and divide the content into base components. These components are designed individually and appear in the same visual style and layout wherever they are placed.

Global components

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

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.

Singleton components

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.

Development of the website components

With components designed and layouts in the map, we can begin building. Once again we have three somewhat overlapping phases:

web development icon

Development

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.

paint palette

Styling

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.

web browser icon

Testing

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.

Product launch and conclusion

By the time we are ready to “make it live”, we have gone through the processes above. Our systems and methods have helped to bring it together as smoothly as was possible. With our modular approach, we can be more adaptable to unknown changes as they come up, and deliver a product that can be easily used now, and extended comfortably into the future.