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.
Jarad Johnson
Big circles thumbs to show you a bit of Jarad’s work.
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.
Teknision
Nice circular bubble drawing the attention to the “we’re hiring” part of the site.
Material Group
Beautiful circular elements all over the page. From foreground and background to navigation buttons.
Blitz Agency
Starting here, circular navigations buttons will help you browse their whole content.
Squares
Fudge
Two squares framing the main content.
Francesco Bertelli
Beautiful squared portfolio. Each square guests darker when you hover them.
Giang Nguyen
Another good example of squared thumbs to organize content.
Orange Sprocket
A big background image that changes as you go and squared thumbnails to showcase the agency’s latest work.
Rectangles
Barnt & Arnst
Several rectangles as thumbnails beautifully colored and designed that help you navigate the website.
Sasquatch
Different sided rectangles dispose the content in nice illustrated/images thumbs.
Quality Laundry Professionals
Big framed rectangle showing a nice image, getting the main attention of the page.
demodern
Rectangles to organize and display content.
Collision Labs
Different sized rectangles to better organize content.
Voltage
Combination of rectangle thumbnails and hover effect to organize the content and create a nice layout.
Sodafish
Elegant grid layout based on rectangle thumbnails.
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.
re:play
Circular logo and circular image navigation buttons contrasting with two main content squares.
Brave Nu Digital
A circle inside of a rectangle frame with circular navigation buttons. The content is also beautifully organized in rectangle thumbs.
Yuna
Self explanatory 😉
Le Record Du Monde
Circles, squares and nice angled typography… this website is pure geometry.
Swinton
Rectangles and squares to beautifully organize and display content.
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.
cappen
Circles, triangles and rectangles, there is pretty much going on here and the result is a really nice geometrical layout.
