Information Architecture: Web Design and Style Guide
Goal: Take a complicated text and present and explain it in the form of a website that is well organized and easy to navigate, and develop a style guide for the creation and design of the website.
Tools
WordPress, InDesign
Year
2022
Course
Information Architecture
The challenge addressed in this project was to make chapters from the book “How to Write” by Gertrude Stein easily accessible and understandable to potential readers. Stein’s “How to Write” is written in a very abstract and experimental way, which means it can be difficult for readers to follow her train of thought and pick out important points.
Design Process
Text Analysis:
The first step was to figure out which chapters of the book "fit" together. I was only working with about half of the chapters, so I needed to know which chapters worked well together and how they could be grouped within that half. To do this, I used the data mining program Orange. First, I conducted a hierarchical sort of the chapters of "How to Write" to determine which chapters I would be working with. Then, I used the program to pick out keywords from each chapter that would allow me to easily get an idea of what that chapter is about and give it an appropriate coded title.
The style guide for my website was created in InDesign. As I was developing the user interface elements of the site and entering the content of each page, I took note of the specifications of each element I was creating. Many of the design elements of my site were guided by the WordPress templates and restrictions, but the style guide outlines changes I made to the base template. The style guide includes every type style I used and what text they are appropriate for, the colour palette used, the look of elements such as buttons and the navigation menus, metadata specifications for each page type, and the manner in which content should be laid out on each page type.
Final Product: Website and Style Guide
The final Website was created with Wordpress.
Next, I conducted a card sort activity with the coded chapter titles I had developed. I had 7 different participants sort the codes into groups they thought belonged together, and had them write a title for each group. I then put the data I collected from the card sort into Gephi, which aggregated the data into the above graph of coloured, connected nodes. This graph told me the most frequent occurrences of each specific code with each title my participants came up with.
With the information collected from my aggregated data graph, I was able to create a metadata tree with specifications for what would eventually be each page of my website. With this format, my website is able to present the "How to Write" chapters in a way that is easily navigable and will allow readers to better understand the text.
Finally, I began developing the additional content that would appear with the Stein texts on each page of my website. The home page features a narrative frame introduction paragraph, as well as an additional paragraph explaining what will be found on the site. Each second-tier page includes a narrative frame introduction and expository paragraph describing the Stein chapters that will be included in that section, as well as a simple infographic. The third-tier pages contain the actual text of a single "How to Write" chapter, as well as a short introduction.
