Website design for a Bristol based marketing agency

As part of a job application, I was tasked with redesigning the website of a Bristol based marketing agency.

The brief stated that the website needed to showcase work to clients, demonstrate their methodology, stand apart from other websites and be reflective of their brand.

Earthy concept board

An earthy, clean and natural colour scheme

I was given a concept board that included these images as a guideline for the colours and feel that the website could showcase.

I decided my first step should be to choose a colour scheme and using the concept board as a guide, I settled on the below four colours in addition to a heavy use of white.

I chose colours which I felt matched well with the company brand values included in the brief: Authentic - Engaged - Accountable.

#48616e | rgb(72, 97, 110)

#949887 | rgb(148, 152, 135)

#dfe0d2 | rgb(223, 224, 210)

#e2dedf | rgb(226, 222, 223)

Homepage design previews on desktop, tablet and mobile

A simple but striking homepage

I wanted the logo to be at the forefront of the homepage layout and I felt the company icon was an easy fit as a navigation link in the header.

I created the vector background using a friend's photo of the Bristol skyline, chosing a vector instead of a photo to keep the file size small.

The landscape isn't identifiable as Bristol's skyline so doesn't narrow a national company down to one area, while keeping the charm of the Bristolian scenery.

Minimalist icons & typefaces

I kept the icons as simple as possible to match the simple colour scheme.

The light stroke icons were designed for use in the footer and mobile menu.

The dark fill icons were for a hover effect and the back-to-top button.

Finally, the dark stroke icons were for use on dark backgrounds.

Portfolio showcase

As requested in the brief, I wanted to make sure the website's portfolio showcase was particularly striking.

The diamond shape of the images are consistent with the shape of the icons.

Mobile menu design
15:5564%GIF of the mobile menu in action

Seemless mobile menu

I created a mock up GIF showcasing tapping the mobile menu button.

A couple of call-to-action buttons at the bottom of the mobile menu make contacting the agency simple.

Adamina Regular

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

1 2 3 4 5 6 7 8 9 0

! ? # @ ( ) & £

For the primary font, I chose Adamina Regular as I think it best reflected the elegence, mood and feel of the images provided in the concept board.

I felt it was also important to me to pick a font that could be easily implemented through Google Fonts.

Source Sans Pro Light

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

1 2 3 4 5 6 7 8 9 0

! ? # @ ( ) & £

I felt Source Pro Light would be a strong choice as a font for all UI aspects and some headers.

While being clearly readable, its light weight helps it avoid clashing with the serif font Adamina.

Source Sans Pro Semibold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

1 2 3 4 5 6 7 8 9 0

! ? # @ ( ) & £

Source Sans Pro Semibold was the typeface I was least sure about being the right fit for the project, but I envisioned it being used sparingly and only on Call to action buttons.

Accessibility options