OVRTONE Media Group
A Design and Development Breakdown
Brand Design
The Core Concept
As a Media Engineering & Design company, we wanted OVRTONE's brand to balance creativity and formality. It was important to us to keep our layouts and color scheme minimalistic but interesting, to draw more attention to the media we showcase, while keeping our brand's feel fresh
Overall, we wanted formal-adjascent fonts, minimal but bold color, and layouts that draw focus to our showcased elements.
Starting with the Logo
When designing a brand, my starting point is always the logo. To me, the logo should be a distillation of everything that makes up the brand image. It needs to represent the brand's design philosophy, showcase the primary typeface, and integrate the brand's colors (on color variants of the logo).
In OVRTONE's case, I decided on a stylized "O." It's similar to our previous design but both more ornate and sharper. I felt that it hit our design goals of being formal-adjacent and minimal.
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.
The "O" logo is a capital "O" in the Cinzel Decorative font, so Cinzel Decorative became the primary font. For a secondary, I chose Josefin Sans. It's a slightly ornate sans-serif font that's easy to read but also stylish enough to work with Cinzel Decorative. I particularly liked the "e," "w," and "m" characters. Is it weird to be this into fonts? Maybe!
Colors
We went with green and blue as our brand colors. I'm pretty biased towards that combo (in case you haven't noticed from being on this site), but my business partner liked it as well.
The blue is nice and relaxing. The green works with the blue but is bold enough to really pop off the page. These colors also work well with the drone footage of forests and water that we feature on the site.
The Website
Our Goals
Since web design and development are services we offer, the quality of our site needed to be absolutely top-notch.
Our top-level goals were, speed, security, ease of use, and uniqueness.
Design Framework
When it comes to design, it was important for us to make it very media-heavy. Each page has a fullscreen hero with a featured image. The home page hero uses a video. All of our testimonials have images next to them.
Additionally, we went for a minimal, spaced layout with a sparing use of color. Most of the site consists of grayscale backgrounds, with color reserved for important text and CTAs.
Development
To facilitate our goals of speed and security (as well as aid in maintenance), I decided on a primary tech stack of Next.js and WordPress. We host on Vercel and utilize SendGrid for contact form submission with Next.js server actions.
Next.js
For this sort of project, Next.js is my framework of choice for a few reasons.
It provides a platform with a lot of 'magic.' The Image component that optimizes images automatically, the Link component that automatically handles prefetching, and folder-based routing with the App Router are all great examples. Speed and ease of creation were really important to me, and these features help immensely.
Additionally, the fact that it's a full-stack framework means we can build the front end and back end in the same project. Some may not prefer working that way, but as a single developer, this lets me deploy server-side logic that's accessible from the front end, without the need to build an API.
WordPress
Both my business partner and I have a background in WordPress. I opted to use it as a content management system (through WPGraphQL) to ensure adding and changing content is as easy as possible, with as little of a learning curve as possible for all current and future team members.
SendGrid
Contrary to what I used to do with monolithic WordPress sites (using plugins), I wanted to take advantage of the flexibility in Next.js to handle contact forms in a custom way. Building a custom contact form, sanitizing inputs on the front and back ends, and then sending submissions to the team through email has proven to be an extremely functional solution. It also gives us the foundation to do other things with that information, such as adding it to a CRM.
Moving Forward
Plans for the Future
The OVRTONE brand and site are in a good spot now but that doesn't mean we stop here.
Future plans include media overhauls and a client portal.
Adding More Media
This is probably the biggest area for improvement on our website. While we have a few examples of our work sprinkled throughout the site, there's no page or section on the service pages dedicated to showcasing examples.
I plan to resolve this by adding both a page that showcases a lot of our work across all of our service areas, as well as building a module that displays a smaller selection of a specific type of work and can be placed on other pages.
Replacing AI Graphics
For the sake of speed, most images that were meant to be purely decorative were generated with DALL-E. This isn't a huge issue, as the graphical elements in question are all dark and blurred background elements. Still, as a media company, all of our media should be done in-house.
Over the next few months, replacing these AI-generated elements is on our to-do list.
Client Portal
This is by far the most exciting improvement. It's also the most complicated and furthest out ... those things seem to go together more often than not.
The idea here is to consolidate all of our client interfacing to one spot. Right now, documents are emailed, photos are uploaded to Pixieset, videos are sent through Google Drive, and payment links are set up in Stripe and then emailed. It's functional but not very elegant.
Building a portal where clients can upload and download assets, documents, and deliverables, pay their bill, and even purchase new services, would be an extremely elegant solution and simplify the process for both us and our clients.
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!