Lose the Text: A Better School Website Design

Not too long ago, it was fairly commonplace to have a webpage or an email newsletter with a few paragraphs of text, and an image or two alongside to support it. Now, visual content takes precedence and is more popular than ever before.

human brain more visuals You see more of them on social media, online postings, everywhere and the human brain processes visuals faster than it does text. Simply put, people take in visual content faster and more effectively than words. Since ninety percent of the information sent to our brains is visual, we’ve been training ourselves to consume visual content faster than we ever did.

Visual content can include photos, videos, screenshots, infographics, charts, graphs and even memes. When using such images, one must not think of inserting them for the sake of having images alone. They must also be relevant to the content you are trying to show.

The fact that more visuals hold more weight these days is largely due to the following reasons:

  1. The prevalence of mobile internet usage
  2. Since mobile devices are smaller, text which is usually designed to be readable across all viewports can maintain its size but surprisingly enough not its appeal. Provided, there are techniques to bypass this but more often than not users will favor scrolling through eye-catching gifs than long winding, paragraphs.

  3. How information is absorbed more differently on the web than any other medium
  4. People are more likely to read the first paragraph of a webpage then scan for key bits of information like bullet lists or call-outs.

The following are tips for creating interesting visual content for your school website:

Know How To Arrange and Place Your Images in Your School Website Design

There’s a lot of psychological and scientific explanations for why visual content can be very powerful and what goes into creating an awesome image. Here are four of the most basic principles to go by:

  1. Rule of Thirds
  2. The Rule of Thirds is known as a method for composing the elements of an image to be visually pleasing and to be in sync with the way our eyes prefer to scan an image.

    ruleofthirds_purplerule_of_thirds

    The way it works is by dividing an image into a grid of thirds both horizontally and vertically. Just imagine an image as being divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines. The focused or key elements should then be placed along these lines or their intersections.

  3. Golden Ratio
  4. The Golden Ratio is where the ratio of a smaller segment to a larger segment is the same as the ratio of a larger segment to the sum of both. It is often referred to as a magical number that is equal to 1.618 (\varphi) that is believed to make all things proportioned to it aesthetically pleasing. The ratio creates what is known as the Golden Rectangle for images. When dissected, the Golden Rectangle turns into smaller and smaller Golden Rectangles which then forms a spiral shape.

    golden ratiogolden ratio applied to website design

    Above is an example of how Golden Ratio can be applied to one’s website design.

  5. Fibonacci Sequence
  6. The Fibonacci Sequence is a series of numbers where the next number in the series is the sum of the previous two numbers. Here’s a small representation of how the sequence starts:

    0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 …

    fibonacci_rectangles golden ratio and fibonacci

    These numbers are found commonly in classical creative works and in nature, and they are closely related with the Golden Ratio. Dividing any number in the Fibonacci Sequence by the previous number will result in an approximation of the golden number 1.618 — the basis for the Golden Ratio.

  7. Visceral reactions
  8. visceral reactionVisceral reactions have more to do with psychological principles and are centered on how an image can stimulate emotions. They can also be described as some of the strongest connections we can make to visual content. When we feel a visceral reaction, the part of the brain that is responsible for survival instincts and fight-or-flight responses causes us to subconsciously respond. This reaction is the same as when the central nervous system is stimulated by factors like food, danger, shelter, or reproduction. That is why it’s common to wonder why we love a certain design because our consciousness hasn’t yet connected with our subconscious.

    Making visceral reactions work in visual content can be tricky. The most important being: you must be aware of the feelings that your images will evoke. Your images must trigger emotions like feelings of serenity, safety, sympathy and so on.

Summarize Your Content

Large amounts of text and images can become a hassle when scrolling or scanning through a page, especially in this mobile-centric era. That is why it is critical to edit, even reduce the overall length of your content. Learn to either summarise what you really need to display or cut-off all non-essentials entirely.

The best place to show a summary of your website content would be on your homepage, showcasing interesting photos that go well with short phrases describing what your school offers. As much as possible, avoid using generic stock photos and instead use your own school’s stock of professional looking images. Integrate a mix of colorful and attractive panels that lead to different areas of your site. You can also add a live stream of your social accounts or your school’s most recent blog posts and news. The user now only needs to scroll throughout the page where everything about your school is easier to read, smoother to navigate and is visually entertaining as well.

Manshead School’s frontpage:

manshead frontpage website design

Assemble Similar Types of Information Together

Group facts or topics that are similar in nature. Place them into a section of their own with visuals that better represents the information they carry. Your page is more likely to attract your user’s attention if keywords or fast facts are aligned or arranged in the same proximity. This helps in conveying a much stronger message as compared to a long list of text. One way of doing this is by integrating animated panels where the user can hover over the image and a short description or link to a more descriptive page shows up. For example, De Havilland Primary School uses interactive panel elements to engage the user, while explaining about their school in just a few lines of text. Thus, you’re more inclined to click on each image in the panel to learn more.

De Havilland Primary School’s frontpage panel:

dehavilland_frontpage

Encourage Interest

In the end, images can only take you so far. For school website design, you have to manage designing around a substantial amount of information. Thus, it’s not always that everything on your website can be portrayed as a quick image or explained in a simple sentence. More information means that there will be more explanation. When this happens, it’s always best to have tidbits of information about a topic up front by using call to action buttons or text that allows users to learn more if they choose to do so. Keeping your images to the forefront along with pertinent keywords not only makes your website more attractive but also makes your school both interesting and easier to learn about.