Website Development: From Concept to Creation

Written by Jon Sparks

When we start a new project, we want to ensure that everyone working on it has a clear picture of the goals and ideal outcomes. Rather than making up tasks and assigning them randomly, our goal is to have a clear process that everyone involved can reference to understand how their work fits into the big picture.

Planning

Before we start thinking about designs or code, a clear project plan must be created and mapped out.

  • Gather Requirements

Before we can prepare a project estimate, we have to know as much as we can about what a client expects from us. This includes goals, features, target audience, as well as everything else we can gather from the client. We have a few standard questionairres that we bring to our initial meetings that help us get a good picture of what the project should look like.

  • Prepare Estimate and Project Charter

Once we know the project requirements, we can work out a fairly accurate project estimate, based on our past experience. This document is generally very brief and just outlines our pricing, estimated timeframe, and other similar things. The Project Charter goes out alongside the estimate, and contains a non-technical overview of features, goals, and big-picture tasks.

  • Prepare Contracts

Once our client has accepted the estimate, we prepare a copy of our standard service contract. This includes payment terms, timelines, and various clauses to protect both us and the client.

  • Site Map

Now that we can get started on the actual work, we prepare a basic site/project map that outlines top and second-level navigation.

  • Create Task List

The project manager assigned to the project will spend a few hours preparing everything within our team software. This includes sprints, Kanban boards, and tasks. Once the project is outlined in a series of tasks, the project manager will organize members of the Omicron Interactive team into a small project-centric team, and assign tasks based on abilities.

  • Spec out Software

At this point, we can do some research and determine which software will be best for the job. While we enjoy playing with bleeding-edge tools and releases, these generally aren't optimal for real-world work, as bugs and vulnerabilities cause more trouble than it's worth. Unless we have a good reason otherwise, we will always use stable software and tools in production-grade work.

Design

In the design stage, we plan out the overall look and feel for a project. This includes wireframes & mockups, font and color selection, and graphic design.

  • Wireframing

Using information we gathered during the planning phase, the project's designer(s) begin sketching out a rough draft of the layout. This is typically done with pencil and paper, but we also have digital tools that are helpful as well.

  • Mockups

Once we have the basic wireframes and have approval from our client, we can move onto detailed mockups. These are typically done in either Photoshop or Sketch, and include several different views in desktop/mobile format. Our designers use the project requirements and any provided graphics/branding to prepare a color palette and font pairings, and implement these within the mockups.

  • Review & Approval

Once the first round of mockups is complete, they are sent off to the client for review and approval. Many times, our client is happy with the UI on the first try, and other times we may go through multiple rounds of revisions. We continue making revisions until both our team and our client are satisfied- once we begin development, it can be time-consuming and costly to make design changes.

Development

  • Setup Project Repository

This step is often done at the same time design is happening. The developers assigned to the project setup a fresh repository on our Gitlab server, and start preparing all of the required software and frameworks.

  • Slice HTML templates

After gaining final approval on the mockups, our designers and developers work together to slice the initial designs into HTML/CSS. This step is just to get the overall UI and visuals organized within the project repository- interactive elements come later.

  • Template Coding

Most website projects utilize a CMS such as Wordpress or Grav. Our developers create a fresh template and implement the HTML/CSS from the previous step.

  • Page/Feature-specific Templates

In some cases, a client will need additional templating for landing pages, blogs, or other features. We try to keep these under the same template, but sometimes a second template is required to achieve the specific goals of the project.

  • Develop Special Features/Interactivity

If a project requires any sort of advanced or custom functionality, we set aside time on the project to code these out. For websites, this step typically involves a lot of Javascript and custom plugin development in PHP or any other language.

  • Content Organization

Once we have the base template completed, our project team moves onto content organization. All of the content provided by the client or writer is carefully organized and placed into pages and sections, with close attention to detail in regards to typography and layouts.

Testing

At this point in the process, the project is nearly complete. The custom template has been designed and coded out, and content and images are loaded into the site. We always test our work for both code quality and mobile responsiveness.

  • Cross-browser Testing

The team tests the site or application on a large variety of devices. Many of these are physical devices such as iPhones, Androids, tablets, and different size laptops, and others that we can't physically test are run through online tools that we use. If we find any issues, the development team goes in and makes fixes as needed until the project looks great on every screen.

  • Code Reviews

Once we've finished all of the code, the project manager organizes a team meeting with our Lead Developer. The team walks through the project's code and features together, and any major code issues (coverage/bugs) or incomplete features are addressed at this point.

Launch

Now that our team has finished their work, we can move onto the project launch. This involves any last-minute changes, reviews with the client, and transferring the site onto a live server.

  • Finializing

If time allows, we spend time analyzing the project and making minor changes and improvements.

  • Move to Live Server

The site is ready to go live. We pull the finalized code onto a production server (either within our infrastructure or on the client's hosting account) and get it ready for public use. In most cases, the site will be hidden for a few days while we do last-minute testing and optimization. On the scheduled launch date, the site goes live and we submit it for crawling by search engines, and work with our client to prepare social media posts announcing the launch.

Post-launch

While the website is live and gaining traffic, there are still a few steps we have to complete before we can close our books on the project.

  • Hand-off

Now that the site is live, we send our client a copy of the project's source code so they have a backup. This is typically a zip archive containing all project files (the website itself, and any design assets) and the site's database, in its present state.

  • Final Documentation

Our team documents any unique features or functionality within our internal wiki, and provides copies of this documentation to the client if necessary. Documentation helps us provide better support in the future.

  • Client Training

While we're all knowledgeable about the tools and software running our projects, often times either our client or their employees require some degree of training to update content and make minor changes. If needed, we schedule training sessions with a couple of our team members and the client & their team to go over basic administrative features and functions.

  • Project Close

Once the project has been closed, we keep a working relationship with our client and provide a support contract. This involves either a monthly retainer or general pricing agreements for changes and support in the future. Our team will follow up soon after launch to ensure everything is running smoothly, and answer any questions or concerns.

Author

Jon Sparks

Founder, Designer & Developer

Jon is a designer and front-end developer with several years of experience, as well as the founder of Omicron Interactive. He has expertise in UI/UX, responsive design, web and mobile app development.

Comments:

Blog Comments powered by Disqus.

Let's build your brand together.

Request a Quote