Skip to content
On this page

Illustrations in UI


Illustration can turn an average website into something really unique, it's a powerful and creative medium which can identify and communicate the brand message and transmit ideas universally, through the use of just one image.


Read more and browse different styles from article Illustration styles in Web Design

As you saw from the previous article, there are a lot of illustration styles and techniques from vector to raster to 3D etc. This topic will be tightly related to learning of vector/pixel/3d topics in other chapters in this curriculum.


When and why?

How to?

People often say, that they can not draw. But you don't have to be a drawing guru to create pleasant graphcs for your project. You just have to find a style and technique that works for you.


There are also resources of free illusttration assets.

Backgrounds and patterns


One specific type of illustrations are background patterns. You can create a pattern with your design tools and use it as CSS background-image or generate with code, like the section above ☝.

The Math

Create with graphic editors

Create with code

You also can generate patterns with CSS or javascript. The aim here is not to dive too deep technically, let's just see some resources and helper tools