Designer view point in Headstart LMS

Design to Design


So what is Headstart LMS in designer view? Here we discuss the concerns that came across in terms of user Interfaces to the new version of the LMS. As an overall this LMS is with many input fields. In many pages, you can find text input fields, search boxes, radio buttons, drop downs and list goes on.

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.

Login Page


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


There are several unique styles in Headstart LMS in terms of user interface design all over. The blue area on the top of the UI is identical in almost all form like pages in the system. It adds colorfulness to the UI while reducing the emptiness. In chapter area, reports and user profile we can see a left side panel which is dark gray. When considering the page buttons, we used blue color for the primary actions and medium gray for the secondary actions. These simple rules were strictly followed to keep the UI standards throughout the system.

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 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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s