The Writing Center’s Design Philosophy
Presentations, documents, and images created by the Writing Center for external audiences should use elements of design to clearly, consistently, and accessibly communicate our core values, mission, and brand. Please use these guidelines below in order to create media that is aligned with our design philosophy and consistent with other elements of our visual identity. Our recommendations around elements like font and color are prescriptive, in that they define a core look for Writing Center media, but we hope that you will use these prescriptive guidelines loosely. Iteration on these prescriptions is encouraged and we hope that you will be inspired by these core elements to build presentations, documents, and images that are consistent, but not always identical, to the examples we provide here.
In all cases, media that is associated with the Writing Center should adhere to principles of good design and accessibility practices so that our mediums communicate our message to the diverse stakeholders who access our content.
Principles of Good Design
- Keep it simple.
Aim for creating presentations, documents, and images that concisely use elements of design to communicate ideas and visual identity. Avoid cluttering your work. Aim for design that is clean and effective–not maximalist, trendy, or experimental.
- Consider the rhetorical situation.
All good communication is responsive to the rhetorical situation that surrounds the text–the audience, genre, and purpose for the text. Good design is similarly responsive to these elements. Good design is relevant to the audience, appropriate for the genre, and clearly communicates the purpose.
- Use images with care.
Images are always ideological. Think about the ideologies that you are perpetuating when you are using an image–especially when using photographs of people. (See “Images” section below for more information.)
- Consider your negative space.
Remember that the negative space (or white space) in your project is just as meaningful as the space that includes text or images. Use negative space and margins in order to suggest relationships between elements on the page. In alignment with the first principle (“Keep it simple.”), make sure that there is enough negative space so that your media does not feel cluttered.
Accessibility
Creating media with accessibility in mind is not in opposition to the principles of good design. Indeed, these two concepts can work together to create beautiful, effective designs that can promote greater readability and usability. When creating accessible media, you should consider the variety of ways individuals may need to access your content because of a disability and design accordingly. Universal Design for Learning (UDL) guidelines can help you develop your presentation, document, or image with an emphasis on accessibility.
A few general considerations:
- All videos should have subtitles.
- All images in videos should be verbally described.
- All images should be captioned or have alternative text (see below for more information).
- High contrast colors should be used so that text is legible against its background.
- Use headers styles in chronological order (e.g., H1, H2, H3) rather than changing the appearance of the text or skipping header styles.
- Links should be descriptive of the content and purpose of the link rather than generic, undescriptive text (e.g., “Click here.”)
For an in-depth overview of the considerations and how to make presentation slides and text documents accessible, we recommend the Online Writing Centers Association’s Guide to Designing Accessible Documents.
For social media posts:
- Use limited text in the post image.
- Include alternative text or describe the image in the post’s description (see below for more information).
- For more information, visit KW2’s accessibility and social media guide.
Alternative Text
For images that are displayed in digital content–on websites, social media, PowerPoint presentations, and other media–provide alternative (alt) text. The purpose of alt text is to describe an image for those using screenreaders or speech-to-text software.
Recommendations
Take note of the following recommendations, which are taken from the OWCA Guide to Designing Accessible Documents:
- Do not begin with “image of,” “photo of,” “screenshot of,” or a similar phrase
- Describe the parts of the image that are relevant in context. Think about what is relevant to you when you look at the image.
- Be concise and brief. If more than 2 full sentences are needed to describe the image, then include the phrase “Described in text” in the alt text box and place a textual description near the image instead.
- Type out any text that appears on the image.
- If the image acts as a link, describe where the link will take users.
- If the image is simply a shape, such as a line, that doesn’t provide any information, then mark the image as decorative.
Examples
Example One: Screenshot of a tweet
Context: This screenshot was included on Another Word blog post where the authors talk about the positive reaction staff had to their tutor orientation.
Alt text: A tweet by Karla stating, “So happy to be a member of the @DePaulUCWbL orientation was the best!! #awesome.”
Explanation: The post asks readers, “Wouldn’t it be cool if a new peer writing tutor in your program tweeted this after her first all-staff orientation?” and then inserts the screenshot of the tweet. For someone using a screen reader, they would need to have the text of the tweet included in the alt text for them to understand the overall positive message the authors wanted to convey. Including text such as “collapse,” “reply,” “retweet,” “favorite,” and “more” would not aid in someone understanding the overall message of the image and may cause confusion.
Example Two: Personal photo illustrating author’s narrative
Context: This photo was included in an Another Word blog post in which the author describes her routine preparing for a day of work while staying at a Bermuda hotel. It is a personal photo supplied by the author.
Alt text: Tropical vista of blue skies, water, and palm trees from a hotel balcony
Explanation: One purpose of the post’s descriptive narrative is to immerse the reader in the place where the author is writing, so describing the view in alt text provides a similar experience for those using screen readers. It would not be necessary to include overly detailed information about the pool chairs or number of palm trees, since this would not aid a user in comprehending the overall reason an image was included.
Example Three: Writing Center banner image
Context: This image appears at the top of the Writing Center’s homepage.
Alt text: Three images side-by-side. The first image features a student and Writing Center instructor sitting next to each other as they work on a laptop together. The second image is a group photo of participants at a dissertation camp. The third image is a group of students working collaboratively together around a table.
Explanation: The creators of this website want visitors to get a sense of what participating in Writing Center programs can be like (e.g. collaborative, friendly, inclusive), so it is important to describe the one-to-one and group dynamics depicted in the photos. However, each individual does not need to be described or named. While this alt text is longer than the recommended two sentences, the length is appropriate because it includes three images. Additionally, there is no text around this image, so providing a description in the text would not be appropriate in this situation.
Color Palette
The color palette is consistent and harmonious throughout the presentation, document, or image. We recommend that Writing Center Medium or Dark Red (see below) be included as one of the colors in your palette. To build your palette, you may want to use a color palette generator like Coolors or you can use a recommended palette below.
Writing Center logo colors:
Writing Center Medium Red (Hex: #c41e26)
Writing Center Dark Red (Hex: #a01e24)
Recommended Palettes:
High contrast is preferred (dark on light background or light on dark background), particularly for text/background combination.
Do not rely on color to convey meaning in design, as individuals may not perceive color or perceive color to different degrees.
The Writing Center Logo
The Writing Center Logo should be present on your presentation, document, or image. The color can be varied (see below), but the logo itself should remain visually consistent.
Additional Writing Center Logos are available in the Writing Center’s Logos Google Drive folder.
Always ensure that the logo is clear and readable in your media. If the logo is placed on top of a photograph or image, make sure that the background is light enough or dark enough that the Writing Center’s logo is clearly legible. When using other logos in addition to the Writing Center logo (for example, when using a partner organization’s logo on a document for a co-sponsored event), ensure that the logos are of equal size.
Images
The UW photo archive and the Writing Center photo archive should be primary sources for photographs. Follow the usage guidelines established by the university. When a photograph is used from another source, make sure to obtain permission from the subject using the Writing Center Media Permissions Form or ensure to comply with all copyright permissions associated with the photograph.
If people are included in a photo or drawing, make sure they are representative of the populations they are a part of (e.g., students featured represent the diversity of the student body).
If you are using a photo of Bucky Badger, UW-Madison’s mascot, adhere to guidelines set by UW Marketing.
Avoid clip art when possible.
Add alt text or image descriptions to all images.
Photography, Icon, and Presentation Resources
Photography resources:
- The Noun Project Collection
- The Gender Spectrum Collection by Broadly
- Stocksy Photography
- Pexels Stock Photography
- Unsplash Images and Photos
Icon resources:
Presentation resources:
Photography Permissions
Verbal permission is required when making photographs or videos of people when they are in public settings such as UW facilities. Written permission is required, however, in certain contexts like when the video or photo is of children, patients, research participants, or if the photo or video will be used in promotional materials.
When obtaining written permission, please use this photo release form.
Please refer to the University’s Photography Policy for more information.
Writing Center Photography Archive
The Writing Center’s photography archive is available in the Writing Center’s Photos and Images Folder in Google Photos. When using photos or images from this archive, please note the image description, which will include information about the photographer and permissions. Please make sure to give credit to the photographer where appropriate.
If you would like to submit photos to the Writing Center’s archive, please submit them to the submissions folder. When uploading photos, please make sure to fill out the Writing Center’s photo release form so that we can ensure that we’re using the photos in accordance with the permissions given.
Fonts
UW preferred fonts are Verlag, Vitesse, and Lato. These are also the preferred fonts for the UW Madison Writing Center. Another good option is Century Gothic.
Use fonts consistently throughout your presentation, document, or image. Usually, no more than two fonts should be used. For accessibility purposes, san serif fonts are preferred, specifically Century Gothic for those with dyslexia. Fonts with serifs, such as Vitesse and Times New Roman, tend to obscure the shapes of the letters, which makes it more difficult for dyslexic readers to decipher.
The UW Madison Writing Center Logo uses Acre.
Tone
The tone of the Writing Center is professional, but always friendly and approachable. We aim to coach, not critique. Because our perspective is enriched by our own individual writing practices, we speak as writers to writers–the faculty, staff, and community members who engage with our instruction, services, and programming. Since we are collaborators with these writers, we use language that is welcoming and encouraging. In all of our communications, we are intentionally inclusive and use our voice to promote justice and equity.
Tonal words: professional, friendly, intentionally inclusive, approachable, and warm
Editorial Style Guide
Along with the visual principles of design discussed above, we have developed The Writing Center Editorial Style Guide for our written communications. These guidelines, which aim at clarity and consistency, help us ensure that we are speaking with a unified voice as the Writing Center in our official communications. In addition to communicating with consistency and care, we prioritize accessibility for all audiences.
The Writing Center's Logos
Access the Writing Center's logos folder.
The Writing Center's Photo Archive
Browse through the Writing Center's Google Photos archive.
Google Slides and PowerPoint Templates
Check out our Google Slides and PowerPoints templates folder.
Social Media Posts
Get more information about the Writing Center's social strategy and post creation.
Writing Center Icons
Download the Writing Center's icons from our Google folder.
Additional Design Assets
Looking for any other design assets to complement your presentation or post? You can find them in our Additional Design Assets Google folder.