HTML5 Tips: How to Add Shapes to Your Website
If you live on planet earth and occasionally browse websites, you may have recently asked yourself: What are all these circles doing here? The answer is simple. Shapes are a hot trend in web design these days.
This may come as a surprise, since squares, circles and triangles are usually not considered very cool. So what makes shapes so appealing all of a sudden?
One answer is that shapes have always been an integral part of web design. They are used to mark clear borders and create a viewing hierarchy that is crucial for a positive user experience.
Recently though, shapes made the jump from functional page elements into aesthetic devices. A possible explanation could be that web designers and web users are looking for new simplicity. Shapes are all about going back to the basics. Amongst rich animations, explosive graphics and flashy colors that are found in web design today, shapes offer a clean-cut style. Simple yet elegant.
If you find shapes irresistible and want to use them on your HTML5 website, simply follow these simple steps:
How to Add Shapes to Your HTML5 Website
In the HTML5 editor, click Add and choose Shapes & Lines
Click on Box, and notice the shape that was introduced to your editor (the default shape is a square)
To choose another shape, click on Change Style in the Box Settings window
In the new field that opened, you will see four styles you can implement on the shape. Each style can be further customized by clicking Edit Style
The Advanced Styles window allows you to choose between different skins (circle, soft-angled square, banner. etc). Here, you can also customize the shape’s border and color
Click OK to save all changes
In the editor itself, you can move the shape around and place it where you like, as well as play with the size according to your needs
Here are a few examples of how a creative use of shapes can contribute to your web design. Be there or be square!
By The Wix Team