A strong website is one of the most effective ways to market your company. A responsive website (a website that is optimized for users across browsers and mobile devices) is essential now more than ever, with a significant amount of traffic to your website coming from those browsing on their phones (take a look at your Analytics – chances are around 50% of your website visits are from those not behind a computer screen).
At Proof, we’ve streamlined our web design and development processes to be mobile-first, focusing on responsive design from the initial stages of every project. Here’s an outline of the steps we take when approaching a new web project.
Develop A Sitemap
During our initial Understand Your Brand Workshop with a client, if we’re tasked with designing and developing a website, the first step is to develop a blueprint and site architecture/navigation. We use Slickplan to streamline this process, and handy tool that makes building out sitemaps in a flowchart format a breeze. Knowing the overall user flow, and what pages/sub-pages will exist, is an essential early step in the web design process.
Content Development & Organization
Before any design begins we lock down the content that lives on the site. This is a collaborative effort (usually managed in Google Drive) with our clients as we work together to determine the content and organization of content for the entire website. It’s important to establish this hierarchy of content and primary calls to action before we step into the wire-framing or design phase, and while we’re not focused on the exact layout and presentation of content just yet, we make sure we know “what” needs to be there before determining “how”.
Wire-Framing & Planning
After the sitemap has been approved and content has been confirmed, we bring together the design and development/programming sides of the company to discuss layouts and possibilities to ensure we’re clear on the presentation of content, and to ensure that we stay in scope.
This is also our opportunity to discuss website functionality (anything from ensuring e-commerce is set up to integrate with an inventory management system to deciding the hover state for links and buttons). Talking through functionality at this stage is crucial to the overall design and development process, and through our discussion, we develop wireframes (sometimes crude sketches on a whiteboard, other times fully developed, high-fidelity wireframes shared with the client). Now knowing not only what the content is, but how it will be laid out, we’re able to move into the design phase of the web design process.
Website Design
As I mentioned, we approach website design from a mobile-first, responsive perspective. As we begin working on the design mockups, we design for both desktop and mobile to ensure all of the elements being designed conform to various devices, browsers, and screen sizes. Internally, we use Adobe XD to share mockups and garner feedback, a tool that allows anyone on the team to comment directly on mockups, streamlining the review process.
Depending on the size and scope of the project, we select several pages to be designed and shared with the client, along with a style guide for the overall website. Once this is shared, revisions are addressed, and final files are packaged up, we move into the website development phase of work.
Website Development
Once the designs are approved both internally and by the client, we move into development. WordPress is generally our content management system (CMS) of choice – along with about half the internet. It’s mobile friendly and, most importantly, easy for our clients to update and maintain post-launch and into the future.
When we hand off our designs to the development team, we always include a style guide of “blocks” used throughout the website. Blocks refer to various content types and layouts included throughout. With a comprehensive style guide in place, there should be no guesswork for the development team to build out the design as intended.
Website QA & Testing
Quality Assurance is a vital role after development development is complete. At this stage we test everything internally, and allow the client an opportunity to test the site fully before launch. We use Bugherd, another handy tool for tracking QA tasks and updates needed, which allows us to pinpoint specific issues directly on the live (staging) site, and keeps the testing phase of work as efficient as possible.
Website Launch, Training, & Deployment
Finally, we flip the switch and the website is live! We make it sound so simple but it’s a refined process that ensures both a smooth launch and smooth handoff to the client for ongoing management. With all clients we run through a comprehensive content management training, demonstrating how to update content and manage the site internally (we don’t require clients to sign an ongoing retainer agreement, though many choose to have us manage ongoing updates in-house).
While our web design process may not be revolutionary, it’s been refined from 10+ years of planning, designing, and developing websites big and small with clients in industries spanning markets and audiences. While not as sexy or exciting, taking the up-front time to develop a sitemap, plan content, and wireframe ensures the design and development process is streamlined, and having a smooth launch and deployment process in our final steps ensures that the website will be left in good hands to be the most effective tool it can be for any brand or business.
Every project brings unique challenges and opportunities. Approaching the process methodically always provides us with a clear path to the finish line.
View our portfolio for examples of recent web projects.