View here online.
Code on GitHub: https://github.com/HereIsJade/Hate-Crime-News-DataViz
Data source: https://projects.propublica.org/hate-news-index/
So the both of us went to attend a book signing for a YA author named Ryan Graudin, held at an indie bookstore called Books of Wonder. Jade has no previous knowledge about this author, while Shannelle’s very familiar with the fandom, but she wasn’t expecting it to be so small. There were about 20 people attending. She was following a Twitter called YA Book Events NYC, who had been live-tweeting the event as well sharing updates like how the event was starting a little later than advertised, or pieces from the talk. From the angle of the photos, we guessed that she was one of the two people sitting at the front in the second column of seats, which didn’t really matter, as they were friends.
Shannelle found out about this as she was lining behind a relatively well-known book blogger, known as Alexa, and the two people we were guessing to be the YA Events tweeter went up to her, along with someone else, and started chatting about books. Shannelle managed to hear Alexa complimenting someone else about her readings speed, and she even saw one of them hand over an advanced reader’s copy (ARC-cheap editions of a book sent to media for review purposes ahead of the publishing date) of Batman: Nightwalker over to Alexa. Since the author’s Marie Lu, it’s definitely an ARC that’s very, very in-demand.
So arguably, these are the big-name fans, and we’re guessing they’re in the middle-aged demographic. We didn’t really spot someone who looked like a teen (what does a teen even look like?), although there was a middle-aged man, and including us, we were definitely the smaller players. Again, since it was small, there wasn’t really a chance for people to assert their hierarchy, like people waiting in line before Hillary Clinton’s signing event at Barnes and Noble in Union Square. From Shannelle’s previous years being in the online fandom, she argues that those are far better group cohesion activities, especially with how people show off the ARCs they receive from publishers, and offline activities like signings can be a way to show off hierarchy–I was at this event and you weren’t!–if the author is big enough.
4 Words: Closure, Good Continuation, Law Of Prägnanz, Proximity
The principle of closure states that whenever possible, people tend to perceive a set of individual elements as a single, recognizable pattern, rather than multiple, individual elements. The tendency to perceive a single pattern is so strong that people will close gaps and fill in missing information to complete the pattern if necessary.
When simple, recognizable patterns are not easily perceived, designers can create closure through transitional elements (Le., subtle visual cues that help direct the eye to find the pattern).
Closure can be used to make us perceive objects or patterns using the smallest amount of information. Our minds are so eager to fill in the missing information that it can be done with very few elements. Use closure to reduce the complexity and increase the interestingness of designs.
Creating Effective Closure:
- Positive and negative space
This can be achieved by looking for the hidden forms in the negative space of a design or within type. Additionally, removing elements from the foreground can create interesting negative shapes, and in doing so, simplify a design.
Create a strong contrast between the foreground elements and background. As always, black-and-white creates the best contrast, but you can also experiment with complementary colors for strong contrast as well.
Color not only adds life to a design, it also can be used to reinforce relationships, especially if using abstract shapes to represent forms.
It asserts that aligned elements are perceived as a single group or chunk, and are interpreted as being more related than unaligned elements.
Our mind chooses the path of least resistance, perceiving lines as continuing along their established direction. The ability to accurately perceive objects depends largely on the perceptibility of tile corners and sharp curves that make up their shape. When sections of a line or shape are hidden from view, good continuation leads the eye to continue along the visible segments.
Create Effective Continuation
- Avoid disruption, or use it to your advantage.
To encourage movement, avoid elements in your design that might disrupt the established direction of movements, such as too much white space between elements or large graphics or images. Conversely, you can use disruption to focus attention on an important element or to signify the beginning or end of a section or grouping.
- Ensure good alignment and consistency between elements.
Make sure that the elements establishing direction are aligned well and consistently styled. Poorly aligned or inconsistently styled elements will either undermine the direction of movement or cause the eye to lose the established direction.
- Use cues to suggest direction.
For horizontal scrolling, such as we saw in the App Store, indicating that there is more to see to the left or right to help establish the direction of movement.
- Avoid disruption, or use it to your advantage.
This linear arrangement of the rows and columns of these various apps makes the app icons seem more related than other elements on the screen, such as the time display, the battery indicator. Continuation can be used to imply a direction to follow when space is limited. Play this short video to see it in action.
Law Of Prägnanz:
It asserts that when people are presented with a set of ambiguous elements (elements that can be interpreted in different ways), they interpret the elements in the simplest way. Here, “simplest” refers to arrangements having fewer rather than more elements, having symmetrical rather than asymmetrical compositions.
Therefore, minimize the number of elements in a design. Note that symmetrical compositions are perceived as simpler and more stable than asymmetrical compositions, but symmetrical compositions are also perceived to be less interesting. Favor symmetrical compositions when the efficiency of use is the priority, and asymmetrical compositions when interestingness is the priority.
It asserts that elements close together are perceived as a single group or chunk, and are interpreted as being more related than elements that are farther apart.
The grouping resulting from proximity reduces the complexity of designs and reinforces the relatedness of the elements. Conversely, a lack of proximity results in the perception of multiple, disparate chunks, and reinforces differences among elements.
Proximity is one of the most powerful means of indicating relatedness in a design.
White space guides the user’s eyes in the intended direction, creates contrast and makes a lasting impression.
The card above is a good design example which makes great use of proximity as the information is all related. Take note how the studio name and its descriptive text are grouped together, which makes perfect sense as these three lines all have a connection to each other — the name of the business and what the business does. Now look at the second paragraph — this contains all the contact information about the business.
Creating Visual Hierarchy
Hierarchy is conveyed by the way in which elements are grouped and sub-grouped. For example, a grid-based layout, with appropriate gutter sizes, allows for plenty of room between sections, and in many cases, it forces the designer to implement principles of proximity without even thinking about it.