The Use of Shapes in Web Design with 30 Examples
Have you noticed that most websites are, more or less, made up of rectangular boxes? From the rectangular shape of a browser window to the rectangular shape of buttons, websites are mostly rectangular.
This is not only practical, it just makes sense. However, that doesn’t mean there is not room for other shapes like circles, triangles, or made up miscellaneous curvatures.
I’ve gathered 30 different websites that use different shapes for different purposes. Some of them use random assortments of shape for decorations – like Roadmap – others completely redefine the structure of a web page – like Timetable Records.
Roadmaps’ landing page is filled with various shapes. The input is rectangular, the button is oval and the logo is something else altogether.
Additionally, there are randomly spaced out and animated geometric shapes floating about as the background. It’s a little inconsistent and that makes interesting.
02. Friends & Fools
Friends & Fools uses exs and ohs and squiggles as decorative pieces on their website. It’s a big part of their branding too.
The exs and ohs are part of their logo and by using them as design pieces on the website it helps reinforce them as an important part of the company’s identity.
Not only does this annual report utilize the numbers as shapes in and of themselves, the numbers as a critical part in making for a creative shape with the additional visual manipulations made through decorations, markings, and colors.
There are so many individual shapes on this landing page.
From the phone to the logo to the floating rounded avatars. But of course the most noticeable has to be the three almost circular and almost squared shapes behind the phone that keep on shifting their shapes as they zoom in and out a little.
05. Icon Jar
Icon Jar uses a bunch of colorful and scattered icons as part of their background. The icons look like they have been thrown out of a box onto a floor almost.
Status’ design relies heavily on cards with rounded corners. It’s not something you see on a website to this extent. I like that the shapes are overlapping and that Status’ design also utilizes circular shapes as well as rectangular ones.
07. Future of Design
The Future of Design is a visually stunning website. The design uses shapes as part of the story as you scroll.
The relationships between the information, color and the various shapes are so smooth it’s hard to imagine the information conveyed by this report to look any different.
The square with rounded corners is an important part of the brand’s visual design.
No wonder it’s used as an animated and scattered background pattern. It’s also something you can see in the UI of the mobile app – the rounded corners that is.
I love how Timetable’s design goes a little odd and changes the perspective of the traditional rectangular shape on box images and text.
Beamery surely enjoys the circular motif albeit it filled in or outlined ones. The header is a lovely design that utilized orbiting to further extend the metaphor.
11. Ask Jellyx
Something so common as a section divider has been the same for a long, long time.
Now it’s becoming more popular to alter the dividing line. Ask Jelly decided to throw in a little curvature in there. And, it looks really good.
Orbit’s header uses two different elements. Of course, it’s using dots. But, additionally, it’s using animation and proximity to make the dots appear to be moving in a wave-like motion. That’s pretty cool.
Wyre has a whole visual language surrounding its signature shape. It’s part of their logo. It’s part of their whole website.
Sometimes it’s just a repetitive background, sometimes decoration. However, my favorite part is that all the buttons are this shape too. It’s definitely the first time I’ve seen a button in this type of shape too.
If we are talking about shapes I will also include an example that utilizes squares as well; those too are a shape. Multiplicity’s landing page really goes to town on the repetitiveness of using squares in both the UI, the logo and the overall identity of the event too.
The background of the hero section looks so good. Yet, it’s just such a simple concept as a split background but split with a curve.
Some slight variations in opacity on a repetitive shape within a background make the section a lot more interesting and eye catching.
17. Huge Inc – Albums of the year
I love that within the header of this web page the numbers are used as shapes themselves. They are big and cut off too. They are a different color than the background. They look so good and make for an interesting design detail.
Here we have another example of splitting sections apart. Splitting two sections with an angled line makes for a very nice, albeit it sharp, design detail.
Every now and again you can spot some sort of random assortment of large and colorful shapes on Gogo’s website. The shapes and color go hand in hand with the colorful and lined iconography used in the website’s design. The shapes even go hand in hand with the logo symbol too.
Here is an odd example of a background or rather a section’s background. But that’s what makes it interesting. I’m sure it grabs people’s attention for at least a little bit as they scroll.
I enjoy the way Dilamani’s website utilizes its own logo into a pattern at the top and bottom of their product pages. It’s a nice touch and a nice way to utilize a unique shape.
Heco’s website utilizes so many various shapes throughout. In this blue section, the two faces are their own shapes. Then there are the randomly scattered lines. They look like sprinkles to me.
23. Paul Valentine
Something as simple as a diagonal line to create two background colours and a couple of watches over it can look amazing. There is no need to overthink it.
Here we have so many tiny little dots. They are all moving a little bit and they are all making one bigger shape too.
25. Made Together
At the very bottom of this home page, rectangles are very important. Both the shape of the logo and the long but thin underline make the section interesting.
26. Oskar Wróbel
Oskar Wróbel’s portfolio is nothing extraordinary. But it is quite lovely. The random shapes spread out as a background are a nice touch. The shapes vary in type and colour but they all look great together.
Once again we have an awesome background. Here, Plantir is making irregular shapes out of some dots and lines. It looks pretty great actually. The one on the right appears to be rounded too, thanks to the circular overlay.
Asana went through a big, bold and colorful redesign last year. Part of their new brand identity is embracing bright, slightly gradients and bold colors.
Sometimes they make use of the colors as background or, in this face, fill colors of a bunch of big circles.
Strip too recently improved their visual identity. The company released its new website a while ago now. But it looks stunning.
For instance, the different but sharp section edges are my favorite. There are shadows, sharp angles, even gradients involved in making the parallelogram shapes.
This annual report from MailChimp is filled with so many different shapes! It just goes on forever.
They’ve got background patterns, section shapes, section dividers, typography as shapes, and so many other things. But, it all looks great. More importantly, it all looks interesting too!
And that’s a wrap! How did you enjoy this list of 30 awesome examples of web designs that use various shapes? I’ve tried to find some amazing and complicated examples like the MailChimp one.
I’ve also tried to find some subtle ones that just the perfect amount of awesome to the overall design. I hope you found this list inspirational for your creative mind!