New user interface
design
Existing interface
Existing interface
Existing interface
Colors
Koha-community.com inspired color palette
From two greens, one brown, setting a “stand-out” yellow to balance the interface.
Two gradients also created from the 3 mains colors are bringing textures.
Colors presence in the interface
Yellow is only for the (only) main button on a screen
Light Green is the interactive color, for buttons, links, tabs
Dark green is the “selected” color, “where we are”, not interactive
Buttons
Here is a bank of buttons to use
From the less important to the most important,
this bank is suppose to cover all the use
Type
We choose this open-source font for the ease to read and the diversity of weight that gonna be useful through interfaces
Poppins
Poppins
Poppins
Circulation screen
Patrons screen
Catalogage screen
Main input behaving
The main input get condensed
Taking less space, fitting in the header without adding a click
The input, hidden on the first state,
could still be “focus” and shown if user give input/ use the scanner.
Interactive input prototyping :
Toolbar position
The toolbar is pulled on a second ground,
with few opacity and align left, it allows the main content to stand out on one hand,
and it facilitate the readability of the all screen from the top-left to bottom right
Toolbar position
Tabs kept the link with the main container
by using the same color and removing any border.
This disposition really helps users understanding the purpose of the menu on the left and the link with the content on the right
Arrays
Arrays become lighter, with fewer elements,
“Export” / “Columns” buttons pulled on a second ground
No vertical/horizontal line, no background on header,
Sorting columns button available on hover/ on click in the header
Thank you !
Have feedbacks? :)
Feel free leaving feedbacks directly on this presentation
with the comment section,
…for everything else,
I’m available via this email :