Summary: As they quintupled in size, Counsel Creative tasked us with developing their new custom website. I used CSS Grid and other advanced techniques to match the website to the sophisticated design they provided. I also used a content management system to make it easy for the team to update the content regularly.
I met Kenny and Rachel Morgan in early 2018. At the time, they were the only "employees" of Counsel Creative. Since then, they've grown into a team of 11. As they expanded, they knew they needed to elevate their online presence from a Squarespace template into a completely custom website. Last Fall, they provided me with their design and I got to work.
Breaking The Grid With CSS Grid
The new Counsel Creative website design was definitely not a template. It called for complex layouts with overlapping elements. Web designers call that "breaking the grid." Most websites are designed according to a spacing system. That gives the website a purposeful, designed look because there's an invisible set of rules that dictate how elements should display. Because they're meant to be used on a large scale, templates are usually very rigid in their grid structure. That can make them feel a little boxy. A great way to flex your custom website muscles is to break the grid. It gives the site a more organic, sophisticated look. In development, I used a technique (ironically called CSS Grid) to create those complex layouts.
Showing Off Their Work
As a creative agency, Counsel Creative needed a Work page that would show off their projects. The inital design called for a masonry-grid of project images. But, there wasn't a way to feature key projects. Katherine Bates, a visual designer on the Counsel Creative team, sent me concepts for a slightly updated version with a hero projects featured in the header of the work page and three additional featured projects. I developed Katherine's design with buttery smooth transitions to facilitate the user exploring all the work.
Listing their Services
With most business websites, it's important to list out the services they offer. That helps rank the website in organic search results. It also moves the user to complete an action like filling out a contact form. Because of their quick growth over the last two years, I wanted to make it easy for the Counsel Creative team to add or edit services quickly. I created a template page based on the design file and tied it into the content managemeny system (CMS). That provided a number of benefits:
- Service pages have identical layouts. Even though the content will be different on each page, users will recognize that the pages have the same layout and that will reduce "cognitive load". In other words, instead of having to learn where content is on each page, the user can spend more energy focusing on the content itself.
- It's easy to add a new service. If, for example, Counsel Creative decides they want to highlight their Search Engine Optimization capabilities, they can add it as a new service just by filling in a few fields in the CMS. Once they do that, a new page will appear and a new link will appear in the website's navigation leading to the new page.