Embrace

Responsive 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.

Timeline
Jan 2018 - Current
Role
Junior UI Designer
Project Type
Responsive Web, CMS

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.

Design System

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

1024

12 columns | 82px width | 16px Gutter | 6px Baseline

768

9 columns | 34px width | 8px Gutter | 7px Baseline

375

Typography

Embrace Brand Typeface

Open Sans

Akzidenz Grotesk

Colour

Embrace primary colour palette

#F70157

#FE5F00

#47A1EB

#6FB72B

UI Components

Atomic design components

Final Screens

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.