The Right Mix: UX, Visual Design, Code

I like to think in threes. I express a lot of my work in threes, the triad in music, the Triptych in art. It feels right to create in threes — Three variations on the same theme, the same theme repeated three times, expressing three examples to prove a point… and I have a feeling I’m not alone in this concept.

Defining success
I have been observing something similar when thinking about modern web application design. When stripped down to it’s essential requirements, three main disciplines need to find equal success. What value do I place on success? For the purpose of staying on point, I’ll say there are three things that make an experience successful (see where i’m going with this?) User Experience, scalability and meeting business requirements. Let’s start here and say that most projects will at some point gauge success on these metrics even if they were not completely defined at the beginning.

The right UX
With that as a loose definition of success and what we are striving to achieve, I come back to three disciplines that will always need to fire on all pistons — UX, visual design and code. All other areas like product management, marketing, advertising, content production are all baked into the metrics of success — and each is empowered throughout the process but are dependent on having solid UX in place. I’m talking about the process where an individual focuses their entire attention to what the experience should be, whether it’s a mobile app with two buttons or an entire commerce site with where the objective is to buy something, the user experience needs to be thought out end-to-end and considered thoroughly. The UX person is not meddling with colors or fonts or brand logos — this person is developing workflows and user flows for the entire experience. The result should be pdf wireframes that tell the story of the experience. The wireframes should in many ways be achieving much of the success we discussed earlier. A stakeholder should be able to look at a wireframe and point to a section and ask if a metric has been achieved such as banner placement, or can this section scale to accommodate x number of users or is this easy to understand from a users point of view.

Taking your project to the next visual level
The second discipline is good visual design. This is an important step and an important role. Especially if the experience requires a lot of modern technology to get the experience right. Is there video? Do we need to use animation to express areas of the site? How much technology is the right amount? This person or team needs to be able to take the wireframes to the next level not only visually (introducing color, type, layout schemes, icons, photo manipulation are a few of the big ones) but also with an understanding of the massive arsenal of technology at the ready to make the experience great — and successful for the user. Too much paint will cover the beauty but not enough will make it dull. The designer should begin to show design comps as they will look when presented to the engineering team (code) as well as any interactive layers or storyboards of interaction where necessary — this is another topic of conversation all together, but we’ll stop here.

Code is king
As with any interactive experience, the right code is the key to making any project come alive. I no longer consider myself a coder though as a designer I follow the trends and thus the technologies that help influence the trends. The speed at which technology is going, almost any idea I can think of can now be created on my computer screen. It’s almost overwhelming to think about it, but unless you have the right people in place who are determined and experienced at building something using smart, modern code — terms like JQuery, Ruby, PHP, HTML 5, CSS3 are all synonymous with success.