Design to Design
When coming up with a user friendly page design, what we have to do is challenging. We needed a solution for keep away the boredom of filling those input fields from the user. However we had to deal with very important facts that we can’t ignore in LMS feature wise as well. The other most important fact is that we cannot disturb to the contents. Whatever we do, it should help to highlight content rather than disturbing the content. So we had to stick to a cool color palate that helps user to read.
Use of Material Colors
Material Design is a design language developed in 2014 by Google. Along with Material Design, they introduced Material color palate. Those colors are very cool and work with flat design which is nowadays popular design trend. In Headstart LMS, we use two main colors. Blue and Gray colors that selected from Google Material color palate. Blue color represent “Wisdom” and the Gray color is a very balanced and formal color. We expect these colors themselves provide the valued message given by the Headstart LMS to its users.
It’s not much to look for in feature wise, But login page is the first impression of the LMS. They say “less is more” So what we done is simply keep it simple. We decided to go with wallpaper base login page and is it very easy to customize in such design. When we developing the LMS to a specific client, we can just put a wallpaper that relevant to the client like a company building, a logo, etc. it helps to feel client or the company that LMS as one their own system.
In Headstart LMS latest version, Main entry point is the Dashboard. Basically this is the place were user once login and navigates into. Headstart LMS is a complicated system in feature wise hence, we didn’t want to make it more complicate with the user interfaces as well. We used Google material design principles to arrange deferent sections in this UI. Because material designs are clean and minimalistic. Here many details are displayed but with a view that is not so crowded.
General User interfaces
Introduction of Icons
We used icons as much as we can for reduce the action words on the system. It helps to keep the minimalistic appearance. But we had to be very careful because icons should supply the meaning of its task. Otherwise user will get confuse. Mostly we selected icons from fontawesome.com. And some icons designed form scratch. It was a challenging yet an exciting experience to come up with such icon designs to the LMS.
Animations can give life to a website. We created some cool animated icons for our LMS landing page and it works really good. And also there is animations in helps tips and the notification popups. Not only icons, simple collapsing and extending actions in menus, sliders, chapter, lesson views and even animations in small arrow icons has given a lively experience as we intended. Provision of the best user experience is one of the main facts that we needed to highlight with our LMS UI designs. Simple and formal view was a great combination to have in a learning environment.
We believe we were able to give that well established background to our LMS users especially in terms of UI designs.