Website Development Process: A Step-by-Step Guide

Step 3: Wireframes

Once we’ve identified the page templates that need to be built, we move onto wireframes. Wireframes are “back of the napkin” sketches of how a page template will be constructed. It utilizes black and white page elements to give a sense of where page components will be placed on a page so users can react to the layout of these elements and adjust as necessary.

In this step, the information needed on each page and structural layout will be solidified. The functionality of specific page elements and responsiveness will begin in this stage as well.

The Importance of UX in Wireframing

Wireframes are the first visualization of how users will digest and interact with the information on your website. It is important to incorporate UX as an integral part of this process to ensure you are creating experiences that will delight and inspire users to engage and take action.

At the very least, you should be incorporating UX best practices into your layouts to ensure that you are not creating any roadblocks or issues for your users. A great looking website does not always mean a great working website. By incorporating UX into the wireframing process, you are considering the needs of your users rather than the needs of your internal stakeholders, and setting your website up for success after launch.

The best option would be to utilize a professional UX resource. This will ensure you are bringing the greatest minds and latest techniques to your page layouts. If you are not able to find a resource or the budget won’t allow it, do your own research. Incorporate best practices from sites like A List Apart or Behance and remember: always put the user first.

Tools for Wireframing

Wireframing can be accomplished in many ways and it certainly doesn’t have to be fancy. It can be as basic as drawing on a whiteboard or a piece of paper, to creating simple layouts in PowerPoint.

That being said, there are many tools out there that are simple to use and are great for collaborating and adjusting as needed. Below is a list of some of the most common, but ultimately using the tool that’s best for you and your team is the right tool.

Wireframe Tools:

• Adobe XD
• Balsamiq
• InVision
• Sketch
• UXPin

Whether you use a tool or sketch your wireframes free-hand, take your time with the wireframing process. Think through the ideal experience for your users, utilize UX best practices, and engage with an expert as necessary. Wireframes are the first step in creating a truly engaging and memorable experience for your users. Don’t rush the process and remember: Always put the user first.

Step 4: Web Design

Design in the web development process is creating web-friendly designs for your website or app through the use of colors, fonts, styling, images, callouts, sizing, and layouts. Web design brings life to the new website, giving you a better sense of what the live site will look like. Designs are built on top of your wireframes to retain approved page layouts.

Web Design also takes into account mobile- and SEO-friendliness to ensure the new site is laid out appropriately for users on all devices and is structured appropriately for the search engines.

To start, a style guide is constructed to present users with a general look and feel of the style of the new site. This includes colors, fonts, and styling of page components. This guide will act as a northstar for design throughout the life of the project.

Once the Style Guide has been completed, web designs are created for each of the wireframes. Web designs are the first step in seeing what your new site will look like for specific page templates.

Through the design process, your team may be asked to provide feedback. This is to ensure the new designs are meeting the expectations of your team and closely following any brand or design standards outlined at the outset of the project.

Tools for Web Design

There are a number of different tools you can use to create web designs. Some designers choose to utilize multiple tools to showcase designs, but most typically use some combination of these tools:

• Photoshop
• InVision
• Sketch

Photoshop is a great way to overlay designs onto wireframes and gives users the ability to export files in a number of different ways.

InVision and Sketch are great tools for allowing users to view designs in a more interactive way. By linking designs together, users can view how certain pages will display - like a checkout process or account sign-up steps. These tools can be a great way to not only showcase designs, but also show how certain pages will interact or flow without having to rely on the user to piece the story together.

Additionally, both tools allow you to collaborate with internal and external teams in real-time for feedback and adjustments. This creates faster feedback loops to keep projects moving forward efficiently.

Design vs. Web Design

Is there a difference between design and web design? Absolutely. Design is simply (or not so simply depending on how you look at it) creating something aesthetically pleasing and artistic regardless of medium.

A designer for traditional media (such as magazines or billboards) will be thinking about the best way to layout the content for that specific medium. They are not concerned with users on multiple devices because there is only one medium for consumption.

