Website Style Guide

Look and feel

There are specific templates that have been created to keep consistency of the WOU brand. If you are going to use the Divi Builder and want to add more than just basic words to a page you will need to use these templates.

Colors

Color is one of the most important elements of the Western Oregon University identity system. Red and white are the official primary colors. WOU gray and silver are optional colors. If you choose to change colors of table backgrounds and what not, below are the colors to choose from.

Primary colors Secondary colors
WOU RED
HEX: #db0a29
WHITE
HEX: #ffffff
WOU BLACK
HEX: #000000
WOU GRAY
HEX: #c4c6c8
WOU SILVER
HEX: #a7a9ac

Typography

Headings

  • Use headings in chronological order (h1, h2, h3, h4)
  • If you want to change the font you can use either Montserrat or Caveat
  • Stick with our color pallet
    • Black (#000000)
    • Gray (#73777b)
    • WOU red (#db0a29)

Images

Recommended Image Size:

  • Banner Images: 2000×1500 (height can be adjustable)

  • Square: 1500×1500

  • Vertical: 1500x1800

  • Horizontal: 1500×1100

File Types:

  • Save images in .jpg, .gif, or .png format only.

  • .pdf, .psd, .tff, and .doc files aren’t web-compatible.

Steps:

  1. CLICK HERE to sign up or log in to Canva (it’s free!)

  2. On the top left corner, click on the teal button, “Create Design” for the dropdown

  3. Click on “Custom dimensions” and put 2000×1500, and click on “Create Design”

alex-sardi-blog-canva-resize-3-scaled.jpg

4. Name your file “Banner Images 2000×1500” and you can use this for all your banner images on your website
5. On the left, click on “Elements”
6. Under “Grids” click on the single image element

alex-sardi-blog-canva-resize-1-scaled.jpg

7. On the click, click on “Uploads” and upload an image of your choice
8. Drag and drop it to the image element on the artboard
9. Resize if necessary

alex-sardi-blog-canva-resize-2-scaled.jpg

10. On the top right corner, click the “download” icon and download as .PNG
11. Add to your website

 

Page layouts and templates

Homepage

Using the Divi Builder: must utilize these templates. You can pick and choose which sections you would like to be added.

Using the standard WordPress Block either: Homepage Option 1 or Homepage Option 2 and needs to have more content than just the slideshow of images at the top. Here is a tutorial on how to modify the widget areas for the homepage. Here are other basic tutorials on how to edit your WordPress site.

Section Tempalates (Divi)

You can use any of these templates for different sections of your site.

Navigation styles

Top Navigation

Must all fit on one line. You can tighten up the space in-between the tabs by following these few simple steps.

Left Nav

The left nav is optional but if used the max amount is 8.

Accessibility

  • Use headings in cronalogical order (think if somone had the page only displaying in a list format)
  • Use the Accessibility tool
    • Click on the glasses in the bottom left corner on any page of your site while logged in and it will give you options of the items to check. Mainly check the Headings and Color Contrast.

Linking out to other sites

If you are adding content to your site that is repetitive and already exists on another WOU site, please link to their page so we can eliminate duplicate information and needing things to be updated in two separate places.