» marketing » web

web resources to help design your site

fonts

fonts to match the styles on the website. you can download them for free from google fonts. 

• oswald (for use in headers)
• montserrat (secondary option for headers)
• bitter (accent font for quotes and sparing use)
• veranda (generic web font)

additional styles can be found on our web styles page. 

logos

view northwest logos here for use on the web. 

photos

self service photos: to find photos for the web, order prints, access high-quality, downloadable photos or a logo for a self-designed content, please visit the northwest zenfolio site.

photo sizing: (be sure your photos are in rgb mode, not cmyk)

• header image 1920x800 px (non-admission site)
• admission homepage panel: 960x564
• homepage or site home feature: 1200x500 px (you can use a header image as a feature, they are the same proportion)
• other photo sizes can be found in the description of the field while editing a page. 

header image safe zone template

here is a template to help make header images that look nice on all devices. note the cropping that occurs on different screen sizes.

to use:

1. open the photo you wish to use as your header image. size and crop the file to be exactly 1920 x 800 (dpi is sufficient at 72 and doesn't need to be higher than 150)
2. right click, save as the photo below. place the .png file as the top layer in your photo editing software.
3. make sure no subject matter is covered by the black areas. they will crop on certain device sizes. 
4. if the photo looks ok even when cropped in, turn off the template layer and save as a .jpg

instructions to crop header images in cascade can be found here:

• how to add and crop header images in cascade
• note* this method doesn't test the photo for fitting into the header space on all devices. 

circle photo quote template

here is a template to create the circle photo in the photo quote panel.

to use:

1. open the photo you wish to use as your header image. size and crop the file to be exactly 600 x 600 (dpi is sufficient at 72 and doesn't need to be higher than 150)
2. right click, save as the photo below. place the .png file as the top layer in your photo editing software.
3. center your photo of the person in the quote, keep the template layer visible  and save as a .jpg

google analytics

google analytics are available to view on your webpages. 

• in cascade, while on the webpage you want to analyze
• click the '...more' menu button in the upper right corner
• select 'analytics' in the dropdown menu