Website Design Styles: Part One - Illustrated Websites

19.08.2011

four

There are many styles of website design, often they are combined in one website and it is not easy to determine the style in which a particular website is made. In this series of articles, I will highlight the main styles of website design and describe the characteristic features. Most of the articles will focus on style topics such as retro, grunge, web 2.0, etc.

Of course, it is possible to distribute website design styles according to other criteria: by perception, by color scheme, by content . Each of these criteria can appear in a specific site theme, for example, both dark and light colors can prevail in a retro site, an illustrated site can be perceived as both bright and neutral, this series can be continued for a long time.
Today we will talk about illustrated sites , i.e. such sites where illustrations occupy a significant part of the visual space up to the fold line of the monitor . Such sites are created for themselves by various private companies (very often associated with design), individual freelancers. Such sites are image sites, by type they can be a business card, corporate, promo site, and possibly a showcase site.
Illustrated sites can be roughly divided into two parts: sites with a variety of vector and so-called hand-draw sites (drawn by hand, often in the style of primitivism).

Websites with vector illustrations

Vector illustrations can be made in different art styles - realistic, futuristic, in the form of comics and cartoons. Such sites usually will not keep the usual division into 2-3 columns. It may seem that the information is placed chaotically, but in fact, the structure of the site is worked out in such a way that the user's gaze stops at the necessary content. Often these sites have animated objects, sometimes they are complete flash sites or sites with a welcome video. Menus and headings are often written in large non-standard fonts, bright colors predominate, various textures can be used (grain, watercolor textures, mosaics, etc.). Illustrated sites often use new HTML5 and CSS3 technologies, such as parallax scrolling, programmatic 3D effects, etc. As you can see, there is a wide field for imagination here.

See examples of sites with vector illustrations:

Website of a Czech company with a vector illustration http://uklizenodoma.cz/ providing house cleaning services.

one

The site of the Reverend danger design company is made in a classic "cartoon" vector style for the web with the use of animation. http://www.reverenddanger.com/

2

Funny Stop the Vom game vector website for iPone /

3
The site of the Austrian company Ray's Lab specializing in the development and implementation of mobile applications and other software products.four
Website of our colleagues from Great Britain - Inversio
5
Corner's website. The site has large cool cartoony vector monsters with a superimposed texture, the background of the site also has a texture, which will give a slightly grunge look.6
Seamko's website with simple animated illustrations showing the company's activities. Here, the illustrations do not claim to be the main role, but surround the content, but because of the animation, they are still noticeable and enliven the site.eight
The site of the Serial Cut company specializing in the development of design, photography and much more. Of course, the main page presents a variety of works of this company and they are truly amazing!9
Finally in this part of the article, an example of a comic book style illustration. The site http://www.ruhotenuf.ca/ representing food thermometers... Well, there is such a product...

ten

Hand draw sites

Hand-draw sites are generally easy to distinguish in style from most others. A significant part of these sites look like sketches or are drawn deliberately carelessly, some look like they were drawn by a child, often hand-drawn pictures are interspersed with real photographs. Perhaps here, I will include sites where the illustrations are painted in watercolor (hardly anyone draws in watercolor on paper for the site, there are tricks in Photoshop that allow you to achieve this effect). All the above information about vector illustrations that I have described applies to hand-drawn websites (structure, new technologies, animation, etc.)
Examples of hand-draw sites:
Website for artist and web developer Joe Lifrier Hugs for monsterseleven
Meandoli website. This company develops fabrics with nature prints.12
The Kennedysi website dedicated to the selection of creative people for design education.site styles
Flash site dedicated to Leo Burnett - the founder of the world famous advertising company of the same name. The site is made in the style of a pencil drawing, and the mouse pointer is in the form of a pencil.advertising agency
Website of the creative agency Bootb. Simple colored pencil drawings on a black background gave the site a memorable look.site styles
Beautiful site of Kutztown university made in the form of a watercolor drawingsite styles
Website of a marketing agency from France Toucouleur. The site is made in different techniques and a pencil drawing, and grunge processed photos, in general, the whole picture is interesting.
websites, styles, hand-drawn
I think I've given enough examples of great sites. I hope that my series of articles on website design styles will help you and become a source of inspiration :)

Last in our blog

Internet Marketing
04.11.2019