Home » Design

Category: Design

monitor with Go, Bulldogs to represent school website

Six steps to a professional school website

There’s a young family moving into your part of the state. While choosing which neighborhood to settle into, they research one of the most important factors in their decision: the school district. How will they conduct their research? A primary way will be visiting school websites.

With the options afforded by school choice, your district must consider how it is positioning itself as an educational leader. You have an important service to offer. If you want parents to choose your school, you must evaluate the effectiveness of your image and message, including your online presence. Your website is the core of your school marketing.

Many schools are unprepared for this culture of choice. Simply having a website is not enough—sites that look outdated or haphazard don’t inspire confidence. If a parent visiting your site doesn’t get the impression that you value excellence and are current in technology, they may wonder if you can meet the needs of today’s students. If your message doesn’t resonate, they have the option of sending their children elsewhere.

Since we are educators, consider this article a crash course in web design. Your first assignment: take a benchmark assessment. Check your current website against the rubric below. Then take the course—and do your homework!

[ezcol_1quarter]

wi-school-news-icons-300x300-01[/ezcol_1quarter] [ezcol_3quarter_end]

Lesson 1: Determine your rhetorical situation

Every type of communication has a rhetorical situation: audience, purpose, and context. Good design is built on a thorough analysis of these fundamentals.

Audience

Who visits your site? Your list might include parents, grandparents, community members, students, staff, organization leaders, potential new student families.

Purpose

Purpose is closely related to audience. Your purpose may include conveying information (e.g., lunch menu), connecting people with other people and programs (staff email addresses), and appealing to potential new student families (list of Advanced Placement classes).

Context

How will users connect with your website? Will the majority be on PCs or smartphones? Knowing the answer will affect your layout and design choices.[/ezcol_3quarter_end]

[ezcol_1quarter]wi-school-news-icons-300x300-02[/ezcol_1quarter] [ezcol_3quarter_end]

Lesson 2: Determine your content.

Once you’ve analyzed your rhetorical situation, plan the content for your site. Determine what information the different groups are seeking. For example:

  • Parents: School calendar, lunch menu, staff contact information, etc.
  • Community members: How to request space in the facility, how to connect with the parent/teacher organization, why we are going to referendum.
  • What do potential new student families want to know? What does the staff need from the site? Students?

When gathering this information, don’t merely guess or assume. Talk to your audience. Know what they come to your website for and how frequently.[/ezcol_3quarter_end]

[ezcol_1quarter]wi-school-news-icons-300x300-03[/ezcol_1quarter] [ezcol_3quarter_end]

Lesson 3: Organize your content.

School websites have massive amounts of content. The structure of your site should lead the different segments of your audience on a pleasant, logical (to them) journey.

A practical way to lay the foundation for site navigation is card sorting: Write content topics on index cards and ask various users to organize them in a way that makes sense. Working with actual site users will make the final product more user-friendly—and you will be enlightened by the differences in logic you observe. Accommodating these differences demonstrates you practice what you preach regarding differentiation.

Create a visual representation of your information architecture (a site map). This is a great tool for collaboration. It also enables you to see how many clicks it takes to get to any information on your site. To create this structure, you can use free online wireframe software, a large whiteboard with plenty of colored markers, or index cards and an empty wall or floor.

When creating the navigation for your site, consider these tips for better user experience:

  • Limit the categories in your navigation bar to seven or fewer. More than that is overwhelming.
  • Organize content so users do not have to click more than four times to get the information they need.
  • Create a quick-links section for information that is sought most frequently.[/ezcol_3quarter_end]

[ezcol_1quarter]wi-school-news-icons-300x300-04[/ezcol_1quarter] [ezcol_3quarter_end]

Lesson 4: Design your site.

Finally, we are getting to the actual design in this web design class!

