Kleup landing page screenshots
Transforming a dull website, with little content, into an exciting well organized & modular Landing Page.
Understand
Main Pain Points
Information Architecture
IA needed a completely rearrangement as the current website at that time had several links with very little content, which made users do extra click-work to get to where they want.  
Design
Design was boring, old-fashioned and not user friendly, as main actions within the website weren't clear at all. 
Ideate
Paper Wireframes
Kleup paper wireframes
Rapid iterations of wireframes on paper
To iterate quickly and easily on new layouts and IA structures numerous paper wireframes  were made as fast as possible in order to transform a several-page website into a single Landing Page .
Design
Key Mockups
Kleup landing page mockups
Kleup landing page mockups
Kleup landing page mockups
Design
Colour Palette
Kleup Colour Palette
Kleup's colour palette was made up of 3 main colours (Primary: #3F434B; Secondary: #24D3C4 and Tertiary: #510BDB). In order to make the palette broad enough Primary hues were also added to it, from 900 to 50. 
Design
Iconography
Kleup iconography grid
View of the icons grid
Kleup 40x40px icons
40x40px icons
Kleup 20x20px icons
20x20px icons
In the end a set of around 30 custom icons was created. The set was divided in 2 different categories, as regards size: those within a 40x40px grid and those within a 20x20px grid. Most icons created have: 1Rounded corners from 2px to 4px, 2Stroke weight: 2px and 3Stroke Cap Butt. 
Design
Typography
Kleup typography
Two fonts (Regular & Light) from a sharp and modern Sans-Serif typography were chosen to be used within the project. Stolzl fonts are part of the archive of Adobe Fonts, designed by Mariya V. Pigoulevskaya from The Northern Block. They offer perfect legibility (chief objective), even at very small sizes, and properly used they bring about: rhythm, elegance and modernity.
Design
The Grid
Kleup mockups grid
In order to make design task easier, faster and more consistent across screen resolutions a 12 column grid  was established to lay the design within desktop. The 12-column grid was transform into a 2 column-grid for mobile and smaller screens.
Take aways
Goal Accomplished
After various iterations on paper wireframes and, eventually, mockups, a modern, exciting and with a well structured Information Architecture Landing Page was launched. Thanks to its new IA structure, and a sober yet exciting new design, users can now navigate the site in a faster and more intuitive way than in the past, and best of all, reach their goals effortless.
Back to Top