Building a website can be a chaotic and daunting process and it helps to have steps to follow, especially for beginners like me! Having good guidelines will help minimize mistakes and forgetfulness. Your process may slightly vary from mine but the main steps will most likely remain the same.
So here it goes, the 6 Phases/Steps of Web Design and Development:
- Development and Code
- Test and Launch
This could be the most important step. When jumping into a new project it is so important to learn as much as you can about the goals and wants of the client. Or if you are starting your own website, what would you like to put out there in the web universe through your site? Discovering and understanding what you want your site to convey will help conceptualize what you are building in the first place.
The more you know about your clients aspirations and restraints for the site, the more successful you will be in developing their ideas. As a web designer, some of your research should be knowing what they want and knowing what they want to pay you for.
Often, clients do not know what they would like or are unable to verbalize what they are envisioning. You are not a mind-reader and it is very important to ask a ton of questions to find out what they want. Ask about their primary target audience, their goals for the website, their budget, what content should be on the site, their current branding characteristics, deadlines, what they like and what they don’t like, who will be responsible to maintain the site, and the questions go on… You can show them other websites for inspiration and have them point out what they like and what they don’t like about the examples. The main goal is to find out as much as you can so they will be completely satisfied with the final outcome.
This will be the start of conceptualizing the information and ideas you collected from the first phase. Organize your notes into categories, this will help you begin the site map of the site. A site map is an easy to understand navigational list of all main topic areas of the site.
If you have unanswered questions, continue to do research using tools such as Google to fill the gaps. Another tool that I find handy is the LittleSnapper software which allows you to search the web and clip areas or whole websites that you like for inspiration. More about this awesome software later…
Once you feel like you have enough information to get a solid idea of the site, it is time to start sketching up a mock-up of the site. I use graph paper and a pencil to start wire framing and then create a more visual mock-up on Illustrator. Wire framing is a process to create a site’s architecture, functionality, and content before creating a final, submittable mock-up. During the planning phase, color palettes, fonts and other design details may start to emerge.
This step is pretty straightforward. Designing the website involves going into Illustrator or Photoshop or whatever software you prefer, and start bringing your mock up to life and making it web ready perfect. You will need to create the homepage as well as all of the content pages. It is a good idea to every so often get feedback from your client and maybe from a trusted friend to get a better understanding on what looks great and what needs to be worked on some more. This step requires strong communication in exchanging ideas It is much easier to change a part of the design in this phase than to go back after coding and fixing it there.
It is very important to keep in mind the site’s target audience. If it’s goal is to target teens, what colors would appeal to them? A site design for lawyers will look very different from those targeted for soccer moms. Make sure the company’s logo fits in with the overall design and also make sure you are completing all of the client’s requirements. Once the design looks great, fulfills all of the goals, and is approved by the client, we go into the back end of the site and begin coding.
4. Development and Code.
The website itself if created in this phase. You will probably start with a generic HTML and CSS template. The homepage is usually the first to be developed along with the shell of the website. The shell is the template for all of the content pages so each of the pages flow with each other. When the shell is created, you can then start adding content to each of the pages. Elements such as interactive contact forms, flash animations or e-commerce shopping carts are included in this phase.
It is a good idea to do some browser testing to check if your coding works the way you want it to so you are not making any mistakes. One small mistake could cause your whole site to not function. So make sure all your coding is clean. Coding can be very confusing and Google can be very helpful if you are at a standstill.
5. Test and Launch.
After all your hard work, this phase involved final details and testing the site. You will need to test all links, forms, e-commerce plug-ins and any other parts of the site for complete functionality. Make sure to view the site on different web browsers to ensure they are optimal to be viewed.
Once the website passes all the tests, it is delivered to the client. The site needs to be uploaded to their server, the domain name will need to be registered, and will need to be signed up for web hosting services. Once all everything is set-up, do a final test to make sure everything up uploaded correctly and it is completely functional.
Each site will need to be updated with new content to consistently bring visitors to the site. Make sure you find out if the client will be responsible for updating information or will you be responsible to do it for them. If they choose to maintain the site themselves, make sure to provide some guidelines and basic training so they know how to properly edit their site.
Hope this list helps other web beginners. Feel free to comment below on any tips and tricks you have when starting a web design and development project!