Ideas MadeWeb 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.

Ideas Made Cover Image
The Solution

I began by experimenting with layouts for the homepage, and conceptualising templates. I focused on minimal amounts of typography / copy as I wanted this page to be the window to the case studies which would speak for themselves.

I completed several homepage layouts which would be tested later on, and so then began looking at similar structures for the case studies, and blog pages. At all times throughout the project I had to consider how I would design this in a component based system, as the site had to be simple enough for all members of the team to operate.

I eventually finalised all layouts for the website which were then tested internally by all the team, and approved which allowed me to then focus on the visual language.

Ideas Made Wireframe 01
Ideas Made Wireframe 02
Design systems

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
10 columns | 32px width | 5px Gutter, Margin | 8px Baseline
Ideas Made Columns
12 columns | 82px width | 16px Gutter | 6px Baseline
Ideas Made Columns
5 columns | 63px width | 15px Gutter | 6px Baseline
Ideas Made Columns
All colours used for the project
Ideas Made Primary Colours
Ideas Made Primary Colours
All typefaces used for the project
Covet Typography 01
Covet Typography 02
Covet Typography 03
Covet Typography 04
UI Components
Atomic design system
Ideas Made UI Components
Ideas Made Device 01
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.

Ideas Made Device 02