Brand & Website Design

Quest Research November 2014

Quest Research is a passive talent sourcing firm providing specialist recruitment research services. I redesigned their brand and website to give it a bit of a refresh.

quest research website
logo sketch
light logo
dark logo

Designing the brand

After talking to the client and doing some research into the company, I decided that the brand needed to have a professional, corporate aesthetic that still appealed to those in the technology sector. We wanted to create a symbol that represented the company and its ideals of speed, agility and intelligence. Our belief that a relatively small company can still be powerful was also something we wanted to capture in the symbolism.

We threw some ideas around and started looking to the animal kingdom, particularly birds, for inspiration. We discovered that the kingfisher, although relatively small and unassuming, was a fast and intelligent hunter – a perfect symbol for a company that uses technology and data to hunt for talented human resources.

I sketched out a bunch of ideas (above left) for the logo symbol, concentrating on the shape of the kingfisher. I wanted to take a more abstract approach and focus on representing the bird’s wings in different ways. I started using curves to draw wings in various shapes and sizes, but soon realised that sharp lines and angles would help me portray the speed and agility we were after. I kept the logo design very minimal and paired the symbol with clean sans-serif typography as seen above.

typography styles
business card
colour palette

The complementary blue and orange colour palette (above) was inspired by the kingfisher’s brightly coloured feathers. We went for clean and crisp typography, using Proxima Nova throughout in varying shades of grey. The business card design (above right) was clean and simple, printed on classic thick matte stock, which went well with the brand.

mood board
iconography

Imagery needed to portray movement, speed and beauty. We used beautiful photos of kingfishers in their natural habitat, some of which can be seen in the mood board above. Action shots were especially effective at conveying speed and power. Simple line art was used for the iconography, giving a more technical feel to the brand.

sketch of the responsive design
homepage sketch
sitemap

Planning the website

When designing a website, one of the first things that needs to be figured out is the content. What are you trying to say with your website? Once the purpose of the website is clear, you can find the most effective way to deliver the message. It was clear that the client basically wanted a brochure website that outlined their services and gave potential customers an easy way to contact them.

We decided to go with a simple one-page website broken up into five sections as seen in the sitemap above. Clicking on a link in the top navigation bar would slide the user down to the appropriate section of the page. I used a two-column fluid layout for each section, which stacked into a single-column layout on smaller devices as seen in the sketch above. I sketched out wireframes (above) for each section of the site to block out the basic elements and to give me some blueprints to work from.

homepage design

Designing the visuals

Now that we had a brand, a website blueprint and content to work with, it was time to open up Photoshop and push some pixels around. We wanted the design aesthetic to be minimal with a strong focus on content and typography. A lot of the hard work had already been done creating the wireframes. Now it was simply a matter of experimenting with colours and layout and also creating the image assets.

On the above homepage, the image of the kingfisher moves independently from the background to create a subtle parallax effect. The navigation bar is stuck to the top of the browser and follows the user as they scroll, to ensure that they can easily navigate to different sections of the page. I also thought it would be nice to hide the navigation bar when the user scrolls down to get it out of the way of the content. It reappears when the user scrolls up.

website services design

The services section (above) is divided into blocks of content, with a solid-coloured block and image used to divide each section. Text was centred vertically within each block, which was actually pretty tricky to code given that it’s a fluid grid and the text blocks have dynamic heights. I used a large centre-aligned quote to complete the section.

team section design
about section design

Truly responsive images

When coding up the website, I wanted to ensure that images were responsive. I’m not just talking about adding “max-width: 100%” to your images; I mean actually serving an appropriate-sized image to the user based on their device. After looking into this a bit further, I found a future-proof method of setting up responsive images using Picturefill 2.0.

The picture element is a standard W3C HTML element that allows developers to deliver an appropriate image to users depending on their screen size and resolution. Picturefill basically enables full browser support for the picture element so that we can use it today. I created small image assets for mobile users and larger ones for those with larger screen resolutions and optimised all images using JPEGmini.

responsive-website-design

A great result

It was refreshing to work with a client who understood his business so well. We were able to work together to create a website and brand that not only fulfilled its purpose, but was one that we could both be proud of too.