THE STARTING POINT
While you shouldn’t judge a book by its cover, designers recognize that appearances and first impressions DO make a HUGE difference. You need to capture the user’s attention right away, and how else do you do that other than at first sight? Furthermore, we are responsible for how visual information and infographics are presented, along with any supporting graphics that might aid the learner’s understanding. This gives designers at NogginLabs a wide range of different design tasks at the beginning every custom eLearning development project.
Designers begin with static mock-ups of how the course is going to look. In these initial mock-ups, we go into great detail of how the course is going to work and function, because these are the blueprints the programmer uses to create the functionality of the course. Depending on the client, sometimes we have to stick close to brand standards; other times we get complete design freedom.
We make sure we have a strong user interface and user experience (UI/UX) design so the learner intuitively understands how to navigate the course and use its various functionality. Having a strong UI/UX is critical in eLearning. If a learner looks at a course, but can’t find the main menu, back button, or even figure out how to navigate around a page, that is BAD NEWS.
While want our courses to be visually stunning, our bottom line is that we want the learner to learn. When designing courses, designers have to think about how the course is going to function as a whole.
After the programmer sets up the basic functionality of the course based on the initial mockups, the designers “skin” the course using CSS/HTML—or Flash, if required. (In very simple terms, HTML controls how the page is structured, while CSS defines how it looks. Flash is a proprietary platform that serves a similar role to CSS/HTML, though it has separate requirements.)
“Skinning” is the process of translating the look of the static mock-ups into programmatic styling—essentially, we’re reproducing the mockups in a useable form. We use styles like background color, font styles, margins, and transitions that are all web-compatible.
FILLING IN THE DETAILS
Designer responsibilities go way beyond layout and functionality design, however. Most of our courses use animation to some degree This means we create a lot of custom animations that are great way to teach a lot of content to the learners in a fast and fun way. We also deal with a lot of custom illustrations in our courses, so many of the designers here are very talented in filling that need, whether it means vector-based elements or freehand illustration.
Overall, custom eLearning designers are not one-trick ponies. We get a great opportunity to employ a variety of design approaches and philosophy, depending on the needs of each particular course. It’s different from many other design jobs out there, which are often tied to a singular house or brand style.
Ultimately, with the help of programmers, writers, and instructional designers (the 4 Pillars), we all get to come together to create unique courses that everyone at the company can be proud of and excited about.