What is the first step in the web development planning process?

Phase Two: Planning

Using the information gathered from phase one, we first put together a plan.Here we develop a sitemap – a list of all the main topics and sub-topics for your website. This gives us a guide as to what content will be on the site and is essential to developing a consistent, easy-to-understand navigational system.

This is also where we decide what technologies should be implemented – contact forms, custom post types, specific plugins, etc.

Phase Three: Design

Drawing from the information gathered to this point, we determine the look and feel of the site.

Target audience is one of the key factors taken into consideration here. A site aimed at young adults, for example, will look much different than one meant for a financial institution. Branding elements such as your company logo and colors are also incorporated into the design to help strengthen your company’s identity on the website.

Phase Four: Development

This is where the functional website itself is created.We take all of the individual graphic elements from the preliminary design and use them to create the functional website. More specifically, they are used to create the functional WordPress theme, which establishes the look and feel of your site. This includes not only the desktop view, but also the mobile responsive views, ensuring that your site is accessible to as large an audience as possible.

Once the WordPress theme has been developed, we take your content and distribute it throughout the site in the appropriate areas.

Phase Five: Testing and Delivery

At this point, we attend to the final details and test your website.We test things such as the complete functionality of forms or other features. We test for last-minute compatibility issues such as viewing differences between different web browsers or mobile devices.Once we receive your final approval, it is time to deliver the site. We migrate the files to your server. In most cases, this also involves installing and configuring WordPress and a core set of essential plugins to help enhance the site. Here we quickly test the site again to ensure everything has been set up correctly and that the site continues to be fully functional.

This marks the official launch of your website, as it is now viewable to the public.

Phase Six: Maintenance

Once your site is launched, that doesn’t mean that all the work is over.One way to bring repeat visitors to your site is to offer updated content on a regular basis. And as new versions of WordPress and any installed plugins become available, those should be upgraded, as well.If you don’t feel comfortable running the upgrades yourself, and/or you prefer to better spend your time running your business instead of worrying about your website, I will be more than happy to continue working together with you to keep your website up to date.

There are several maintenance plans available for existing clients at reduced rates, based on how often you anticipate making changes or additions to your site.

Editor’s Note: The following is an excerpt from the first lesson of Dave Holston’s HOW Design University course, Managing a Web Design Project from Start to Finish. In this course, Dave Holston teaches students about the key research and planning phases that inform the online design process, and about project management tools and techniques that can create efficiencies for you as a manager. In the end, you’ll walk away with the ability to deliver a website that is strategically focused to attract, engage and convert visitors.

As designers, we often think of the Web in terms of wireframes, content management systems and code. But savvy designers know that the success of a Web design isn’t determined by the code, social media integration or cool visuals. Designing a winning website requires a well-thought-out online strategy focused on reaching organizational goals — that can be anything from attracting visitors to buy products to getting the public to understand an issue to introducing visitors to a new brand.

As a designer or project lead, you can become one of the most valuable and influential members of the Web team when you understand how to develop an online strategy. There are many people who can write code and have opinions about the design and nuances of the site, but few have the array of talent and tools needed to create a Web site that helps an organization achieve its goals. This course will provide you with the fundamental tools you need to lead a successful Web design project. Rather than focusing on HTML, CSS or programming, we will focus on the key strategies, content and design elements that go into creating a strategic Web presence.

Phases of the Web Process

The Web design process is not unlike other communication processes. If you are familiar with developing a creative brief, a public relations plan, a communication plan or a new product, the phases will look very familiar. The phases of the Web design process include the following steps.

Project Definition

Organizations have a need to communicate to stakeholders their positions on issues and make audiences aware of their products and services. Many times the communication need, such as a Web site, is triggered by a change of strategic direction or a new offering. Identifying the reasons of the site’s existence and what it is supposed to achieve are the first step in the process. The goals and objectives that are established at the outset of the project inform all future decisions, from site structure and naming conventions used in the navigation to the visual design of the site.The first step in the definition process is interviewing the organization’s stakeholders to identify the strategic goals of the site, understand key audience needs and identify key competitors. The goal of the definition step is to identify three measurable key outcomes that are directly related to the strategic goals of the organization. The challenge in this step is limiting the number of goals. Most organizations will have more goals than they know what to do with, and each department believes their individual unit’s goals are the most important. Being able to bring focus to organizational goals will make developing the site easier and make the final product more effective.

