Graphic Design & Accessibility Workshop

Graphic Design & Accessibility Workshop

Show Video

Welcome to our graphic design  and accessibility workshop. I'm Levina Patterson, and hosting  with me today is Kelsey Humphrey. We are both graphic designers  for Communications and Marketing. Today we'll share some tips on making NSU  branded materials for your graphic design needs.   And we'll also talk about accessibility,  what it is and why it's important.

After the workshop we'll do three  drawings from those who attended   for an NSU branded insulated bag. We'll send  out an email to those whose names were drawn. Just so you're aware, chat has been  disabled. So please post any questions   that you have in the Q and A. We'll answer a  few questions at the end of the presentation. If we're not able to get to your  question, we'll follow up with an email.

Our workshop references the graphic  standards. You can find those online by   going to our communications and marketing website  (,   and then going down here to standards and guides. From here, go to the graphic standards. And here's where you can download  the graphic standards PDF. We also have a previous workshop  which was hosted by our fellow   C&M graphic designers Beth Peterson and Jacqueline  Falk that covered the graphic standards.

And you can also watch that on our C&M  page. You can do that- find that at   (  workshop, scroll down here to NSU   graphic standards, there's no place like  NSU. And you can watch the video here. We have graphic design quick tips for you today.

Approaching a design need. Think it  through. Before jumping into a design,   take a step back and do some assessment. The process will be more streamlined with  less spinning wheels and more time left   for creativity if there is a solid plan  of action established in the forefront. You will be able to more accurately  gauge completion time and identify   roadblocks that you need moved before  you set out on a particular direction. Getting the facts checklist. What is the best  medium? The most original and creative ideas,  

if not presented in the right vehicle  to the correct audience, may never get   a chance for success. Or if you are taking a  request from a second party... what are the requested deliverables? Examples:  poster, flyer, postcards, etc. What are the finished dimensions? Will the design have multiple pages?  If so, what is the page count? Double or single sided? Full color or grayscale? Will the design have bleed? (The  imagery flowing off the page-   or the edge of the page to be  trimmed off after printing. Who is the audience that the  design should be geared towards?   What is the budget? Is the room to design  with die cuts or specialty embossing, etc.? What is the message/text to be included? How will it be provided? Will it need to be web accessible? If so,   you will need to familiarize yourself on how  to build that into your document as you design.

Keeping it branded. What makes up the brand. If its purpose is to represent the  university, then it must bear the NSU brand.   Not only does this support  the brand and message of NSU,   but it is the most efficient use of  the university's branding dollar. The three intrinsic components  of the university brand are   the university's color palette,  logos and font families.

Please utilize our graphic standards book and   familiarize yourself with the many  facets of the NSU brand guidelines. You can view/download the graphic  standards at the following URL.   ( Branding checklist. Be sure to use the branded color palette.

Color plays an important role in keeping  all materials consistently recognizable.   The NSU logo uses two colors: NSU Green  (Pantone 341) and NSU Gray (Pantone 439). These are referred to as the  institution's primary colors. The logo can be reproduced  in spot colors (Pantone),   in full color (CMYK) or on screen (RGB  or Hexadecimal). Three additional colors,   Pantone 116C, Pantone 375C, Pantone  305C) are NSU's complementary pallet.

They serve to refresh the brand, visually  augment the institution's graphic design   and graphically represent the natural  beauty that is northeastern Oklahoma.   Note: When utilizing NSU's campus accent colors,  no less than two-thirds of the visual weight must always belong to NSU green (Pantone  341C). For expanded information on colors,   including NSU's accent colors, see  page 17 to 18 of the graphic standards.

The NSU institutional logo must  be included on all materials.   (Any exception must be approved by C&M). The preferred logo is the configuration with  the clock tower to the left of the word mark. Use the preferred logo whenever possible. In certain circumstances, it may be  better to use other configurations.  

Use only the logo configurations shown  as acceptable in the graphic standards. Approved clock tower logos can  include the name of the college,   department, school, organization or NSU  event above or below the logo or mark used-   using the approved NSU font. Logos can be NSU  Green (Pantone 341), black, white (which is shown on gray), and the NSU green (Pantone  341)/NSU Gray (Pantone 439) combo.   For expanded information on logos see pages  11 through 13 of the graphic standards.

Be sure to use the brand fonts. From  hundreds of typefaces available,   the Aldine and Interstate font  families have been selected for   use in NSU materials. The Interstate font is  provided free through Adobe Creative Cloud. The Aldine font is also available for  free download through various websites.   For expanded information on fonts, see pages  19 through 20 of the graphic standards.

Layout guidelines. Strong and creative. A  good strong layout creates interest in the   design and ensures the message reads clear  to the viewer. Layout Checklist. Set visual   hierarchy within your designs. Using color-  using size, color, spacing and placement you can establish your reading order and order  of importance to your text and visual elements.   This is a great way to break large bodies of text   into bite size pieces for the audience  to absorb in a non overwhelming way.

Embrace the white space. "Because you  can" is not a good reason to cover the   entire composition with type and or imagery.  Intentional white space lets the design breathe,   creates focal points, and brings  sophistication to a design. Be mindful of alignment.

Keeping a simple and consistent alignment   arrangement can bring order  and cleanliness to a design. Avoid hyphenation. An overload of hyphenated words   can create a rough and distracting  look and feel to a body of text.

Avoid "widows" and "orphans". In topography,  a widow is a short line of text that is part   of a paragraph, but has shifted  over to the next page or column. This leaves it alone and awkwardly separated. An orphan is an opening line at the beginning of  paragraph separated from the rest of the text.

Take advantage of emphasis options. Try  using different versions of a typeface   to bring variety and emphasis to the  design, such as Bol, Italics etc. Avoid stretching type. When fonts are stretched horizontally  or vertically it distorts the letter   shapes and spacing created intentionally  by the artist who designed the typeface. Instead, scale fonts proportionally  preserving their original appearance.

Be mindful of legibility. If the message is not readable then  the design falls short of its purpose.   Font size, typeface and color  choices should be chosen wisely. Respect imagery copyright laws.

Make sure your use of all images  following the guidelines- follow   the guidelines of its copyright agreement.  Snagging photos randomly off the Internet,   not knowing the copyright guidelines,  can result in infringement of copyright. This disrespects the artist's time and effort  that went in- went into creating the imagery   and could possibly result in monetary  damages, lawsuits and costly legal fees. And now I'll hand the baton  over to my co host Kelsey.

Hi, this is Kelsey, and I will now take  you to the second half of our presentation,   starting with the print-ready format. Ready to  roll. Print-ready is a term used to describe   a file that has all the specifications  necessary to produce high end- or high resolution printed output. Print ready file checklist. When designing for  a printed format, the best color profile to use   is CMYK, which uses the base colors of  cyan, magenta, yellow, and key (or black).

Set your document mode, imagery  and all swatch colors to CMYK   as you are designing. Double check your finalized  print file before you send it off to the printer. Keep your design's layout  set with optimal margin area. This means keeping information  or important imagery no closer   than one quarter inch from any trimmed edge.   More space is encouraged especially if the  document is larger and there is space to share. Choose high quality imagery. Selected photos  and graphics will set the quality bar for your  

final product. All imagery placed in a document  intended for print should be a minimum of 300   pixels per inch. PPI describes the  number of square pixels that show up in an inch of digital screen. Be sure to set your document with  appropriate bleed and crop marks.  

Bleed allows for artwork to run off the edge  of a page. Allowing at least a bleed of 0.125   inches is optimal. Crop marks or line set on the  corners of your final file to show the printer where to trim the paper. Save your final file as an  appropriate file for print.  

A PDF is a favorable file type for printed  materials. If exporting a file for print   from InDesign the PDF slash x dash one A  2001 is an optimal choice of PDF preset. Web accessible format. Ready to roll.

It is NSU's policy that all materials to be  shared on the web must be web accessible. This is imperative to follow  and the benefits are tremendous.   In doing so a wider audience is served, search  presence is increased, a better user experience is   provided and costly legal violations are avoided.  Web accessibility means designing and developing materials websites, tools and technologies in   a way that ensures that people with  disabilities have equal opportunity   to perceive understand, navigate and interact  with the web, and also contribute to it.

Web accessible checklist. Utilize resources,   webinars, and tools to familiarize yourself with  how to build accessibility into your documents.   Below is a small list of some  resources C&M recommends: These include,,  and  

Gain access to a screen reader to test  and hear how your document is read aloud. A list of some but not all by any means things  to check for in your web accessible document: Make sure the document title is  showing instead of the file name. Be sure that bookmarks are built in your document  and they automatically appear as the PDF opens. Check that the tag structure is built in  an in the correct hierarchy and order. Check that the reading order is established  and shows in the correct sequence. All elements that do not need to be included  to be read by a screen reader should be set   to artifacts. All visual elements that need  to be included and read by the screen reader  

need to have alt text applied. Table  should be structurally set correctly to be read by a screen reader  and make sense to the listener. Continue your professional development  in web accessibility training. Please note that web accessibility  is something that changes constantly.

It will be an ever evolving  journey to keep updated on the   new ways to include accessibility in documents. To sum it up. Designer quick tips. Get the facts. Find out as much about your project   as possible before you start so that  you can strategize a streamlined plan. This will help you avoid roadblocks and arrive  at completion in a timely manner. Abide by the   NSU brand. Refresh yourself before you begin a  project by checking out NSU's graphic standards.

Make sure you use NSU colors,  fonts and include the NSU logo.   Structure your design with a good strong  layout. Build hierarchy and appealing alignment. Keep text legible with the  font size and color contrast. Utilize serif and sans serif pairings. Leave  margin room, allowing the design to breathe.   Imagery- Quality and respect copyright laws.  For all visual elements be sure to respect  

the copyright agreements associated with  them (not doing so can result in lawsuits and costly legal fees). When designing for print, make sure  the art used is at 300 PPI or greater. Print ready.

Make sure your file is in print ready  format before you send to the vendor.   Colors set to CMYK, crop marks and bleed are  set correctly. All images are high resolution.   Web accessible. For web accessible files  utilize different tools and resources to create and check your documents.   That concludes the presentation portion of our  webinar. We will now start the Q and A section.

The first question, can you send us a  hyperlink for the NSU standards PDF? Uh   yes, we can we can email that out. Is there a process policy on screen readers? Windows built-in reader or NVDA? Hm... policy screen-reader... We are still researching that. I- I do know that NVDA is really common to  use on a Windows machine and I cannot remember   what it is for Macs, but NVDA is free and so  that's why it's like the most commonly used. But there are a lot of screen readers  and they all kind of read things just   a little bit differently. So the  more that you can use the better. The next question is, do projects  have to be approved before print? Yes, all projects need to come through C&M  projects for us to approve before they can   be printed, and the client will need to approve  them before we can give you the final files.

We have a question. What advice  do you have on color contrast? That one, there are checkers out  there that can review your document   and let you know if the contrast is good. I'm  pretty sure illustrator has an option for that. A good way to check also is just zoom  way far out on your piece and see if   you can still see that there's  a difference in your colors. Um, obviously black and white, are the  greatest contrast that you can get.   But there are online checkers and  I'm pretty sure that different Adobe software pieces do have  built in checkers and then I think   illustrator even has a color  blindness checker built into it. I can answer the question um, regarding um, videos  or media for class and or for other external   uh organizations. If we're utilizing  something uh, for videos for class

um, we do not have to abide by um,   these standards. Uh but if we  are making an external document, uh some, some club or organization uh that's affiliated with the institution, and  they're creating flyers, uh or materials. Uh then   we do need them to abide by the uh institutional  standards, or the graphic standards. Sorry, forgot I was muted. Um [chuckles] I'd like to answer   the question about uh when is our  next presentation on social media. Uh will that be recorded and available on  the same website shared before? Yes, it will.

Uh we are looking at the schedule, moving forward. Uh April's a pretty busy month. Um s o we might just reconvene um in the fall, but  we will for s- for sure let you guys know on that.

I'd like to also answer the question,  um not to hog t- the uh audio here,   but uh Debbie had sent something in. Is  there a standard template to use uh for   a department newsletter and do we have to go  through C&M or can we create that on our own? Um this is a process that we're kind of working  through our new uh web content platform system has   some newsletter capabilities within it, that uh  have automatic um accessibility built into that. Uh we've had some departments go ahead  and create uh newsletters on their own. Uh they do struggle with the accessibility.

Um, part of that, so we want to make  sure that we work with our partners,   to make sure that all content that goes out  is accessible. I know Canva is a huge um draw   for the ease, but it is not accessible and they  have no plans to be accessible in the future so uh we're looking into that uh  for you, Debbie and other folks,   and um we can uh help kind  of guide the process on that. In terms of policies uh relating to YouTube  or podcasts or something of that sort, and if   it's official uh for the institution, if it's  going to be posted on the institutions website   or on our official uh YouTube channels, we  want to make sure that those are accessible. And so that includes closed captioning. Um as-  

as mentioned before, CTL can  assist with closed captioning, but I would also offer that  uh YouTube does a great job of   providing the first draft  of your closed captioning. Um it doesn't take very long for the automated  system to- uh to work. Uh then you can go in   and make adjustments uh edits. Uh it is,  uh there are, that program is notorious for   changing the letters N S U to the word ensure.

Um, so there are some tweaks  that you'll need to make,   but it's pretty easy for um YouTube and  or podcasts, things of that sort, to be   accessible. Uh again, if they are  uh affiliated with the institution. Nicole, I'll try to answer the  question you have, uh will you offer   Acrobat training for tags artifacts, etc.? That is a huge resource need,  um as you're well aware. Um we do have a collection of uh resource links we  can share with individuals. I'm not sure at this   time, if that's something that our department  would be handling um on an individual basis. Definitely looking forward to a solution for  um overall uh accessibility for the university.

So that wraps up our Q and A section.  If we did not get to a question we will email you directly with  a response. And feel free to   email C&M with any additional questions. We will post the recording of this webinar   to our website, along with a helpful  glossary of design terminology.

As mentioned previously by Levina, we will  do the SWAG drawing after the recording ends,   and we will email the winners. Uh from all of  us in the communications and marketing team thank you for taking the time to join us for the   graphic design and accessibility  installment of our webinar series.

2021-03-14 15:30

Show Video

Other news