Every Website Production Follows A Process
The world of web design and development can look extremely overwhelming, especially since there are so many different factors involved with getting a site live. That's why there's a general web workflow or pipeline that every website production follows.
It's important to realize that no two projects will be exactly alike. For example, your portfolio site won't require anywhere near as many in-depth steps as a big site redesign that's being tackled by an agency.
All projects will include some version of these steps in the web development pipeline. Your first step is always Discovery. That's followed by the Plan phase, then Design, then the site's Development. Once those steps are complete, you'll Launch and then finally, you'll be at the Post-Launch, which is sometimes referred to as "Maintenance" or just simply "Beyond".
Step 1: Discover
The discovery phase should always be the first step to any web project. Before you start working on something new, it's important for you to explore the site's current issues. If you're starting a brand new site, then this stage is more about discovering and developing an idea for what you want the site to do and look like. You'll also be defining your project in this step. Here's where you'll spend time understanding the company you're building the site for and learning about its audience. It's also when you'll check out competitors in your client's world and industry. Get as much information from your client as possible. A step toward that is through a client survey or questionnaire. If you're struggling with what kind of questions to put on a client survey, just do a simple web search for it and a bunch of different options will present themselves to you. The survey is an opportunity for you and your client to get on the same page and talk about expectations. Understanding your client's marketing plan is essential, so you should ask them for different kinds of media that they've used for marketing in the past. Figuring out how much back-end development will be required is part of the Discovery phase. If more than a simple Content Management System like WordPress is needed, then it should be discussed at the very beginning of the project. Clarify the site's goals and prepare a Communication Brief. The Communication Brief is simply a document that lays out goals and expectations for the site. Once the client signs off on the Communication Brief it's then used as a guideline throughout the life of the project.
Step 2: Plan
Since now that you've fleshed out some of your ideas in the discovery phase, you're ready to start putting them to work in some concrete plans for your site. It's time to start formulating a plan for the way you need to execute your work. This stage also includes setting the budget and creating schedules. You need to track your hours if you're billing your client through billable hours. You'll need to create schedules that aren't only for you and your team, but for the client as well. The number one reason that websites are pushed late is late content from the client. If the client is supplying all of the copy, it's imperative that you set a schedule (that they've signed off on) to make sure your project stays on track. If they have a hard deadline for when content is due to you, they're more likely to get it in, especially if there are monetary consequences for late content. This is where you'll work with the client to create a solid site structure. No matter what the budget, a clear site structure is an absolute must. You'll work on things like the site-view, which include naming conventions, sitemapping and examining the current site structure. You'll also work on the page-view, meaning what each page will look like, with some simple low-fidelity wireframes. Navigation will also be addressed. Finally, you'll work on creating user profiles. Think of a user profile as a mini-fake bio for someone that's a potential user of the site. If you're having to think about a specific person's journey through your site you may encounter some problems that weren't as apparent when you were thinking about the site as a whole.
Step 3: Design
Now it's time to hand over your plans to the designers. They'll create high-fidelity wireframes based upon the plans or low-fidelity sketches that you've made. Often, designs are created in Photoshop or Illustrator. Creating clickable prototypes to show your client is a part of this process as well. The clickable prototypes make sure that everyone's on the same page, from the client to the designers to the developers who'll take over next. At this point in the web production process you should create a Style Guide that includes all of the different choices you've made, such as specific colors, fonts and brand guidelines. If you're designing something by yourself, you'll still need to start working on your site's design before you begin development. It's much easier to work from a design than just creating HTML and CSS out of nowhere. Make sure you get signatures from your client on approved designs. Once these designs are approved, it's time to move into the next step.
Step 4: Develop
Now that you've created a design, it's time to chop it up and turn it into code. If you're working with a large team, the development could be done by a different team than the team that worked on the design. Not only is the front-end addressed here, but any back-end solutions are created as well. Unless you're building a static site, you'll need a database and some way to communicate with the database. You'll also likely need a Content Management System like WordPress or Drupal established. The end of this step is always testing. It's imperative that you run some testing on your site before launch. It could be as simple as just some browser testing or as complex as holding focus groups and doing in depth user testing.
