Blog

The Web Design Process in 2020

Tips from Web Design Experts

At our digital agency, we would like to believe that nothing happens by accident. Legendary doesn’t happen by birth and great doesn’t just come from good. Sure, some things happen by chance, but great web design is a very intentional, considerate effort. It requires a mixture of experience, artistry, a business case, and a good process

The unveiling of a new website for a client is almost always a moment for congratulations and celebration — but the weeks leading up to that event are methodical and fairly linear. Similar to a basketball player such as the late Kobe Bryant, leading up to the big game, a great deal of planning and practice goes into being ready for showtime. Without adequate preparation, there is no way to know if the site is ready for high volumes of traffic, form submissions, calls from customers, and more.  

To get to the point where a website can be deemed a brilliant, new piece of coded architecture, a coordinated effort among a project team of web designers, business analysts, and website developers is a must.

As a web design agency, we have been doing this for over 10 years, completed over 1200 digital projects, and we know that a successful website comes from a combination of excellent team players, trustworthy business data, considerate business analysis, and a touch of digital artistry.

So how does success become a reality — what goes into the Web Design Process?

Kobe Bryant Quote - No Excuses

The Web Design Process is An Intentional, Linear Process

The steps of the website design and development process are:
  1. Project Discovery Session
  2. Project Planning
  3. Design Phase
  4. Development Phase
  5. User Acceptance Testing and Launch
  6. Website Maintenance (routine)

Step 1: Information Gathering and Discovery

The first part of the web design process is arguably the most important. A friend of ours is famous for saying “measure twice, cut once.” In the web discovery phase, this is where you work to ensure alignment among all stakeholders. The stakeholders for your website project may include the technical project team, business users, customers, and others that count on your website to be a successful, functional business tool. Whether you are building a custom site, a WordPress site, or a Magento or e-commerce site, make sure to include your digital marketer in this planning effort. A website is a huge part of digital marketing. Without considering the needs and expectations of customers, your market, and even the competition, there is no context for your site. Without context, your site lacks focus and purpose.

Step 2: Planning Your Website Project

Understanding the objectives of the new website is key. Following your project discovery phase, the project team is able to identify and plan for specific resources that will need to be called upon to address your website’s unique requirements. By working with you to fully analyze the business goals, objectives, and considerations that were previously discussed, you are now able to set a project timeline. At a high level, this timeline will set expectations for how the project will advance moving forward. This should include a full understanding of milestones, deliverables, and a reiteration of payment schedules.

Step 3: Web Design – A Pixel Perfect User Interface (UI)

This design phase is a fun one because this is where you get to see your great ideas come to life in a more tangible way. In Step 3 your web design will work to create an impactful User Interface that is focused on facilitating a high quality, frictionless User Experience.

So while things are still light and without any code, you have an opportunity to focus on creating a fantastic web experience that is most likely to result in high conversions. Depending on your site’s purpose, your marketing team may tend to measure conversions as form submissions, product purchases, or phone calls.

Some things that come to play in this process are graphic design, user experience (UX), user interface (UI) design, sitemaps, page layouts, and wireframes.

Here is where the fun of throwing creativity into the ring happens — a knockout between Pablo Picasso and Jackson Pollock, in terms of concept, color, and web design process. Once the ideas have settled and the business logic takes over, style tiles prove to be a great method of ensuring consistency throughout the site. To wrap up the design phase, your project team will look to you for final approval before advancing to the development stage.

Step 4: Web Development and Integrations

This is where things get real. The nuts and bolts of CSS (Cascading Style Sheets) and HTML (HyperText Markup Language) coding mesh together here, raising the site from being just a static design to being a functional web page. In this process, code is written to bring your design concepts and mock-ups to life. This is where you see the power of your color palettes, visuals and content come into play as a marketing tool. During the development phase, your marketing team should have ample time to focus on content creation and a full on-page SEO (Search Engine Optimization) strategy for the new site. 

As a note of advice, you should ensure that there is a road map for onward travel. After all, this site should not be considered a static project and a true website should always be a work in progress; to maintain your site’s health, it will need constant updates and adjustments to meet ongoing browser, device, security, and user needs. Similar to the latest software update that your smartphone mandated, your website requires at least that same frequency of attention (at a bare minimum).

Finally, once your software developers have finished programming your site, it is time to seek final approval before moving on to testing, delivery, and upload.

Step 5: Testing and Delivery

This is the final dress rehearsal before your site launches. All of the pieces of the coding will need a run-through, any link issues ironed out, and final tweaks made so that it is pixel perfect, and ready for the opening night. In this effort, make certain that every button clicks and functions as expected. Also be sure that the site is tested on mobile devices, desktop computers, and even big screens. In 2020, your site should be mobile optimized and responsive. 

‘Creating a buzz’ might seem counter-intuitive for a website but consider fine-tuning your up-to-the-minute keyword and SEO Strategy to be exactly this. Make certain that research and place your meta titles, meta tags, and meta descriptions on each webpage. Also, consider placing a Google Analytics tracking code so that you have a basic understanding of site traffic and user behavior. If your website is your company’s primary source of revenue, you might also consider adding some sort of heat mapping analytics tool and leveraging insights that come from Google Search Console. 

Once your site has been fully tested, make sure everyone who is involved in the web design process understands how the whole site runs. And then you are ready… give your software developer or project manager a final approval and then your site is as good as live! 

Step 6: Web Maintenance 

Another essential part of this process is understanding that it will never be finished. As time moves on there will be a million little ways to tweak the setup, ensuring that it continues to be a market-leading website, rather than an old hat that has fallen off the shelf. Routine site speed optimizations are necessary and recurring site updates should be performed to be viewed favorably by search engines and your site’s users. 

In order to keep the site fresh and enticing, keep on top of content, global color and image trends, as well as developments in your field. Most companies will create a monthly budget for website maintenance in order to keep overhead investments predictable and under control. Think of this as a visit to the Web Mechanic – a regular checkup to keep things running smoothly and routine adjustments will help avoid a major accident and drastic overhaul in the future.

Not big on reading? That’s okay. Watch “Dazzling by Design: The Web Design Process” instead.

Using the power of Artificial Intelligence, we turned this blog into a video for you. Check it out below!