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

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

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

Campaign Monitor's 2016 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

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

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

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

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

Dona app

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

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

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

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 app

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 app

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

Multiplicity Leeds

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

Musixmatch app

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

Twisto app

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

The Huge Inc - Album 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

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

Gogo app

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

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

Dilamani app

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 app

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

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

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

Made Together app

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 Wrobel

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

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

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

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

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!

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting. Unlimited Downloads:…