Designing and building a web site/app requires development teams to follow a process of steps that get the project to completion. As an interface designer at Create for more than five years, I’m well versed in this process and I understand what it takes to get to the finish line. For a client or business owner, understanding the process is key to their sanity leading up to and during the project.

If you are a client or business owner, this post is for you. Over the years I’ve seen the pain caused by confusion in a project, so I wanted to share a few words and outline the basic steps in hopes that it will help set your expectations on any future projects you might have and make the whole process easier to understand.

Step 1: Planning

Planning the project is the most important step, and it is even more critical than the actual development. A good plan produces a yellow brick road for designers, developers, managers, content editors, clients, etc. to follow. A plan gets massaged and altered along the way, but it is advantageous to keep the core plan intact. Let’s look at three important planning steps:

Requirements Analysis

This stage is used to develop a project summary, gain a clear picture of your target audience, your goals for the project, any special bells and whistles you want, and to generally understand as much about the site’s direction and the end users need for it.

Information Architecture

Sometimes called a Site Tree, the Information Architecture diagrams the structure of sections, pages, navigation flow, user interaction elements, and basic content. Clients and business owners should pay special attention to this piece, because it ensures that consideration has been given to all key pages in the site, showing their relationship to each other and also defining how the navigation experience should be.

Technology and Resources

Having a clear picture of the project requires seeing the end result. For example what type of server will be needed, will the site be utilizing any specialized tools, what are the software requirements, what maintenance plans will be in place post launch, will stock photography need to be purchased, or will there be any required fonts. All of these decisions and when they are implemented impact the project success over its lifetime.

Step 2: Design

After the planning step is complete, all the information is obtained from the client and resources are gathered, it’s time to focus on the visual aesthetics for the project. The design team will breakdown the planning and requirements for the project and start the process that will lead to the creation of a beautiful design that is unique to your company’s brand. Designers use a few tried and true methods to produce eye popping designs and happy clients.

Wireframes

Wireframes can be used in many ways by many different designers, and each have their own purpose. Some designers use pencil and paper, others like the use of a specialized wire framing tool such as Balsamiq or Mockflow. No matter what the method the goal of a wireframe at this phase of a project is to show the basic design layout with a rough view of how the content will appear on the page.

Mockups

Mockups are highly detailed designs that start with a wireframe but take things to the next level. They are a sound layout with polished design elements created in a program like Photoshop or Fireworks. The designer also organizes the sections and elements of the design so that they are prepared for extracting individually and can be used in code. This step isn’t to be taken lightly, as it determines the design users will see and interact with each time they visit your site or use your app. Take as much time and effort as needed in order to ensure a solid foundation for the visual identity of your online presence. This is immensely important!

Review & Craft

Review and crafting takes place throughout a project, but this particular phase is an important milestone in any project. When this phase is complete, the real development begins to construct your new website or online application. The focus here is to get everyone involved in the project to agree and sign-off on the mockups that have been developed. This includes reiterating the design and tweaking the layout. Working closely with the client to achieve a successful market-ready website is important so that all requirements are met, and the hidden details that are typically buried in nooks and crannies are sniffed out and addressed.

Step 3: Development

Now that approval has been given on the visual aesthetics for the project, it’s time to slice up the mockup, break out the design elements, and jump into code. Many core tasks are involved here such as building the site structure, constructing the templates, importing data, publishing content, and creating news stories and events, etc. Of course, rigorous testing is performed for functionality and performance throughout this stage. Below I have broken out several key concepts.

Bootstrap

Developers load up the project into a source controlled repository and get the CMS or custom development framework in place so that the entire team can access and work with the code.

Chrome & Skeleton

Interface designers slice and dice the final creative design and start using it in code. A job well done here will show in the web browser the site’s brand, navigational elements, header and footer, and any other site-wide elements, as well as a complete site structure with all pages created and accessible in the CMS (if applicable).

Build Templates

Each unique section and layout needs a template built. We do this by using HTML/CSS, JavaScript, and the tools within the CMS (if applicable). This includes the home page, main landing pages, and tertiary content pages.

Special Features

Features unique to the site require special attention when building. Usually these features are custom built according to project requirements (+1 for planning). All sorts of features fall into this category such as Advanced Search, Map/GPS Based Searching, Data Exporting, Reporting, On Demand PDF Creation to name a few. Once a feature is complete it then gets placed on its respective page(s) of the site.

Content Population

A typical project has its fair share of page copy and images, as well as news stories or events that need to be available to the user. This is a step we take during development to get all of that important information put into the proper locations around the site. Sometimes multiple team members are working together to get a mass amount of page content loaded into a site.

Testing

This is a good place in the project to do full review. Even though Mercury developers are constantly testing throughout the project and adhere to a stringent testing protocol that reinforces our ability to catch errors before they break; this additional testing makes the project go smoother and is always fruitful. The project is made better by taking testing seriously and proactively.

Client Training

Inevitably clients are going to need to work with the product we build them. Changing text, images, publishing news/events, creating/editing/removing pages are all things our clients need to do at their leisure. At this phase of the project, we are almost ready to launch, but we make sure our clients understand their software and can work with it at full speed.

Step 4: Launch

We have the project developed, now we are ready to show the world! While we’ve come a long way, we aren’t out of the woods yet. We need to do some final touch-up, get everything over on the production server, some more testing, and then we can flip the switch.

Crafting

Taking one final opportunity to make the site better is a staple of high fidelity work. All sorts of improvements are welcome here such as performance, user experience, responsiveness, tacking, kerning, padding, margins, and one last dab of paint.

Push to the Production Environment

Okay, this is it. This is judgment day for developers. Literally, make it or break it. The site has been tested inside and out, we have approval to launch. Now is the time to get all the code and data needed for a fully functional site on to the production server. This can be handled in numerous ways but are typically determined by the project specifics discovered in the planning step. But we have found the smoothest transition is having all the data on the server ahead of time so that when the word is given, switching to the new site is as easy as pressing a button.

Testing – Functionality and Final Cross-browser & Responsive Checks

Everything is up, the world can see it, now is the time to run back though the site for final testing in the production environment and to ensure the site works across all modern browsers and devices. Many things can be auto-tested, others require manual testing. Tools like SauceLabs or BrowserStack can be utilized to help test across browsers and devices.

Step 5: Post Launch

At this stage we will provide documentation, discuss additional needs and next steps explained in detail below. Even though your site has launched and your project has reached completion to ensure your site or application continues to yield positive results it will require ongoing care and maintenance. Your team may want to consider an Online Care Plan.

Documentation Handoff

Clients often want and need most (if not all) of the documentation that is created during a project. This includes documentation for Releases, Testing, Products, User Interface, Screenshots, Wireframes, Photoshop documents, Images, etc. Clients that host and maintain their own site/app usually require all source files and databases to be packaged up and delivered to them. The goal here is to provide any and everything the client needs to be happy.

Additional Client Training

Following up with the client is important so that additional training that may be needed can be scheduled and conducted. Sometimes its training that goes deeper into managing and creating content, other times the client can benefit from another round of training on their software to better familiarize themselves with it.

Final Thoughts

Hopefully this post has helped you gain a better understanding of the basic process used to take a project from beginning to end, and if I did what I set out to do, you also learned a thing or two. If there’s any follow up questions, or a related topic you would like to know more about, please comment below. That’s all folks!

Courtesy of : Mercury Media