Unusual and Creative Angles and Shapes in Website Design
So, your client requests: Flat design, but something a bit different and creative. Difficult... flat design does not, or at least, did not lend itself to the use of a lot of creativity. But as we would expect, designers continue to push the limits to express their creative flair and to make their designs stand out from the crowd.
Since the flat design trend has taken a massive hold, this has become an increasingly difficult task, but designers have, of course, succeeded. One of the ways they have done so is to introduce elements containing content, or links or simply static images in angled containers... maybe a square rotated 45 degrees, triangles or random angled shapes. Here we have selected some web designs using unusual and creative angles for your inspiration.
Unusual Shapes in Website Design
Iron to Iron
This website is owned by two guys, a web developer and a designer (happy combination!). They use a very symmetrical design of diamond shapes (or rotated squares) for the landing page, and also just below they have some of their projects in a slideshow of the same shapes.
This site is really unique, using triangles that have mouse-over animation.. they tilt on mouse-over, and they are also smaller and black before you hover over them.
This Belgian graphic designer has added a skew of about 12.5 degrees to the boxes on his pinboard-style layout, making it pretty unique.
This site uses diamonds within diamonds for it's unique design. When you hover the mouse over each small diamond, a black transparent label covers half the diamond.
This Brazilian site has a truly inspired design. Set on a tiny-squared graph paper-style background, it is full of diamond shapes that have scrolling animation. The navigation dots with a hand-drawn font label follow down the page as you scroll. Unusually, I have included 2 screenshots for this site.
Here is another very unusual design. The whole design uses diamond shapes, rectangles with extra angles added top and bottom, angled lines... and even a few normal squares/rectangles!
This Russian site uses quite a few diamond shapes – mainly for illustration only, although the solid green diamond on the landing page is a link. There are also some nice scrolling animations as you travel down the page.
This site uses pentagon shapes of various sizes and at various angles, all with no fill or the peppermint/turquoise color fill. Some small animation effects and hand-drawn sketches give this site a truly unique appearance.
The combination of shapes that make up the V on the landing page of this site are beautifully illustrated, and are all squares or rectangles at various angles and with additions such as the curve on the right-hand side. The site uses big blocks of pastel/retro colors, ghost/hollow buttons and scrolling animation effects.
This portfolio site is really unusual. Arranged as a timeline, the dates change as you scroll down the page and the diamond shape in the center shows the name of the project for that month. The cloudy background is also slightly animated.
This website design has taken the form of the product logo, which uses a right-way-up and a smaller upside-down V. Very creative and unique.
This company, firstly has a very angle-oriented logo design. The landing page uses noded triangular shapes that are animated on both the black and the red side of the screen. As you scroll down the page, the two segments rotate to eventually give a totally red screen, then a totally black one.
Ginza is a district of Tokyo, and I am sure we all know who Yamaha are! This site design is similar to a previous one in this list – it is laid out in pinboard-style, and the diamonds with images in are links. It is a vertical, infinite scrolling site, which does, actually, slowly scroll on its own.
This Spanish site uses rotated squares and rectangles for all of its content boxes. The rich earthy color scheme adds a very classy touch to this design. Note the diamond shapes (the Piropixel logo) in the cup of coffee!
This very dark design is mapped out in diamond shapes with just the larger diamond shape in the center properly defined with images (links). I have increased the brightness on the screenshot to show the quilt-like effect of the page.
This site's landing page is made up entirely of triangles – some are placed long sides together to form squares. As you hover the mouse over the links, a black label covers the bottom triangle. Hovering over the categories on the navigational menu shows a black skewed rectangle with white text.
Perspective Woodworks & Design
All images and content on this site are contained in diamond shapes. The images on the landing page are illustrations only, but further down some of the diamond shapes are links.
This site is designed on a diamond-shaped grid. The sea-scape background proves that the grid is transparent – as you move the page up and down, the background stays in place.
Built by Buffalo
This web development agency uses a honeycomb-style layout with hexagons to showcase their portfolio.
The portfolio site of web developer Jessica Caldwell is a brave and creative example of the use of unusual angles. The diamond-shaped grid-style layout is simply gray lines on a white background, and nothing appears until you hover your mouse over one of the diamonds – then, as soon as the mouse travels off the diamond, the link disappears again. Minimal design in the extreme!
Angles and unusual shapes are one of the styles that designers have hit upon to add some creativity and interest to flat web design. It is still used relatively little, but we could see it increasing in the future.
Do you think this style of web design has a future? Have you used unusual shapes and angles in any of your designs? Please share your thoughts, opinions and links with us in the comments section below.