Graphic Design Training

We are excited to be able to design our sites directly in Divi on WordPress.

The Design Process

A project coordinator will contact you to ask if you are available to take on the project. They will include details such as the project deadline, compensation, etc.
Once you’ve accepted the project, look over all the design notes the project coordinator has collected, as well as the client’s questionnaire.
The site will be set up for you in WordPress, and you will be sent the development URL to log in and get started.
Depending on the design package the client chose, some elements may be preloaded into the site for you.
1. If the client chooses our customized design package (level 2), they will select the header, footer, and Home page elements they would like. The headers and footer will mainly need colors adjusted, but you will have more creative freedom with the page elements.
2. If the client chooses our premier design package (level 3), you have complete freedom to design as you would like. They will more than likely choose what page elements they would like, but you get to choose the design.
Once you have designed the site, you will send it to the project coordinator, director of UI, and director of ADA for approval. They will check it over and may ask for adjustments before we send it to the client.
Once the prototype is approved, the UI designer will start going through the site and making it function correctly. If this is a customized site, your job as the designer is done. If this is a premier site, you will be responsible for any page graphics, and will be notified when it is your turn to work on those.

School Webmaster Design Standards

Basic Standards

Use 1 or 2 Google Fonts throughout the design for titles.
Keep heading titles the same font on both the home and subpages. (Ex. The H1 font on the home page should be the same font as the H1 on the subpage)
Font size should go from largest to smallest with H1 being the largest.
All text needs needs to pass WCAG AA color contrast requirements. Note the large text is defined as 1.16625rem AND bold or 1.5rem and up.
Font sizes need to be 1rem or larger.
For ADA purposes please convert font sizes from px to rem. (Convert it to em and just add the r in front)
In order for a color change to count as a state change on a hover it has to be contrasting color change. (Ex. White background with black text changing to a black background with white text)
The hover effect color needs to pass color contrast requirements. (Ex. If using an underline, the underline color has to meet contrast requirements with the background)
Check to make sure your top and bottom margins/white space are equal around elements. Same goes for side margins.