I’ve long since been a web design enthusiast and have even done some website development myself. I’m often struck by the similarities between the field of web design and that of e-learning. It seems to me that if you want to make the leap to e-learning from the web design industry, your web design experience is a real advantage. In this article, I will go over a few of the areas where e-learning and web design intersect and collide, and identify a few tips from the web design industry can be really helpful and relevant to budding e-learning designers.


Since websites and e-learning courses are usually displayed inside web browsers, they tend to have similar layouts and include many of the same on-screen elements. Just like in web design, e-learning design often calls for the use of headers, footers, menus, and corporate branding elements. These are all important pieces of the pie that need to fit on-screen, regardless of whether you’re designing for the web or for e-learning.

Some of the key principles that guide the design of web page layouts are equally relevant and important to the e-learning layout: is the layout suitable for the audience? Is it easy for users to identify the content they need on each page? Does the layout use familiar conventions? Answer these questions as you put together your layout.


When it comes to navigation for e-learning, a lot of what we know has been learned from seeing what works and what doesn’t for website navigation. Most navigation guiding principles and best practices for web apply to e-learning: Is the course easy to navigate? Is the navigation consistent? Do the buttons and links LOOK like buttons and links? Does the learner know where and why to click? Can learners easily find what they need in the course?

In the web world, they do what’s called “site mapping” before building a new site. This is where developers identify what all the pages will be, their hierarchy, and how these pages will be related and linked to one another. This process helps ensure the navigation will be smooth and functional. In e-learning, we have a similar process called storyboarding where we identify how the navigation will work and how everything will be interconnected. It’s a good practice to always storyboard your projects to make sure the course you produce includes all the content and navigation you need.

Technology Constraints

Web developers might be comfortable throwing around terms like optimal screen resolution and cross-browser testing, but these are terms that are relatively new to e-learning designers, who, historically, haven’t been too concerned with these things. With the advent of mobile learning in particular, the constraints of technology and devices are becoming more and more pronounced and important for e-learning.

Today’s e-learning designers can’t count on developing content solely for a desktop computer. They must also be able to develop learning experiences for a wide variety of devices, which have different requirements, bandwidth, screen sizes, memory cards, etc. They must also be able to understand the need to do cross-browser and cross-device testing to ensure that everything works as it should across varying conditions.

Constantly Evolving Industry

One of the most exciting aspects of working in the web industry is the fact that it’s always evolving. The technologies and best practices change from month to month and year to year. True, this means that things never get boring, but you have to be able to learn and adjust on the fly. This also applies to e-learning design, where the technologies are always changing to meet the ever-changing requirements of the modern workforce.

Now can you see more of the similarities between web design and e-learning design? They really are like long-lost siblings! If you have a web background and want to make the leap to the e-learning industry, you already have a solid knowledge foundation in place that will help you with the transition. Do you have any other tips or observations about how web and e-learning design are related? If so, please leave a comment below!

You can always sign up for a fully functional, free trial of Articulate software. And don’t forget to post your questions and comments in the forums! We’re here to help. For more e-learning tips, examples, and downloads, follow us on Twitter.