The Web Design Journey
From idea to workable concept
As I’ve mentioned in my previous post (The Full Web Dev Journey), all great products come from an idea first. Some see’s a need or a vacuum and decides they are going to fix it by creating a product that solves that need. The design of such a product is the first step in creating a workable concept, it happens to be a crucial one. As it can set the scene for success as fast as a failure. So it tends to be a bit repetitive in nature, as this allows us to refine our designs as needed for the stakeholders!
The idea and the Stakeholders
Stakeholders then discuss the most basic needs for the design of the product. The designers wanna meet the needs of the product before we jazz it up. First, they will discuss what the problem is, and work towards creating an effective way to meet the goal(s). Once the needs of the product, set forth by the stakeholders, are agreed upon they pass them on to the Design team(s). I won’t claim to know much about steps before the design stage, this should summarize the process though.
The needs and the Designers
With the requirements in hand, there are several steps that come next. First I want to say this, design like any form of artistic expression has a degree of subjectivity to it. So the steps and or the particular order of them often vary a little from one design team to another. Having said that, keep in mind that if you’ve experienced slight variations from what I describe, that’s why.
Generally, the design process comes in two steps, UI and UX Design. While they (like a Venn diagram) overlap they also serve very different functions. One, UI, is the process of creating the visual aspect of a product. In this case, we will assume the product is a website. The UI designers will sketch up some rough ideas of how the website could be arranged. The team wants to create an appealing, efficient layout and meet the visual needs laid forth. They will usually sketch up many variations as often, our first ideas are not always our best ones. With each iteration of the design, it improves even if only but a small amount. After going over it a few times they come up with something that meets the needs of the site.
From there they will move on to creating a wireframe of the chosen sketch, in low fidelity (no color, no images). This limits distraction from the visual layout, focusing on designing the interface first. There are often many iterations as well as discussions between designers on the team. Once a wireframe is chosen the next step is to create a high fidelity mockup (you guessed it, full color and images). If improvements prove necessary a new iteration will be made up with the needed changes. This goes on until the team settles on a final mockup, this is where the UX team comes in.
The behavior and the Designers
When the UX team gets the documents they will use it as a guide to design the function and behavior of the site. The goal here is to make the site function as it looks. There are a few different steps here but like above there is a lot of repetition, and iterating on designs. Designing the behavior requires knowledge of the user and their needs and expectations. Because of this, they should be at the forefront of the mind during this process. UX designers will first follow a process called empathy mapping. This is the process of creating a character that represents a user or group of users. That user has specific needs as do all users. The UX team will attempt to meet those needs with efficiency, with respect to how we get them to their goal.
From there, and often simultaneously, the team may also create cards that should map the steps needed to complete the process. From start to goal what steps do we need for the entire process? What order should the steps come in? By answering these, the UX team can emulate the desired user and their interaction with the site. After completing these steps the UX team can identify the most successful path to the goal for the user(s). Often these steps are also subject to more than one iteration so that as well.
Us and the conclusion
The specific steps for each can be a bit in depth and there’s a lot to discuss there. However, I won’t go too much further into them in this post. In future posts, I will discuss both design teams in more detail with dedicated posts to each.
On one more note, there is a lot of repetition mentioned but don’t let this confuse you, it never gets boring. During the design phase, there are so many ideas flying back and forth, often it’s a bit difficult to keep up with it all. Regardless it’s all very exciting to be part of too! Stay tuned for my next post where I’ll discuss in a little more depth the Front End Dev side of things!
