Embrace

Midweight UI Designer. London 2014

embrace-hero@2x

Overview

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, and 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. 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.

Stakeholders

As Embrace was a brand new agency formed of 3 innovative and exciting design agencies unifying it was important to encompass this history, client base but most important the expertise it offered. The work that the agencies had previously completed was award winning and so it was vital and imperative that we showcased this in the new website. 

embrace-studio@2x

Layout and structure

Layout and structure

Layout and structure

Working closely with creative director Andrew Patterson and several developers, we created a simple high level site map detailing all the pages required for the site. I also created low fidelity mockups of potential layouts for the pages to a get an initial understand of what it would require for each page.

embrace-layouts@2x

Design system

Design system

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 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 I use throughout the website. These colours would then work for the categories of clients, such as finance, health and media.

embrace-branding@2x

UI component's

UI component's

UI component's

Once I had completed the design system with the creative director, all members of Embrace approved it. I then moved on to making various components for the website such as navigation, buttons and cards which could be flexible and use across all media queries for the website.

embrace-components@2x

Final design

Final design

Final design

I worked closely with the developers building the website and ensuring that the components and designs I had completed were correct. The site portrays a window into the agencies vast client base and bold and exciting portfolio of work.

embrace-finaldesign01@2x
embrace-finaldesign02@2x

Anthony Eamens 2020©

Anthony Eamens 2020©