"The reasonable man adapts himself to the world; the unreasonable one persists in trying to adapt the world to himself. Therefore all progress depends on the unreasonable man."
-George Bernard Shaw
-George Bernard Shaw
I just want to get one thing straight before I continue. Your website does not actually suck. Well, it may suck, but I probably have never seen it.
The data tells us that blog post titles containing the phrase “your xyzthing sucks” have higher click through rates (CTR) than hyperlinks which do not tell you your xyzabc sucks.
This works for a site you are building from scratch, a site you are building with Squarespace, or my personal favorite – Headway Themes.
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.
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:
Once I received the answers to the above questions I was able to start the creative process.
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.
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.
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:
At this point, I am ready to design a first draft of the home page in Photoshop.
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.