LEARNING NEW THINGS

• The initial stage of organizing content was initiated by 2 months of heavy research into the following topics: UI / UX design within video games, different design components in video games (ie. skill trees, inventory screens, HUDs, etc.), game design, web design, and HTML & CSS.
• Once organized, I looked at competitors to see how they developed their navigations, home pages, news articles, blogs, push users to different topics, and more. This research didn’t just involve visual observation, but also developmental in terms of how they coded their HTML and CSS.

PICKING A PATH & STRUGGLING

• For navigation, I added a bar at the top and bottom of each page to allow visitors to jump from different topics in addition to a flow if they wanted to read about my research from start to finish.
• I knew I had to keep it simple due to my lower proficiency in web development, so I designed the website to have static pages. With this, I can focus on its functionality to maintain effective communication of my research story.
• Once the coding process began, I did (inevitably) run into issues. Because of how I had displayed each image and set the text, the website would break its layout depending on the browser’s screen size. The website was not responsive and as a temporary solution, I attempted to redesign the page for different display sizes on a separate CSS file. In this CSS file, I began to use percentages instead of pixels in hopes of solving this accessibility issue. Although it was successful in the interim, it did cause images to appear repetitive if your screen did not fit the conventional sizes I had coded for.

THERE’S ALWAYS A LESSON

After revisiting this project many months later, I ended up scraping the large navigation bar and created a simpler logo with smaller navigational text buttons. In terms of layout, I condensed the spacing a significant amount. With this change, the pages feel shorter and makes it easier to consume information. It now takes half the amount of time it did previously to scroll through each page!

In the end, I wasn’t able to create a responsive website for publishing. I know a bit more about HTML and CSS now, and hope to implement a better structure to remedy the accessibility issues. As I'm also beginning to learn JavaScript, I hope to add in animatic elements to make the website feel more dynamic in the future.

For now, I ended up with a prototype that displays content smoothly and has a quicker reading pace. Once I’m able to fully develop the website, I’d like to be able to test this with a small group to see how long it takes for them to read the information, what concepts they were able (or not able!) to grasp, and if it was difficult to read. This project took months, but every step was exciting and fun for me. I loved being able to continue the conversation about non-gamers’ experiences within video games and being able to communicate the concept with others!