Web Tools

After deciding what content and pages need included, a site map can be laid out to help establish navigation and organization of pages.

Download our example website outline template  to get started establishing the new or revised site map. You'll find an example with some recommendations in this document.

Provide the basics of what information needs to be displayed on a certain page. Then, decide what template to use to properly display that information. For examples of different templates to use, view the Templates and Layouts page.

After identifying what pages you need and outlining the content on them, basic wireframes can created. A wireframe is a 'mockup' of an individual webpage or elements of a webpage. The webteam will reference these when building pages.

Not all pages require a wireframe. Many times only homepages and main landing pages have a need to go through the planning stage of creating a wireframe. Interior or consent pages often work with a simple layout that this step would be unnecessary to do. 

These can be a basic drawing of a page(s) and the layout/order of content on it. Wireframing can be done with screenshots with notes or they can even be drawn on white board or pencil to paper.

Wire framing tools

• Pen and paper can be a good start
• Word or PowerPoint
• Adobe
• We are looking into additional tools that could be of use here 

Faculty and staff members school/department that wish to update their individual webpage can use this person page content template . Please, share this document with new or returning faculty and staff. When completed these can be returned to webteam@nwmissouri.edu.

Note on Headshots:

• New faculty have an opportunity for headshots within the orientation time. A time will be set with Multimedia services during their first day on campus.
• All others, headshots are available on the first working Monday of each month in the studio (2^nd floor, East Wing Admin). Visit the headshot appointment scheduler to select your time for a new or refreshed headshot.

If a program, major or minor, page needs updated we have a content guide to help collect information our team can use to build a refreshed and relevant webpage for the program. 

You can use this program page content template . Fill this out to the best of your ability and focus on connecting ideas for our team to finalize and fill in the pieces. Then, share this document with webteam@nwmissouri.edu.

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 self service photos site.

Use caution with photos from miscellaneous web sources as the University may not have rights to use the photos. Look for open licensed files or use a stock service like Adobe Stock to ensure photos are from legal sources. 

• Sizing with Windows/PC/University Laptops - the Photos app is likely the easiest way to resize an image. It's quick and simple,
  • Open the image you want to resize using the Photos app.
  • Click the ellipsis button on the menu bar at the top, the click Resize.
  • Choose from the default size options provided. You can also choose Define custom dimensions if you want to set a specific size.
  • Choosing custom dimensions also allows you to change the aspect ratio of the image and set the final image quality, a 60-70% setting is recommended for optimal file size and photo quality. A higher quality setting will result in a larger file that can negatively impact user experience.
  • Choose where to save the new image.
• Cascade edit tools are available but limited to resizing, rotating, and cropping. See this editing image files in Cascade guide for more information. 
• Canva - offers free and paid services. These can be used to create graphics for digital and some print uses. 
• Affinity software - offers programs capable of editing photos for a relatively low cost. 

TIP: Be sure your photos are in RGB mode, not CMYK

TIP: In general, use WEBP or JPG files on the web. 

• Some photo size tips: photo sizes vary based on many different templates, panels and designs.
• Some common sizes:
  • Header images are 1920x800px 
  • Homepage or site home feature: 1200x500 px (you can use a Header image as a feature, they are the same proportion)
  • Headshots should be 2:3 ratio (200x300 or 400x600 are common)
  • Side-by-side panels are 3:2 ration (800x533px)
  • 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)
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 .webp (or a jpg if needed).

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)
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 .webp (or a jpg if needed).

Adobe Reader is free to download. But to make edits, a software like Adobe Acrobat Pro is required and has a cost to use. If you do not have the software needed, many lab computers on campus have enterprise licenses to Adobe and include Acrobat Pro. Or, you can request edits from the web or design teams in the Marketing office.  

Comments on PDFs are very helpful to request edits. More info on PDF markup and comments from Adobe.

Adobe Acrobat Pro is required and has a cost to use. If you do not have the software needed, many lab computers on campus have enterprise licenses to Adobe and include Acrobat Pro. Or, you can request a fillable PDF from the web or design teams in the Marketing office.  

To create a fillable form in Adobe Acrobat: (see original create a pdf form help guide from Adobe for more in depth instruction)

• Choose Tools > Prepare Form
• Select one of the following options:
  • Single file: Converts an existing electronic document (for example, Word, Excel, or PDF) to an interactive PDF form.
  • Scanner: Scans a paper form and converts it to an interactive PDF form.
  • Create New: Start creating a form from scratch with a blank page. For more information, see How to create a form from scratch.
• If you want others to sign this form, select the This Document Requires Signatures check box.
  • Note: The form field auto detection is ON, by default. To change this setting, click the Change link and choose the settings as appropriate. For more information, see Forms preferences.
• Click Start. Acrobat creates the form and opens it in the Form Editing mode. The right pane displays options for editing the form. The toolbar contains form field tools for adding additional fields.
• Review the form fields Acrobat created. Add fields using the form field tools in the toolbar. Delete, resize, or arrange the fields as needed.
• To change existing text or images, click Edit in the toolbar. All the text and image fields are enabled for editing.
• To test your form, click the Preview button in the toolbar. Previewing a form allows you to view the form the same way the form recipients will and gives you a chance to verify the form. If you are previewing a form, you can click the Edit button to go back to the edit mode.
• When your form is complete, save the form, and then click the Close button towards the right end of the toolbar to close form editing.

More on PDF Forms from Adobe.