Design Philosophy
When thinking about how to present information to the world, in the modern-day world the internet is usually the platform to do so. Using the internet through apps and websites that people have built to create your own or learn information is why social media and blogs have become so popular. However, understanding how to design these websites and app is important if you want to reach more than one audience. As a undergraduate student publishing research, I have to think about accessibility and design while also making sure to adhere by the guidelines of my University; or not.
Inclusive Design
The term inclusive design means “[a] universal web is designed for all, inclusive of geography, language, and culture” (Horton & Quesenbery, 2013, p.4). In their book, A Web for Everyone, Horton and Quesenbery (2013) discuss how web design is rooted in accessibility. Regarding web design, accessibility means “how easily and effectively a product or service can be accessed and used” (p. 3).
Implementing both inclusive design and accessibility means to focus on things such as visual hierarchy such as the usage of headings and colors, how efficient the wayfinding is and alternative text which "describes the content of meaning of an image" in a useful way (Horton & Quesenbery, 2013, p. 155).
As a student web designer, I have a responsibility to present my information in a way that is accessible to both my intended audience and others. However, I also have a responsibility to follow the Western Illinois University (WIU) Brand Guidelines since this is my student work being curated. WIU Brand Guidelines is a document used to standardize how to represent Western in the digital world. The guidelines range from positioning and tone to logos and usage; however, the sections I am most concerned with are color and typography.
The typography that the guidelines specify is Open Sans for headlines and body text with Lora being used for things such as pulled quotes. The color palette includes shades of purple and gold, with specific black, white, and grey that are identified by hex numbers. In this philosophy, I will go over the guidelines and ask why I did or didn't use them as they relate to my foodways research project on the history of African American food. As a disclaimer, I am using a pre-made template by HTML 5 and GitHub, which is a considering factor as I designed.
Typography
As an individual new to coding, I chose a template that more or less had the structure I wanted in terms of wayfinding. As noted by Horton and Quesenbery (2013), "[w]ith helpful wayfinding, people can navigate a site, feature, or page following self-explanatory signposts" (p. 90). The template not only has self-explanatory signposts but also interactive buttons that lead you to other parts of the website.
That being said, the template had many files put in place to create the overall design. Font, or in this case, typography was one of them. Font Awesome 5, is the typography that was instilled in the code that makes the website function properly. Luckily for me, the typographic font family is "open sans" which includes Helvetica, and sans-serif so I didn't have to change anything there. However, the guidelines say to use 40 size for headings and 10 for body, but personally I think that is a wide gap, so I chose 17 and 12.
Color
WIU Brand Guidelines for color was something for the majority of the website I followed. The hex number which specifics the exact shade of a color you want for the primary purple was #663399. For primary gold, it was #FFCC00 and white was #FFFFFF. The purpose of the primary colors is the to convey the most prevalent information, so adhering by those rules, the overall background of each page is #663399 aside from the homepage.
The banner "Foodways Research by Jamariah" was changed to the #663399 purple, with the words being #FFFFFF white, and when you hover over it shows up as #2C2C2C gold. #FFFFFF is the color I used for all body text so that it would show up on the purple backgrounds. The usage of #2C2C2C black and #FFCC00 gold on a purple background made it hard to see, which doesn't support visual hierarchy.
The only aspect of the website that doesn't follow visual hierarchy is the colorful hovers on the homepage. The reason being is because the colors add flavor to the pictures underneath and to me, represent the diversity of African American food culture.