Web Design is different in that the designer must think about how the page will layout on multiple devices. They need to think about UX best practices to account for how users will interact with the site and adjust accordingly for various scenarios. They need to address appropriate image sizes and resolutions to ensure creative assets are crisp and dynamic.

Additionally, Web Designers will typically provide the code - HTML, CSS, Javascript - for their designs to make sure the designs display appropriately once deployed. This is called front-end development.

While the difference between design and web design can be subtle, web designers are focused specifically on design for websites and apps and typically have expertise in providing experiences for users on multiple devices.

Step 5: Content

Content Plan

As wireframes and designs are being created, content for the new site needs to be organized and ready to be loaded. This can be a very time consuming process depending on if pages are being consolidated, created, edited or removed. It is important to note that any changes to the current content on your site should be coordinated with an SEO resource to ensure you are not accidentally creating issues with rankings or traffic after site launch.

Content also includes any new images, graphics, or design elements you want included in the new site. This may require image sourcing or working with a graphic designer to generate new elements for your site.

In order to better organize your content, a content plan is created that includes each page on the site that needs to be loaded, links to appropriate content and creative deliverables, and status columns to keep track of content management and loading.

Properly planning your content strategy will ensure your content is ready to be added to the site when the Development stage is reached, reducing or eliminating delays and keeping the project progressing on time.

Content Guide

In order to best structure content for the new site, a content guide is typically created to help visualize how and where content will be placed on the new site.

There are many versions of a content guide, but ultimately it will provide a mapping of how content will need to be formatted on the new site based on the updated layouts.

Step 6: Website Development

After design has been completed, web development begins. In this stage, the web design team will hand over all creative assets to the website development team to be turned into a full fidelity, interactive version of the site.

The development team will utilize various programming languages to translate the designs and functionality to something that can be displayed to users in a web browser. This includes:

• HTML
• CSS
• Javascript
• SAAS
• C#

Most often, these designs will be translated by backend developers to a content management system (CMS) for website managers and editors to manage web content moving forward. Some examples of CMSs include:

• Umbraco
• Wordpress
• Drupal
• Sitecore
• Joomla

Typically the site is built page by page and component by component in phases, or sprints, to ensure that all of the aspects needed to create a fully functional version of the site are completed.

Web development continues until all of the items in the development backlog have been completed. As the project progresses, both teams may decide to prioritize certain elements of the site to achieve internal business goals or to address timing with other teams.

The website development process will also need to account for any integrations with outside data sources or tools.

For example, if you are integrating your website with a marketing automation tool, such as Marketo or Pardot, you may want to integrate your forms to ensure a seamless integration with your marketing tools.

Additionally, your new site may integrate with an internal data source for membership logins or an Intranet. The website development phase is also when backend developers will work with your internal IT team to connect any necessary data sources to the site for appropriate integration with website features.

As with the web design process, your team may be asked to provide feedback throughout the web development process to ensure your vision of the designs is being realized appropriately as the site is built.

The Importance of an SEO Migration

At this point, it’s important to note how essential an SEO migration process is to a new website launch. When you develop a new website, you are likely to change the way the website is structured, the content on the site, or some if not all of the page layouts.

When all of these factors change, it can change the way the search engines view and index your website. By completing a comprehensive SEO migration, you are showing Google a path to the new website, letting them know that you are the same organization with the same information, albeit on a new, exciting platform.

An SEO migration is typically done by an experienced SEO team to make certain that all pages are accounted for and redirected to an appropriate resource on the new site.

If this is not accounted for in the scope of your development project, you should secure an SEO resource to collaborate with your development team ahead of launch. This work typically happens 4 - 6 weeks out from launch depending on the size of the site.

Don’t Forget About Analytics

As you get closer to launch, you’ll need to make sure that your Google Analytics is migrated appropriately as well.

If you are already confident in your Google Analytics and Google Tag Manager setup, you’ll want to have a migration strategy in place to move the setup and structure over to your new website.

If you are not confident in your analytics, now is the time to implement an updated Google Analytics and Google Tag Manager setup for accurate website reporting moving forward.

