There are many ways to build a website. After building over 100 websites for my clients I have found that this is a good framework to get the first version of the website launched.
After you launch the site, you should modify and mold the site’s features to meet your needs.
Questionnaire
I am currently building a new website for a friend who runs a fitness center. He wanted the website to be specifically dedicated to the women’s fitness programs at the center. The first step in the process was to send the client a short questionnaire. It includes a few simple questions that help the client define exactly what the business should be represented as online, and it provides me with exactly what I will need to build the skeleton of the website.
Here is the list of questions:
- What is the name of your business?
- What is the tagline of your business?
- What products/services do you offer?
- What are the three most important benefits a customer will get from using your products/services?
- How should website visitors contact you? (phone number, contact form, social media, etc. Please list exact contact information)
Once I received the answers to the above questions I was able to start the creative process.
Notes & Mindmap
After I read all of the answers I went through them a second time. This time much slower because I rewrote each of the answers by hand on a piece of paper. This allowed me to start brainstorming the different aspects of the business. It helped me start grouping ideas together. I was able to highlight which parts were important, and which parts connected with each other that I may not have already connected.
I scanned in the paper so you can see exactly what I am referring to:
I had some ideas now. The next step was to start a sketch of the actual website.
Sketch the Website
I still use paper and pencil for this step. I stay with paper and pencil for as long as possible because it helps the ideas marinate in mind better.
I start by sketching a template of what the website might look like. Think in “wrappers”. Wrappers span the width of the entire website. You can rearrange them as you go to test which ones work better to convert visitors in your industry. You can test different lines of text within each wrapper. You can also include survey and questions bubbles next to each feature throughout the website so your visitors can give you feedback in realtime, but I will save testing for a future post.
Here is a screenshot of the sketch I did for the home page and the inner page. It is basic. Nuts and bolts. However, you should be able to see how we went from a very basic set of notes from the questionnaire to now we have an outline of the actual website.
I used a similar sketch process for the WolfPack app as well. I include a screenshot of the mobile app screens sketched on paper in my workflow section.
Next, I sent this sketch along with my notes from the questionnaire to my client. This allows the client to see my progress, and gives them an early opportunity to give feedback in the creative process. It is much easier to change features on a piece of paper with an eraser and pencil compared to updating a Photoshop design or even further along developed in WordPress, Squarespace, or another CMS.
Assuming I have approval, or I already incorporated the client’s feedback into the sketch, the next step is to start designing in Photoshop. Before I start Photoshop design, however, I will collect and develop assets.
Asset Development
I learned how important this step is from a friend named Owen Hemsath. I am not even sure if he remembers telling me about asset development on one of our calls, but it stayed with me. Owen was going over his process of onboarding a new client. As he reviewed his internet marketing process, he brought up asset development. Thanks to Owen, I learned how important it is.
Asset development is probably one of the most important, and often skipped stepped, of building a website. I have all the important details from the questionnaire, and I have the sketch of the website. Now, I need to collect all the images and other multimedia that will go in the actual design.
Assets are crucial elements in the design process. Too many times I have tried to design a website without having all the parts. Let me tell you, it is a recipe for disaster. I always thought it would be fine, and I could just work around the parts I did not have. Wrong. It’s like trying to finish a puzzle without all the pieces, or playing poker without a full deck of cards.
Here is a quick breakdown of assets you will need to get a website launched:
- Logo – It’s good to have the logo before starting because it gives me an idea of the business’s personality. Branding is another conversation, though. I will do my best to keep this post strictly high-level, and save branding for a future post.
- Color Palette – When it comes time to style the hyperlinks, navigation bar background color, paragraph text, heading text, footer/copyright background colors, etc. you will need a standard color palette to pull from.
- Hero Banner Image – this is the large background photo which is the very first image you see upon landing on a website. It sets the stage for the visitor. This image should be high resolution, engaging, and ignite a fire inside the visitor that forces them to continue reading through the website’s contents.
- Product Images and Videos – depending on the products and services you will need standard pictures and videos that represent the appropriate product or service. In some cases, I will use icons to represent these items. Whether I use icons or images or a mixture of both will depend on the industry. A business such as a bank is more appropriate for using icons compared to a new fitness center. In most cases, including video in your website is only going to help you increase conversions. I recommend working with a video marketing expert who can teach you how to do video marketing yourself.
- Contact Banner Image – I always like to include a contact banner at the bottom of every page. You never know when a visitor will be scrolling to the bottom of the page, and you catch them at the right time with a contact form. I use a similar large background as the Hero Banner for this section. The difference with the Contact Banner is I usually keep the image pretty dark and I like to add a black and white filter. It’s usually a nice touch.
At this point, I am ready to design a first draft of the home page in Photoshop.
Visual Design
Breaking down the project into chunks like I have in this example allows me to focus two to four hours per day on the project. In my experience, working in creative sprints like this produces the best results. Similar to procrastinating all the work from one semester in school and staying up all night to finish, doing the same with design deliverables creates shitty products. I am better than shitty design products. More importantly, my clients deserve better.
Once I finish the first draft of the Photoshop design I will edit this post and place a screenshot of it in place of this sentence.
I am also going to continue this series with another post about the process after the initial Photoshop design deliverable. Hopefully, this is enough to get you started. If you have any questions or comments, please leave them in the comments below.
WordPress Development
After we iterate through versions of the visual design, you approve the final versions, I develop the high fidelity visual designs into a live WordPress site.