How this site was designed

I designed this site for a fictional business to explore and showcase possibilities and design concepts for small-scale web projects. Wintershead was invented as an example of a small New England-based company. Though not all small organizations would exactly resemble Wintershead, there is a story to tell, a product to sell, and an identity to be illustrated through pictures and words, just like any real website promoting a product, service, or idea.

A coherent story

Just like a real company, a fictional company needs a story. I built a small collection of objects that would appear coherent at a glance, suggesting their place of origin and giving them substance and form. Names, places, and objects featured in this design were partly inspired by visiting Vermont and partly by the landscape glossaries from the British Isles in Landmarks by Robert Macfarlane.

Artisan visual design

A design should match its context. What might a design for a small business or organization look like? How could this project speak like a small operation while standing on its own, apart from mass-produced design? Taking on Norman Potter’s idea of “artisan” design, this project is a bold statement on what hand-crafted design can be.

Like the organization itself, the design should be straightforward, personable, independent-minded, and most importantly have a voice and tone that echoes its source. My approach was to push the limits of proportion and contrast, using strong colors and dramatic typography.

Wintershead Brewing Company

The logotype and mark for the site, set in Enzo.

An essential element of any design for the web is type. Digital typesetting is about more than merely selecting a typeface, but rather involves determining tone, proportion, weight, clarity, and accessibility. I chose FF Enzo as a modern sans serif for a modern brand, something that performs exceptionally well at massive scales but still serves as legible body text. To some degree the visual aesthetic of this project is inspired by Scandinavian minimalism, which makes the Swedish-designed Enzo a sure fit.

moel logo and illustration

I shaped and refined spare vector illustrations to create identities that evoke the ideas behind these hypothetical products. The light lines match the subtle curves of Enzo’s thin weight, with the leading edge of the letterform bleeding into the contours of the illustrations. In applications where the illustration stands alone, the contiguous logotype for the product is omitted. Though drawn loosely, these could be the basis for physical product design, such as a printed label.

letter forms meet vector paths

The path of the branch meets the letters of the name for the beer “lönn”.

screenshot: monochrome blue tinted photographs on a blue background

Themes are applied dynamically to each post’s featured photos using imgix image processing. That is: the photo editing takes place automatically on a remote server using the imgix API – not done manually beforehand in a photo editor like Photoshop.

screenshot of locator map

Using Mapbox Studio, I designed a custom map style to simulate a product locator.

Examples of the implementation of the visual design are demonstrated in the pattern library for the project.

High performance design

A slow website is bad for business. Sites that are somewhat slower than expected lead to slowly mounting frustration. Worse yet, sites that are significantly slower or plagued with unreliable performance drive people away.

The Wintershead project exemplifies a relentless commitment to minimalism. Although the graphic design is minimalist as well, what I’m talking about is under the surface. Complexity and dependencies are minimized to ensure an effortlessly fast experience. I wrote some more detailed notes on the performance implementation of this site.

Fluid responsive layout

Recently I have been experimenting with fluid typography as a basis for proportion and type. The goal is to have type and dimensions that work regardless of device size. Unlike conventional breakpoint-based responsive design, this approach uses a ratio of font size to screen width so that the scale of the site is fluidly responsive.

Advantages to this method include a more consistent visual design, a guarantee of legible typography at all screen sizes with fewer rules, and a far less complicated implementation. Working this way involves setting up a system of initial constraints and working forward from that point rather than starting with a desired visual result and working backward, which allows for a less bounded and more flexible design process.

As an independent designer and developer, I work on many projects like this one. Want to find out more about my work and see how I can help you build something like this? Find out more and hire me to work with you.