How to make a great education website in 2020 | W3 Lab

How to make a great education website in 2020

Knowledge has never been more available to us. We are free to browse the internet to our hearts’ content and learn a ton of useful and interesting information.

Thanks to education websites, we are able to inform ourselves about educational institutions, download books, watch informative content, refresh our knowledge from school so we can help our siblings and children with their homework, you name it.

If you’re planning to create an education website for one of those purposes or for a completely different one, keep on reading, because today we will look at what makes a great education website and how you can make your own.

How to make a great education website in 2020 – Table of contents

  1. Start from the basics
  2. Quality pages (especially the homepage)
    • Smithsonian Learning Lab
    • SkillShare
  3. A well-designed and placed navigation
    • LearnWorlds
    • National Geographic
  4. Great education website design examples
    • Domestika
    • SparkNotes
    • Teachable
    • Google Arts & culture
  5. Other features of a good education website
    • Clear and accurate information
    • Testimonials
    • Blogs
    • Usage of other platforms
  6. Finishing up

Start from the basics

In web design and development, the basics include buying a domain name and hosting.

Buying domain names has never been easier, and services provide the fastest hosting, so your website is at maximum performance and speed at all times.

Whichever service you choose for your domain and hosting, it is of utmost importance that it provides your website with protection from hackers, so your visitors’ personal and credit card information is safe.

security certificates of godaddy website
The security certificates of GoDaddy, a UK domain and hosting service

People will be spending a lot of time on your website and downloading files, and if they don’t feel safe on your website, they simply won’t risk it. They’ll close it and find another website they feel safer on. Let them know that they can trust you and your education website.

Quality pages (especially the homepage)

How many times have you visited a website and seen an ugly eyesore of a homepage, which prompted you to close it immediately? I don’t know about you, but it happens to me all the time. In fact, it must have happened more than 20 times while I was working on this article alone.

the Google search for '90s websites - google search 90s websites
The Google search for ’90s websites

It’s true, websites were designed this way so they could be accessed anywhere and with no amazing internet connection, but it’s not the ’90s anymore and there’s no need for websites to still look like that.

The Internet has gotten faster and people don’t want to be looking for hours at websites with bad designs, let alone websites with bright colors that make their eyes hurt.

Additionally, these websites weren’t even responsive, because mobile browsing wasn’t huge back then, and could only properly be accessed via desktops. Today, we have smartphones, tablets, laptops, and notebooks of all sizes, and most importantly, websites are built to be fast and load even with bad internet speed.

So, don’t be afraid to step away from boring designs. Just because you’re running an education website doesn’t mean that it has to have the most basic and monotone design ever, with tons of text and no images.

Find out more about: When is a time for a redesign?

Your homepage is how you convince people to try your platform. Let’s look at two websites that did this right.

1. Smithsonian Learning Lab

Look at the website for the Smithsonian Learning Lab:

The Smithsonian Learning Lab website - education website example
The Smithsonian Learning Lab website

They used 3 large high quality photos, which transition one into another. I love that 2 out of the 3 photos have colors on them that match the colors of the links of the menu.

The menu itself is simple and on the left of the screen, easy to find and use. As you scroll down, you will see each of the menu links’ descriptions on white backgrounds, so you can focus on the text. They also have custom graphics in the colors of the links.

custom graphics - color use - elegant color use
Note the clever color use and custom graphics

There’s no reason not to give them a shot, stay on their website for a while and browse pages and pages of their interesting content.

Their website features a simple, yet effective and eye-catching design, with unique graphics and little animations.

2. SkillShare

Here’s the homepage of SkillShare, an online learning platform:

skillshare website homepage
Skillshare website homepage

They used a video for their homepage background, which has been a web design trend in recent years. The video itself is beautifully shot and optimized, so the page has no issues loading.

As you scroll down, you will see more beautiful images surrounded by whitespace, and you’ll spot subtle use of colors when it comes to lines and call-to-action buttons.

The part of the homepage where they feature their creators is especially effective for convincing people to try their service.

SkillShare's creators
SkillShare’s creators

A responsive and optimized website

Both of these go hand in hand with security: they’re all crucial for any type of website.

A responsive website is a website that can be accessed on all kinds of devices, no matter the size. And today, when the vast majority of people are browsing from their phones, making your education website responsive is a must. Enable people to access your materials and pages through their small devices on the go.

Website optimization is all about optimizing elements for the sake of speed and performance. If your education website has a lot of downloadable content and images, they cannot affect its speed. Search engines also prefer faster websites, so your education website’s performance has to be top-notch.