First impressions matter—website users make snap judgments on whether your site is worth their time or not (you’ve made those kinds of decisions yourself). You don’t want to irritate or frustrate your users. This is why the home page design is core to your site’s effectiveness. Colors, typography, images, white space, and content must all work together to create a page that’s appealing, welcoming, and informative.

Decide the color palette, layout, typography, and images for the entire site. Create a style guide that has all this information. Include the specific site colors; the typography styles for headings, subheadings, paragraphs, and links; and specific logo and mascot images to use and how to access them. Many schools have different people in charge of various sections of the website. A style guide ensures that the team maintains consistency across the site—an important aspect in looking professional and building trust with your visitors.

Design cannot work effectively apart from content. Keep readability and usability in mind when making decisions. For example, if you have a lot of content on a page, break it up with subheadings, lists, and white space so users can scan for the information they’re seeking. Keep PDFs to a minimum—or make them accessible for all users. Left justify large amounts of text —centered text is hard to read (don’t frustrate your visitors).

Consider the context of your website—how users will interact with it. Let’s say a mother is going school supply shopping. Is she able to find the supply list without navigating a series of dropdown menus on her smartphone? Can she access the supply list online without having to download it? Is your site mobile friendly, or does she have to enlarge the screen and swipe to see the entire list?

See the rubric for more details on the finer points of website design.[/ezcol_3quarter_end]

[ezcol_1quarter]wi-school-news-icons-300x300-05[/ezcol_1quarter] [ezcol_3quarter_end]

Lesson 5: Test your site.

Make sure your site displays correctly on all browsers and on all screen sizes. Test all the links.

Check your site for readability, accessibility, and color contrast. See the Resources sidebar for more information.

Conduct an informal usability study. Select members of your audience groups and give them tasks, such as, “Find out when the next school board meeting is scheduled.” Then take note of the process they go through to find that information. Have them speak what they’re thinking—you will gather valuable information on how users navigate your site.[/ezcol_3quarter_end]

[ezcol_1quarter]wi-school-news-icons-300x300-06[/ezcol_1quarter] [ezcol_3quarter_end]

Lesson 6: Maintain your site.

Congratulations on your website makeover! But the work is not finished—the site needs to be maintained and updated.

If you are dividing these responsibilities among team members, invariably something will be forgotten (and you know what they say about too many cooks). Designate one person to be in charge of the website. The site go-to person can manage all the details, maintain the style guide, and do behind-the-scenes maintenance. This leader can also provide training and support for other website editors, such as teachers who want to update their classroom pages and administrative staff responsible for various sections.

Now take another assessment of your site and be proud of the improvements you’ve made. Who doesn’t love a good makeover?!

Keeping your website effective, functional and accessible is an ongoing process. While the work continues, keep that young family in mind—you want them to visit your site and be confident that yours is the school district for their children.[/ezcol_3quarter_end]

website-rubric

 

the emperor has no clothes image via haltonhousing.org

The website has no clothes

Your website should not make your users turn away and avoid looking. Remember the story of The Emperor’s New Clothes? The emperor was persuaded by his tailors that his new clothes were all the rage when, in fact, they were invisible. He thought he was regal and stylish until the truth—and his embarrassment—were revealed. And people looked the other way.

Some websites remind me of this tale. The owners are persuaded that edgy, enigmatic sites make them appear sophisticated and trendy. However, it is more likely that this style is hurting their business. Rather than ooh and aah over the clever design, visitors turn away.

For example, check out the website Alan Designs and tell me what they do. How could they help you and/or your business?

home page of alandesigns.com

Effective web design is not just about a great look. It’s about meeting your customers where they are, not confusing them. It’s important that they are able to get their questions answered without becoming exhausted. As Donald Miller says, the mind is always striving to conserve calories. If your site is obscure, users are not going to waste good brainpower trying to figure out your message. You also don’t want to embarrass them; you don’t want them to feel stupid because they can’t figure out how to get into your site.

