#Web Project Planning Guidelines
It takes good planning to create a website successfully with the least amount friction. By having a step by step process it lets you see your strengths and weaknesses at each part of the development cycle.
Each step is extremely important. When you think through a problem, map it out, and have the blue prints, you work faster and with more precision.
Communication to the client or product manager should be made during each step. People like to be part of the process. Maintaining open communication is important in order to allow everyone to see progress, stay on the same page, and allow for transparency within the project.
##Step 1. ###Explain the process
This could be setting the expectations to the client or the product manager. They need to understand the process and why each step is important. Good communication is the most important part of any project.
##Step 2. Laying the foundation ###What are you trying to accomplish?
This is the basic justification for having a website. Depending on the site and the business there are different reasons, they could be:
- Professional Branding and identifcation
- A resource on your business or products.
- Reduce time to market. Give up printing paper and going to the web.
- Direct sale of products. (for e-Commerce)
- Personal organization of thoughts and information (blog)
Identifying what you are trying to solve defines the rough scope of the project and is an important step to then define the goals and sucess criterias.
Possibly the question is already answered if this was just a redesign of the site. Nevertheless it is good to go back to the roots and have everyone on the same page and working on the same goals.
###Define the Vision, Goal, and Purpose
This is an incredibly valuable step. Defining the vision, goal, and purpose of the website will help make sure everyone really focuses on them through the whole project.
It is a great idea to write everything you can possibly think of. If you can only think of one thing, think why, and dig deeper until you really have that solid vision and purpose. If you have too many ideas, make sure you really define it and focus it. It is important to have a real solid vision and purpose.
###Define success
Unless you are a student and trying to learn how to build website, a website should pay off. Paying off must not necessarily mean earning money, it can mean different things for different types of websites:
Some examples could be:
- Sales must be at X $ (for an e-commerce site)
- Have 1000 visitors per day (for a marketing site)
- Have 50 new users per day (for some new fancy service)
These are called KPIs (Key Performance Indicator) and will help you evaluate how successful your website is.
##Step 3. ###Plan how you are going to achieve the vision, purpose, and goal:
Now is the time to decide how you want your message conveyed. Execute on the purpose, maintain the vision, and successfully achieve the goal of the website. The best way to do this is to write down every idea you have, ask other people their ideas, and do research on how other companies are achieving or not achieving the same goal. Take every idea and compare each one to make sure it matches with your vision, goal, and purpose. If it any point it strays from the point if your written purpose, you either need to change your purpose, or remove that idea.
##Step 4. ###Concepts, sketches, wireframes, and story boarding:
When you have completed Step 2, you will take those ideas and create the flow of the website through wireframing, sketches, and story boarding. Usually this is done on sticky notes, scrap paper, or marker board. Here you are trying to understand the flow of the website. This makes you think and visually see if you are really accomplishing your goal. It also enables you to make sure all parts of the concepts are in line with the vision.
Basic high level content can be generated to show the feel for the message you are trying to give. You don't want to create detailed content at this point because you need to confirm the concepts through prototyping.
##Step 5. ###Prototype:
Generate a flat html version of the website. This will let you test out of your concepts, make sure nothing is missing, and really get a feel if you are achieving the vision, purpose, and goal (and really get a feel of the shape your project is taking). Another reason for prototyping is to confirm that you have fully planned out the website before you spending unnecessary time on generating detailed content or custom design work.
##Step 6. ###Generate Content:
This is where you create detailed content. People are spending their time writing grammatically correct text, finding the perfect images for the landing page based, and all of this is based on the wireframes and prototype.
##Step 7. ###Functional Programming and Artistic Design: Functional programming is the backend programming. Some sites might not need a lot of functional programming but some could have a lot. Luckily this is something that can be done while the graphic designer uses his design software of choice to create the asthetics of the website.
##Step 8. ###Frontend Markup and Styling After the websites artistic design has been created by the graphic designer, that is when you build the CSS stylesheets to match. Also any animations or dynamic visual effects.
##Step 9. ###Launch Site! There is a lot that is needed with launching a site. Client review, setting up the proper DNS, making sure redirects are setup, etc. All in all this is what it is all about. If qualtity assurance has been done through each step, then there should not be a lot of work to do.
##Step 10 ###Maintain Website and Client Relationship This is where you would maintain the upkeep of of the website and keep following up with the client to make sure thay are happy. Now you can look back and say you have successfully launched an awesome website and made a client/product manager very happy!
Please submit pull requests to help this document grow.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent