25 Examples of Geometrical Shape Usage in Web Design

By / Mar 28, 2011 / Inspiration
shares

I really like the way Wikipedia defines web design: “Web design is a broad term used to encompass the way that content is delivered to an end-user through the World Wide Web…”. And we have to say that web design is really all about the way you deliver content, so taking good care of shaping your website is something that’s very important. Websites are pretty much based on grids and columns, where geometrical forms are the main elements. Here we will show you some examples of how circles, squares, rectangles and triangles are used to better create beautiful and inspiring websites.

Circles

Full Stop

Circles as a big logo getting all the attention to the studio’s name.

geoshapes01

Jarad Johnson

Big circles thumbs to show you a bit of Jarad’s work.

geoshapes04

Daniel James Diggle

The logo is a circle and the same circular idea was used in the top left side of the header to draw attention to the artist’s bio.

geoshapes07

Teknision

Nice circular bubble drawing the attention to the “we’re hiring” part of the site.

geoshapes08

Material Group

Beautiful circular elements all over the page. From foreground and background to navigation buttons.

geoshapes09

Blitz Agency

Starting here, circular navigations buttons will help you browse their whole content.

geoshapes12

Squares

Fudge

Two squares framing the main content.

geoshapes03

Francesco Bertelli

Beautiful squared portfolio. Each square guests darker when you hover them.

geoshapes18

Giang Nguyen

Another good example of squared thumbs to organize content.

geoshapes19

Orange Sprocket

A big background image that changes as you go and squared thumbnails to showcase the agency’s latest work.

geoshapes24

Rectangles

Barnt & Arnst

Several rectangles as thumbnails beautifully colored and designed that help you navigate the website.

geoshapes02

Sasquatch

Different sided rectangles dispose the content in nice illustrated/images thumbs.

geoshapes05

Quality Laundry Professionals

Big framed rectangle showing a nice image, getting the main attention of the page.

geoshapes06

demodern

Rectangles to organize and display content.

geoshapes15

Collision Labs

Different sized rectangles to better organize content.

geoshapes22

Voltage

Combination of rectangle thumbnails and hover effect to organize the content and create a nice layout.

geoshapes23

Sodafish

Elegant grid layout based on rectangle thumbnails.

geoshapes25

Mixed Shapes

Stephen Vernon Clarke

Here we have a cool mix os shapes. Triangles, semi circles, circles and rectangles creating a nice and clean layout.

geoshapes10

re:play

Circular logo and circular image navigation buttons contrasting with two main content squares.

geoshapes11

Brave Nu Digital

A circle inside of a rectangle frame with circular navigation buttons. The content is also beautifully organized in rectangle thumbs.

geoshapes13

Yuna

Self explanatory ;)

geoshapes14

Le Record Du Monde

Circles, squares and nice angled typography… this website is pure geometry.

geoshapes16

Swinton

Rectangles and squares to beautifully organize and display content.

geoshapes17

Above the Fold

Nice use of geometrical thumbs to show images of the book. Also using a big circled chart to show important info. The whole layout is really nice actually.

geoshapes20
geoshapes21

cappen

Circles, triangles and rectangles, there is pretty much going on here and the result is a really nice geometrical layout.

geoshapes26

Source:

The Best Designs
Awwwards

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

10 Comments

  1. MJ
    March 28, 2011

    Thanks :)

    Reply
  2. Tristar Web Design
    March 28, 2011

    Geometric shapes in web design can be quirky and fun, I’m guessing that’s why a lot of the sites showcased are design portfolios. I really like ‘Quality Laundry Professionals’ the site is lovely and really unusual for a laundry site. ‘re:play’ has a really nice structured layout too.

    Reply
  3. Jocelyna
    March 28, 2011

    Website having geometric shapes is different thought process and it’s gives different edge to your website. Nice collection of geometric website.

    Reply
  4. Erik
    March 28, 2011

    Wonderful examples of how simple use of geometric shapes can spice up or draw attention to a particular area of a site. Thanks for sharing.

    Reply
  5. Ted Thompson
    March 28, 2011

    They’re all good but Quality Laundry Professionals is my favourite!

    Reply
  6. Jarad Johnson
    March 28, 2011

    Fantastic collection of sites! Thank you very much for the feature.

    Reply
  7. Lance
    March 29, 2011

    I think one of the unique approaches these designers took with their sites is that they designed a page more like a magazine spread than a website and it worked. It makes for stunning graphical displays and really excites the visitor.

    Reply
  8. Goncalo Espinha
    March 30, 2011

    Perfect… I`d throw none of it away

    Damn, how many paradises has the web got?

    Thanks ;)

    Reply
  9. gBaniya
    April 5, 2011

    above the fold is amazing. and so are the rest. :)

    tkz for your efforts..

    Reply
  10. Gabriele Enoch
    April 15, 2011

    Great designs :)

    I used the same concepts for my website: http://overthehaze.com/white

    Reply

Leave a Reply