Skip To Main Content
  • General Best Practices
  • Independent Schools
5 Key Homepage Design Elements for School Websites
Keisha Croxton

As a designer here at Finalsite, I get to work with a variety of clients from all different backgrounds: from public school districts to independent international schools. It’s a truly rewarding experience to be able to work one on one with my clients and help them navigate the world of school website design. Although each school website is unique in their own way, there are still a few common pain points that come up pretty consistently among them.

I recently had the pleasure of working with Karen Piotrowski and her team at Delaware County Christian School (DCCS) during their website redesign. I’ll take you through the decisions they made for their site and how it can help you create a more effective homepage when you’re working on your school’s website redesign. 

1. A defined purpose or goal for your homepage

Many people see homepages and think that they’re a catch all for everything that is important on their website -- this is one of the biggest mistakes that I come across as a designer. Homepages are supposed to be a curated experience. Your homepage should be targeted to achieve certain goals for your school. In short, what do you want people to achieve when they land on your homepage?

The DCCS team had a clear strategy of what they wanted their homepage to do for them. In their design and marketing survey they stated the primary objective of their website was to market to prospective families. As a part of this marketing effort, they wanted to feature their distinctive programs, mission, and core values.

When you first land on their homepage you can see this in full effect. They have a great hero video that helps highlight some of the key aspects of their school, giving the prospective parent or student a chance to imagine themselves there.

Delaware County Christian School (DCCS) website homepage

Immediately after that you’ll see their mission statement with their grade levels. They’re quickly letting you know who they are and the different ways students can grow at their school. 

Delaware County Christian School (DCCS) grades

Following that are some superlatives about the school to give prospective families a little more insight to the school.  

Delaware County Christian School (DCCS) infographic

The news and events are strategically placed that the bottom of the page. The DCCS team knew that this type of content may not be as important to prospective families. In this case, news should be geared toward prospective families so the school looks active with regular events and activities, which can also serve as a way for current families to stay up-to-date.

Delaware County Christian School (DCCS) news

Having a clear goal for your homepage (and school website overall) makes it easier for users to find what they need quickly and understand what you would like them to achieve. It also makes it easier to design your website because there is an objective for us designers to meet.

 Learn more about how Finalsite's designers create award-winning websites!


2. Clear and prominent calls to action

With the concept of a “curated experience” in mind, you need to guide your users through your website. Many people scan websites and don’t read everything fully. This combined with the fact that many people are visual, you need to catch their attention quickly and easily. You should use buttons and images to make these links stand out.

Delaware County Christian School (DCCS) annotated call to action

As you can see, there are very prominent calls to action on the initial view of their homepage. These calls to action also tie into the goals of the homepage. It’s very clear what they want people visiting their website to do. The green links on the side also follow the user down the page as they scroll on desktop, getting smaller as to not obstruct the other content.

By listing out their grade levels, the website guides prospective families right to the content that best relates to them. From there they can learn more about what DCCS has to offer. 

Delaware County Christian School (DCCS) annotated call to action grades

3. Easy-to-read navigation

I know that people want to be creative and stand out with their website; but your navigation should not be an area in which you do that. Unless your school is known for its unique voice or style, please refrain from quirky titles for your “About Us” and “Admissions” pages. Clever wording may confuse users who are trying to quickly find information on your website.

Delaware County Christian School (DCCS) annotated menu

The navigation is clearly laid out with labels that are descriptive enough to let new website visitors know where to find content. The simplicity of the menu also ties in with the overall aesthetic for the design, so it’s a win-win.

4. A single hero image or video

The trend of rotating images or videos is slowly starting to fade away. Many users do no interact with slideshows and simply scroll past them. When considering use on mobile, the chances of someone clicking through your slideshow are even lower.  If you thought you might be able to get around it by autoplaying the slider, that won’t necessarily work either and it also bad for user accessibility. Even though it may be tempting to have multiple messages display in one area, you should think deeply about how an image or video slider ties into your school’s homepage goals.

Delaware County Christian School’s homepage features a beautifully shot and edited video hero. The clean, crisp looping video ties into their website’s aesthetic and the content of the video ties into their goals for the homepage.

Delaware County Christian School (DCCS) hero screen shot

If your school doesn’t have the resources for video right away, don’t worry. A great hero photo is also an effective way to engage visitors to your school website. 

5. Specialized ports of entry (portals)

You can think of your homepage as the front door to your school website, but that’s not the only way people can enter. Considering your school marketing goals for your homepage, specialized portals or pages can keep other important groups engaged. The truth is many website visitors only care about content that is relevant to them

Delaware County Christian School (DCCS) annotated portals

By listing out your community groups at the top, like Delaware County Christian School, helps make sure everyone is finding the content most important to them - quickly.

Delaware County Christian School (DCCS) alumni screenshot

Bonus tip: Take a moment to consider what those portal pages actually look like and what content is most important to that group. Here’s the alumni page on their school’s website. It is a part of the website overall, but has specific content and navigation that is specialized for their alumni.

Key Takeaways

When it comes to creating a successful homepage you need to focus on your school’s marketing goals in terms of the website redesign. Having a clear purpose or goal for your homepage will guide not only your website visitors, but the design process overall. Clear calls to action will get people to the content they need quickly. Intuitive navigation will make it easier for those who want to explore on their own. A single hero video or image is a great way to make a strong first impression on your homepage. Using portals helps engage all the members of your community while staying on track with your marketing goals. 

New call-to-action

keisha croxton headshot

Keisha is one of Finalsite's many talented web designers and front-end developers. She currently serves on the board of directors for AIGA, a professional design association. On a personal level, Keisha loves interesting fashion, traveling to new places with great art museums, and killer make-up and nail art. 

  • Inspiration
  • Web Design
  • Website Redesign
There are no news posts to display

Free 15-Minute Website Consultation

Want feedback on your schools current website? Schedule a free 15-minute website consultation to learn the improvements you can make to your current website to enhance your charter school brand.

Receive a Free Website Report Card

How does your website's design, UX, and search performance compare to industry expectations and standards? Request a free website report card to receive an analysis directly in your inbox!