“We want to do something different.”

It’s something we often hear from our clients who want to stand out in their respective competitive marketplace. After all, new is exciting! New is innovative! New is fresh and nothing like the competition!  Still, this request does pose a hurdle. Whenever your website’s design deviates too far from what the visitor is used to and expects, a “cool, fresh design” quickly makes a turn towards frustrating.

Think about it — there’s a reason every shopping website from Amazon and Ebay to Pottery Barn and Gap look similar. (And it’s not because they’re trying to be boring.) It’s because in web design, when something works (and works well!), deviating from the norm is risky. 

So how do you step outside the box just far enough to stand out without jeopardizing the user experience? It’s a delicate balance, one that Finalsite’s design team has the pleasure of tackling every day. 

The following six websites have taken a unique approach to homepage design — nixing common design elements like hero videos and image sliders yet maintaining the staples of good web design, which include: 

• A simple navigation with less than eight options
• Calls-to-action to key pages
• Compelling photo and video
• Minimal text
• A mobile-first approach

Let’s begin!

Norfolk Academy | Independent School

Norfolk Academy, a Virginia private school established in 1728, recently launched a best-in-class website that is bursting with innovative design ideas. Instead of the traditional full-page hero image, Norfolk chose to start the user experience off with a floating slideshow, overlapped by square-shaped design elements and smaller photos along the edge. 

The peripheral squares continue as users scroll down further, and the same colors and shapes are repeated in other panels throughout the site, creating a cohesive and branded look.

 See the squares repeated in the Calls-to-Action panel:

The design also plays around with black and white images. In the sliding infographic below, you can see that only the statistic in question is shown in color. This emphasis helps focus attention to one element at a time.

Similarly, in the “Valued Voices” panel, testimonials are separated into four groups: “Explorers” (students), “Partners” (parents), “Citizen-scholars” (alumni) and “Mentors” (teachers). Each of the four blocks are black and white by default, but on hover, they become full color. Click on the block and you’ll find a pop-up slider with quotes and even corresponding audio clips! 

The school brings life to still images with soundbites throughout the site — just one of the many reasons to check out the website for yourself!

Jakarta Intercultural School | International School

Jakarta International School (JIS), one of the largest international schools in the world, launched a beautiful best-in-class design that highlights its three campuses in Indonesia. Instead of a large hero image, this homepage design features a collage of images and text. 

What we love about the homepage:

• Photos serve as touch points that guide users to interior pages. Each image in the collage is a separate call-to-action, directing traffic to the About, Admissions, Athletics, and Service landing pages respectively. 

• A customized cursor encourages clicks. It’s hard to miss — as soon as the mouse hovers over a clickable box on the homepage, the cursor changes to a blue plus-sign shape. This functionality adds more than on-brand flare; it encourages user interactivity from the get-go.

• Animated transitions from one panel to the next. The  vine animation, which traces in after the content loads, adds extra detail and unifies the various homepage panels. The design also has a deep cultural connection to Indonesian batik and the vines wrapped around the trees at JIS. 

Also, hover over the school buttons and you’ll notice another animation. Rather than simply changing states on hover, the color fills in the box from the bottom up. This simple animation is just another example of Finasite’s precise attention to detail— in Deployment, no section of the site is too small for a bit of creativity! 

Wingate University | Higher Education

Yet another design to turn the hero image on its head — Wingate University. The homepage collage addresses both prospective and current students with a looping video of the campus as well as four clickable image boxes related to current events. 

What we love about the homepage:

• Social media is integrated in a horizontal scroll. Wingate’s use of Finalsite Feeds to incorporate its social media activity onto the homepage is minimal design at its finest. Even the most playful posts still look professional in this four-post layout—a quality that is especially essential in higher education branding. 

• Parallax scrolling emphasizes the school’s mission. The static background on Wingate’s homepage features three main values from Wingate’s mission statement: “Faith, Knowledge, and Service,” providing a subtle yet consistent reminder to viewers as they scroll through the moving elements in the foreground. 

Wyandotte Public Schools | District

