top of page

Exploiting the visual potential of layout

Displays-03.png
Displays-04.png

I want the viewer to first see the appearance display, so I put it on the left but featured it prominently in each. Then, I want the map to jump out (so I put it alongside the appearance display). Lastly, the viewr should cycle through the timeline, relationship, and numbers sections.

solitudine-il-destino-della-terra-solar-

In both, I put the numbers display up top. In the left one, I situated the appearance display in the middle-left, with the timeline below it and the location and relationship displays in the upper right and lower right, respectively. In the right one, I put the appearance display in the lower left, with the timeline above it and the location and relationship displays in the lower right and upper right, respectively.

Critique

Liam

Immediately upon opening your first display, he noticed that it is about Brockhampton. He said that this is very clear with the main title section on the left side. He was then drawn up to the top to see all of their pictures and names. He then moved down to the origins map, whichhe really liked, and honestly didn't know that they were from so many different places. He then moved down to the Roles section, and thought that this chart is seriously well done. He said that it is both visually appealing and symmetrical, all while actually encoding the information in an easily understandable way. It also posits Kevin Abstract as a central member to the group. In the second display he thought it is a little harder to instantly move to the title just because it is placed lower on the infographic, in a less standard title position. He also thought the flow isn't as smooth or as natural as it is in the first display.

Overall he definitely enjoys the first display more. He thinks it looks very professional and flows super well. He thinks it pulls your eye around the display in a more natural way, especially with the title section in a more standard and impactful spot.

As for my model, he thinks I matched my layout model pretty well. He thought it wasn't spot on but I definitely got the general layout down, especially putting all of the band members across the top (which he loved). The only missing thing really is the column on the far left side, but I have definitely used that space well so he doesn't know if its absolutely necessary. One other thing he thinks could be interesting is maybe album sales/streaming numbers and maybe info on how the band met each other because they're all from different places.

Response to first critique

Given this feedback, I decided to use the first display and keep the overall composition somewhat consistent in order to maintain the balance he liked, but tweak it to adhere more strongly to my layout model.

Rose

When Rose looked at my first display (left), he eyes were immediately drawn to the realistic image of the BROCKHAMPTON members and the title outlined with a bold rectangle. The image itself tied for the largest element on the display with the map, but the realism and addition of the title made it the most visually dominant. She then scanned the top to see that there are 13 members of the band, and looked at the map to understand where each member is from. She read the bottom displays from left to right to learn the albums they have produced and the roles that each member of the band plays. With the other display, her attention was again initially drawn to the realistic image of the band with the title behind them. However, this time she read the rest of the layout from top to bottom and left to right; starting with the number of members, discography, roles, and finally origins. She thought that both displays flowed very nicely and that each element of the display was relevant to the topic and taught her an important piece of information. She said all of the elements worked together smoothly visually to complement each other, and none looked out of place. 

Rose preferred the first display because she thought putting the map and title in the middle brought balance to the overall display. Because the two largest and most bold elements were at the bottom in the second display, her eyes were naturally drawn there and it felt awkward to have to go back up and read through everything. She also thought the smaller displays looked too jammed together because the bottom was so heavy. She thought the first display provided a nice central focal point and then the reader could naturally read through the rest of the elements in whichever order felt most comfortable. 

Rose thought both iterations nailed the thin element at the top that stretches across the entire display to show all 13 BROCKHAMPTON members. However, she thought my second display matched my layout model better. She noticed that my layout model has a striking element in the middle bottom that immediately draws the reader in, which is essentially what I did in the second display by placing my two largest elements at the bottom. However, my first display places these eye-catching elements in the middle. She noticed I emulated my model well by putting the smaller displays on the sides. She thought my model clearly showed 3 distinct columns/sections, whereas it was much more difficult to see the same 3 sections outlined in mine. However, she thinks this can be achieved through some thoughtful rearrangement, and really enjoyed looking through my displays overall.

Response to second critique

Based on Rose's critique, I sought to more clearly have a three-column midsection in my infographic as my layout does.

Sean

