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 (offices.nsuok.edu/communicationsmarketing/), 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 (https://offices.nsuok.edu/communicationsmarketing/workshop.aspx) 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. (https://offices.nsuok.edu/Portals/10/documents/graphic-standards.pdf) 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 W3.org, section508.gov, and adobe.com/accessibility.
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