top of page

Layout

layout1-01.png
layout2-04.png

The viewer is guided down the page with the vertical page set-up. The viewer should start by seeing the first display demonstrating that mass shootings is a much bigger problem in the US. In both displays the viewer should be guided to the definition display to gather what a mass shooting is. In the first display, the location is highlighted next as the eye goes down the page. The viewer should follow the location display left to right starting with the first row. In the second display the viewer sees a 2x2 section of four displays. The viewer should read left to right again. This information gives details on the shooter, the weapon and the locations. Next, in both displays the viewer continues to read down the page to gather more details about the issue that is mass shootings in the US. 

The first displays are meant to give perspective and background about mass shootings in the US and the rest of the displays are meant to provide more information about the shooter, the weapon, the location and the top 10 mass shootings.

Screen Shot 2019-01-21 at 7.26.51 PM.png

I separate larger sections with a title and dotted line that is featured in my visual language model. I separate smaller sections with a banner and bar that is also featured in my visual language model.

ColorInfograph.jpg

I use blue for the titles similar to displays on my color model. For the banners that separate smaller sections, I use the background color as the text color which is used frequently in my color model. In addition, the dark and light blue are used together on the banner to set the sections apart.

Screen Shot 2019-01-21 at 7.26.51 PM.png

I am following the format of my layout model with a larger display first, the 2x2 section, the 3 columned section, the 2 column section and lastly the larger section at the bottom and the rectangle at the bottom. 

Critique

Abhishek

He first notices the differences in the two displays. He is drawn to the circle visual in the first display and he is drawn to the horizontal bar chart (first section) in the second display. He sees more states in the first display.

He likes the first display because of the map progression and how clean it is. However, he does not like that the definition is too big in the first.

He says that I have matched my visual language model with the flat icons. He also says that I have matched my color model with the red and blue featured frequently and the background as the tan color. He says that the border is bolder in my display as opposed to my visual language. 

Response to first critique

I stuck with the first display and kept the definition display large because it is an important part of the info graph. The definition of mass shootings is a key aspect that I wanted to highlight, every single source is different and with the definition display you can gather what definition you want to believe. In addition, I kept the border the same to match my color model.

Calvin

Calvin reads the title and skims down the page. He notices that the second has more of a variety of information with the four different displays but the first is more in depth with the location display. He questions which one is my timeline display because the location also tackles time.

Calvin prefers the first because he likes the progression in the location display. He also likes the different sizes of the circles in the definition display. He says that the information is more valuable in the first.

Calvin notices that the colors are spot on but I should consider when and where I'm using the colors in the info graph and if the colors could be associated wrongly at all. He notices that the second display matches my layout model more with the four different displays in the 2x2 section. He looks at the text and notices its accuracy to my typography model with the use of the titles and subtext.

Response to second critique

My color model uses the dark blue, light blue and red sporadically and they are not associated with anything. Thus, I kept the colors the same on my display. I made the map display match the 2x2 section better by editing the spacing. 

Michael

Michael notices that the display is very long so he starts at the top. He reads the title and browses the blurb underneath. He sees that in both displays everything is really close together which makes it difficult to read. He reads the definition display in the first one and is confused. He also questions, "What definition am I using?" He says I should address this in the info graph. Michael focuses on which ones that he has not seen and sees the "Where are you most at risk" display in both layouts.He thinks the colors work well together and the flow overall works well.

Michael likes the first display for the four maps all together. He says that the second one is too cluttered with the smaller, different displays. He also thinks the spacing is better on the first display.

Michael zooms in on the border and notices it is a bit wonky. He sees that the small US state at the top is not in my displays. He notices that the banners span the page further in my visual language model (2x2 area) than it does in my displays.

Response to third critique

I decide not to address which definition I am using in the info graph because the sources vary so frequently and because I want the viewers to choose a definition for themselves based on the information I provide. I fix the border on my display. I also add the small US at the top of my info graph. I also edit the banners to span the page further.

layoutrevision-01.png

My layout is structured to be read top to bottom because the information at the top sets the stage for the details towards the end. I put the problem in perspective with the first display and explain the definitions with the second display. The rest of the displays are focused on location and time. As you read down the info graph you gain more details on location and time that can stand alone but also support each other. The appearance display and the "Where are you most at risk" display add more details to the topic that would be out of place at the top of the display. In addition, these sections are smaller because they are not as imperative of information to gain. I made the definition a large display that was more understandable because it is necessary background for the topic. In addition, I kept the location display as the entire 2x2 section because location is a very important aspect of this topic.

Screen Shot 2019-01-21 at 7.26.51 PM.png

I edited the border to make it look cleaner and follow my visual language model. I also matched the spacing between each section. I added the small map at the top of the info graph. I made the spacing on the location display more compact. 

