Creating a Web Design Process That Works

Creating a web design process that works is one of the hardest things we have had to do as a company. The reason it is so difficult is that it requires utilizing flat design images and files but will ultimately be a very dynamic end result in which there is a live interactive website. We have experimented with many different processes and have decided on a process that we think is successful and can be repeatable for other agencies or businesses.

Make sure you have a design process:

First things first, it is incredibly important to have a design process in place, even if it is by no means perfect. The worst thing that can happen when building a website is making endless design tweaks to the site towards the end of the project, putting the website into what could be considered a blackhole of never ending changes. This will cause either your web agency to want to cut ties with you because they are not getting paid for such changes or you to have to pay way more money for such changes. Additionally, the project will get drawn out delaying the value of the new website. Having a thorough web design process in place will stop this from happening saving both time and money.
I think every web designer, business or web agency may have a slightly different process that fits their unique traits and skills but just having a standardized process in general should help you complete projects faster and within budget. A thorough design process will most likely be broken into several stages such as wireframes, moodboards, and mockups. If you do not have a process that works well, here is an example of a fairly typical web design process that we at Trellis use:

Phase 1: Sitemap and Content Strategy

In this phase you will want to figure out what pages you need on your new website and what type of content will be on those pages. This may involve an agency, freelancer, and a third party or could be done in house. It is important to have the sitemap and at least a rough idea of what the content will be on each page before you move into the other phases of design. Otherwise you will be designing for pages that may not be necessary or did not take into account all of the pages of the website. You might also be designing without the necessary content information for the page.

Phase 2: Wireframes and Moodboards

It is a good idea to create web design elements in a moodboard to demonstrate the dominant web elements such as form buttons, colors, headers, footers, fonts, modals, and other main web elements.
Developing the information architecture of each unique page in a wireframe is also a way to save time. You can quickly organize the information of each page template strategically without the wasted effort of designing it to look aesthetically pleasing. That way you can finalize the layout and structure of the page without worrying about the aesthetic design elements of the page.

Phase 3: Final Web Design Mockups

Creating a full design of a page in an Adobe Photoshop or an illustrator environment will save a huge amount of design hassle when developing the site. Developing the site on the web is very time consuming, especially if there needs to be multiple versions and many rounds of revisions.
It will take a lot longer to make design changes on a live web environment than just creating a final design in Adobe Photoshop or Illustrator. You may want to create mobile mockups for the mobile versions of your site if you have the budget to do so.

Using Invision App

Invision is a great way to demonstrate and display your designs with an in browser experience so that you can get as close as possible to what the site would be like. I would strongly suggest using an application like Invision to review and demonstrate your designs so that you can make a decision that takes a browser experience into consideration.

If your budget is limited you may just have to go straight to final mockups and compromise elements of a thorough design process. However, if you know you are compromising certain elements of the design process you will most likely be better off than just not having an ideal process in place at all because you know what information you will be missing out on.