The Use of Square and Diamond Shapes in Web Design

If you Google ‘The use of squares in web design’, the results will show articles that feature websites with grid layouts – that is not what we are doing here, since we have already featured such sites. Square elements outside of grid layouts have not really hit the big time in design trends, but turn that square by 45° and diamond shapes are currently trending.

In this article we bring you an inspirational selection of square and diamond shaped elements in web design.

Square Elements in Web Design

KLM – Flat or Not

This site does not use a grid layout, but on it’s last page it uses a small grid of square navigational elements.

KLM

Kenji Endo

This Japanese musician has a very minimal and dark website, and the small slide show is the only square element on the site.

Kenji Endo

Rogue Society

This gin manufacturer uses many different shapes for their minimal design, and on the home page there is only one square – a couple more square elements can be found as you scroll down this one page site.

Rogue Society

AYR Editions

AYR are denim and jeans manufacturers and their logo – both their main logo and their fall collection logo – are black lettering in a black hollow square. They use the fall logo as the centerpiece of their home page.

AYR Editions

Ludlow Kingsley + Chocolate = $ For 826LA

This site is owned by chocolate manufacturers Ludlow Kingsley and it has been created to raise money for the 826LA charity. The idea is that you donate to the charity through them and they will send you a bar of chocolate. The site uses a lot of animation and illustration, and you can either scroll down the page with your mouse or click on the 2-tone gray squares that will change color as you do so.

Ludlow Kingsley

Wellness Sport Club

This is the site of a French sport club, and the ‘wall’ of the area the girl is exercising in is made up of square navigational elements. If you click on the arrows the ‘wall’ moves round to reveal more squares.

Wellness Sport Club

Winnica Chodorowa

This is the site of a Polish vineyard. The slideshow displays images in black and white until you hover the mouse over them, when they transform into full color. The (almost) square hollow element on the right side of every slide contains the company name and the region of the vineyard.

Winnica Chodorowa

HelloBank!

A mobile app site, they use a square shaped speech bubble with a letterpress-effect type style.

HelloBank

Mash Web Design

This web design agency have used many trending elements on their site. The full width background has a slideshow on a static back-drop of many images of people in a grid-style layout. They also have an asymmetric small grid design with solid blocks of color and flat icons. A lot of use of squares and geometric shapes on this site.

Mash Web Design

Carmina Slovenica

This is a production house and they use a lot of square elements in their design. There is what appears to be a progress bar of hollow squares – but it is, in fact their logo. The images in the slide show are divided into squares and there is a nearly square transparency for the text for each slide.

Carmina Slovenica

Misha Nonoo

Misha Nonoo is a London-based fashion designer, and her minimal site features a square of green transparency (that, on mouseover, sometimes becomes purple) on the image on the right.

Misha Nonoo

Raphael House

Raphael House is a charity for the homeless and needy families. They use a stylized blue transparent square in many places on their site, in keeping with the predominantly blue and white color scheme, and reflecting the shape of their logo.

Raphael House

Manzalab

Manzalab are a French game creation company. Their logo is a square made up of 9 small squares with one breaking away. The path of squares wends its way all the way down the site as you scroll down – this company were definitely thinking ‘in the box’ when they designed this site!

Manzalab

One Note Against Cancer

This site belongs to the French charity APREC (L’Alliance Pour la Recherche En Cancerologie/The Alliance for Cancer Research). Backed by cancer survivor Kylie Minogue, the idea here was that visitors ‘bought a note’. If you hover the mouse over any image on the chart, it is outlined by a square and a clip of the artist indicates what you are buying – for instance, you can buy a sung note on the Kylie images, or a guitar note or drum beat on other images. The aim was that every note in the song would be bought. You can hear the song (Crystallize) and see the video on YouTube, and buy the song on iTunes.

One Note Against Cancer

Diamond-Shaped Elements in Web Design

AXA Annual Report

This is the AXA site for its 2013 annual report. They use a diamond-shaped grid effect as a navigation menu on their home page.

AXA

Andy Shield

This is the site of freelancer Andy Shield, and it is very minimal in its design and uses shades of gray and blue as a color scheme. The home page is very nicely designed using diamond shapes and rectangles.

Andy Shield

Schiphol: Desination Unknown

Schiphol is Amsterdam’s airport, and this site presents you with a geography game. You have to decide where a picture was taken and then locate that place on the map. The images are from Instagram. The home page has a series of diamond shapes in the centre of a geometric background texture, and the game itself is presented on a diamond shaped grid.

Schiphol Destination Unknown

Iron to Iron

A web agency owned by two guys, one a designer and the other a developer. They use a lot of diamond shapes on their site, and the home page has a series of interlocking diamonds that create smaller diamonds.

Iron to Iron

Wit Code

This Brazilian site has diamonds throughout their design. As you scroll down there are diamond shapes, and more diamond shapes and some other geometric shapes, all on a tiny square grid graph-paper style background.

Wit Code

Forbi

This web development company has a very pleasing design. Diamond shapes hovering at the top of the page containing images with black transparency layers over them, and a CTA button inviting you to Watch the Video that is also a diamond shaped design and lights up yellow on mouseover. There are more diamond shapes and geometric shapes as you scroll down the page.

Forbi

Yamaha Ginza

I have included this site even though it is a grid style layout, because it is pretty different in its design. It is, firstly, very brightly colored, using shades of yellow and brown, it also continually scrolls all by itself! But the really unusual thing is the fact that it is a grid of diamond shapes.

Yamaha Ginza

Perspective Woodworks

This wooden furniture manufacturer uses diamond shapes for just about all its elements throughout the site, however, the shapes on the home page are for decorative purposes only – there are no links attached to them.

Perspective Woodworks

Conclusion

So as you can see, the use of squares particularly in web design does not necessarily mean a grid-style layout. Whether it is reflecting a logo shape, simply for decorative purposes or as a usable element, squares can give a website design a touch of something extra and special, and diamond shapes are growing in popularity and will no doubt soon be ‘normal’ rather than ‘special’.

Advertisement