A well-designed and placed navigation

Well-designed navigation involves a menu and links that are easy to navigate.

People are coming to your website for knowledge and information. Do your best to make it as easy as possible for them to find whatever they need.

Abstract designs may seem attractive, but they can be confusing for the visitors and cause them to get confused.

I’ve visited many websites where the navigation either didn’t exist or was hidden, and in most cases, it worked for the websites. But those websites were either related to art or fashion, and the confusing navigation was part of the experience.

When it comes to education websites, try to use a conventional menu and navigation. Creativity is good, but when it comes to menus, it should be ignored. Let people know what your website entails in the first 5 seconds of their visit.

Let’s see two websites with two different navigations:

1. LearnWorlds

Here’s the website of LearnWorlds:

education website homepage - learnworlds homepage
The LearnWorlds – education website homepage

They used a lot of whitespaces, putting the images and text into focus. The shades of green and yellow aren’t seen every day, adding a unique note to the website. The important parts of the text are highlighted with the colors, while the call-to-action buttons are green. They also have custom adorable graphics featuring both colors.

But most importantly, the navigation is on top and in the center, between their logo and call-to-action-buttons, the most usual navigation location. It’s as simple as it can be: two options have small drop-down menus and both feature 4 more links.

2. National Geographic

The National Geographic website does this a bit more differently:

When you open their website, you will see their homepage, featuring a ton of news. The news articles are then followed by their shows, travel-related content, photo of the day, and many more.

national geographic homepage
The National Geographic homepage

The menu is located on the top left side, and it is a huge drop-down menu, covering the entire screen once you click it.

They wanted to place the news and the stunning images into focus, so this menu placement does not present a problem. People primarily visit their website to read informative articles, which is probably the reason why they decided to go for a bit more unconventional menu and place their articles first.

national geographic menu
The National Geographic menu

Great education website design examples

As you can see, education websites come in all shapes and sizes. They vary in color schemes, interface design, navigation and element placement, and so on. If you still need more inspiration for your education website, here are some more great education website examples, so we can see what they did right.

1. Domestika

Domestika is an online learning platform which offers courses on a variety of art-related skills, like photography, design, and painting. Here’s what their homepage looks like:

domestika homepage
The Domestika homepage

The second you click their website, you know that their focus is art. They used a unique graphic for the background: an image that encompasses both a pixelated and a realistic art style, and elements drawn in different styles.

Their headline describes them in one sentence, and the subheadline is there to put the headline into focus and offer additional information about their service.

The navigation is minimalist, easy to see, and use. To make it as simple as possible, they included all the options unrelated to the courses under the ellipsis, and, if you hover over the ‘Courses’ option, you will get a clear drop-down menu of all course types they have to offer.

domestika website navigation
The Domestika navigation

The call-to-action buttons are in a stark orange hue and easily stand out from the black line of the navigation and on the light blue background.

The visitor’s first impression is a vibrant website that is unafraid to be bold and use colors generously. But as we scroll down, we notice that the rest of the homepage is mostly whitespace. This is so their creators and their classes can be what we focus on. I really love how it, too:

the creators on domestika
The creators on Domestika

Each course has a short and accurate description, and there are also tags for the best-seller courses and new ones. Underneath, they listed all the benefits of their platform, letting the visitor know exactly what they will be getting if they sign up for it:

education courses webpage
Education courses webpage

2. SparkNotes

SparkNotes is a great example of an education website that knows their audience, or readers. Let’s check out their website:

the sparknotes website
The SparkNotes website

The website is simple and straight to the point because the visitor is there either to refresh their memory of work or to better understand parts of it that are complicated to them.

The color that dominates is blue, usually associated with wisdom and intellect. The navigation is simple and it includes 4 options: Shakespeare, Literature, Other Subjects, and Blog.

Shakespeare summaries and interpretations are what SparkNotes are mostly known for, hence why he takes up the primary spot in the navigation.

unique graphic design
The Shakespeare page, note the unique graphics they used for each play

All the information on the website uses a simple language, with no complicated phrases and obscure words, so the students that use it have an easy time trying to understand the written works they’re reading for class.

3. Teachable

Teachable is an education website with over 23 million students and more than 257.000 active courses. Let’s see what their website entails:

the teachable homepage
The Teachable homepage