Know your audience and tailor (get it—tailor?!) your content to meet their needs. In seconds, users should be able to identify:

  • What your company does.
  • How you can help them/solve a problem/make their life better.
  • What they need to do to buy your product/service.

Be wary of those who promise you praise and adoration via your website. Let’s dress our sites with wisdom, beauty, and truth.

(Drawing via haltonhousing.org)

 

 

 

 

 

 

 

your PowerPoint is not your presentation

How to design a professional PowerPoint

Actually, your PowerPoint isn’t your presentation—it is there to support you and what you’re going to say. THAT is your presentation. (See previous post for tips on creating content for a persuasive presentation.)

A professional PowerPoint does not have a lot of text

Don’t bore your audience with lots of text. People want snippets and sound bites that reinforce your message. Make the focus on you, not on your wordy slides. And please, don’t read to them!

 

Some bullets are okay in a PowerPoint

Some PowerPoint experts believe slides should seldom contain text—that it’s all about evoking feelings. I believe they are okay in moderation. Use images and color to support the feelings you want your audience to experience.

 

A professional PowerPoint is easy to read.

Your audience should not have to work to read your content. In fact, they won’t—they’ll tune out. For text that doesn’t strain your audience, consider the following:

Figure-ground contrast:

This just means that there’s a marked distinction between your text color and the background color. Black text on a white background has the most contrast and is the easiest to read. White text on black background also has maximum contrast, but is harder to read in large amounts. (If you do use white text on a dark background, make the text larger.) Colors that are similar in value (lightness and darkness) are difficult to read, like the gray text on teal. Colors that are complementary (opposite each other on the color wheel) together—like the red on green—will give your audience a headache. And the rainbow text? Please. You’re not in elementary school anymore.

 

Typography is important for readabilityTypography:

Another consideration in readability is the typeface (also referred to as font—we won’t go into the technical definitions here). Some fonts are difficult to read and should NEVER be used. Some fonts work well for striking headings, but should not be used for text.

There are two major categories of fonts: Serif and sans serif. Serif fonts have little lines/feet on the letters. Sans serif fonts do not (“sans” is French for “without”). There is some debate as to what is better. In general, sans serif fonts are easier to read when projected and are the preferred font for body text areas in PowerPoint. Limit yourself to two or three fonts—perhaps one for headings, another for body text, and another for subheadings or captions.

Some typefaces have a bad reputation. Don’t ever use Papyrus—it’s been overdone. As has Times New Roman and Arial. Use Comic Sans only if you don’t want to be taken seriously. Avoid the default fonts in PowerPoint—everyone has seen them.

Justification:

Do not center your body text. To read efficiently, we have trained our eyes to snap to the left to begin reading the next line. In centered text, the reader has to work to find the beginning of that next line. This is annoying and distracting. Remember, you want their focus on you, not on trying to

read your slide.

A professional PowerPoint is not cluttered

Don’t feel you have to fill every space on your slide. White space allows your audience to rest their eyes and focus on your important message.

 

Engage the audience with visuals.

Granted, there are too many on this page. But you get the idea. The brain processes visual images much faster than text.

By the way…avoid clip art. It will date you.

 

A professional PowerPoint is not full of crazy transitions and animations

A few simple transitions and animations can be effective in keeping the audience’s attention (or bringing it back). Keep it simple—you don’t want your presentation to look like a third-grader made it, one who’s just discovered these features.

 

A professional PowerPoint uses color wisely

Again, don’t make your audience work hard and don’t give them a headache. Color is fantastic for adding interest and creating a mood, but it should not overwhelm. Try warm colors—reds, oranges, yellows—when talking about food. Blue evokes trust. You’ll see green on presentations about finances or the environment. Black can be edgy and sophisticated. A Google search about color and emotion yields fascinating reading.
A professional PowerPoint is original

