Mr Branding: How to Stop Designing Square Layouts by Thinking Outside of the Box

Tuesday, September 13, 2016

How to Stop Designing Square Layouts by Thinking Outside of the Box

Websites are built from rectangles

Websites are fundamentally square contraptions.

And with good reason, of course. Like clay tablets, papyrus, and books before them, websites are largely comprised of lines of stacked letters, words, and sentences. Our cameras take rectangular photos. It's no mystery why rectangular 'bricks' tend to build rectangular 'walls'.

The many “blocks” that make up a website are rectangularly shaped by default — for the developers out there, you’ll know that I’m talking about <div>, <article>, <sections> elements and other similar code tags.

[author_more]

[/author_more]

Before CSS3, we had to insert bitmap images into our web designs if we wanted to make different shapes. However, modern day web standards (SVG support for example) allows for more flexibility in this regard.

Let’s take a look at a few websites that have used modern web standards to design irregularly shaped layouts, and more importantly, how that has affected the user experience.

Easee: Simple SVG Example

SVG stands for Scalable Vector Graphic. It’s a modern, technically-mature file format that can be scaled up and down without losing quality. Rather than the normal 'grid of pixels' (i.e. PNG, JPG, etc), SVG is more like an 'image recipe' – double the size of the cake by simply doubling the ingredients.

In recent times we’ve seen modern browsers improving their SVG capabilities, which is awesome news because SVG allows us to create unique shapes without adding to the websites loading speeds.

Let's dive right into my first example.

Simple SVG shapes in a layout

If you take a look at the footer of Easee you’ll see that they’ve used wavy curves in the background. It adapts to any screen size instantly since it’s an inline SVG and the file size of the image is very low – less the 1kb. A bitmap image would have been 4 to 5 times the size.

In fact, here's the entire SVG shape – including a subtle drop-shadow you may not have even noticed on the site.

[code language="svg"]

It also does a lot more than offer something visually “different” — it adds a friendly, curvy, bouncy, fun personality to the design. An ordinary square might not have had the same effect.

By the way, did I mention that SVG images can be easily animated? Refresh the web page and look a little closer!

Aardvark Brigade: Traditional Bitmap Example

Let's take a look at another example that essentially accomplishes the same thing using a bitmap image. I used the Google Chrome dev tools to inspect the topmost background image (under the menubar) and it was a whopping 197kb.

Since SVG files are composed of geometric shapes, it’s harder to create textures with SVG, and since bitmaps are not scalable, the bitmap in this example is very wide (2300px) to account for all screen sizes — another factor contributing to its heavy file size.

Is it worth it?

Heavy bitmap shapes - The Aardvark brigade

My gut told me no, but the tests I ran said otherwise.

I pointed tools.pingdom.com at the site and found it loaded in a swift 1.26 seconds. Since the design uses a lot of textured bitmaps, I was expecting something much higher, but the test did indicate that the website has been heavily optimized. So, this confirms that bitmaps can still be a viable choice if you’re considering the overall performance and optimizing responsibly (and throwing enough beefy servers at the problem).

Note: you can embed bitmaps into SVG files, creating an SVG/bitmap hybrid, which can sometimes be a suitable compromise.

Built By Buffalo: CSS Transforms Example

So far, our examples have been somewhat complex. For simpler shapes (shapes that you can give a name to, like a hexagon, triangle or diamond), you can create using simple HTML and CSS.

Built By Buffalo uses a series of rotated rectangles to create a hexagon. Modern day web standards support transformations like rotate, skew and scale, sometimes eliminating the need for images altogether and even allowing for the shapes to be styled and animated with native web code.

Built By Buffalo: Transforming the default square div box

Joyce Vherck’s website is by far my favorite current example. Her use of shapes is much more than a visual aesthetic, it’s an integral component of her brand.

Better yet, Joyce has used modern web standards to skew traditional boxed elements in a variety of ways. If you were looking for a lightweight method of creating shapes in web design with a reasonable amount of compatibility in modern web browsers, this would be the way to do it — the only drawback is that the shapes would have to be relatively simple.

Slanted sections have become a huge trend in web design, so if you were wondering how to accomplish that — now you know.

Slanted, skewed shapes

If you scroll down on Joyce’s web page you’ll see shapes being used not only in different ways but created using a variety of the methods I’ve mentioned in this article, which iterates on the fact that there’s no right or wrong way to create shapes. It depends on the situation.

CSS Masking

Shape masking in web design can be accomplished with the clip-path property, although browser support is still quite flaky. For this reason, there aren’t many use-cases on the web, but there are some examples on CodePen that can show us exactly how masking works.

See the Pen Visualizing clip-path by Karen Menezes (@imohkay) on CodePen.

As you can see in Karen Menezes example, the idea is to create a shape to use as a stencil and then cut around it. CSS has common shapes built in, but you can also stencil around a custom-made SVG shape.

Continue reading %How to Stop Designing Square Layouts by Thinking Outside of the Box%

by Daniel Schwarz via SitePoint

Mr Branding