Your browser doesn't support some of the latest features used to build this site. For the best experience you might want to look at upgrading your browser.

Skip to main content

Allen Associates

Allen Associates are one of Oxfordshire’s leading independent recruitment agencies. Their website redesign is big and bold – made to match their brand. The vibrant look of the website also sets them apart from other recruitment agencies.

Role:
Front-end development
Job:
Syndicut
Type:
Marketing site

The project was completed by the Syndicut team which included design, front-end and back-end development. My involvement in the project meant creating a pattern library (built using Grunt, HTML, SASS, jQuery and SVG) – that is independent of the live site. This meant working with the design team to turn their ideas into a responsive component driven build that the back-end team could integrate into the Kentico CMS. In doing so the pattern library included:

0 Templates
0 Components
0 Component variations

Style guide

In order to keep everything consistent as the project grows, we put a style guide together. This involves standardising key styles in the designs, such as colour, typography, icons, buttons and form elements.

Colours

Primary
Secondary
Tertiary
Quaternary
Quinary
Senery
Septenary
Primary grad
Secondary grad
Tertiary grad
Black
Grey dark
Grey
Grey light
White

Typography

Bold font

Regular font

Icons

Arrow down

Arrow left

Arrow right

Arrow up

Chevron down

Chevron left

Chevron right

Chevron up

Cross

Download

Email

Menu

Play

Search

Tick

Admin

Finance

Human Resource

Marketing

Temporary

Facebook

Instagram

LinkedIn

Pinterest

Twitter

Vimeo

YouTube

Buttons

Large
Regular
Small
Compact
Hover State
Focus State

Large
Regular
Small
Compact
Hover State
Focus State

Large
Regular
Small
Compact
Hover State
Focus State
Large
Regular
Small
Compact
Hover State
Focus State
Large
Regular
Small
Compact
Hover State
Focus State
Large
Regular
Small
Compact
Hover State
Focus State
Large
Regular
Small
Compact
Hover State
Focus State
Large
Regular
Small
Compact
Hover State
Focus State

Forms

Default
Focus State
Filled State
Error State

Default

Focus State

Filled State

Error State

Default
Focus State
Filled State
Error State

Default
Focus State

Filled State
Error State

Default
Focus State
Filled State
Error State

Components

With the style guide nailed down, I then move onto creating a list of components. I do this by looking at the designs and relevant content to see if anything is missing and then break the designs apart into components. Here’s a look at some key components:

Masthead (18)

Primary background
Primary background with image
Primary background with video
Primary background with background image
Primary background with background image and image
Primary background with background image and video
Secondary background
Secondary background with image
Secondary background with video
Secondary background with background image
Secondary background with background image and image
Secondary background with background image and video
Tertiary background
Tertiary background with image
Tertiary background with video
Tertiary background with background image
Tertiary background with background image and image
Tertiary background with background image and video

Call to action (8)

Primary background
Primary background with description
Secondary background
Secondary background with description
Tertiary background
Tertiary background with description
Image background
Image background with description

Newsletter (6)

Primary background
Primary background with success message
Primary background with error message
Secondary background
Secondary background with success message
Secondary background with error message

Templates

Once the components are built, I then move onto creating page templates. This is important to see how components work responsively together. Here’s a look at some key templates:

Homepage

Components

The homepage template was put together using the following components:

  • Navbar
  • Masthead homepage
  • Content media
  • Call to action double
  • Blog listing latest
  • Section heading
  • Job listing latest
  • Case study carousel
  • Content media
  • Newsletter
  • Footer

Key animations

Whilst building the components I added some key animations – this was to give the user visual feedback on what is happening, whilst at the same time letting Allen Associates personality shine through.

Logo animation

Coming up with a hover state for logos can sometimes be hard. With the Allen Associates brand, I wanted to add a little delight.

Carousel timer animation

Autoplaying carousels, love ’em or hate ’em, sometimes they just make sense. In this case, we wanted to give the user visual feedback of how far they are through the slide.

Arrow button animation

Arrows are perfect to animate. Animating the icon in the direction it’s facing will subconsciously reinforce the action that will occur if the user clicks on it.

Accessibility

I’ll carry out various levels of accessibility testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Performance

I’ll carry out various levels of performance testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Campaign

Components

The campaign template was put together using the following components:

  • Navbar
  • Masthead campaign
  • Register
  • Job listing latest
  • Expert listing featured
  • Newsletter
  • Footer

Masthead campaign shape variations

When designing the masthead for the campaign pages, the design team wanted to apply a diamond shape mask to the image. The most reliable way of doing this (without having to save the image with the mask applied) was to use CSS clip-path.

This method meant we could easily add new shapes (like the hexagon and cross) by adding a few lines of CSS.

Although CSS clip-path isn’t supported in IE and Edge, this feature is considered to be an enhancement and the page will fall back to a square image and work perfectly fine if the browser doesn’t support it.

Masthead campaign cross variation
Masthead campaign diamond variation
Masthead campaign hexagon variation

Accessibility

I’ll carry out various levels of accessibility testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Performance

I’ll carry out various levels of performance testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Expert listing

Components

The expert listing template was put together using the following components:

  • Navbar
  • Masthead
  • Expert listing
  • Footer

Expert listing CSS grid fallback

To build the layout the design team put together using a flat level structure of items (to make it easier for the back-end team to integrate), I had to use CSS grid.

At the time, CSS grid had only just shipped in the latest browsers, so I had to create the fallback design first and enhance it for browsers that supported CSS grid.

Expert listing fallback

Accessibility

I’ll carry out various levels of accessibility testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Performance

I’ll carry out various levels of performance testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Job article

Components

The job article template was put together using the following components:

  • Navbar
  • Masthead
  • Job article
  • Footer

Job article structured data

With jobs being one of the most important features on the Allen Associates website, it was crucial to get structured data setup for the job articles.

In doing so, Allen Associates jobs get displayed as rich snippets in Google search results, like below:

Job article structured data (Google search results)

Accessibility

I’ll carry out various levels of accessibility testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Performance

I’ll carry out various levels of performance testing depending on time and budget. As a minimum, I use Googles Lighthouse testing tool (with the goal of getting at least 75 / 100), to automate the testing of certain features.

0 Mobile
0 Desktop

Emails

To go with the new Allen Associates website, we also created an up to date email template – used to send out updates to their email subscribers.

Newsletter

Components

The newsletter email template was put together using the following components:

  • Masthead
  • Image
  • Content
  • Image
  • News listing
  • Footer

MailChimp integration

To give the Allen Associates team more flexibility, I integrated the email template into MailChimp – allowing them to swap out images and text; giving them the power to create more unique emails each time.

I’m available for new front-end development and design work

Get in touch