That’s it! You’ve got the basics of designing an effective, professional PowerPoint. These tips also work for websites, posters, brochures, church bulletins, campaign flyers, and business cards. The opportunities to stretch your new design muscles are endless!

Now be confident! You’ve got a persuasive presentation with great content coupled with a professional PowerPoint! Go change the world!

 

 

screenshot of art gallery website

Don’t assault your website visitors

Lesson of the Week:

Welcome your website visitors and invite them to explore.

Recently I was working on a website for an art gallery and browsing Google for inspiration when I came across the site above. It is anything but inspirational; it assaulted my senses!

  • There are links all over the page—do they lead to the same thing? How do I know where to go? There are six “Abstract Art” links on the home page!
  • What does the graphic mean? Colors and fonts and arrows…oh, my!
  • The moving art exhibit adds to the clutter.

Yes, you have a lot to share with your potential customers, but overwhelming them with all that information will drive them away. Can you imagine an art gallery where they crammed all the art on one wall? Where all the art was vying for your attention at the same time? Can you feel the tension such chaos would generate? Just like the curator of a fine art gallery, organize your exhibits (content) and provide a path (navigation) that makes sense.

Here are some tips for improving this website:

  • Make it clear who this site is for. Art buyers? Art sellers? Both?
  • Organize the information and make it concise. Provide clear navigation.
  • Don’t be cutesy with graphics.
  • Just like an art gallery, use white space to highlight what’s important.

Welcome your website visitors and invite them to visit for a while.

screenshot of engineering company website

The way of avocado appliances

Every internet visit provides you an opportunity to analyze websites so you can improve your own. There is no shortage of material out there! Let’s take a look at an engineering company website I came across.

Web-sins of this site include:

  • Opening animation: First, only its name trickles in a letter at a time; then it explodes and resets itself (a letter at a time) in the upper left corner of the home page. Many visitors will not wait that long, and there goes a relationship opportunity and potential customer.
  • Poor readability: White text on black background is hard to read in large amounts. You don’t want to annoy your visitors so much that they don’t stay to read the text.
  • Also, the font is very small. You don’t want to strain your visitor’s eyesight—that does not recommend you.

Here are some ways this business could improve its website.

  • Tell the audience what you do. “Serving clients by developing efficient and creative solutions” does not say anything. Solutions for what? Sure, they’re an engineering firm, but what do they actually do? Can they help me? If a visitor does not feel you understand their problem, they won’t go to you for answers.
  • Don’t use opening animation. It has gone the way of avocado appliances. It makes you look old and out-of-touch.
  • Improve readability by using a larger font and use black text on a white background.  Would you want to work with a company that annoyed you?
  • Make sure all your links lead to valuable content. Check for dead ends. The potential customer may be thinking: If they don’t pay attention to details on their website, can they manage my multimillion dollar project?

Lesson of the Week:

Don’t remind them of Grandma’s kitchen—and don’t make it hard for Grandma to read your website.

Wait…what? When design trumps readability

Look at the photo and tell me the name of the company.

I asked my young-adult daughter to do the same, and she paused before hesitantly offering, “Northern & Machine Fab?” My son said:

At first glance, I read Northern Fab, LLC. Then I see & Machine, but Northern & Machine Fab, LLC, doesn’t make sense. So it must be Northern Fab & Machine, LLC. Is that right? I’m not sure; it’s not clear.

Is that your experience?

Today’s observation is about readability, an important element in sending out a clear message. At first glance, you may have seen “Northern Fab, LLC” because the typeface is attention-grabbing. After that, you may have noticed “& Machine” sandwiched in the middle. And that’s what is confusing. English is read from left to right, top to bottom. Therefore, we read, “Northern & Machine Fab, LLC.” Yet the font choices lead us to “Northern Fab.”

I can’t speak for the designer and the choices they made. Perhaps this arrangement fit their graphic better. Or they liked the compact size. Many decision choices go into designing a logo (see my process), but it’s important to blend both design and readability.