When he looked at my first display, He first saw the large appearance display due to it's dominating size. Then, he noticed the map to the right because of the large black area contrasting with the light grey of the background and the sparseness of the other black portions. Next, he looked at the top of the infographic to see the strip of member portraits. Then, he looked straight down to the bottom right and viewed the roles diagram. Finally, he looked left to see the timeline. With the second display, Sean again saw the appearance display first, this time in the bottom left of the graphic. Again, he next saw the map because it was right next to the appearance display and because of the high contrast of the section. Next, he jumped back up to the top of the infographic to the strip of member portraits. Then, he viewed the timeline, finally finishing on the roles section.

He preferred the second display because he felt that the pieces fit more cleanly together with less whitespace, although starting at the bottom wasn't as intuitive. He also felt that balancing the black on the top with the black on the bottom helped make the entire infographic feel more balanced, with most of the color in the middle instead.

He thought that I generally followed my layout model, but the proportions of the different sections didn't match up super closely with the proportions of my layout model's sections. He also noted that my layout model had many more components than my infographic, although there should be a way to combine them that looks visually structured.

Response to third critique

Based on Sean's feedback about my layout model, I tried to adhere more strictly to my layout model and minimize extra whitespace.

Displays-04 2.png

I want users to quickly see the "BROCKHAMPTON" title text and then move across the page, viewing the map and relationship display. Next, I want them to view the top strip with all the members, and then the bottom section with their discography.

solitudine-il-destino-della-terra-solar-

In terms of my layout, I tried to fit the appearance display / title in the same mid-left section as my layout model does. I combined the two vertically-middle sections to make enough room for my map section, and I placed my roles section to the right of that. I populated my member gallery in the top strip, and let my timeline take up the entire bottom third.

Critique

Adi

The first thing he notices is the pictures at the top, but then his eyes jump to find the title on the left side and read the title and subtitle. This tells him immediately what the graphic will be about. Then, he looked back up to the top and sees the 13 members of BROCKHAMPTON, which he likes to inform him of each member's name. Then, he jumps to the map because it is large and bold. He noticed that most of the members are from the south or east coast, but some are from overseas. Then, his eyes move to the roles section, where he sees a three-section category of the roles and how some of the members overlap between the three section. Lastly, he sees the discography section which shows a timeline of the different albums. He notices five albums over the course of three years, stretching from their first to their final album. Overall, he feels that he zigzags around the infographic, but feels that it tells a story.

He preferred the newest version because he felt that it was more readable and felt that the picture didn't dominate the infographic so much. He also felt that the newest infographic flows the best and helped him to read it in an intuitive manner instead of jumping around so much. He also liked that I modified my map to align better with the rest of my graphic and felt that having the extra countries below helps convey the message better.

He clearly sees how I followed my layout because of the top bar and the two lower layers that flow from left to right. He saw that I combined the two central sections into one and made the lower section one complete timeline.

Kelli

She first saw the map in the middle, but was quickly drawn to the photos at the topic, which helped her see how large the band was. Then, he saw the BROCKHAMPTON name and group photo, and then moved back to the map, seeing where they all came from and how they met in Los Angeles. Then, she saw the roles section, and then finally viewed the bottom section to understand their discography as a timeline of their various albums. She felt that the layout was easy to follow and that the amount of color was helpful to draw the viewer in, as did the realistic photos

She much preferred the revised version because she felt it flowed  very well and appreciated how the entire bottom section was a timeline. She also felt that having the roles section higher helped to not draw the user into the corner too quickly. She did prefer the more horizontal map, but felt that the vertically-reworked one worked just fine for my revised layout.

She thought that my display modeled my layout model well, showcased well by the top bar, left-aligned title section. She would like to see the bottom left section connect to the middle left rather than being its own complete bottom section.

Sam

He first saw the appearance display/title and then just dove into the rest of the sections, quickly scanning the map and timeline before spending more time looking through the individual members. Then, he looked further into the map to understand where each member was from. He then looked through the roles graphic

He preferred the revised version because of a larger timeline, because he felt like the flow of the first two wasn't as clear and the infographic didn't feel as balanced. He thought that the revised model was stronger in composition, balance, and visual hierarchy.

He felt that my layout made a lot of sense in the context of my layout model, with a top bar and then a three-column organization in the middle section. He suggested incorporating the background squares from my visual language model as well.

bottom of page