I continue to get asked questions about how I go from start to finish when dealing with new clients. Although the process may differ slightly between each client, I still use the same 6-step process to get me started. This process includes: Discovery, Planning & Design, Visual, Development, Testing & Launch, and Maintenance. Understand that unless you’re doing everything yourself, you may only be involved in certain steps within this design process.
Also keep in mind that I don’t start this process until after I’ve already had the initial kick-off meeting with the client and discussed the clients visions and goals.
Step One: Discovery
Discovery is the first step in the Website Design Process. This is where you do your deep information gathering based on information you got from the client, their goals, and the vision for their business. Its important that you write down any new questions for the client that develop during this stage. Sometimes it’s during this stage that new costs come into play, so you need to be sure to address those as well upon your next meeting with the client.
Areas you want to take into consideration during this Discovery are:
What’s important to the client: Colors, Vision, Goals, Likes, Dislikes, etc.
Purpose of the website: What problem does the website solve?
Targeted Audience: Who is the ideal audience? Kids, teens, adults, women, etc.
Competition: Biggest competitors and what are they doing right.
Possible obstacles: What could cause problems meeting expectations.
Content: What kind of information does our audience want?
Domain Name and Hosting: We need to identify whether this needed as setup if so.
By the end of the Discovery, most of your leg work should be complete. You should know whether this is a project you want to take on, the complexity of the project, as well as the costs. Do not rush the Discovery step, and do not move forward until all questions and concerns have been addressed, and you have a contract outlining the agreed upon work and terms.
Step Two: Planning & Design
Now some web designers may actually break this into two separate steps. I don’t because my planning process is basically my design process. Using the information gathered during the Discovery step i do the following: create page outlines on paper, as well as create a separate sheet with the website’s expected functionality and capabilities .
Once i have the sitemap and the webpages sketched out on paper, I’ll move into Adobe Photoshop to create some grey scale visuals (wire frames). The purpose of the wire frames is just so the client can see the layout of the site, so don’t bother investing a lot of time and detail into these. After all, the client may not like any of them. I’ll usually create 2 different layouts to choose from. I don’t create every page, just mainly the homepage, and an additional page.
If you don’t have or like Adobe Photoshop, there’s a FREE online mock up tool I use at times called Frame Box. You create the wire frame, save it, and then send your client a link to it.
If you’re using a Content Management System (CMS) like WordPress, what I usually do during this stage is just present different design templates. I’ll still create a sitemap on paper, but the webpage sketches are no longer really needed. Once I have the wire frames or templates complete, I’ll save them each as .jpeg images. If i’m able to meet with the client, I’ll show the wire frames or templates to the client on my laptop. If i can’t meet with the client, I’ll upload them to my web server and send the client a link. Only after the client has blessed off on the wire frames do I move forward to step 3.
Step Three: Visual
Once the client decides on a layout, I then go back to the information from Step 1: Discovery and start adding the detail. Colors, fonts, images, content, etc. This gives the client a better visual on what the website is going to look like. Communication between you and the client is critical during this step to ensure that the visual (prototype) matches the clients vision and goals.
I always remind the client during this step that it’s easier to make changes now, than it is once development begins. Remember, once the client gives you the okay on the visual, stick to that visual. Don’t go back adding your own additions to it because you realized something would look better. Get your client’s approval before making any changes after they have given their blessing to move forward.
Step Four: Development
If you’ve noticed, we’re already on step 4, and have yet to write a single line of code, until now. Development is the step where the website is actually coded. Unless you’re using a cookie cutter WordPress theme, you’ll need to know at least HTML & CSS. During development, we take all the clients content, media, graphics, files, etc, and create the fully functioning website.
Again, ensure you have the visual designs handy to use as a reference because we want the finished website to replicate them. It’s important for clients to understand that changes during development can slow down production, and even cost more money. As mentioned previously, inform your clients if they want to make changes, its best to try and make them before development begins.
Step Five: Testing & Launch
Upon the completion of Step Four: Development, we must test our work. This involves, but not limited to: ensuring all of the forms works, making sure there;s no broken images, links, etc. We also need to do conduct browser cross compatibility testing. We want to ensure our website not only works in all browsers, but functions and looks the same.
Once everything is working and functioning as planned, its time for The Big Day…..Launch!! After all of your hard work, we’re ready to launch the site, meaning put it online for the world to enjoy. This involves uploading all the project files to a web host such as HostGator, BLueHost, or another web hosting company of your choice. There’s also the option of hosting the files on your own server.
Keep in mind that even though the site is launched, the project is not officially over. We have to be ready to react to any issues not identified during our testing.
Step Six: Maintenance
Because content and information changes, websites require care and maintenance. Usually a website’s purpose is to get visitors to take action, or continue to come back. That usually happens by keeping your information new, fresh, and up to date.
I personally provide 14 days of maintenance with all the websites I create for clients. After that 14 days is complete, a client has two options. They can pay a monthly fee if they feel their website needs constant updating, or they can pay me hourly to conduct maintenance on their site as needed. I also offer clients reduced maintenance rates when it comes to websites I created versus those I didn’t.
These are the six steps I progress through each and every time I take on a new project. As mentioned earlier, depending on the client depends on the steps that need to be executed, and those that don’t require much emphasis.