Website design and a consistent brand experience for Welsh Rarebits

After a previous attempt at redesigning failed to deliver either a compelling website design or a consistent experience of their brand, Welsh Rarebits asked me to step in a few weeks before their annual members’ meeting.

Above—Welsh Rarebits and their new collection of websites—including this design for Great Little Places—will launch throughout 2019.–See my prototype Welsh Rarebits designs.

I had just two weeks to create static designs for Welsh Rarebits’ most important pages, plus responsive prototypes for the team to demonstrate during their annual members’ meeting.

Welsh Rarebits in print

Since their visual identity was developed by Smörgåsbord in 2011, the team at Welsh Rarebits spent several years developing printed brochures including ‘The Great Little Places Guide.’ This identity includes a brand architecture of logo marks and colours, plus typography styles. They had no style guide for websites, so before I began work on a redesign, I studied their brochures to discover typographic and other visual styles which might be adapted for their websites.

Above—Welsh Rarebits brochures use Akkurat and Didot typefaces, a vibrant colour palette, plus distinctive graphic map designs.

Refreshing the colour family

Every Welsh Rarebits brochure—‘Welsh Rarebits’, ‘Great Little Places’ and ‘Rare Hideaways’ —has its own brand colour, but two needed refining to make them feel, look, and work better as a family. I adapted the Welsh Rarebits green from its original CMYK to make it more vibrant for on-screen use. Then I made darker and lighter variants to use as accents, plus three lighter tints for backgrounds and borders. I followed the same process to create equivalent colours for the Great Little Places and Rare Hideaways websites.

Above—My work often involves the development colour systems which include brand architecture and a palette of functional colours.

Adapting type styles for online performance

Licensing costs and performance issues meant finding alternatives to the Akkurat and Didot typefaces Welsh Rarebits use in print. My criteria was that any new typeface must:

Selecting new typefaces

After evaluating dozens of typefaces, I decided on Unna (a neo-classical serif) and Lato (a sans-serif with classical proportions.) Both are readable and available without licensing costs from Google Fonts.

Left—I made a shortlist containing Dedica, Playfair, and Unna. Center—Overlapping Didot and Unna shows the similarity between these two typefaces. Right—My typographic designs contains styles for both print and online.

After selecting two new typefaces, I audited typographic elements from Welsh Rarebits’ brochures and current websites, then made new designs which create a consistent feel across brochures, marketing materials, and websites.


A consistent brand experience

My goal was for ‘Welsh Rarebits’, ‘Great Little Places’ and ‘Rare Hideaways’ to each feel part of one collection, so I developed a set of foundation styles for use on each website. These include:

I developed design tokens for either CSS Custom Properties or Sass variables to enable easy theming of each website:

:root {
--color-background:#fff;
--color-border: #d3e1d3;
--color-text-default: #000f00;
--color-accent: #bdc92f; }

.great-little-places {
--color-border: #d8c6c6;
--color-accent: #ce0058; }

Static visuals

After first agreeing the new high-level creative direction for the updated Welsh Rarebits online brand as a whole, I created static designs for their Great Little Places website’s most important pages, paying particular attention to how someone’s experience of their brand would be consistent across platforms.

Above—Pages from the Great Little Places accommodation listings, including a more editorial feel for the individual hotel pages.

Interactive prototypes

Static visuals can only tell a small part of the story, so to demonstrate the new design to the Welsh Rarebits team and attendees at their annual members’ meeting, I developed a set of interactive, responsive prototypes.

Left—A new editorial article feature gives Welsh Rarebits another opportunity to speak directly to their customers. Center— One of several new blog templates allows more flexibility for art direction. Right—I ensured someone’s experience of their brand would be consistent on any size screen or device.

The new Welsh Rarebits collection of websites will launch throughout 2019. See my prototype Welsh Rarebits designs.


Availability

I’m available for hire to consult on and design products and websites. Based in North Wales, I travel regularly to work with clients world-wide.

Available from January 2019

Talk soon

For work enquiries email

Or call us on +44 (0)1745 851848

Studio

Stuff & Nonsense Ltd.
Eversleigh, Lon Capel
Gwaenysgor
Flintshire, North Wales
LL18 6EJ, UK