Project


Indigo

Classification


UX/UI, Brand/Web synergy, Intranet Design, Interactive Web Design & Responsive UI

Description


Indigo is the name of a b2b intranet design agency
based in Manchester, UK. The brief for the Indigo company intranet was to create a unique intranet homepage layout using the brand colourscheme and logo provided.


This brief was completed using Adobe XD, and utilise multiple design elements from interactive to responsive web design. Hover states, components and easing in/out of various elements allow a simple homepage to gain depth and feel more dynamic. Use of white space
between blocks of designed elements allow the layout breathing space, and a thorough, well thought out system of presentation keeps the homepage very user-oriented and user friendly throughout.

The concept I had in mind for Indigo’s intranet homepage was to create an intranet that could be chopped and changed by the company itself to suit its needs- allowing for an adaptable, responsive system, which could change over time alongside the Indigo priorities and values.

Outcome


Intranet Homepage



Full Layout



Utilising components, hover states, reactive buttons and hierarchy, I created a functional, simple, but effective intranet.

C2A and minimal use of the brand’s functional colours grab the attention of the user and guide the eye- in a sea of blues, a splash of red is very effective.


︎︎︎    Components using transition & auto-animate hover states
︎︎︎    Hover states & interactive elements allow user to:
               Understand page position
                Understand what’s hyperlinked
                Understand the outcome of their ‘click’ or ‘tap’
                Feel involved & as though the intranet is responsive

︎︎︎    12 Column Layout Grid
︎︎︎    21px Gutter. 21px used as spacing tool.
︎︎︎    Grid system & spacing system of 21/42/63px spacing
︎︎︎    Adelle Sans typeface gives a friendly, easily legible feel
︎︎︎    Selective use of image to reinforce wording

︎︎︎    Main Colours: 00309B, 1675DA, 7BB5F3, 15F2C7
︎︎︎    Functional Colours: 222222, EA0621