MISTAKE #1: COURSE CONTENT IS NOT PRESENTED IN A CONSISTENT STRUCTURE
You’ll notice as we go through these points that consistency will be the theme of this video.
CONSISTENCY IS EVERYTHING WHEN IT COMES TO DESIGN.
Mistake number one is having an inconsistent or non-existent structure to how your presenting your course content. Every lesson page is different, some have videos, some have a bunch of text, there’s multiple sections on the page talking about different topics.
There are two big problems with this… one is that it makes your online course look messy, but even more importantly it confuses your customers.
Organization is one of the most important parts of an online course, and a consistent layout creates familiarity with the platform and reduces cognitive load for your users meaning that they don’t have to waste mental energy trying to figure out where everything is.
When we design courses for our clients we create specific page templates for the modules and lessons that are used throughout the entire course.I also provide these templates in my program online courses Academy.
The huge benefit that comes with using a template is that you’re guaranteed to have every lesson designed and formatted the same way. Lending itself to CONSISTENCY. It also makes making changes and managing your course so much easier because instead of having to change something on every page you only have to make those changes in one place. Game changer.
So lets take a look at one of my clients, Tony Robbins and Dean Graziosi’s course, Digital Product System.
These are the templates that we designed for their course. We have the course homepage, the module template, the lesson template, and a template for bonuses. So this model template is used in every module and the lesson template is used in every lesson.
MISTAKE #2: INCONSISTENT TYPOGRAPHY THROUGHOUT YOUR COURSE.
Typography is like the backbone to your design. When typography is used properly it creates a hierarchy to the content on the page which makes it really easy for your customers to understand the relevance and importance of each of the elements.
Typography is one of the primary components that go into your brand style guide which is like a rule book for your brands design. This is something I dive really deep into during my Online Course Makeover workshop where we actually work together over 5 days to create a style guide for your online course but as an overview, when it comes to typography you want to choose a set of fonts that are used throughout your entire brand.Usually no more than 3 – 4 fonts.
One will be used for your headings, one for your subheadings, and one for your body text.
Sometimes a 4th font is used and that’s an accent font. I like to call it a personality font. This font is used sparingly throughout the course but can really add to the design and provide visual variation.
If we take a look back at Digital Products system will see that we use this as the accent font throughout the course in very few places. On the lesson pages it’s only used for the first word of the heading and that makes the page a little more interesting without making it overwhelming or going overboard.
MISTAKE #3: USING IMAGERY THAT CLASHES AND NOT HAVING A CONSISTENT IMAGE STYLE.
This is one of the things that tends to irk me the most. Creating consistency with your imagery can make a massive massive difference in overall feel of your course.
Luckily, you don’t need a ton of imagery throughout the membership site. Our designs have a few supporting images on the homepage but the modules and lessons typically just use the thumbnail images and possibly a hero image in the title section.
When it comes to choosing your thumbnail images you have four different options.
- Screenshots from your video
- Brand photographs
- A consistent graphic that’s used for every thumbnail
Stock images.
Stock images have the most room for error because it’s really easy to make your course look unprofessional if they’re not selected with care. With that said, I do have some tips to utilize stock imagery in a way that enhances the design and doesn’t detract from it.
The first step is to think outside the box when choosing images. Typically, when people look for stock photos they immediately try to find images that pertain to the title of your lesson but this can be really hard to do.
So what ends up happening is that there are a bunch of mismatched images that really clash on the page and basically ruin the entire design.
An alternative approach is to first try to think of an overarching theme that represents the core purpose of your program. Then, instead of trying to use images to match each lesson topic, find images that all fit this theme.
For example, if your course was on meditation maybe the overall theme could be something that represents mindfulness, relaxation, peace, and tranquility. Something that immediately comes to mind when I think about that, is a beach and sunsets. You could then find images of sunsets and the water that blend well together.
This is a lot easier to find for free because there are a ton of really beautiful stock photo sites such as Unsplash or Pexel that are really high-quality.
These sites allow you to save photos to a collection and then narrow down your selections to the ones that look the best together and have a similar color scheme, filter, and overall feel.
My other tip for using stock imagery is to add an overlay to the images so that it gives all the pictures a more consistent and cohesive. Even if you had two completely different image styles, once you add an overlay to it with a blend mode it’s going to make a big difference.
MISTAKE #4: NOT HAVING A CONSISTENT COLOR PALETTE THROUGHOUT YOUR COURSE.
Again this is one of the main elements in a style guide along with your typography also have a brand color system that used in typically do not have more than four colors used throughout the course.
- Primary
- Secondary
- Tertiary
- Accent
Neutral
MISTAKE #5: HAVING POOR NAVIGATION.
You might think that this isn’t design but it definitely is because design is more than just how things looks, it’s how it works and it how it contributes to the overall user experience.
