Стили иллюстраций для сайтов

Просмотров: 1192

В качестве вступления хочу напомнить, что веб-дизайнер – относительно новая профессия и я не встречала в серьезной литературе описание стилей сайтов и иллюстраций для них.  При этом в интернете многие веб-студии, дизайнеры и блоггеры « от себя » делят сайты на категории и придумывают для них названия.

Вы и сами понимаете, что графика сайта является его Лицом, Фишкой, Изюминкой. Конечно, есть и технические приемы ( реализованные с помощью программирования), но стиль и концепция дизайна почти всегда задается графикой. Я могу нарисовать иллюстрацию отдельно ( для вашей маркетинговой компании - рекламной полиграфической продукции, баннера, наружки) или для лендинг пейдж ( а так же для сайта).

Стили рисованных иллюстраций для сайтов:

Это те стили графики, в которых я работаю (но существуют и другие стили графики). Стоимость иллюстрации для сайта от 70 евро ( в зависимости от размера и сложности графики).

  1. Винтажный стиль, ретро
  2. Легкие рисованные "женские" иллюстрации
  3. Графика с контуром
  4. Изометрия
  5. Яркие мультяшные иллюстрации с псевдообъемом
  6. Плоская графика в стиле flat 
  7. Категории дизайнов сайтов: по cтилю графике, ее количеству и по структуре

Стили иллюстраций для сайтов

Винтажные иллюстрации

Пример 1. Использование виньеток и узоров, а так же приглушенных цветов. Винтажные иллюстрации могут быть выполнены в разных вариантах, и я рисую только 2 из них: с виньетками и цветами, и с плоскими объектами, по стилю похожие на плакаты СССР. Примеры вышлю по запросу.

Легкие женские иллюстрации "Шебби-шик"

Пример 2. В данном случае подразумеваются легкие нежные иллюстрации с использованием постельных цветов и романтичных сюжетов ( цветы, виньетки, узоры, дети и др). Отлично подходит для женских блогов, сайтов по рукоделию и красоте, товаров для женщин, свадебных сайтов.

Иллюстрации рисованные "с контуром"

Пример 3. Яркие цветные или однотонные иллюстрации рисуются контуром, а потом закрашиваются плоскими цветами. Теней и объемных элементов нет, поэтому картинки кажутся плоскими.

Изометрия

Пример 4. Может быть реалистичной, пиксел-артом или мультяшной. Я рисую только мультяшную графику. А именно - неровные линии, нереалистичные объекты и формы. Подходит для игр и иконок для детских сайтов.

Яркие мультяшные иллюстрации с псевдообъемом

 Пример 5. Это векторная или растровая компьютерная графика с рисованными персонажами, объектами или сценками. Такая "мультяшная" графика содержит плоские детали без реального объема, но с тенью и резкими бликами. Что и создают подобие объемного многослойного изображения ( псевдообъем).

Плоская графика в стиле flat

Пример 6 . "Плоская" графика с псевдо-объемом или вообще без объема. При этом тени и свет могут использоваться для придания эффекта слоев, наложенных один на другой. Ее иногда называют «Векторной», хотя  данный термин относится к формату самого файла, а не к стилю графики.

Сами дизайны сайтов можно разделить на категории:

Сайты по количеству графики:

  • «Минимализм» (иллюстрации, текстуры, персонажи, иконки  и прочие графические детали отсутствуют или их минимум),
  •  Графические сайты ( иллюстрации в «шапке», «футере», фоне, контенте и других частях сайта). Иногда на эффектных имиджевых сайтах иллюстрации занимают большую часть страницы.

Сайты по стилю графики:

  • Плоские, в стиле flat/metro
  • Рисованные мультяшные
  • Современный арт "от руки"
  • Рисованные красками и карандашами
  • Пиксел-арт и изометрия
  • Ретро, винтажные

Сайты по структуре:

  • Одностраничники ( «короткие» и «сайты-портянки»)
  • Лендинг пейдж ( страница для оформления подписки, скачивания приложения, каталога или другого файла, получения большой скидки — в обмен на контактные данные посетителя. Иногда подобные страницы используют для продажи товара или услуги)
  • Колоночные ( Например, слева узкая  колонка с меню, средняя широкая колонка для основного контента, правая узкая колонка для рекламы и дополнительной информации. Количество колонок может быть любым. Большинство сайтов имеют эту структуру)
  • Сложные по структуре ( на разных страницах или в разных частях страниц структура разная).
  • Иллюстрированные ( на основе 1 иллюстрации + минимум текста).

Как  я уже писала выше, настоящих терминов по стилям иллюстраций и дизайнов сайтов я не встречала, и веб-студии и дизайнеры называют их по-своему. Поэтому, чтобы избежать недопонимания при разработке дизайна,  уточняйте у дизайнера стили графики не только на словах, но и на основании конкретных примеров иллюстраций.

Если вы хотите заказать иллюстрацию на свой сайт или для рекламных материалов ( маркетинговой компании) - стоимость и срок рассчитывается исходя из объема работы. Ориентировочно от 70 евро. Высылайте мне ТЗ на адрес, указанный в контактах, и я рассчитаю стоимость и срок выполнения проекта.