Building a new site requires appropriate measurement to determine if the new site is meeting or exceeding your business goals and the customer’s needs.

A well thought out and executed Google Analytics strategy can provide your team with the information needed to:

• Prove out the value of your new site
• Adjust your marketing strategies
• Improve the user experience
• Better drive users to conversion

In Google Analytics, you can track:

• User actions such as goals and events
• How your marketing channels interact with one another to produce conversions
• The effectiveness of your checkout process or lead form(s)
• Your top performing content and resources
• More information about your users such as their device browser type

You’ll want to engage with an analytics team ahead of launch to create a migration and implementation plan throughout the development process. This will help you to solidify your tracking on the new site and to coordinate with launch efforts.

Step 7: Testing & Quality Assurance

Throughout the web development process and shortly after development is complete, your development team will be focused on Quality Assurance. In this step, a comprehensive checklist of QA auditing is completed to ensure the site meets or exceeds the standards of an efficient, fully functioning website.

Quality Assurance is important because it solidifies the experience for users accessing your website in different ways and anticipates any challenges they might encounter, such as bugs or incorrect device layouts.

Some of these checklist items include:

• Cross device testing
• Cross browser testing
• Bug/functionality testing
• Process testing (form fills, checkout processes, if/then functionality, etc.)
• Content formatting

The audit will help catch and flag any issues with things like incompatible browsers, broken widgets, faulty integrations, and formatting errors.

In a typical website development process, both teams will need to QA the site to ensure it is functioning properly ahead of launch. The development team will make sure the site works from a technical perspective, and your team (the client side) will make sure the content is accurate, on brand, and grammatically correct.

Any issues discovered should be addressed ahead of launch to avoid any problems with user experience, search engine optimization, or technical functionality.

Step 8: Website Launch

After what has likely felt like an eternity, you’re finally ready for launch. Once QA has been completed and both teams are comfortable with launching the site, the team will come up with a launch strategy.

A website launch strategy is the steps you will take to transition your current website to the new website. If you do not already have a website, the transition is relatively simple. The web development team will push the site live and point it to your new domain. If you do already have a site, the transition is a little more involved.

First, you’ll want to come up with a launch strategy that includes timing, relevant org charts, roles, and consideration factors. Typically, new sites are launched outside of business hours to minimize disruption to users. You will also want to determine how the new site will be hosted. Choosing the right provider and package specific to your site needs will help to manage the risks of unnecessary downtime or lag in performance.

Second, you’ll want to identify a launch date to be coordinated with your team, the development team, an internal IT team (if applicable), the SEO team, and the Analytics team. All teams will need to be ready and waiting for launch to make certain the transition goes smoothly and to troubleshoot if necessary. Therefore, choosing a date and time that works for all teams is imperative to a successful launch.

Finally, you’ll launch the site. This requires changing the DNS so your new site is now associated with your URL. It usually takes some time for the site to populate on your domain, the amount of which varies from launch to launch. Typically, within the hour, you’ll see your new site up and running.

There are a handful of tasks that will then need to be completed post-launch to validate that everything went smoothly.

• Your development team will typically go through a technical checklist to make sure the site is technically sound
• The SEO team will go through a checklist to make sure the migration strategy is working as it should, the site is being indexed appropriately, and there are no identified issues.
• The Analytics team will validate the integrity of the data and tracking on your new site, ensuring all goals are firing appropriately and the necessary settings are in place.

The moment a site launches, all teams will need to keep an eye on the site for weeks, if not months, to come. It is important to make sure the new site is matching the expectations of your users, being found easily by Google, and being tracked and measured accurately for data-driven decision-making.

Conclusion

While the process may vary, the principles will remain the same. Sticking to a tried and true process for website development will give you a sense of what is needed in the short-term and long-term, and keep the project moving forward.

Knowing and understanding an ideal website development process will make certain your team is able to better execute a website development project from start to finish.

Using a skilled, proven website development agency like Marcel Digital will also ensure you are utilizing a team that has gone through this process many times before. With website development projects and migrations, utilizing a professional team can help relieve the burden of trying to manage this process on your own.