Category: Wireframes

After having experience using the Scalar website as a home page for my project and using WordPress as the host for the mini-project, I leaned more toward hosting my individual project on WordPress as well. Scalar gives a wonderful opportunity to direct the reader on the pathways in order to perceive the story as the author wants it to be perceived. In the case of a WordPress website, an audience has more freedom going in between pages and all of them are very much up-front.

Below you could see the general structure of my website with main pages and subpages. I decided to draw the website wireframe by hand because it was easier for me to envision this way.

Each page will use a couple of digital tools. Mostly I am going to use TimelineJS, StoryMapJS. For exploring some sections of the Opera I am going to use Thinglink. In order to bring some context and annotate newspapers that project significant insights for the main argument of the project, I am going to use Zoomify in order to analyze different sections of the newspaper pages and then include those on StoryMapJS.

Most of the pages will have at list one digital tool used because these four weeks really showed me that the most effective way to convey the narration of any project is using DH tools extensively.

Especially in my case as my centerpiece is a musical work and posters and newspapers are not in English, annotating those with digital tools and making it more interactive is very crucial for engaging an audience.

The music page is going to be one of the heaviest pages with the digital tools and it is going to incorporate two digital tools that we have not covered as a group during the workshops. However, Thinglink and Zoomify are pretty intuitive, and using the Digital Humanities Toolkit website is a wonderful source in order to direct me exploring those. Both tools are amazing sources for annotating pictures and scanned documents and the final product is very interactive and user-friendly which is my main goal for the project.

I am sure my wireframe is going to shift and some of the pages could transform into one or I am going to skip some of them. However, having a skeleton of my website is very crucial for evaluating my limits and what I can achieve in the next four weeks. It also gives me a nice glance of the final product that is very motivational.

Written by Ana Vashakmadze ’22, Student at the Sunderman Conservatory of Music, Gettysburg College, part of the DSSF Summer ’21 wonderful Cohort.

In the spirit of ‘Digital’ Humanities, I decided to make a wireframe digitally.

This is the general layout of my homepage. There will be a horizontal navigation panel, a search bar, a timeline preview, and contact information. The text will be very brief, and will give a preface about the project.

There will be two pages under the About menu. In the ‘About this Project’ page, I will be writing about how I came across Lilith, how I came up with the idea, and will contain information about the DSSF. In the ‘About Lilith’ project, I will introduce Lilith.

Next, there will be a Lilith menu that will contain pages such as ‘Lilith in Ancient Texts’, ‘Lilith in Art and Culture’, ‘Lilith Transformed’, and ‘More resources’. These pages will elaborate further on the different slides of my timeline for people who want more context than that provided by the brief timeline slides. Anchor tags placed on the slides will directly link to paragraphs in this section.

Since the Timeline is the central focus of my project, it will be occupying the entire page. Each slide will give an option to the audience to learn more. These will be linked to paragraphs providing more details about the events in the timeline.

Lastly, the sources menu will provide the Bibliography, Documentation, and information about me, the author.

This project is a work in progress, and as such the wireframes may/will undergo changes as I start making the web pages.

Created by Shukirti Khadka, Gettysburg College Class of 2024, and part of the DSSF 2021 cohort.

The Project “Cambodian refugees in the 1980s: “a story of struggle, early experience and resettlement in the US” will be using WordPress as a host website. In the website, below are the theme/or a flow chat of content for the Project:

This is a wireframe for home page, and other menu that exist on the website:

These are some plan of the website. Some adjustment might be made as the website itself was built.

Theary Heang’ 24

For my Wireframes I got to put my ideas onto a chalkboard to visualize and organize them.

Originally, I was leaning towards the blog option that I could’ve had with WordPress. However, I decided that the evolution of comedy could either be observed chronologically (the order in which everything is happening), or technologically (stage, radio, television), so I thought it would make sense to use Scalar’s “Choose your own adventure” style of navigation.

There is still room for changes after these wireframes, but it was great to look at what I need to do.

From the timeline, users will have the opportunity to look at different areas of comedy. These areas will be split into 3 main sections (Stage, Radio, Television). The starting point will be Vaudeville (Stage).

It will take some more time (and room on the chalkboard) to figure out exactly which directions the navigation will take the users, so that they can still see every page, but the Vaudeville launching point should be able to direct users to the next step in the Stage category (Stand up) or the next historical and technical focus (Radio).

If users want to complete the Stage section before moving on, they can explore up until the Improv page, and then be directed right to Radio.

There is still some fine tuning to be done with this layout. Orange post its represent either a tool that I will need to use (in this case navigational components of Scalar and Timeline JS) or additional resources (e.g.: if I want to show two video examples on a page instead of one). While they are not seen in this pictures, I will still need to include my attributions and properly credit my images, videos, and audio recordings used for this project. While I can still re-evaluate the pacing of my “Choose your own adventure” technique, these will be the main pages I am using.

Created by Nicole Parisi, Gettysburg College Class of 2023 and member of the DSSF 2021 Summer Cohort.

For my project (working title “Gettysburg College’s Majestic Theater: Big Role in a Small Town”), I intend to use Scalar to host my website.

Because Scalar is organized like a book, with “chapters” that move in a certain direction, I have created an overview wireframe with arrows pointing in the direction that viewers will be experiencing the website:

As you can see, my current plan is to have six overall pages (a number which could very easily change as certain sections change) that all build off of the previous page.

---

First and foremost will be my title page. It is very simple, featuring a large image of the Majestic Theater, a title, and a “continue” button.

---

The next page will be an introduction to small-town theaters and a brief history of the Majestic Theater in Gettysburg, PA. It will also feature a VoyantTools wordcloud to help introduce the “vibes” around small-town theaters.

---

Next will come a page explaining the major competitors that movie theaters have faced throughout the decades, as well as some graphs/charts to visualize data surrounding movie-going and theater locations. If I can locate the data, I’d like to include a StoryMapJS mapping out small-town/historical movie theaters that have closed.

---

The fourth page will be a positive page noting the success behind the Majestic Theater and small-town theaters overall, with a special focus on the renovation done to the Majestic, followed by the embodiments of the four themes that are all in common with the roles of small-town theaters.

---

The fifth page will visualize the present and future of the Majestic Theater in an attempt to keep the website/project relevant as time passes by. It will feature a collage of patrons’ reflections, photos, comments, and notes. I would also like to include an RSSfeed of the Majestic Theater location on social media (Instagram? Facebook?) for an element that will always remain fresh and new.

---

The final page will be a generic “About the Project” page, featuring some final conclusions/thank-yous, the sources I used, and a small bio about myself.

And…that’s all she wrote, folks! Those are the current wireframes for my project. I’m sure things will need to be adjusted as new data surfaces, some plans become irrelevant, and expectations shift and mold. At this point, though, I’m able to use these as visualizations in the skeleton phase of building my project. Thanks for checking out my wireframes!

Cheers,
Carlee

To construct my wireframe, I decided to go back to the basics of pen and paper. The purpose of my wireframe was to organize my ideas, tools, and website into an easily-understood medium. By the time I am ultimately done with the project, I want my data and visualizations to reflect clarity. I will utilize WordPress to create my website, and I will divide my website into the following pages: Introduction (to be renamed later), Theme 1 (to be renamed later), Theme 2 (to be renamed later), and the About page. The following four images outline my four respective pages.

This wireframe was created by Ben Johnson, Gettysburg College Class of 2022 and member of the DSSF 2021 Summer Cohort.