Designing UI asset library for Shiksha.com
Shiksha wanted to create their own UI asset library which would not just complement their new branding but also encourage collaboration between multiple teams and help them to establish new design language. We had to create one-stop asset & code shop for several desperate teams working together to manage such a complex multi-device digital ecosystem.
CONTENT MAPPING :
UI elements were segregated into three groups based on their inter-dependency.
Foundation elements provide specifications to designers and developers, required to create building blocks and global elements.
User directly interacts with building blocks, still he does not actually identify them separately.
Building blocks are further divided into actionable and non-actionable elements.
User perceives website in terms of global elements.
FOUNDATION ELEMENTS
Coloumn Grid :
Baseline Grid :
The final proposed grid is consists of 12 units with gutter space of 20 px and 10 px margin on both sides. 4 px baseline grid was also included to get help with vertical alignment.
Colour Palette :
Typography :
UI Interaction :
Paper plane was the metaphor used in new Shiksha identity - Flight to Career. So, in order to carry same essence, we decided to use paper folding for visual treatment throughout the UI.
Paper folding effect :
In order to create an effect of folded paper we added a dynamic shadow. It allowed us to achieve desired effect without having any deviation to the edges of a surface as it would have affected the layout or the content inside.
Here are some major surface variations achieved with the help of dynamic shadow :
Surface, while no interaction
Surface, when interaction is on
Surface division, when Interaction is on
Surface, when action is taken
BUILDING BLOCKS l Push Buttons :
Primary Tabs :
Secondary Tabs :
Radio Button & Check Box :
Toggle Switch :
Slider & Scroll Bar :
Pagination :
Auto suggester, Dropdown Menu & Scroll Bar :
Pop up notification :
Text Input :
Alert Messages & Help Text :
Loader l :
Loader ll :
GLOBAL ELEMENTS l Global Navigation Bar :
Search Widget :
Side Navigation & Tuples :
DETAILED DOCUMENT :
The document contains different approach for building blocks as we had finalized on the other identity option for Shiksha. Whereas both approaches share common foundation elements except
UI interaction.
