Ivana McConnell // Blog

Design // Knowillage

Role: Interaction + UX Designer
Worked with: CEO, Development team
Tools/Frameworks: Photoshop

After working with Knowillage on their user interface, I was asked to do a mockup for a new website that would reflect their new ethos and product direction to a varied audience. Minimalism and simplicity were key with such a complex product, and I worked remotely, but closely with Knowillage to establish a professional, yet personable style that they could take forward.

After a few sets of quick wireframes and mockups, the homepage was created first. This page set the tone, obviously, for the rest of the site, and themes from this page were carried through, to maintain a sense of continuity. I also used a grid-based design, so that the site could later be coded with a framework such as Bootstrap or Foundation, should the developers choose to do so.

The imagery was a photograph of the street and building where Knowillage's office was located, and the colours for the site's accents were picked from this image. We didn't want too much bright colour, as the site itself had to maintain a neutral feel, but there were enough accents to give the site a little bit of character. Fonts chosen here were Bree and Proxima Nova Alt.

'Approach' page: As in all of the subpages, the header image is condensed, so as to ensure the content is allowed the maximum space.

The 'News' page: This one had to show a good deal of content without being overwhelming. Each piece of news is reduced to a small snippet, and they are all arranged in newspaper-like columns.

One of the 'products' pages: Each of these pages also had to present a great deal of information, as well as including a video (if applicable). The user also has the opportunity to try the service themselves, and have a glance over some of the macro- and micro-features.

'Partners': The page which showcases those with whom Knowillage had worked in the past, or those who had just signed up to become partners. Each logo is black and white, and would turn to colour on hover.