Visual Design in My World
For this assignment, I thought it would be fun to evaluate my own past UI work through the lens of seven core visual design principles: proximity, alignment, contrast, similarity, font pairing, color palette, and grid.
Proximity
Things that are close together are more related than things that are farther apart.
Information on the left card here could be equidistantly spaced, but it is both inefficient with space and fails to group information under the related header as it all bleeds together. By adding 8px space within sections, but 32px space between each section, related information is kept together.
Contrast
Contrast creates differences between different elements, which designers can use to determine where the focal point of a composition should be. If everything is important, then nothing is! We create strategic difference so users can visually experience intended hierarchy.
Start and end stops are both darker and 2pts larger than interim train stops, since users mainly think about where they are getting on and getting off. It may be relevant to some riders to know what locations they pass during their ride, but it’s not the primary way users understood their trip, so we reduce its visual weight.
Similarity
Things that look alike are mentally grouped together, and may even have the same function.
Throughout the platform, we used green as the CTA (call-to-action) color in places like buttons. A button doesn’t always fit though, and sometimes you need to hyperlink text. Because text links share the green of buttons, it’s clear they share their interactivity.
Font pairing
Typefaces carry connotations that you can feel. Fonts can be fun or serious. Technical or human. We can leverage that to confer a mood that’s important to a user experience, or express the brand ethos of our product.
By choosing multiple fonts (but sticking to a reasonable 2-3 maximum), we can make use of contrast and similarity as described above, but in how we present our words.
Sharp Grotesk was chosen first because it was bold, forward, and energetic, much like the spirit of our product (it also had proportions well suited to the logo, and everything including the site was designed after the brand). Another grotesque font, HK Grotesk was a natural pairing that came from the same school of typography, and still extended quirky character into body text with details like uniquely angled terminals. Finally, Roboto Mono was a way to reference the algorithm behind our product and celebrate our origin as a technically rigorous project.
Color pairing
Color can be used for differentiation, for functional reasons like conveying a state, or to convey meaning through its connotations (much like type). Traditionally you can choose from tried-and-tested combinations on a color wheel, like complementary palettes (opposite each other on the wheel) or analogous palettes (next to each other). Again, the principles of contrast and similarity…
Purple and yellow are a striking combination—they are complementary color pair.
Grid
Grids bring order to your layout by subdividing your canvas with guidelines to which all elements can be aligned. Especially on desktop layouts where you have huge space to fill, grids eliminate arbitrary placement and help dictate where different columns of content go.
A 12-column grid offered the most subdivisions for flexibility (repeatable taking up 2, 3, 4, or 6 columns of the grid is all possible). The satisfying keylines you see creating order on the page are accomplished just by aligning content to column endpoints.
