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 but also makes sense. However, that doesn’t mean there is no room for other shapes such as 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 shapes for decoration such as Roadmap, while others completely redefine the structure of a web page such as Timetable Records.
01. Roadmap
Roadmaps’ landing page is filled with various shapes. The input field is rectangular, the button is oval, and the logo is something else altogether.
Additionally, there are randomly spaced out and animated geometric shapes floating around in the background. It’s a little inconsistent and that makes it interesting.
02. Friends & Fools
Friends & Fools uses Xs and Os and squiggles as decorative pieces on their website. It’s a big part of their branding, too.
The Xs and Os are part of their logo and using them as design pieces on the website helps reinforce them as an important part of the company’s identity.
03. Campaign Monitor’s 2016 Year in Review
Not only does this annual report utilize the numbers as shapes in and of themselves, the numbers are also as a critical part in forming a creative shape, with the additional visual manipulations made through decorations, markings, and colors.
04. Friendly
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 bit.
05. Icon Jar
Icon Jar uses a bunch of colorful and scattered icons as part of their background. The icons almost look like they have been thrown out of a box onto a floor.
06. Status
Status’ design relies heavily on cards with rounded corners. It’s not something you see on many websites to this extent. I like that the shapes are overlapping and that Status’ design 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 that it’s hard to imagine the information conveyed by this report to look any different.
08. Dona
Squares with rounded corners are 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.
09. Timetable Records
I love how Timetable’s design goes a little odd and changes the perspective of the traditional rectangular shape on box images and text.
10. Beamery
Beamery surely enjoys the circular motif, be it filled or outlined. The header has a lovely design that features an orbiting effect to further extend the metaphor.
11. Ask Jelly
Something so common as a section divider has been used the same way for a long, long time.
These days 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.
12. Orbit
Orbit’s header uses two different elements. Of course, it’s using dots. But additionally, it also uses animation and proximity to make the dots appear to be moving in a wave-like motion. That’s pretty cool.
13. Wyre
Wyre has a whole visual language surrounding its signature shape. It’s part of their logo. It’s part of their whole website, too.
Sometimes it’s just a repetitive background, sometimes decoration. However, my favorite part is that all the buttons come in this shape, too. It’s definitely the first time I’ve seen a button in this type of shape.
14. Multiplicity by Foilco
If we are talking about shapes I will also include an example that utilizes squares as well; those are a shape, too. Multiplicity’s landing page really goes to town on the repetitiveness of using squares in the UI, logo, and overall identity of the event as well.
15. Musixmatch
The background of the hero section looks so good. Yet, it’s such a simple concept as a split background—but split with a curve.
16. Twisto
Some slight variations of 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 really love it how numbers are used as shapes within the header of this web page. They are big and cut-off, too. They come in a different color than the background. They look so good and make for an interesting design detail.
18. Autopilot
Here we have another example of splitting sections apart. Splitting two sections with an angled line makes for a very nice design detail.
19. Gogo
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.
20. 120WaterAudit
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, at least a little bit as they scroll.
21. Dilamani
I enjoy the way Dilamani’s website works its own logo into a pattern at the top and bottom of their product pages. It’s a nice touch and a great way to utilize a unique shape.
22. Heco
Heco’s website utilizes so many various shapes throughout the page. In this blue section, the two faces are their own shapes. Then, there are the randomly scattered lines as well. They look like sprinkles to me.
23. Paul Valentine
Something as simple as a diagonal line with two background colors and a couple of watches over it can look amazing. There is no need to overthink design.
24. Intangible Matter
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 homepage, rectangles have a very important role. 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. However, it is quite lovely. The random shapes spreading out as a background is a nice touch. The shapes vary in type and color but they all look great together.
27. Palantir
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 also appears to be rounded, thanks to the circular overlay.
28. Asana
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, sometimes as fill colors for a bunch of big circles.
29. Stripe
Stripe also improved its visual identity recently. 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.
30. MailChimp 2016 Annual Report
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 using 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 add the perfect amount of awesome to the overall design. I hope you have found this list inspirational for your creative mind!
