One of the cornerstones of the Forge and Smith process is the separation of UX and design.

While they’re essentially two sides of the same coin for us websmiths, splitting them makes a world of difference to our clients.

User experience (UX) and strategy are about the structure of a site, and the “why?” of each component. Design is about the look and feel.

If you were building a house, you’d draw a blueprint, build the frame, and figure out which way the doors should open and where the electrical outlets would go before you’d start painting the walls.

It seems pretty obvious when you think about it that way, but most of our competitors still take the backward “traditional” approach with design first – clients are presented with finished designs and asked to provide feedback.

The inherent problem is that a finished web page mockup (unlike print) is comprised of several layers of strategic elements (content, user experience, layout/priority, brand), making it complicated to see each component individually and provide adequate feedback.

Mockups are also, by nature of the tool used to create them, completely static, whereas the mobile device-centric web is utterly fluid.

How can we plan a fluid experience using static concepts? We can’t.

Our team believes that it makes much more sense to break those layers into their own deliverables, and build consensus and approvals collaboratively through a strong planning process using a content-first approach.

This way we can start with the foundational planning elements, informed by actual content, to determine architecture and structure. We can then allow this process to naturally evolve into discussions around the experience and layout.

This results in flexible prototypes that can be viewed and experienced in a browser. We build out every page of the site, using real content whenever possible, to ensure all the pieces work together to create the experience our clients want their audience to have.

Furthermore, we’re able to do simple user testing to ensure our assumptions are true, or make adjustments when they’re proven false.

It’s only once the prototype is approved that we begin the actual user interface (UI) design process.

Using style tiles to explore different colour palettes and typographic treatments, we once again separate the visual from the strategic by focusing on the look and feel, and the emotions they create, in a pure design format.

These styles are then applied to the prototype screens to create page mockups which, though static, are now seen alongside the context of the fluid prototype. This systemic approach, based on brand guidelines and visual patterns, then “overlays” the prototype to complete the experience.

Our method, which has been evolving with our team for over four years, has been critical in the success our websites create for our clients. It focuses on what drives value for the audience it serves, rather than being based on what looks good.

It has also been critical in creating successful client experiences with our process. It makes it easy for clients to provide focused feedback on smaller deliverables, which we’ve found results in far fewer revisions.

In fact, we removed design revision limits a long time ago – this approach is so effective that they’re simply not needed.

When I started Forge and Smith, I built it on the principles of a strong repeatable and measurable process. Process helps drive what we do, when we do it, and how we do it.

Without a solid framework, agency projects can quickly dissolve into miscommunication and chaos, and clients ultimately pay the price.

My design teacher way back in my college days always told us, “You can’t solve problems while designing. Create the solution first, then design for it.” I’ve never forgotten that advice.