Introduction
Designing an archive for the Nashville Shakespeare Festival's production of Hamlet is not something that I ever expected to be doing for a college course. However, I have greatly enjoyed learning how to collaboratively design and execute a project as large as this one. While there were some setbacks along the way I feel that we as a class successfully created a digital archive that artfully displays the content we were provided with. In the rest of this introduction, I will explain how I was influenced by other archives in my creative process, what the development process looked like, and how I used design principles to create a visually pleasing and functional page.
Inspiration
One site that I drew inspiration from when designing my logo mockup was the Antony and Cleopatra Archive. Their logo featured the title of the play over a sketch of a man with a snake wrapped around him. I drew from that concept and made my logo reflect this inspiration. Here is a side by side of my logo and the one from the Antony and Cleopatra archive:
I decided to incorporate some iconic images from Hamlet so that the logo was evocative of the play itself rather than just being simple words. Another design choice that I made due to inspiration from other sites was using the full title "The Tragedy of Hamlet Prince of Denmark". I did this because often times the play is referred to just as "Hamlet" but using the full title helps to give some context about what might happen in the show. When the word "tragedy" is in the title of a play it means that someone is going to die which definitely rings true for Hamlet. In our final draft of the archive we were actually able to utilize the full title on our logo:
I think using the full title made the site more official and helped to round out the design.
The Development Process
Initially, this project seemed like a looming beast that I was convinced I would not be able to do. However, that was an incorrect notion. One major part of the process that helped me feel more inclined to succeed was the group that I was in. Having worked closely with Dani, Emily, and Kathryn all year, I was pleased to be grouped with them for this project. Together we were able to work quickly, and we efficiently split up the work so that no one person was doing too much work. For my part of the work, I did the coding on the page. In the beginning stages, I played a part in choosing what the overall vibe of the site should be. I helped to decide spacing, colors, and font choices. When the initial mockup was finally finished, I then went and added the information that would be on the director page in order to get a general idea of what the side would look like using photoshop. This process helped the group and I realize what we wanted our page of the site to look like. Because we had a small amount of content to work with, we had to be smart about how we presented it in order to make it look professional and useful.
After the mockup was complete, it was time to move on to the HTML work. I was slightly leery about taking on this portion of the project because it had been a while since I last worked on my HTML skills. However, I was able to pick it back up quickly with the help of google and my other classmates. One of the biggest challenges that I faced while working on the HTML was figuring out how to make the videos that my other group members had created into a slideshow. I tried multiple different templates, but nothing seemed to be working. Once I learned that we would be uploading the videos to Youtube, inspiration struck. I had embedded a Youtube video into HTML before, so I knew that it would be easy to embed a Youtube playlist as well. So, I made a playlist with the three videos that were created and embedded it into the HTML. I also had the opportunity to design and execute the navigation bar. Once a mockup was made I went in and created the HTML and CSS code to go along with it. While this was a small task it still was fun to design and I like that my fingerprint is woven throughout the entire archive.
Once the initial content was put into the HTML, we presented it to the class for a test run. After this, I went back in and added the extra details that were mentioned by Dr. Overall like making the logo a clickable link back to the splash page and adding the border to the content area. I then had the rest of my group test it out to make sure that all was correct. Once we all decided that everything looked fine, I zipped the file and sent it to Dr. Overall to be added to the final project.
Design Principles
Design principles were such a crucial part of this project because we were creating something that needed to be accessible and functional for our audience. In order to do that we had to think about the content that we had and devise a plan to present it in the most efficient and clean way. This was part of the reason that we made the videos all pictures with audio of the interview over it. The original video of the interview with Denice Hicks was shot poorly so we had to think of a unique way to make the videos look more professional.
Another design principle that we had to employ on our page was spacing and alignment. Because our videos held the most content, we decided to make those the first thing on our page thus giving them the most emphasis. So, the playlist was the first thing that is seen when opening the director page. We then had Denice Hicks photo and her bio from the Nashville Shakespeare Festival's website. While this wasn't necessarily less important information, it was just not as crucial to the goal of the site overall. One design choice that was made as a group was the colors. I really like that we chose to go with the blue because it felt almost like a computer screen type blue. It matched well with the modern take that Denice Hicks chose to do with Hamlet.
This whole process was extremely intimidating at the start but the way that each piece was broken down made it a challenge yet enjoyable all at the same time. Because of this project, I now have the confidence to use these skills in my professional life.