This Michigan school district has been around since 1855! It’s since grown to include nine schools, all of which have their own landing pages in this newly-launched website. We are seeing more and more districts making the switch from using their websites as traditional communications platforms (for sharing lunch menus and upcoming events) to pivotal marketing tools — and Wyandotte Public Schools is proof of that.

The custom design has several noteworthy features aimed to engage prospective families who might be interested in learning more about the district, including: 

• An animated “splash” cover page. A traditional hero video, with a twist! The Wyandotte logo serves as an introduction to the district’s website while the homepage loads — such a fun way to reinforce the school’s brand!

• Personalized image buttons for each school. A large percentage of the users who visit a district website want school-specific information. Wyandotte addresses this need by including school navigation on the homepage itself, not simply hidden in a drop-down menu.

• Social media integration arranged visually to emphasize four channels of news. Wyandotte uses Finalsite Feeds to showcase trending content from the school’s Facebook, Instagram, Twitter and recent news stories via Finalsite Posts. The diagonally-ascending design keeps the posts from looking cluttered and are easier to digest.

Vanguard University | Higher Education 

Vanguard University, a private, Christian institution located in Southern California, launched a website that takes marketing to the next level with personalization and targeted messaging.

What we love about the homepage:

The website is catered directly to its three distinct audiences; those looking for undergraduate programs, professional studies programs, and graduate programs each visit the homepage via a different link. 

This design allowed the university’s marketing team to use different language in each individual section. The undergraduate section uses words like  “belonging,” “excitement,” and “fun,” while the graduate section stresses alumni success, ample funding, and convenient schedules. 

Vanguard’s undergraduate homepage: 

Vanguard’s graduate homepage: 

Brentwood School | Independent School

Brentwood School offers K-12 education for students in and around Los Angeles. Known for student excellence in academics, arts, and athletics, the independent school launched a best-in-class website with some really neat treatments.

What we love about the homepage: 

• Interactive letters give the mission statement extra love. Hover over the school values on Brentwood School’s homepage and you’ll notice the letters change into a rainbow of branded colors. This simple visual trick adds an element of surprise and interactivity to three otherwise ordinary sentences. A few extra seconds on a panel is never a bad thing!

• Creative use of typography reinforces the school’s brand.  Drop Caps are traditionally used to mark the beginning of a new chapter in a book. Here, we see them used to separate each section of text on the homepage (and their corresponding interior pages, which are kind of like “chapters!”). The muted yellow is on-brand and yet subtle enough to not distract from the text itself.  

• An animated testimonial panel conveys students’ multifaceted interests. I love when I see a design that just seems to fit the content perfectly, and vice versa. This one is sheer brilliance— two moving pictures of the same high schooler (one from a theater performance and one from a tennis match) join together and are bridged by the student’s testimonial. The student, “Andrew,” expresses gratitude to Brentwood School for encouraging both art and sports— a differentiator that the school’s marketing team wanted to emphasize. Two other student testimonials share their experiences in multiple extracurriculars, as well. 

Looking for more inspiration from schools that break the mold? Check out these websites!

• Chadwick School has a unique design for its social media integration. 
• Parish Episcopal School has a really neat interactive hero. 
• Salisbury School uses an accordion collage as part of its hero image. 
• The Woods Academy scrolls horizontally instead of vertically.
• Tulsa Public Schools' homepage changes colors at each panel. 

Key Takeaway

Finalsite designers continue to impress with innovative homepage layouts, creative animations, and streamlined navigation— without abandoning the standard conventions that website users expect. 

Don’t be afraid to ask our team for something fresh and original. As Nathan Lyttle put it in an interview featuring our award-winning designers, "I love when my clients look outside of their immediate competitors and even our portfolio of designs for inspiration and trust that we want theirs to be the website that the others want to copy." 

ABOUT THE AUTHOR

As Finalsite's Content Specialist, Leah promotes new school site launches and educates people on all things digital marketing. She’s passionate about global communication, handwritten notes, and sole travel. When she’s not exploring new places, she’s either blogging, doodling, or dreaming about it!