Brand Design
The Core Concept
Bark Productions is a live events company based out of Chicagoland. They handle audio and video for events ranging from corporate conferences to concerts.
When speaking with the owner, it was clear we needed a brand that was fun, professional, modern, and techy.
Starting with the Logo
When designing a brand, I always start with the logo. It needs to be a sort of sample platter of all the different elements that make up the brand—namely feel, type, and color.
For Bark, I knew from the beginning (with confirmation from the owner) that some sort of dog silhouette was the likely path. The final version is a stylized 2D side profile of a German Shepherd. It uses a mix of sharp corners and curves to be both techy and friendly. It integrates the primary brand color as well as both primary neutrals.
Typography
In terms of fonts, I wanted a primary and secondary option. They both needed to be web-safe and type-safe and (obviously) gel well together.
For the primary font, I decided on Audiowide. It's big, bold, and modern, but not over the top or gaudy. For a secondary font, I opted for Advent Pro. It's a slick, modern, and techy sans-serif font that's easy to read and feels like it's meant to be paired with Audiowide.
Colors
The owner knew he wanted "red" as the primary color and that's about it. I found the final shade to be bold enough to stand out without feeling disjointed from the rest of the brand.
In addition to light and dark variants of the primary red, I wanted to ensure the brand was equipped with at least a secondary color. With lighting being a huge component of the company's services, I opted for a shade of blue as a secondary color, and a shade of green as a tertiary color—should it ever be needed.
The Website
Our Goals
The owner of Bark Productions had a few main requirements for his site. Namely, it needed to highlight contact information, give a little bit information about the company, and show some pictures from prior events. Most importantly, all of the content needed to be able to be updated by him, easily.
Essentially, what he needed was a flexible solution that was something in between a website and digital business card.
Design Framework
Designing this site was interesting since the client doesn't have a lot of content. We decided to go with a micro-page layout, where the background, header, and footer all stay constant, and navigation determines the module that displays in between.
Since the background (a client photo from an event they did) conveys the brand colors, most of the text can be white—with the only exception being links that have a white-to-red gradient to differentiate them.
I'd also be remiss not to mention the intro animation. The fade from black and focus pull animation is fast and fun, introducing the site in a nice way without feeling intrusive. It also gives a bit of time for the content to load from WordPress, which is, you know, neat.
Development
For the sake of flexibility and developer experience, as well as the client's need for content management, I went with my typical primary tech stack of Next.js and WordPress. We host the front end on Vercel and utilize Server Actions to handle fetching content from WordPress with WPGraphQL.
The nice thing about this micro-page architecture is that, since there isn't a lot of content, I could fetch all of it on the initial page load. I maintain the current module with a useState hook and just conditionally render the module based on its value. It's not a very complex solution, but it gets the job done!
Next.js
For this sort of project, Next.js is my framework of choice for a few reasons.
Primarily, it's the ease of deploying back-end logic using Server Actions. Since speed and ease of creation were really important to me here, not having to spin up a separate back end (especially since it basically just interfaces with WordPress) is super handy.
Additionally, since the client wants to expand the site beyond the micro-page architecture, the folder-based routing in Next.js lets me do that in a way that's dead simple. I can just expand the current project instead of needing to rebuild from scratch.
WordPress
Why WordPress as a CMS? In general, it's really easy to use—both from the client's perspective for adding and editing content, and from my perspective with WPGraphQL. That's it. Nice and simple!
Moving Forward
Plans for the Future
While the Bark Productions project is complete for now, I'm continuing to work with the client to establish plans for the future.
Namely, expanding the site from the micro-page structure to include more indepth pages on individual services, and equipment for rent - as mentioned above.
Wrapping Up
Places to Go, Things to Read
I never like getting to the end of a webpage and feeling like I've hit a dead-end, so here're a few things you might be interested in!