• Your website will be the first impression that most people have of your organization.
• A simple, elegant design creates a strong impression, while a cluttered layout can leave users confused and dissatisfied.
• Photos can tell a story and create an emotional connection.
• Creating an organized information hierarchy is an important foundation for any site.

Create an outline of your organization and its functions

• There isn't a magic wand or automated way to redesign your information architecture, but the best place to start is by creating a logical, detailed outline of your organization.
• Think of what your organization does and start organizing those actions into groups.
• What questions do you receive the most? This can help you identify site content that is lacking.
• Use an outline to pace the information. Building a website is like a marathon, not a sprint. If you put all of the content up front, users will get lost.

Identify your audience

• Once you have an organized outline, identify your audience and structure information so that it is easy for users to navigate.
• Put yourself into your users' shoes and think of the various tasks they may perform on your site.

Create a chart of how users flow through the site

• Draw out a web of your pages and how they connect.
• Experiment with different flows and go with the layout that best fits your audience.
• In which branch of the chart does the information make the most sense?
• Go from broad topics to more specific ideas, just as a tree goes from a trunk to its branches.

Examine your site structure

• All site sections should be examined for misspellings, properly capitalized and spaced page section names and page titles.
• The site tree should be logical, organized and labeled correctly.

Watch for duplicate pages, redundant folders, and orphaned pages

• These lead to confusion for you and your users.
• Redundant content can make it difficult to keep your content up to date.
• Use a grouping system that becomes more specific the deeper you go in the tree (ex. What to Wear -> Clothes -> Hats -> Bowler Hats).

Eliminate redundancy

• Look for content redundancy throughout your pages and trim it down to the information needed by your target audience.
• Tightening down the structure of your content will make it easier for you to maintain.

Users read the web differently from books

• Generally, users scan or skim websites, reading the shortest or boldest information first.
• Creating a visual hierarchy of headings and descriptive text will help users flow efficiently through content

Pages are viewed on screens, not paper

• Design pages as screens, rather than pieces of paper.
• As users scroll down a page, each screen should guide them along a path of information.

Break info into chunks

• Think of information as chunks rather than paragraphs (similar to how notecards can be used for studying - a title and description for a concept).
• If your information gets out of hand, make notecards of the information chunks and pin them out onto a board as a way to show how all of your information connects.

Create a visual hierarchy

• Put important information at the top, with each piece of content broken up into bullet points, headings, and short bits of text.
• Use headings, images and bold text effectively. White space is a powerful tool.
• For example – take of a piece of paper filled with text and compare it with one with a single word on it. Which one makes it more difficult to read all of the content?

Understand the flow

• Users tend to focus on the top left corner of the page and scan across to the right corner.
• These "hot spots" will generally be the first the users will see.

An endless path of information

• After scanning across the page, users scroll down and repeat the process – which is why we use the idea of a screen, as opposed to a page, for content layout.
• As long as you've followed a strong visual hierarchy, don't be afraid to have a page with a scroll bar.

Colors

• The use of a lot of colors can be distracting to the user.
• Missouri S&T has a selection of color palette options to choose from.
• Use colors to accent and enhance your content. Color can draw attention to something or create a relationship with other content. Try to avoid mixing a lot of colors in a small area.

Image sizes

Making images look good on a website and load quickly involves a few simple steps. First, when you change the size of an image, make sure you don't stretch or squash it unnaturally. Second, use a tool to shrink the file size of the image without making it look blurry or pixelated. Third, adjust the dimensions of the image to fit where it's going on the webpage. Finally, add a short description to the image (called the alt description) so people who can't see it can still understand what it's about. If you want to know more, just click the button below.

Learn more

Stock photos

We offer a large and growing selection of professional photos, available on the Missouri S&T Photoshelter.

Fonts and text styling

• Fonts are determined by the template, additional fonts should not be used in page designs.
• If you are using non-standard font colors, this online tool can help to determine whether they meet ADA contrast requirements.
• Do not underline headings or text. Underlining text or headings that are not links is ambiguous, since by default all links are underlined.
• Do not use all capital letters (all caps) when typing out headings or paragraphs. All caps is handled by the website style. Normal case should be used so that when text is read by search engines and screen readers, it is treated correctly.
• Use different headings sizes along with paragraphs to provide a visual hierarchy to your content. (Headings are used to categorize smaller text below them - just like the content on this page.)

