Creating an app or web interface is a complex task which requires a variety of skilled people, business analysts, programmers and graphic designers. When it comes to designers, UX and UI work alongside each other in the first phase of development. User Experience (UX) Design taking the lead on the skeleton. This defines how it works, and how it will be used by the end-user. The User Interface (UI) Design then creates the visual concept. In theory, from a skeleton design this should be easy. But in fact, the UI Designer will face crucial problems of fulfilling both the needs of the project, as well as staying within the lines of graphic design. Sound familiar?

The UX Designer in elearning is essentially the content author. The person who writes the course content effectively and sets up the skeleton of a storyboard. Much like setting up the information structure for an app or web layout! The UI Designer is then the graphic/instructional designer that comes up with a brand related design for the course. One that fits the content in with ease.

In this post, I have decided to pull together and describe which basic rules of UI Design are crucial for elearning projects and constitute the core principles of creating a course interface.


1.      Get to know the user

As with anything created in the design world, knowing whom it is created for is a crucial part of development. It determines both how it works and what it looks like. As with app design, we have our all-important factors that may affect designs depending on the programme used. Among these, the following should be taken into consideration: experience of users, what platform they will be using, goals to achieve using the course (learning outcome), how often and what time of day they will use it.

As with UI Design, work should begin with an analysis of these factors. They are then translated to the design effectively.


2.      Keep it simple

Minimalism is seen in design across both the internet and mobile devices, has been a trend in recent years. It has also become a main rule of design for these areas. The term ‘minimalism’ stands for the use of simple forms. A wider concept including numerous aspects that are intended to make the interface user friendly. These aspects could include: transparency, simplicity, visual hierarchy, eliminating unnecessary details, careful choice of typography (this one if a must for elearning design!), and a careful placement of the layouts’ white space.

A good design cannot just be aesthetically pleasing and visually attractive, it must fulfil users’ needs –  be intuitive and useful. If the design is familiar and on trend, certain aspects can be easier to use than others. You can recall an encounter with it; for example, folder-style tabs are used for navigation on websites and apps. Users of elearning will also recognise this, recalling using it on the internet.

The use of the ‘arrow’ is a minimal and widespread design. A design that is probably older than me and you, used on both the internet and mobile devices. This brings in the debate of having instructions in elearning courses. Why fill the course with unnecessary details when you use familiar iconography and design elements that are used on a day-to-day basis, 24/7? Most of all, do your users really need to be instructed to click a next arrow? Chances are if they have use of the internet and a smartphone, they won’t need an instructions. Relate simplicity back against getting to know your user. The end user especially.


3.      Stay consistent

Keeping a consistent design with interface is highly important. It allows the users to recognise usage patterns and relate to the iconography used. A UI Designer must remember to keep the same style of all elements throughout the project. Just like an elearning course, it should work against many different screens in the project.


4.      Hierarchy of elements

You can set a certain path through the project by creating a good hierarchy of interface elements. A complimentary colour palette, type sizing and even distances to the pixel, can help retain the users’ attention and achieve any goals.


5.      Contrast and colour

Both contrast and colour are important elements of graphic design. Whether designing for web, app or elearning, both closely combined at the same time. So, within an elearning project it is a technique to code specific things. Such as buttons and toolbars. This aids the user around the course and again, becomes a familiar and consistent trait. Part of the hierarchy of elements.

A colour theme must consider multiple factors including, brand guideline, user functionality/friendliness and the situation the course will be used. As a rule, two or three main colours are used. Contrasting elements is crucial for readability and user friendliness. Some colours will work well with each other, whilst others will clash. Checking against a colour wheel is one of the best methods to find contrasting colours.



These are just a few of the basic rules of UI Design that are crucial to designing an elearning course. Without any reference to these aspects, the courses produced in our industry today wouldn’t stand the test of time. Design is constantly evolving, and so are the technologies we see on a day to day basis. UI Design rules help keep the industry up to date and on trend. Also appealing to newer generations while teaching learners successfully like never before.

Share This