The Importance of Shapes (That Aren’t Squares)

Flat design and innovative UI trends are all part of a growing movement toward recreating realistic spaces and scapes across a website or mobile application, but there’s an interesting trend running alongside it, and it’s a move away from boxes as containers, and there are arguably two main ways that designers can approach a world without corners.

  • The organic look. One of the ways that this squareless design trend has been implemented is in the creation of “workspaces” on websites, which can include round, sticker-like images and elements that are placed in a way that seem like an organic, living plane. If one of the keys to flat design is to mimic the real world look of a desk and paper, complete with shadows and layers, then the organic approach to removing squares is to create what is effectively a “messy” desk. That doesn’t give you carte blanche to slap elements anywhere and everywhere, but it does remove the notion that your entire UI has to be symmetrical, perfectly angled, and precise.
  • The illusory look. Another advantage that flat design brings to us is the creation of a pseudo-3D aesthetic. Either used on its own, or combined with the organic approach, the illusory look can take it a step further, and turn a monitor into a viewport to a real space somewhere in the world. Restaurants, vacation companies, and other services that exist outside of the web can really benefit from this ability to transport a visitor to another space, complete with shadows, vivid coloring, and more. With this approach, it’s usually best to use real, and not generated, image assets, to make the illusion more effective.
The Importance of Shapes (That Aren't Squares)

Combining Nontraditional Shapes with Other Ideas

If the placement of these shapes was effective enough, we could leave it at that, but there are other interesting ways to increase the visual impact and wow factor that these images have, including:

The Importance of Shapes (That Aren't Squares)
  • Parallax design, which implements a background image that can stay static or move at a different speed from the scroll of the page. Just as an example, a rounded image representing a ball could be used with a parallax background implying the source from which it is being thrown, and through the use of controlled scroll speed to parallax speed, can give the illusion of an object in flight. With more advanced control, you could even make the background shrink away and scroll to make it seem that the object is getting closer.
  • Material design and Kpop aesthetic, both of which use shapes that “pop up” and have texture, multifaceted shadowing, and layers. To implement these properly you’ll need to put a lot of work into editing your images to give them a more realistic look, but the end result could be something amazing, vivid, and very engaging for visitors.
The Importance of Shapes (That Aren't Squares)

The ideas don’t stop there– with animated UI features and more, you’ve got a lot of different ways to take full advantage of shapes that just don’t fit into a convenient box anymore.