Icons

• Use the same style to provide a consistent look across your site. It is unprofessional to use dissimilar icon styles for related information.
• Icons should have a specific meaning; do not use an icon to represent multiple meanings.
• As with any design element, overuse can become tiresome and cause it to lose its original purpose.

Design

Follow the design principles of repetition, contrast, proximity and alignment.

• Repetition: establish a method of laying out information (especially with tightly related content/pages) and stick with it.
• Contrast: contrast can be created with whitespace, colored graphics, photos, etc.
• Proximity: Group similar items together. Scattering them about reduces patterns and causes chaotic organization.
• Alignment: Aligning content correctly creates simplicity by forming groups, lines and shapes that are easy for users to follow

We want to create a cohesive, visual identity for faculty, staff and student portraits online. The portraits used online represent the S&T brand. While we can’t force you to include professional portraits on your S&T website, we strongly encourage it.

Portraits give the department a personal touch

Most students want to see a portrait of the faculty and staff they will be interacting with. Adding a professional portrait will help you develop better connections with the people you interact with.

Portraits enhance faculty and staff biography pages

The faculty and staff directories and biography pages get a large volume of web traffic; it’s critical to include updated, professional portraits of all faculty and staff. Portraits can help your website look more professional and friendly, allowing your users to connect to a face and not just a name.

Portrait standards

A solid gray background is used for studio portraits. Please dress professionally for photographs. If you prefer to be more casual in your portrait, please do not wear non-department shirts, t-shirts or hats; stick to S&T gear only.

Don't use:

• Selfies
• Photos taken with a cell phone
• Images of people backed up against a wall, horizontal images or images that have been cropped too closely to the subject's head
• Photos of people outside, sitting at a desk, giving a presentation or in general doing anything other than looking at the camera and posing
• Photos that haven't been updated in the past two years

Make content for your audience

• Information, images and other content items are there to be consumed by your site audience.
• Think about the information that people often ask, or that you provide when guiding someone through solving an issue.

 Avoid linking to pages with no content or pages labeled as “under construction” or “coming soon”

• Keep pages in draft form until you have content finalized.
• “Coming soon” is subjective to users.
• Your site should provide information users want now and not focus on what you don’t have available.

Outdated content is useless

• Old, time sensitive information can't be used by your audience and clogs up your site.
• Trim your content and keep it focused so that it is easy to manage updates when they occur.

Organize your content

• Grouping content by categories, likeness or relevance can help users find content.
• Remember to group content by subject or action first, not by a user's role (student, teacher, etc.).

Tone of voice

• When writing, try to use a conversational voice that is semi-formal and concise.
• Speak to your audience as if you are in their shoes.

Linking emails and telephone numbers

To create a link that will start an email message to an email address, use these formats for the Link URL field:

• mailto:username@mst.edu
• To add a subject line use mailto:username@mst.edu?subject=Your Subject

To create a link that will open an app to dial a phone number, use this format for the HREF field:

• tel:573-341-0000

Avoid ambiguous links

• Avoid links such as “click here.” Users scan websites quickly for information and these links don’t tell users where they will be going next without reading the content surrounding the link.
• Screen readers are unable to provide the context to users when reading “click here” making your site less accessible.
• Good links should be:
  • Descriptive: identify the context for the user.
  • Concise: keep links short and simple and avoid jargon.
  • Action-oriented: provide a call to action to users. (ex. download guide or read more.)

Dead links

• Periodically check the links on your site for functionality.
• Ensure that your site links are working or you may end up with a site that users can't navigate.

It is your responsibility

• When linking to other Missouri S&T sites, we encourage you to use the high level pages or just the home page. This will help to ensure that your external links stay active.
• It is not the responsibility of other campus sites to host content, and you cannot guarantee that all content will stay in place or be kept up to date.
• The web changes often. Sites change their audience, and pages may be restructured to fit the site owner's needs - and your links could be broken.