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

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

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

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’.