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.
This Japanese musician has a very minimal and dark website, and the small slide show is the only square element on the site.
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.
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.
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.
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.
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.
A mobile app site, they use a square shaped speech bubble with a letterpress-effect type style.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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’.