ColorInfograph.jpg

I kept the colors sporadic similar to my color model because the colors are always used together but in different ways.

Screen Shot 2019-01-21 at 7.26.51 PM.png

I edited the spacing on the 2x2 section to match my layout model better and more compact. I added my citations to the bottom section to fill the rectangular box at the end of my layout model.

Critique

Joseph

Joseph starts at the top of the display and follows his eye down the page sequentially stopping at each new display. When he gets at the ones with columns he logically reads left to right. He says that the ordering is successful in setting the stage. He does say that the map could be moved before the relationship display. Joseph is kind of confused with the relationship display and he says to consider changing the labels on the circles.

Joseph likes the revision as the context of the map is necessary and the depth into the definition and map are more necessary over the two displays I am getting rid of.

Joseph sees the large display at the top of my layout model. He sees the 2x2 grid and says hat I follow the correct number of columns in all of my displays. He notices that the main deviation to my layout display is the addition of the large relationship display. He notices that the "Where are you most at risk" display is out of 50% instead of 100% like the matching display in my visual language model.

Response to first critique

I decide to keep the relationship display where it is because if I were to move it the two circle displays would be right next to each other. In addition, my visual language model consists of larger/wider displays at the top and bottom and more compact/detailed displays in the middle. I changed the relationship display by changing the labels on the circles to represent the broad/narrow definition. I keep the "Where are you most at risk" display to be out of 50% because it is clear with the percentage labels and matches the lengths of the similar display in my visual language model.

Autumn

Autumn reads the title and the entire subtext under the title. She reads the display sequentially down the page. Autumn gets stuck on the definition display because she does not see how the large difference in mass shootings correlating to the little difference in definition. She says to make titles more relevant and consistent. She says the display is clean and the colors work well together.

Autumn likes the two displays that I get rid of in my revision but likes the break down of the map in to decades. She said to maybe considering adding the two displays above or below the guns display. She said to consider moving the relationship display to the top.

Autumn sees that the title in my visual language model uses two different colors. The titles for each section and the spacing is consistent with my visual language model. She says to reverse colors in my legality of weapon display to match my visual language model. She says that there is more text in my visual language model. She sees all of my displays are similar to my model. The colors are dispersed in the right amount and right use.

Response to second critique

I made the titles more consistent and tell a better story. I decide to keep the two displays I got rid of out of my final display to keep with my layout model. Adding the two of them would stray from the layout I have currently. I also added more text to my display to match my layout model and break up visual heavy sections.

Jack

Jack sees the title and goes top down because it is a vertical info graph. Jack likes that the top and bottom feature larger/wider displays and the middle has more compact/detailed displays. He reads all the display titles and browses all of them. He says to consider having arrows in the location display. He was confused with the last display being by time and not rank.

Jack likes the new display in that the larger displays are in the top and bottom and the smaller details are in the middle.

Jack says that there is a good distribution of color and the main colors are balanced like my color model. He also sees the impact with my usage of red. He also says that I use the same colors in the same places like in my footer. He notices that the title of the info graph matches my visual language model with how bold it is. He says that there is more text in my visual language model. He says the typography matches but I should watch my capitalization.

Response to third critique

I did not add arrows to my location display because with the layout it is implied that a reader should read left-to-right then go down a row. I made the dates larger in the time display to highlight that the bars are in time order. I add more text to match my visual language model. I change the capitalization of the font in my relationship display to match my typography model.

FINAL-01.png

While I kept the general layout the same, I thought more deeply about the ordering of my elements and the story I was trying to tell. I start with the large country comparison display to put the issue in perspective. I then go to the large definition display to provide further background. Next comes the details which are in smaller sized columns. I end with a larger display to outline the top 10 mass shootings in the US. This acts as the conclusion by once again putting the issue in perspective with the large numbers of people killed and the increase over time.

By changing the subtext under the large title and the section titles I created more of a story and flow to the info graph. I also made large changes to the definition display to fit the width of the model. This way it shows the importance of this display and fits my layout model.

Screen Shot 2019-01-21 at 7.26.51 PM.png

I made changes to capitalization in my definition display to match my typography model. I also made changes to the definition display to fill up the space by using pointers found in my visual language model. I made smaller changes to spacing and added more text to match my visual language model.

ColorInfograph.jpg

I kept the colors the same to emulate my color model. By balancing the usage of light blue, dark blue and red I made the distribution of color in my color model.

Screen Shot 2019-01-21 at 7.26.51 PM.png

I kept the layout the same and made my definition display span the width of the page. That way I keep consistent with the large/wider displays starting and closing the info graph and the smaller/compact displays in the middle of the info  graph.

bottom of page