Your school website is live and looking great, but then comes the unexpected — employee turnover, a wave of additional users, and suddenly dozens of pages are added haphazardly and your site is quickly turning into chaos. 

Where do you turn to bring order, establish visual consistency, and empower new users to quickly create pages that meet your brand guidelines? Your school’s website style guide.

A website style guide for your school is a time-saving, brand-boosting resource for your school marketing team. A style guide means you don’t have to reinvent the wheel for every page you create — it saves your team precious creative time and brainpower, and it ensures visual consistency across your entire site.

Whether it’s your homepage, a landing page, or an interior page deep within your sitemap, following a visual web style guide brings a cohesive look and feel to every page on your site, reinforcing your brand at every click.

So how exactly does this resource come into play during the redesign process, and how can teams expect to use it? Let's take a closer look! 

What is a style guide in web design?

A style guide in web design is an internal reference for the visual elements used across your school’s website. It lists which typefaces and fonts should be used, what logos are utilized, the colors and formatting of each page, and how the design elements should be used, all of which help to form a cohesive look and feel of your site. When you redesign your school website, your brand guidelines are an integral part of the process because once your new website is live, your team takes responsibility for following the style guide and supporting your brand.

It’s important to remember that launching a new website can open doors and bring an endless amount of creative freedom, so long as the content and design remain within the framework of the style guide.

How do you create a style guide?

If you design a school website with Finalsite, you’re provided with general instructions and a style guide for managing your website. Remember: A school website is a living and ever-changing piece of art — schools are constantly updating their websites with news articles, curriculum and staff updates, testimonials, new event landing pages for parents, alumni and anniversary events, and the list goes on.

But when it comes time to start a new page or make revisions to a section of your site, there’s no need to stare at a blank canvas. Using your style guide as a reference point will help get you started, as it provides all the building blocks to create new pages easily.

That’s especially true for your school’s homepage. Keeping your homepage fresh and up-to-date is crucial, but some school marketers are terrified of updating it. Fear not — detailed instructions are included so that you can update those hero images and videos and other page content all on your own!

What should a website style guide include?

The style guide provides comprehensive examples of all of the visual elements that make up your site's unique look and feel. This includes how text should look, alternate fonts, boldface and italic text styles, headers, lists, page layouts, and maybe even custom design elements. You can also view the primary colors used on the site, callout buttons used to draw attention to links, and other style components.

Kent Place School, an all-girls school in New Jersey, uses a comprehensive style guide that helps keep its new best-in-class website in check. But as you can see, the style guide goes much deeper than just fonts and a color palette. It includes instructions for navigation, images, and various page layouts, and the flexibility for displaying content elements, like Posts, Calendars, and Resources on pages. Each school’s style guide is unique and provides your team with guidelines to keep your site up-to-date and on-brand.

Whitgift School’s Director of Marketing and Communications, Hina Ghurma, shared: “We have found having a style guide has allowed us to stay consistent across our team. Each of us has a different way of approaching the building of pages, so the guide created by the Finalsite team shows us, step by step, how to maintain a consistent look and feel. At the design stage, we were keen to ensure maximum flexibility within a set of parameters and this was delivered really well by the team. We now add and evolve the guide as things change and it has been a great place for new joiners to explore and learn.”

Creating consistency with a style guide

We all have seen web editors that decide to be creative and use unbranded fonts and colors, clipart, and wonky navigation, thus creating an "interesting" webpage. Your style guide helps keep rogue players focused and avoids creating content that is off-brand.

And, for school districts that have many content editors, it’s critical that everyone is using the same guiding principles. Maintaining harmony across all your district sites will help build a consistent user experience, show professionalism and care, and ultimately help bring your community together through cohesive messaging and your brand identity.

Prairie Point Elementary School, part of the Park Hill School District, includes key information on page appearance, banners, images, and more. No matter who updates the site, detailed instructions are readily available.

When you are crafting a new page, it’s important to first ask the following questions:

• What is the page’s intent?
• What do you want the user experience to be?
• Who is your audience?

Once you have answered these questions, you can begin the process of designing your page. Say you want a three-column layout; you can quickly clone the layout from the style guide and choose where it needs to live on your website, all in just a few clicks. Add your content, test it out on mobile devices with Finalsite’s Preview Tool, and click to publish! 

Since not all pages are alike, by flipping through the style guide, you can visualize various page layouts, from one to multi-column design, and decide which is best for displaying your content. 

Calendars, news items, and forms are all important elements of your website and the style guide includes examples of how these can appear. If you're using Posts for news and blogging, like Kent Place, you have a visual reference and the ability to choose from various formats.

Take, for instance, a faculty directory or parent directory — for a new user that may seem complicated, but by referencing your style guide, you have an example and instructions for quickly creating a gorgeous and useful directory:

And as you try to create more engaging pages with tabs or accordion elements, you can quickly copy the element onto your new page.

Icons are a popular choice and if your site includes icons, it’s easy to select one from your style guide to include on your new page.

There are countless ways a style guide can be used by your team. But as easy as it is to create a page, it’s just as simple to change it and your style guide can help visualize the creative possibilities.

Key takeaway

Not everyone is a website designer, and even if you are, as a school marketer, it’s hard to find time to keep your school’s website up-to-date, let alone continually add artistic flair. Having a style guide is a great start, and if your needs change or you need additional elements to accommodate new requirements, your style guide can be amended and updated to meet your goals.

ABOUT THE AUTHOR

As part of Finalsite's marketing team, Debbie has worked with international schools for the past 12 years while living in both Asia and Europe. She helps schools understand how they can maximize their web presence while partnering with Finalsite. As a parent of three children who graduated from IB World Schools, she has keen insights into the marketing and communication needs of international schools.