Be The First To Know
Join Our Newsletter
Building A Client Website From Scratch
In the eighth episode of Building a Brand, we’re pulling back the curtain on the web design and development process for Hamilton Family Brewery.
Up until this point, we’ve been following the design process of the rebrand. Now that the design team has nailed down the visual identity, it’s time to build a website. The website will serve as the digital destination where customers new and old can learn more about the brewery as well as the Hamilton’s story.
The Website Creation Process
1. Discovery
Similar to the discovery session for the rebrand, we also hold a discovery session for the website. This is where we identify the users, their goals, and what they want the website to do.
2. The Sitemap
The sitemap is essentially a 30,000 foot view of the website and the navigation. We’ll piece together what information will be on the site, and how users can move through the site to find what they’re looking for.
3. Wireframe
Once the sitemap is approved, we head into the wireframe. Wireframing is where we zoom into each individual page and figure out what content will go on that specific page. This also helps us get a feel for the flow of the page, and figure out how we can help the user get where they need in as few clicks as possible.
4. Visual Design
Now that we’ve got our building blocks in place, we spice it up with colors, buttons, typefaces, and imagery to finalize the visual design.
5. Development
The last phase for the website. This is where the site is created with code so that it can live online.
How We Designed the Hamilton’s Website
Typically when we design websites for clients, we use Wordpress. We build them a custom theme and code the site from top to bottom. The problem that’s been happening with that, though, is that in order to keep the website in shape over time, a Wordpress developer is needed.
There wasn’t exactly an easy way to keep client’s sites updated without bringing a developer on staff or contracting that role out. That was, until, Ben discovered Webflow.
If you don’t know about Webflow, it’s a visual website builder that requires no code and, based on our experience with it, is incredibly simple to use. Our design intern who has 0 coding experience completed the website in just three days—which is crazy talk in web.
We wrote up a recap of our experience using Webflow for the first time, and included a couple of tricks we picked up in the process. Check out the blog post if you want to give Webflow a try the next time you build a client website.
Wrapping Up the Website Creation Process
This process may have been different from our usual method, but for the Hamilton’s, handing off the website was smoother than smooth. We have one final check-in where we walk through the finished website, and show them step-by-step how they can go in and make any edits they need—no developers necessary.
Building A Client Website From Scratch
What steps are involved in building a client website from scratch?
What steps are involved in building a client website from scratch?
In the eighth episode of Building a Brand, we’re pulling back the curtain on the web design and development process for Hamilton Family Brewery.
Up until this point, we’ve been following the design process of the rebrand. Now that the design team has nailed down the visual identity, it’s time to build a website. The website will serve as the digital destination where customers new and old can learn more about the brewery as well as the Hamilton’s story.
The Website Creation Process
1. Discovery
Similar to the discovery session for the rebrand, we also hold a discovery session for the website. This is where we identify the users, their goals, and what they want the website to do.
2. The Sitemap
The sitemap is essentially a 30,000 foot view of the website and the navigation. We’ll piece together what information will be on the site, and how users can move through the site to find what they’re looking for.
3. Wireframe
Once the sitemap is approved, we head into the wireframe. Wireframing is where we zoom into each individual page and figure out what content will go on that specific page. This also helps us get a feel for the flow of the page, and figure out how we can help the user get where they need in as few clicks as possible.
4. Visual Design
Now that we’ve got our building blocks in place, we spice it up with colors, buttons, typefaces, and imagery to finalize the visual design.
5. Development
The last phase for the website. This is where the site is created with code so that it can live online.
How We Designed the Hamilton’s Website
Typically when we design websites for clients, we use Wordpress. We build them a custom theme and code the site from top to bottom. The problem that’s been happening with that, though, is that in order to keep the website in shape over time, a Wordpress developer is needed.
There wasn’t exactly an easy way to keep client’s sites updated without bringing a developer on staff or contracting that role out. That was, until, Ben discovered Webflow.
If you don’t know about Webflow, it’s a visual website builder that requires no code and, based on our experience with it, is incredibly simple to use. Our design intern who has 0 coding experience completed the website in just three days—which is crazy talk in web.
We wrote up a recap of our experience using Webflow for the first time, and included a couple of tricks we picked up in the process. Check out the blog post if you want to give Webflow a try the next time you build a client website.
Wrapping Up the Website Creation Process
This process may have been different from our usual method, but for the Hamilton’s, handing off the website was smoother than smooth. We have one final check-in where we walk through the finished website, and show them step-by-step how they can go in and make any edits they need—no developers necessary.
.png)
.webp)
