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:

  1. What is the name of your business?
  2. What is the tagline of your business?
  3. What products/services do you offer?
  4. What are the three most important benefits a customer will get from using your products/services?
  5. 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:
website questionnaire notes
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.
website sketch
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:

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.