Demystifying our responsive design process

A 7 minute read written by Sam November 4, 2014

old school race car - vector illustration

The web design process can (and most likely will) get messy. There can be several team members contributing at once, each with their own sets of expertise.

If you’re a client, this process might seem convoluted. Working with a content strategist, an information architect, a UX designer, a visual designer, a front-end developer, a CMS developer, and a systems administrator, all while heaps of web jargon and acronyms get tossed around, can be daunting.

But just as each team member plays a crucial part in the success of the final product, your involvement as a client is every bit as important.

So let’s start by demystifying our web design process.

Formula one

I’ve always loved cars. When I was four, my grandfather took me to an auto show. I remember sitting down in the cockpit of the fastest-looking formula racing car there, and I was hooked. I grew up with dreams of one day designing and building race cars.

Now, some would argue that automotive design is the pinnacle of what it means to design: it’s a perfect harmony of art, design, and engineering. It’s form and function combined and focused around the user with one main goal: to get us from here to there. For many drivers, not only is their vehicle a tool for travelling, but also an extension or stylistic expression of themselves.

But wait, what does this have to do with websites?

In a car, our goal is to get from here to there. So what are our goals when we use a website?

  1. To find information,
  2. To complete a transaction,
  3. To create a social interaction,
  4. Or if you’re Buzzfeed – to create a distraction.

So your website is the “vehicle” (see what I did there?) for the information hounds, the transactioneers, the socialites, and the procrastinators of the internet to accomplish their goals. It’s a blend of content, functionality, and art direction that’s focused around usability, reliability, and great experiences.

Content is key

Here at Yellow Pencil, we love good content. In fact, we love it so much that we adopt a “content first approach”. That means that everything we design starts with your content. But why?

Car designers

Well, think of content as the roads that connect us from A to B. In order to get to the other side of town, you need to travel through its streets. In order to understand an article, you’d obviously need to read it. We start with content first because cars would be useless if there weren’t any roads to drive them on. 

Content strategy

So what is content strategy? And what do content strategists... do?

Kristina Halvorson described content strategy as “planning for the creation, publication, and governance of useful, useable content.”

And why is this so darn important?

Think of your content strategist as your trusty navigator. She studies and knows all the fastest roads, helps us avoid heavy traffic, and when possible, chooses the scenic routes to make the driving experience a little more pleasurable. When there is no existing trail to our destination, truly great content strategists pave the way by creating the content they so carefully planned.

UX design

User experience (UX) design is where we plan the web interface – how the website will work. UX designers often work closely with content strategists to define the structure and layout of the website based on the planned content.

If the route to our destination is on a gravel road in the countryside, we might need all-terrain tires. If we’re building a race track, we’ll need racing slicks for maximum speed and grip around the corners. The role of a UX designer is to make these crucial choices that will help optimize our website in context, making sure that our users can meet their goals quickly and with little resistance.

One important concept in UX design is “design patterns”.

No, these patterns aren’t the kind you see on classy British wallpaper or a trendy hipster’s tweed jacket. A design pattern is a general solution to a common problem that can be repeated across many projects and scenarios.

For example, almost all cars have four wheels to roll on, doors that open, seats to sit on, and a wheel to steer with. Generally, the gas pedal is on the right and the brake is on the left. The same can be said of websites: most sites have a navigation to help guide us, a headline to show featured content, and a footer to list supporting links. There’s often a search field in the top right to help us find things.

That means the UX designer never has to re-invent the wheel – there are always established patterns to rely on. But don’t worry, there are also plenty of opportunities to innovate.

UX designers are a vital part of the design process because their focus is on human factors and ergonomics. Since a car will have seats, a windshield, and a dashboard, designers will make sure that the seats are proportional, in a position to give drivers a good field of view, and that the line of sight to the gauges and indicators on the dashboard is clear. On a website, that means making sure the navigation is visible, that the interactions and transitions are intuitive, and that the arrangement of the information is both organized and accessible.

Interface design

This part is my personal favourite.

If a car can be considered a stylistic extension of its owner, then a website is the spiritual extension of the organization it represents.

As a web designer, I help shape the visual design and art direction of the websites we build. I create style tiles: concepts that use a collection of imagery, text, colour, and common interface elements to inform the look and feel of a brand through the lens of digital media. It’s not so different from an automotive designer, endlessly sketching and refining concept drawings.

Open road

After several careful iterations of concepts, web designers partner up with one of our front-end developers here at Yellow Pencil to build the in-browser designs: functional HTML and CSS mockups that show what the website will look like across multiple screens and devices. This is where content strategy, UX design, and visual design are combined. Much like how cars are carefully sculpted out of clay over an armature, website designs are built and shaped on top of the wireframes.

The finished in-browser designs are our prototype. From here, our developers act as engineers: taking what we’ve created in our design process and building the chassis, tuning the suspension, and installing the engine to make a finished, working product.

Agile vs. waterfall

There’s a good chance you’ve heard one of these terms used to describe design and development methodology.

So how do they impact your web project?

Image of assembly line of Ford Model T

A waterfall process is a lot like an assembly line: the manufacturing of a product moves from one workstation to the next. Each station has an expert at performing one task to maximize efficiency. When a task is completed, the semi-finished assembly is handed down to the next worker in line.

The design and development process for websites has traditionally been waterfall. Content strategists and information architects would hand off their work to UX designers, who would then hand off wireframes to visual designers, who would pass the Photoshop mockups to developers, and so on down the line – just like assembling a vehicle.

But there’s a fundamental problem with this approach. Assembly lines are great at mass producing one thing, but they aren’t responsive to design changes along the way. When there’s less communication between roles further down the line, things get missed.

Building a website shouldn’t be a waterfall process because we aren’t assembling the final site; we’re designing it.

In an agile method, we collaborate constantly throughout the life of a project to help our solutions evolve. The UX design doesn’t end when visual design starts, and visual design work keeps going while developers build.

This way the entire team can be involved from the project kickoff to launch. New ideas and solutions can be added at any time instead of being defined early on. The web evolved quickly – new techniques and patterns are introduced almost daily – so working in a collaborative, agile team lets us refine and improve from start to finish.

So where do you fit into this as our client?

We value a collaborative design process with our clients. Constant communication is critical. We need to make sure that we stay true to your overall vision of the project.

We build the final working website much the same way as a sculptor works: patiently shaping and chiseling away at a block of clay. At certain points we step back to make sure that everything is in proportion before adding finer details. It’s at these points where your involvement is most important: to understand the pieces of our design process and to make sure that our in-progress work is aligned with the original vision.

We know that the web design process can be chaotic at times. But with your involvement, not only will you – as a client – have more transparency with our creative team, but you’ll also feel a greater sense of ownership over the finished website.

Still unsure about what goes on behind the scenes in our process? Feel free to send your questions my way!