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 Awwwwards.com 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.

Illustrations

When and why?

Tips and Tools for Effective Use of Illustrations in User Experience Design

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.

Resources

There are also resources of free illusttration assets.

UnDraw
Illu•Station
Ira Design
DrawKit
search for more (always!)

Backgrounds and patterns

ME HAZ'
BACKGROUND

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

Illustrator
Photoshop

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

List of pattern generators

Illustrations in UI #

Illustrations #

When and why? #

How to? #

Resources #

Backgrounds and patterns #

ME HAZ'BACKGROUND

The Math #

Create with graphic editors #

Create with code #