Once all the information and assessments gathered from the stakeholder interviews are completed, they should be collected in a well-formatted project brief. (The assignment for Lesson 4 will contain a project brief outline you can refer to.) The brief contains the following elements.

• Project summary: Outlines the general overview of the project, organizational background, the environment the organization exists in, the people the organization serves and the unique value it provides to its audience.

• Goals: What are two or three specific measurable goals that the site should achieve? Clear goals allow the Web team the ability to focus on what will provide the most impact and move the organization forward.

• Target audiences: Who will help the organization achieve its stated goals? Most organizations speak to multiple organizations (such as customers, stakeholders, internal audience, suppliers, partners, shareholders and/or government institutions). Audience profiles include demographics, psychographics, brand perceptions, audience needs, online goals and tasks routinely performed.

• Messages: What are the key messages that attract and motivate key audiences to engage with the organization? What are the key brand messages that help differentiate the organization from its peers?

• Competition: Who are rival organizations that provide similar offerings to your audience? Include an overview of competitive organizations’ Web sites, considering visual branding, messaging, navigation, calls to action and key differentiators.

Project Scope

Defining the scope of the project is a critical step. One of the most common frustrations with Web projects is scope creep. By creating a well-defined project scope plan that outlines specific activities and deliverables, along with specific timelines, you will be able to clearly set expectations for your clients. One of the most common ways of tracking Web projects is through the use of a Gantt chart. A Gantt chart not only outlines major activities but also the tasks associated with each activity and start and end dates. The Gantt chart provides a visual reference for the team, showing the timeframe of each step and the dependencies between steps. The Gantt chart also creates accountability between the Web team and the client (which could be an outside client or simply your boss), letting the client and the team know that the delivery schedule is dependent on everyone hitting their marks; if someone misses a date by a day, the schedule shifts by a day.

Wireframes and Site Architecture

Site architecture includes the sitemap and wireframes of pages. Creating the sitemap ensures that you’ve considered all the
key pages in the site, showing their relationship to each other and defining how the sties overall navigation should be structured. Wireframes provide a detailed view of the content that will appear on each page. Although they do not show any actual design elements, the wireframes provide a guide for defining content hierarchy on the page.

Visual Design

Once the blueprint for the site has been defined through the creation of the sitemap and wireframes, the next step is to create a visual style. The overall visual style will most likely be determined by the visual brand of the organization; the goal being to connect the Web with all other forms of the organization’s communications. The organization’s brand plays an important role in this part of the process, as designers will want to visually convey key brand perceptual ideas within the design.

Site Development

With designs approved, it’s time to flesh out the design of the pages, develop new content and refine old content, create videos, slideshows, podcasts and other media that will appear on the site as well as start to build out the HTML and CSS of the site.

Site Testing

Before the site is launched, it will be placed on a production server where only internal audiences and anyone who you share the link with can view it. Testing of the site is critical as there will inevitably be issues that need to be addressed before the site goes live. There is nothing that erodes a brand more than a site that doesn’t function properly or that has misspellings or broken design elements. At this stage the site will need to be reviewed on multiple browsers (Firefox, Safari, Internet Explorer) and multiple devices (laptops, tablets, and mobile) to see if and where breaks occur.

Launch

The big day. You’ve tested the site, had it reviewed and approved by the project stakeholders, and you’re ready to launch. But once the site is launched, the project isn’t over — you should be prepared to address feedback from users adapting to the new site. Expect to make some immediate changes to the site, such as fixing broken links, editing copy and making adjustments. The Web is a fluid medium that changes on a daily, if not hourly basis — change is inevitable.

Site Maintenance

Websites are living, breathing entities and need constant care and maintenance. Updating content, making changes to the backend and fixing broken links are all in a day’s work.All of these phases are critical to the Web design process. But the thread that runs through the process is strategy: the desire to achieve a goal, to move the organization forward, to prosper in a competitive environment. Let’s take a look at what strategy is, how it is formulated and how it translates to the Web.

Want more? Check out Dave’s course Managing a Web Design Project from Start to Finish,