Ideas Made

Responsive Web Design

The Challenge

I joined Ideas Made, who had an existing website and a solid idea of the direction of the brand. However the website lacked consistency, and didn't exhibit the professionalism that the brand demanded. The proposition was to keep things simple, confident and sophisticated.

The website had to be responsive, flexible and feature space for case studies and a blog which also required functionality and various layouts.

The brand was mostly complete and the logomark had been created, and a typeface had been selected and I was required to make these elements work within the new web design.

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

Design System

I started the project by experimenting with various grid systems, and baseline grids which would help determine my typography at a later stage. I finalised the desktop grid and then experimented with responsive variations for tablet and mobile until I was happy with unified system.

Following the brand guidelines and the existing choice of typeface, Neue Haas Unica Pro for the main body copy of the website, it required a complementary typeface to break the text up and add hierarchy to the site. I chose Sentinel as the secondary typeface as it adds great contrast between the two and visually splits the content making it easier to digest.

I then began to experiment with colour. The initial branding was kept minimal in just black and white, and so I wanted to use colour to emphasis elements and certain components throughout the site such as buttons, links and maybe parts of text. I chose 4 colours for the brand, which were tertiary and worked incredibly well with the slightly off black primary.

Grid System

Desktop, tablet and mobile breakpoints

1024

Tablet Grid System

768

Mobile Grid System

375

Typography

Modern yet elegant typeface pairing

Neue Haas Unica Pro

Sentinel Semibold

Colour

Bold, dynamic and flexible colour palette

#202026

#FFAE00

#FF004C

#00BD91

UI Components

Small selection of atomic components

Final UI

The final website is a blend of professionalism, clarity, finesse and style. The black dominates the pages but the contrast between (this) the white text and the subtle use of vivid colour throughout enhances the visuals, creating a compelling experience. The layout and UI have been created to emphasis space and minimalism, yet framing the importance of details which are present.

The case studies and blog pages equally work well on the dark background, and the subtle low contrast images sitting in the backdrop add a new depth to the website. I purposely wanted it to feel spacious, elegant, and have a slight editorial sense.