The Element of Form is, Like, So Deep…
Okay, so maybe not that kind of ‘deep’. As an element of design, Form is what lends a sense of depth, visual interest and realism to your two dimensional designs. It’s one the 7 Elements of Visual Design, and it’s a particularly interesting one. Even Google uses it heavily.
The word ‘Form’ itself implies three dimensional (3D) space, but in web design we’re usually talking about a 2D medium. A screen. So on the web, this essentially means faking our viewers into seeing Form and Mass through the use of shading and perspective.
If you were thinking this sounds a bit unnecessary, you’d be wrong.
Form serves a crucial role in web design. Designers can use Form to play some powerful psychological tricks on users. These tricks create illusions of 3D space that your users will associate with their real world expectations, which can drastically improve their experience with your 2D interfaces. It’s so powerful that Google built its entire design language around this truth. But more on that in a minute.
What is ‘Form’ and ‘Mass’ in Design?
The cube above is the most basic example of Form. By shading with different tints, three quadrilateral Shape elements instantly become a recognizable cube with Form and Mass.
It’s a pretty neat example, but also fairly abstract. You might asking yourself, “Is Form actually useful to designers in the real world?”
Oh yeah.
When Form is applied to solving practical web design problems, that’s when it gets insanely useful.
Why Form & Mass Matter [sic]
First off, Form makes it possible to make awesome ‘Elements of Design’ dad jokes. But that’s not the usefulness I’m talking about.
Ever since the great Renaissance painters began employing perspective in their works, humans have been using Form to manipulate our visual perception of space. And, waaay before that we were playing with Form in the physical 3D sculptures we created.
In short, Form is an imitation of our real world. And this is the crux of why Form and Mass is so important for designing interfaces.
Using Form Elements in Web Design
Heuristic number two on Nielson Norman Group’s list of 10 usability heuristics is “Match between system and real world.” So, imitating a user’s real world expectations is central to creating a great digital experience.
Users look for, and recognize elements that match their experiences in life. In web design, Form then becomes the precursor to implying weight, interactivity, and relative hierarchy within a layout.
Google’s Material Design is effectively one massive exercise in this practical application of Form in web design.
Material Design works by creating a sense physical cards existing within a three dimensional space. Google accomplishes this mostly through, you guessed it, shading and perspective.
Google’s design language has become so popular and effective that it’s now ubiquitous. And when it comes down to it, the concepts of Surfaces and Cards are just ingenious expressions of Form.
Form ➡️ Matching Users’ Real World Expectations
Material Design’s popularity is a testament to the actual impact of NNG’s heuristic of “match between system and real world” and the ability of the Form design element to create it.
This is jut a quick look at the use of Form and Mass in Web design. If you’re interested in learning more, Google’s Material Design site is a wealth of information, and don’t forget to check out the references listed below.
Form is one of the 7 Elements of Visual Design, and part of the longer list of Elements and Principles of Visual Design. When it comes to UX, UI and web design, these are essential tools to have in your skillset.
References
- Tomita, Kei. “Principles and elements of visual design: A review of the literature on visual design of instructional materials.” Research Gate. Educational Studies, IERS, International Christian University, 2015.
- Hu, Meidor. “Elements of Design.” Art 101. University of Hawaii. Accessed 28 April 2020.
- “Visual design elements and principles.” Wikipedia. Wikimedia Foundation, Inc. Accessed 12 June 2020.
Cover photo: Negative Space