HTML5 Tips: How to Add Shapes to Your Website

Designing with Wix | June 4th 2012

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 Add and choose Shapes & Lines

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
Click on Change Style in the Box Settings window

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
Each style can be further customized by clicking Edit Style

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
Choose between different skins

Choose between different skins

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
you can move the shape around and place it where you wish

 

Shapes Inspiration

Here are a few examples of how a creative use of shapes can contribute to your web design. Be there or be square!

Column five media

Column five media

Marco Rosella vlog.it

vlog.it (Marco Rosella)

Headlamp Creative

Headlamp Creative

Mickaël Larchevêque | Interactive Designer

Mickaël Larchevêque | Interactive Designer

 

 


Tagged with: .

2 comments

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>