Web Design Workflow: Brief, Design, Development and Deployment

At Y-Designs, our workflow may differ depending on the project and its needs. However, there are certain principles that we always follow in order to ensure projects are successful and delivered on time.

At Y-Designs, our web design workflow may differ depending on the project and its needs. However, there are certain principles that we always follow in order to ensure projects are successful and delivered on time.

Building a website is like building a house in that there are three general steps.

The brief phase – where we view the lay of the land and figure out what we are building for.

The design phase – where we plan for development by creating blueprints.

The development phase – where the actual construction happens.

Web Design Workflow: Surveying / Building a Brief

Brief Phase (surveying)

We initiate the brief phase by meeting with the client to discuss the project’s needs. We like to start by focusing on the problem at hand. The problem can be aesthetic, functional, organization-based, or just that the client does not have a website. Whatever it may be, it’s important to define the problem(s) so we can focus on solving it/them.

We also like to outline the client’s future business goals. This way we can design the site in a way that allows for growth or future plans.

Some of the most important things to discuss in the brief phase is the market environment and target audience. Not understanding the market environment and target audience is like not knowing where the house is being built and for what purpose the house is being built. A flat-roofed glass house will not do well in the harsh winters of Minnesota and a two bedroom house will not fulfill the needs of an urban housing complex.

More specifically, market environment means researching competitors, and gaining a general understanding on how the specific market functions.

The target audience should be split into two criteria; current and developing target audience.

  • The current target audience is the current demographic the brand targets. 
  • The developing target audience is the audience they hope to gain. 

The audience should be defined by age, gender, interests, sub cultures, region, and any other characteristics that may apply.

Once we have all of this in mind we organize the site by creating a sitemap that outlines the website’s pages, general functionality and content within each page.

 

 

Design Phase (blueprint)

Web Design Workflow: Blueprints / Designing the page

Once we have assessed the project’s needs and organized its site structure, we move onto the design phase. We design wireframes which then become static layouts of each section of the site. Wireframes can be compared to blueprints; containing the basic grid and structure. Static layouts can be compared to a 3-D model or an artists rendition of what the building will look like; containing color and branding elements. These static layouts get passed back-and-forth between Y-Designs and the client until the client is 100% happy with the design. 

This is the most interactive phase for the client, because all input, aesthetic edits, and functional changes must be made during this phase. Many people think websites are easy to edit once developed and therefore take the design phase lightly. However, much like a house is nearly impossible to reconstruct after development, the same is goes for websites. Therefore, we always stress that the client ensures they are 100% happy with the design before moving onto the Development phase.

 

 

Development Phase (construction)

Web Design Workflow: Building the House / Web Development

Once the client has given us the go-ahead, we begin developing the site. If the previous two steps were followed correctly, the development phase should be relatively easy. We build the site based off of the final layouts created in the design phase.

 

There are two layers to development.

  • Structure – This is where we lay the foundation and structural support for the site. Edits that concern structural changes are extremely timely to edit once it’s been developed.
  • Styling – This is where we add roof shingles and paint the trim. Edits such as changing certain colors or adding extra padding is a bit easier to edit in development phase. 

Once the site is developed, we show the client the finished product. If there are certain styling edits that need to be handled, we do so at this time. We then ask the client to either fill in the content for the site, or if requested, we can fill in content provided to us at an additional cost.

 

 

Additional Roadblocks

Aside from the few mentioned above, there are a few roadblocks worth mentioning (and avoiding). 

Saying Yes when you mean No

I outlined the importance of making all edits during the design phase. However, I should mention that you should not be scared to be critical. The worst thing a client can do is to say yes to a design, when they are not 100% happy with it. It is easy to edit static layouts, but difficult to edit a fully developed site. 

Lack of Communication

Communication is key when creating anything for a client. Websites can be very complex and have intricate categorizing and filtering systems, making it difficult to grasp certain concepts in the brief and design phases. We recommend that both designer/developer and client be clear and concise in communication. This means clearly defining structure, terms and functionality, and being concise in documents and emails (use bullet points when you can!).This is very important, because lack of communication will often lead to structural changes after the site has been developed. The result is a mediocre product and invoices that exceed budgets.

The Amateur Client Designer

Many business owners have a certain vision for their brand and website. Often times they want to design the site on their own and look to someone else to develop the site. This has worked great for us when the business owner is a professional designer that is well-versed in the basics of web design. I say well-versed in the basics of web design, because web is another beast on its own. People who can draw or consider themselves designers, but have only designed t-shirts and posters likely do not know the intricacies of web design. There are certain functional details that are often ignored. 

Also, when a business owner designs a site, they are more likely to accept their initial layouts without viewing them with a critical eye. As an outsider viewing someone else’s work, your eyes are fresh and can be critical in critiquing design, whereas when you have worked several hours on a layout you are likely to pass the final product as acceptable. This can lead to a mess down the road as the business owner/designer changes their mind and makes several changes in development.

 

Deployment

Once the site is all designed and developed we need to deploy it. Deployment is often overlooked in the entire process, but it takes time and is very important it’s done right. 

Having all hosting and domain info ready will speed up the process. Often times people complain about site load speeds and do not realize that it has all to do with the host. If a site does not load within a few seconds, people will often click out of it. Going with a good hosting service  is one of the most important steps for building a successful site.

We recommend using Webfaction for your shared hosting needs. Websites that are hosted by Webfaction run much faster than a lot of other hosting services we’ve come across. Many other hosting services overload servers with more websites/users than optimal, whereas Webfaction does not.  We can also recommend Rackspace or Pagodabox depending on your needs.

Another thing we recommend is to plan to the deployment sometime earlier in the week. This way we (or your developer/designer) are readily available if there are certain issues that arise days following the deployment.  No one likes being charged for weekend rates and no one likes working on the weekends.

 

 

Conclusion

All in all, our web design workflow is pretty time intensive. Just like designing and building a house, every step counts in order for the final product to be successful. Making sure that we spend the time and effort at each step is crucial and will make the entire process much more efficient; ensuring that your website fulfills your business’ needs for a significant amount of time.

Gary Busey once said, “If you take shortcuts, you get cut short”. So let’s all make it easy on each other and stick to the process.