Board & Vellum Website: Your Advocate for Great Design

Board & Vellum not only offers a variety of design services, but takes on projects of vastly different scales and styles — so, how do you choose which one image is appropriate for the home page? You don’t. Instead, we designed a cross-fading hero component so that all of Board & Vellum’s project types are represented. The images can be swapped out or reorganized on a whim, with a quick dip into the CMS.

While the images gently fade from one to the next, the brand remains present with a logomark overlay that highlights the introduction to the company, and includes a CTA button offering a quick path over to the portfolio hub.

This layout is not only helpful for the human visitors to the site (heat map testing on the old website helped us infer what B&V’s users wanted to see and when), but it’s helpful for the robot visitors, too. Why do we care about the robots? Because designing for humans and robots alike helps your webpage jump from who-knows-where deep in Google search results pages, to right where you want to be.

Side Note: We’ve sped up the transition between images in this video rendition so you can experience the cycle in a nutshell, and (of course) the resolution is lower in this video than the live site, so be sure to check it out over on boardandvellum.com for the full experience.

One of the underlying design intentions for the E7 Series 3 platform is to emulate print media standards in a form that performs well in the digital sphere.

For the individual portfolio projects on the B&V site, the digital challenge was: how do we present the hero image for a project so that not only does it render fully (without cropping) on smaller devices, but also not appear too small on a larger screen, with nothing but tons of blank space in the margins? Introducing a full-bleed, color-adaptive hero component solved this challenge.

How do you support a color-adaptive, magazine-style layout in a web-based portfolio? You automate, of course!

The first time an image is loaded (which happens when the project is still in draft form), client-side JavaScript processes the image and uses known algorithms to identify the dominant color of the image, along with an accompanying palette of supporting colors. The process occurs asynchronously behind-the-scenes and applies to every image uploaded to the platform. This opens up the opportunity for further color-adaptive integration to occur in the future without the overhead cost of processing all these images at once. The data is collected, processed and stored incrementally so we can dream big about future design features.

Since the underlay color for each project hero image is generated by an algorithmic study of the image itself, each project feels like itself when presented. If there were only one color underlay used for all projects, that color would have to be very neutral — some projects would fare alright, but many would feel like they clashed with their backdrop. Instead, the color-adaptive hero component allows each project to feel unique and presented at its best.

Color-adaptive interfaces are becoming more common, and you’ll notice them popping up now, even among mainstream sites like Pinterest and Google. But, hey, we’ve been rocking color-adaptive interfaces since 2013.

Most masonry galleries start with a row of images perfectly top aligned, with subsequent images filling in below. The columns are of a consistent width — as well as the gap between each image — but the height of each image varies. Due to this variation, ultimately, the final row of images forms a jagged bottom edge to the gallery. Some people don’t mind this look, or they have to use it because the gallery images are so varied that there is no way around it.

But, Board & Vellum didn’t want that jagged edge, and we didn’t want to crop the images into square thumbnails. Plus, the galleries for most projects included images in both landscape and portrait orientation.

We accepted this challenge, and found the gallery could have both landscape and portrait images and be “perfect” if the images were all cut into a combination of 2x3 and 3x2 aspect ratios, then curated both in number and in order to populate the gallery “just so.” The result will have perfect alignment of the thumbnails, both on top and on the bottom. It takes a little extra curation, but it’s worth it for the clean, organized look.

We are so excited to launch this project on our portfolio that, hey, we’re getting this much content up here on the interwebs right now, even though we are positively itching to add more. We know, we know — this happens all the time! We feel you, we wish we could keep up with our portfolio documentation, too. But we give our clients top priority, and that means portfolio work comes later.

So, coming up at a later point… tune back in to read about the brand work incorporated into this project, the massive pile of content production that our very own Rachel did while wearing her B&V hat, and also to check out some mind-blowing comparisons of before-and-after for the site.

We hope to see you soon.