EmbraceResponsive Web Design

The Challenge

Embrace was formerly known as 3 Separate design agencies which merged in 2014, and they required a digital presence and website to reflect this new merger, as well as the wealth of knowledge, work and expertise that the team could provide.

I was approached by creative director Andrew Paterson and studio manager Andrew Marsh about creating a new fully responsive Agency portfolio and website. The requirements for the website were simple, and it had to be clean, professional, elegant and bold. The proposition was impactful, they wanted the viewer to Embrace the work, as this would speak for itself.

embrace Cover Image
The Solution

As with all projects, research was vital, and I first had to look at previous types of work the agency had completed. Not only having to research but also to get to know all the team better and to find out what made Embrace unique, and what their UPS was.

It was adamant from the work, they were a bunch of extremely talent people, and their work was bold, vivid, exciting and inconceivable, which gave me a basis for their portfolio.

I began sketching out layouts for various breakpoints including desktop, tablet and mobile, working closely with the creative director and developer ensuring my concepts were technically feasible. Once my layouts were approved I then began creating high fidelity designs which would be later used for development.

Embrace Wireframe 01
Embrace Wireframe 02
Design systems

Creating a design system for Embrace was quite a challenge. Although they had just merged and completed the brand design, it was still missing vital elements such as grid systems, typography and a colour palette. So my first task was creating a flexible responsive grid system which could be fluid rather than using traditional media queries.

I then focused on typography for the website, and wanted something that would complement the custom Embrace logotype. I actually chose 2 typefaces for this, Open sans for body copy and Akzidenz Grotesk for headlines, titles and important features such as quotes, tweets etc.

I finally looked at a colour palette, and working from my original research into Embrace’s work, I wanted to convey the bold, vivid and exciting visuals that their work portrayed. I selected 2 primary and 2 secondary colours which could be used throughout the website, these colours would then work for the categories of clients, such as finance, health and media.

Grid System
12 columns | 92px width | 16px Gutter | 7px Baseline
Embrace Columns
12 columns | 82px width | 16px Gutter | 6px Baseline
Embrace Columns
9 columns | 34px width | 8px Gutter | 7px Baseline
Embrace Columns
Colour
All colours used for the project
Embrace Primary Colours
Embrace Secondary Colours
Typography
All typefaces used for the project
Embrace Typography 01
Embrace Typography 02
Embrace Typography 03
Embrace Typography 04
UI Components
Atomic design system
Embrace UI Components
Embrace Device 01
Final UI

The final outcome is a timeless, elegant and exquisite web design, which showcases the agency perfectly. I kept the UI white, which adds emphasis to the content and work of the agency which is bold, sharp and full of colour.

I designed the website to be incredibly flexible and work at any size, taking into consideration that it needed to work at mobile and so it was designed mobile first. The use of colour throughout is kept to a minimum, and used to accent hover, active and focused states. Subtle animations are also applied to hover states to add depth and engagement.

Embrace Device 02