The homepage greets you with a simple design featuring navigation in its usual spot and abstract background. The special offer is placed into focus, and note the color of the call-to-action button for it – it’s orange, purple’s complementary color. This makes the button stand out even more from the rest of the website.

Scrolling further down, you’ll notice stunning high quality photos, accents and text in a unique shade of green, and custom graphics featuring the green and orange:

teachable education website homepage
Scrolling further down the Teachable homepage

The website feels uniform, and all the smiling and relaxed people in the photos are there to tell you how easy this service is to use and how good it is.

4. Google Arts & Culture

Here’s a website I, unfortunately, didn’t know existed until I started working on this article. Google Arts & Culture is a hub of knowledge and information, with some special and amazing features. Let’s take a look:

google arts and culture website
Google Arts & Culture

Just like every other service that Google provides, it has a minimalist design with a lot of whitespace. Since the focus of the website are photos and paintings, the images accordingly take up a lot of screen space.

Just like the homepage of Google, the navigation for this education website is on the top right. However, this is the basic navigation, and if you click the three lines on the top left, you will get a bigger navigation, if you know exactly what you’re looking for.

the explore option in navigation bar
The Explore option in the navigation

What makes this website stand out from all others is the fact you can explore and find content via different ways:

  • you can explore with Google Street View
  • there’s an option to find content by color and artist
  • you can choose the option for Google to show you images in high definition that you can zoom in and see all the details
  • you can explore by time and learn about a specific time period
  • there’s exploration in 3D, so you can get a new perspective of historic locations
  • and many more
the google color explorer
The Google Color Explorer

Other features of a good education website

Aside from clean and cohesive design, here are some other features that you can include into your education website that will make it better:

Clear and accurate information

We mentioned information plenty of times in this article, so let’s dive a bit deeper into it.

Education websites are all about knowledge and information. But if the information on your website is hard to understand or is convoluted, people won’t learn anything.

Don’t force your visitors to use a dictionary or a thesaurus and present all the information in a clear way. I suggest asking your friends or family for their opinion and if there are any parts they don’t understand or think they need more information on.

oxford university website
The website for the University of Oxford

Similarly, make sure to include all the necessary information. If you’re building a website for an educational institution, let’s say a university, it will need to contain everything a student would need to learn about the university, what kind of courses they provide, how they can apply, necessary documents needed for application, and so on.

Testimonials

Even if your website is free and doesn’t include any paid options, testimonials from satisfied clients are always a good thing to have. They show visitors that you care about the people who use your education website, and they also convince them to give you a shot.

Because, what’s more convincing that a genuine review next to a smiling face?

testimonials on education website
The testimonials on the Kajabi website, which helps people learn how to manage their business

Blogs

Having a blog is beneficial for a number of reasons: it shows people that you’re active, that you care about updating your website, and it also shows them that you follow current trends and topics and have something smart to say about them.

It is also a great SEO boost, and will help your website rank better on search engine pages. There are no downsides to running a blog, so if you have the time, we definitely recommend you trying your hand at it.

The SparkNotes blog is updated frequently and its aim is to make people laugh and share their posts with other people. Their posts are so popular that you will frequently see them on social media, as well.

the sparknotes blog
The SparkNotes blog

Usage of other platforms

Does your education website involve written tutorials, which have the aim to help your visitors? Why not also make them in video form, so people with short attention spans and people who find it hard to read text on screen can also follow your instructions.

Make a YouTube channel and upload your tutorials there, and then embed them on your website pages.

Finishing up

Education websites have a diverse range of designs. Some are serious (think of educational institution websites), some are colorful and cheerful (think of websites meant for children), the ones meant for students have memes and everyday language, while some combine colorfulness and modern designs.

But they all have some things in common: they’re responsive and well optimized, they have simple navigations that are easy to use, well-designed homepages, prominent call-to-action buttons, the information on them is clear and abundant. They also often include testimonials from their satisfied clients and run blogs on all things education.

Hopefully, this article helps you with your education website design and provides you with inspiration and ideas.

Thanks for reading!

Hire professionals to develop your education website

Marija Milosavljević
Marija Milosavljević

Graduated as first in her class. Incredibly quiet and shy until the lag in Warframe turns her into a raging death-bunny.

2 responses to “How to make a great education website in 2020”

  1. I just want to tell you that I am just newbie to blogging and truly enjoyed this website. Very likely I’m want to bookmark your blog . You absolutely come with awesome articles and reviews. Thanks a bunch for sharing your website page.

  2. Avatar hiphop beats says:

    Very good post. I absolutely appreciate this website. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *