UPPERCASE Magazine is a Calgary-based publisher of books and periodicals, primarily their eponymous flagship publication, which specializes in writing about fashion, design, and illustration.
Given their branding, UPPERCASE Magazine’s slick, beautifully-designed online store comes as no surprise. For merchants with their focus on a singular or primary product, UPPERCASE provides a great resource for website design inspiration.
The first thing that strikes users about the site’s homepage is its stunning, high-quality banner video. It may seem simple at first glace—hands turning through the pages of the magazine against the backdrop of a colorful, wool quilt—but the feat is more technically challenging and meticulous than it appears.
Load times are instant, which is challenging for a video of this quality. It plays and loops automatically, doesn’t have any sound, and doesn’t display any player controls. Though it’s a video, it functions more like an image.
It isn’t meant to be viewed in full or started from any specific point. Instead, it’s meant to be scrolled through, helping to create a calming atmosphere.
UPPERCASE excels when it comes to using movement to direct its users. Another video on the home-page has the camera panning down a stack of books, creating a dizzying illusion that the site is slowly expanding.
There’s also a number of scroll-activated graphics—such as Encyclopedia of Inspiration card that shows a single issue of the book-series expanding to show more books.
Effects like this immediately draw the user’s attention to your product. Browsing UPPERCASE Magazine’s website is an experience, something that immediately works to build the brand within visitors’ minds.
UPPERCASE magazine benefits from these kinds of flourishes. Since the focus is on one, main product, there’s less of an emphasis on directing users to product or collection pages. Instead, the experience of connecting with the brand is more important.
Aside from the lively imagery, there are a few breaks in motion on the website that give users a chance to connect with the brand in other ways. Underneath the banner is a quick message from Janine Vangool, publisher, editor, and designer for UPPERCASE. The message is brief, but it helps to add a human face to the brand and help personalize the user’s relationship to the brand.
UPPERCASE makes great use of color in their design as well. The brand doesn’t limit itself to one or two colors but instead focuses on the contrast of bright, saturated colors against the white background.
With this motif, sections of the home-page tend to “pop” a lot more. Images tend to be heavy on textures and patterns. For example, one image that stands out is near the bottom. It depicts a full row of issues of UPPERCASE, each one marked with a unique texture and color scheme. The photo almost serves as a preview of what your book-case could look like by subscribing.
Moving past the home-page, product and collection pages tend to stick with this contrast. Copy on the pages is often completely separated from visuals and displayed in a muted fashion, with simple black text over a white background.
This works to focus the attention of the user on the site’s visuals. Since UPPERCASE is primarily a design-focused magazine, this helps to establish and maintain that branding.
A number of other interesting features help to build out its brand. It includes a blog that almost acts as a “preview” of the magazine itself, offering free design tips and even including its own fun, unique illustration with every entry
Like the magazine itself, UPPERCASE’s website is vibrant and alive. Colors and images burst forth like blossoming flowers in a summer garden. If you’re looking for unique website design ideas, UPPERCASE Magazine’s design-focused website is a perfect inspiration.