Стилі дизайну сайтів: частина перша - ілюстровані сайти

19.08.2011

4

Стилів дизайну сайтів існує безліч, часто вони поєднуються в одному сайті і однозначно визначити стиль в якому виконаний той чи інший сайт буває непросто. У цій серії статей я виокремлю основні стилі дизайну сайтів та опишу характерні риси. Більшість статей буде присвячена тематиці стилю, наприклад ретро, гранж, web 2.0 і т.д.

Безумовно, можна розподілити стилі дизайну сайтів і за іншими критеріями: по сприйняттю, кольоровій гамі, вмісту . Кожен з цих критеріїв може спливати в конкретній тематиці сайту, наприклад, у ретро-сайті можуть переважати як темні, так і світлі кольори, ілюстрований сайт може бути сприйняття як яскравим, так і нейтральним, продовжувати цей ряд можна довго.
Сьогодні говоритимемо про ілюстровані сайти , тобто. таких сайтах де ілюстрації займають значну частину візуального простору до лінії згину монітора . Подібні сайти створюють для себе різні приватні компанії (часто пов'язані з дизайном), окремі фрілансери. Такі сайти є іміджевими, на кшталт можуть бути візитівкою, корпоративним, промо-сайтом та можливо сайтом-вітриною.
Ілюстровані сайти грубо можна поділити на дві частини: сайти з різноманітними векторними та так звані hand-draw сайти (намальовані від руки, найчастіше в стилі примітивізму).

Сайти з Векторні ілюстрації

Векторні ілюстрації можуть бути виконані у різних художніх стилях – реалістичному, футуристичному, у вигляді коміксів та мультфільмів. Подібні сайти зазвичай не стримають звичного поділу на 2-3 колонки. Може здатися, що інформація розміщена хаотично, але насправді структуру сайту проробляють таким чином, щоб погляд користувача зупинився на необхідному контенті. Часто на таких сайтах є анімовані об'єкти, іноді – цілісні флеш-сайти або сайти з вітальним відео. Меню та заголовки часто пишуться великими нестандартними шрифтами, переважають яскраві кольори, можуть бути використані різноманітні текстури (зернистості, акварельні текстури, мозаїки тощо). Часто в ілюстрованих сайтах застосовують нові технології HTML5 і СSS3, наприклад паралакс прокручування, програмні ефекти об'ємності та ін Як бачите поле для фантазії тут найширше.

Дивимося приклади сайтів із Векторними ілюстраціями:

Сайт чеської компанії з Векторною ілюстрацією http://uklizenodoma.cz/ надає послуги з прибирання будинку.

1

Сайт дизайнерської компанії Reverend danger виконаний у класичному для Інтернету "мультяшному" векторному стилі із застосуванням анімації. http://www.reverenddanger.com/

2

Смішні векторний сайт гри Stop the Vom для iPone /

3
Сайт австрійської компанії Ray's Lab, що спеціалізується на розробці та впровадженні мобільних додатків та інших програмних продуктів.4
Сайт наших колег із Великобританії - Inversio
5
Сайт компанії Cornerd. На сайті великі прикольні векторні мультфільми монстри з накладеною текстурою, також текстура є і у фону сайту, що прийде трохи гранжовий вигляд.6
Сайт компанії Seamko з простими анімаційними ілюстраціями, що вказують на діяльність фірми. Тут ілюстрації не претендують на головну роль, а оточують контент, але через анімацію все одно помітні і пожвавлюють сайт.8
Сайт компанії Serial Cut, що спеціалізується на розробці дизайну, фотографії та багато чого іншого. Звичайно, на головній сторінці представлені різноманітні роботи цієї компанії і вони воістину чудові!9
Насамкінець у цій частині статті, приклад ілюстрації в стилі коміксу. Сайт http://www.ruhotenuf.ca/ термометри для їжі, що представляє... Ну ось такий є продукт...

10

Hand-draw сайти

Hand-draw сайти в основному легко відрізнити за стилем від більшості інших. Значна частина таких сайтів виглядають як ескізи або намальовані недбало, деякі ніби малювала дитина, часто намальовані від руки картинки перемежовуються з реальними фотографіями. Мабуть сюди ж, я віднесу сайти, де ілюстрації намальовані аквареллю (навряд чи хтось малює аквареллю на папері для сайту, є прийоми у фотошопі, що дозволяють досягти такого ефекту). Вся описана мною інформація про векторні ілюстрації застосовна і до намальованих від руки сайтів (структура, нові технології, анімація і т.д.)
Приклади hand-draw сайтів:
Сайт художника та веб-розробника Joe Lifrier Hugs for monsters11
Сайт компанії Meandoli. Ця компанія розробляє тканини із природними принтами.12
Сайт The Kennedysi присвячений відбору творчих людей для навчання дизайну.стилі сайтів
Флеш-сайт присвячений Leo Burnett – засновнику всесвітньо відомої однойменної рекламної компанії. Сайт виконаний у стилі малюнка олівця, а покажчик миші у вигляді олівця.рекламне агенство
Сайт креативної агенції Bootb. Прості кольорові малюнки олівцем на чорному тлі надали сайту запам'ятовується вигляд.стилі сайтів
Красивий сайт Kutztown university виконаний у вигляді акварельного малюнкастилі сайтів
Сайт маркетингової агенції з Франції Toucouleur. Сайт виконаний в різних техніках і малюнок олівцем, і гранжево оброблені фотографії, загалом картинка цікава.
сайти, стилі, мальованої
Думаю, що я навела достатньо прикладів чудових сайтів. Сподіваюся, що серія моїх статей про стилі дизайну сайту допоможе вам і стане джерелом натхнення :)

Останнє в нашому блозі

Інтернет маркетинг
04.11.2019