Exploiting the visual potential of time
I want the user to be able to look at my displays and get a sense of how BROCKHAMPTON and its music have progressed over time. This includes things such as major events in the group's lifespan, album releases, song releases, movie releases, etc. I used a single timeline display because I felt as though it was good for the user to be able to see these events on a continuum, from the group's birth in 2010 to where they are now in 2018.
I emulated the same minimalistic thin lines as my visual language model. I also incorporated the dark section title box with light font.
I incorporated blue and red from my color model to accompany the black text that is consistent with my color model. As my color model displays, I kept the text black and only used colors for the graphics, but incorporated black into the graphics as well.
I used the same combination of title and heading text for the section title and event titles and for the event descriptions. I also used the more condensed subheading typeface for the dates. More specifically, I used Acumin Pro Wide (semibold) for the titles/headings, Acumin Pro Condensed (light) for the subheadings/dates, and Acumin Pro (regular) for the body text.
This would likely go on the top of my display. I chose this area because it was such a long, skinny rectangle that would be ideal for a timeline-like display such as my own.
Critique
Won Barng
With the first display, he saw a timeline of a boyband upon first glance. He noticed that the dates were labeled well, and that they connected to the corresponding spot on the timeline. He saw that the title and description were clearly placed in each information section, but that it was a lot of text. The jagged and non-uniform nature of the curves threw him off as well, as it made the display both more confusing and more busy. He also noticed that the album was uncapitalized, although this is an intentional artistic choice made by BROCKHAMPTON, so I will have to decide whether to keep it that way or make it consistent with the other titles. With the second display, he saw less information in a more simplified, cleaner display. He found it easier to see, for it contained significantly less text than the first one and had less distracting lines. The big circles threw him off at first as well, and he found the time labeling/structure to be confusing and not intuitive. It was hard to see where each year started or ended. He noticed that all the lines above the timeline are red, and all the lines below it are blue, which he appreciated for unity. Lastly, he thought that the text was too small for each of the displays.
He preferred the second display because it was easier to read and understand. He liked the straight lines, for they seemed less distracting than the jagged lines of the first display. He did mention, however, that the title highlight/box was something worth moving over to the second display as well.
He thought that there was too much text on my displays compared with my visual language model, and that I should limit the information if I want to properly match it. He noticed that the highlighted title matched my visual language model. He saw that the black text of my display was the same as the black text in my color model, but noticed that my color model only uses black lines and not the red or blue ones I had in my display. The title typography matched my models, he said, as well as the condensed font for my subtitles, although I should put my headings and subheadings in all caps to fully match my typography model. He thought that the layout model would not accommodate this display in the top box for it would get squished in the limited vertical space, so I should consider moving it to the bottom middle section.
Response to first critique
I kept all the text in capital letters to adhere to my typography model, which he suggested. Additionally, I went with a much more minimalistic overall display to appeal to my visual language model and not have as much distracting information. Also, I boxed the section title text with the black box shown in my visual models, as he recommended.
Kelli
She quickly in my first display saw that it was a boyband progression over time, although the title made he confused about whether it was a specific boyband or just boybands in general. She saw the use of three different colors and that they worked to both convey information and make it more colorful and visually diverse. She noticed that the headings don't pop very much, and they don't stand out because of the frequent use of all-capital letters in the body text. She suggested using more spacing/separation to mentally separate the heading from the description. She liked the bold, boxed title and found it easy to read. She also liked the complex lines, for they seemed like an intentional artistic choice for a computer-glitch-like effect. With the second display, she quickly noticed its simplified nature and reduced information. She found it easier to read and very clean, with information clearly grouped and colors grouped to give a sense of unity.
She preferred the second one due to its easier-to-understand nature, for the open space made it feel easier to skim through and grasp the information. She liked the simplicity over the first one and that the information was grouped by category more distinctly, but wanted me to incorporate the boxed title of the first display, and perhaps some relevant/descriptive photos as well.
She saw that i incorporated straight lines and blocks, and kept the knobs at the end of my timeline consistent with my visual language model. She also noticed me matching the black boxed and highlighted title. She thought there may be a way to utilize colors more in order to better match with my color model, such as making my branched lines a thicker weight. She found the fonts to all match up in style, weight, and size. She thought that the bottom of the model would be a good place because it would balance with the focal point of the appearance display in the middle / middle-left, because my time display is more understated, visually.
Response to second critique
I vastly changed my display to open up the visual space much more so that I could provide a simple display with easy to understand information. Also, I boxed the section title text with the black box shown in my visual models, as she recommended.
Stefani Sanchez
In the first display, she found the title confusing but thought the display contained a good combination of colors and a good alternation of such colors. She found the line shapes interesting and visually striking. She liked the boldly-weighted solid black timeline, for it drew her attention to the timeline aspect of the display immediately. She found the layout and grouping of the information blurbs intuitive, and like the way they stacked. She found the second display to be a clearer layout of time, and easier to read through. She thought the unboxed title was clear but not as fun or interesting as the first display. She liked the grouping of both colors and content by section (above vs. below the timeline), as it made sense to her.
She preferred the firs tone better because she appreciated learning about how BROCKHAMPTON formed and their other non-music-related information. She found the first display to be more comprehensive, and liked the glitch-style lines. She suggested to perhaps incorporate the vertical organization / separation from the second display into my first display, with the history on top and the music on bottom.
She thought that the visual language model was shown in the boxed title and in the straight lines. She thought that I incorporated color well with the use of colored lines, and found the black text accurate to my color model. She thought I matched the text well overall but could add colored text to the key or the dates. Lastly, she found that the bottom middle seemed like a good spot for this display, because it will probably take up too much vertical space to fit at the very top of my layout.
Response to third critique
I made the title extremely straightforward and boxed the title, which were two suggestions that came up with this critic. I also ran with the clearer layout of time by using a minimalistic overall approach.
This display uses a timeline to display time over a horizontally linear space. In it, I display BROCKHAMPTON's albums according to their release dates. With this, I hope for users to get a quick and clear look at what and when BROCKHAMPTON's major releases are.
Overall, I took a minimalistic approach to give my display the same open feeling as my visual language model. This included limiting the size of photos, limiting text, and refraining from excessive adornment. I incorporated the boxed section heading present in my visual language model. I also used thin lines with round knobs to emulate the line styles shown in my visual language model.
I used black text and mostly black lines, representative of my visual language model. I used colors a little bit in the blue connecting lines. I also used the light grey background.
I used a bold version of Acumin Pro Wide for titles and a regularly-weighted version of Acumin Pro for the body text (in this case, the dates).
This display will go on the bottom, which works well because of the horizontal nature of the timeline (it looks much better along the top or bottom edge, and the content position makes it a better fit on the bottom.
Critique
Alison McGuire
She said she doesn't even need a title to understand that this timeline is showing her when albums are being released. She liked that there is album art, the title and release date. She was not sure why there are random dots along the line but thought that maybe it will make more sense when she sees the visual model.
Compared to the other two models, she like the newer one the best. It is more clear with less text. She understands immediately what I'm trying to convey, rather than having to read text to understand.
She said for the visual model, the lines are thinner than in my drawing, but does see that there are small dots on the ends of some of the lines. There is a general minimalistic scheme throughout, which is captured well in the graphic. For the text model, there is similar text. White in black box with thick lines, as well as small text as captions. For the color model, the album art doesn't exactly follow it, but generally does an okay job with the yellow and blue. The color model and the visual model both include black and white photo so maybe trying that to make it fit the color model better. For the layout model she could see it going across the top or along the bottom.
Response to first critique
Per this response, I kept a minimalistic overall feel by using less text and a simple, intuitive design.
Avani Amin
The first thing she noticed was the images, was able to understand that these were BROCKHAMPTON’s covers. Then she saw the title, which confirms that this image has to do with BROCKHAMPTON’s music. She saw the different size dots on the timeline, she thought they’re used to better break up the year and place when albums were released. She was quickly able to see that the group released three albums very close to each other. She noticed that there is a small text error (one album labeled 2017 when it is from 2018). She really liked the use of the album covers as opposed to just the name and release date, it’s more visually stimulating.
She preferred the revised display. She felt it is a lot cleaner than the original display since it is less information heavy but can still grasp the same conclusions. She liked the use of album covers as opposed to the text descriptions. She thought it could be cool to incorporate EPs and singles like my original display did but not think it was completely necessary.
She saw how the album covers represent the feel of the image on the model. She also understood where the line treatment came from and thinks the width of each line emulates those that are on the model. She thought that the background color of display might not match perfectly with the background color on the model but it might just be the way it’s looking on the screen. Other than that, she felt that the colors in the display align really well with the colors in the model. She felt the display makes a good use of the typography model. She really liked the use of the box around the section header. She thought that the font size for the years in the timeline and the text for each album might need to be a little bit bigger to fit the scale of the model. She understood where I want to place the model. She agreed that the given the horizontal nature of the display, it best fits the horizontal element at the bottom of the model.
Response to second critique
First, I fixed the date error that this critic brought up.I followed her preference of maintaining the album cover art, even if it created a little bit of tension with my color model. Lastly, I simplified the lines by removing some of the marker knobs because that seemed to create confusion.
Minsu Gim
The first thing he sees is the title ‘Discography’ which is very easy to see and read with the black text box and white text. He sees the timeline which has dots to represent certain junctions of the year. It’s unclear wether the spaces between two bigger dots is the span of a year, or wether the year starts where the label of the year is. He can infer that the spans between the bigger dots are a year from reading the date labels for each album and matching the position with the months. Viewing the timeline left to right, he sees different albums, but is unsure what band the albums are from, or if they are even from same band, except for the three ‘Saturation’ albums. For a viewer that doesn’t know the band or is not into this genre of music, it would be difficult to understand. However, he notes that given context from the rest of the infographic he would be able to infer the band/genre and what the timeline is showing. He likes how the stems match the dates and overall how you can see the timeline of when this band releases their albums.
He thought that although the second iteration of the timeline is visually more attractive, the first one shows more information and context. Perhaps there could be a combination of both so that the viewer can get more information about the albums and not just the date, name and picture.
In his eyes there seems to be a good emulation of the visual language model, with thin lines and small circles. However besides the NBA logo, the model does not used full color images, but grayscale. My display deviates from this but perhaps for good reason; the colored albums make the display pop more. He notes that perhaps the minor albums could be grayscale and the major releases colored to add more contrast. The line for the timeline could be thinner to follow the VLM better. In regards to my color model, he thought it seemed to follow the dark gray and teal color scheme well, but there seems to be an even distribution of teal and dark gray in the model. Perhaps the text box for the title ‘Discography’ could be teal to even out? Or the dates could be teal. Playing around with colors might help better emulate the model. He thought I followed my typography model well, but the title in the model seems to be of a slightly bolder and different font than that of the one in the display. He thinks where I plan on placing it makes sense, but it may be worth noting that it would be the first thing he would see on the infographic which may not be good since this display out of context is hard to understand. Having a blurb or some kind of description that the viewer sees before this timeline would help, especially for those that do not know about Brockhampton.
Response to third critique
After you've made your revised display, describe how you've responded to each of your critic's comments with your revision (if you decided not to make a change best upon a comment, explain why)
This text should explain how time is represented either as a pattern (e.g. a rectangular or circular grid representing days in a week, months in a year, hours in a day etc.), or as a continuous string of events that happen in sequence (typically with the size of space between events corresponding to the amount of time elapsed). It should also describe the message you want the viewer to take away (how should they complete the sentence "I just learned...")
Overall, I took a minimalistic approach to give my display the same open feeling as my visual language model. This included limiting the size of photos, limiting text, and refraining from excessive adornment. I incorporated the boxed section heading present in my visual language model. I also used thin lines with round knobs to emulate the line styles shown in my visual language model.
I used black text and mostly black lines, representative of my visual language model. I used colors a little bit in the blue connecting lines. I also used the light grey background.
I used a bold version of Acumin Pro Wide for titles and a regularly-weighted version of Acumin Pro for the body text (in this case, the dates).
This display will go on the bottom, which works well because of the horizontal nature of the timeline (it looks much better along the top or bottom edge, and the content position makes it a better fit on the bottom.