Веб дизайн и иллюстрации в нем

Веб и интерфейсы

Сейчас, работая в интернет сфере, или просто являясь пользователем, Вы можете наблюдать одно явление, а точнее то, что на каждом сайте, который Вам запомнился или понравился – если примечательные иллюстрации. Таким образом, можно судить о том, что иллюстрации сегодня являются неотъемлемой частью веб дизайна, и при этом очень популярны. Хорошая иллюстрация на вашем сайте – почти залог его успеха.

Иллюстрация в веб дизайне может выполнять одну из двух функций, или обе одновременно, в лучшем случае. Первая – это декоративная функция. С этим все понятно – необходим, чтобы картинка выглядела так, чтобы посетителю сайта это нравилось, чтобы он запомнил ее, чтобы даже, может, рассказал знакомым о ней. Все это в зависимости от таланта художника. Вторая функция, которую может выполнять иллюстрация – это информативная функция. Здесь все немного сложнее. Иллюстрация должна быть не только интересной, но еще при этом передавать посетителю информацию о самом сайте или товарах или услугах, которые предлагает данный портал. В этом случае художнику необходимо нарисовать все просто и понятно, при этом очень интересно, чтобы это не привлекло внимание. А вот если иллюстрация включает в себя оба этих пункта, то это просто Джек Пот, иначе не скажешь. Такая иллюстрация способна вернуть к жизни затухший сайт, или поднять до невероятных высот продвигающийся сайт.

Но все же есть несколько основных направлений иллюстраций, которые используются при создании дизайна веб сайта. И в этой статье мы их всех рассмотрим.

Первая категория: Иллюстрации по тематике.

Так называемые «тематические иллюстрации», создают атмосферу, которая необходима этому сайту. Они усиливаю эффект всего остального дизайна, и раскрывают основную идею. Примером такой иллюстрации может стать иллюстрация с сайта Get my boss to North Cape.

Веб дизайн и иллюстрации в нем

 

 

Суть этой иллюстрации в том, чтобы раскрыть идею того, что работники поспорили со своим боссом, что если они наберут определенное количество «лайков», то боссу придется отправиться в долгое путешествие на велосипеде. Эта иллюстрация наглядно показывает нам всю суть сайта и достаточно интересно выглядит, что заставляет посетителя данного ресурса обратить на нее внимание и может даже способствует тому, чтобы посетители откликнулись на просьбу работников, и «лайкнули» будущую поездку босса.

Совсем другая ситуация на сайте Launch Kit, где иллюстрация не используется для привлечения внимания, а только наглядно демонстрирует посетителям то, на что ориентирован сайт. Просто, понятно, удобно. В этом случае большая и очень объемная иллюстрация наоборот, испортила бы отношение к данному ресурсу.

Веб дизайн и иллюстрации в нем

 

Есть еще и вариант иллюстрации, которая не только показывает тему сайта, и его концепции, но и выражает настрой сайта и его создателей, тем самым показывая как они работаю, и на что рассчитывать, работая с ними. Примером такого сайта может быть сайт интересной и альтернативной веб студии — Atelier Anonyme Design

illustra_3

 

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

Персонаж в иллюстрациях.

Многие сайты и компании сегодня заказывают для своего дизайна придуманного персонажа. Для этого дизайнеру приходится придумать и создать такого персонажа, который понравился бы посетителям, который отобразил бы направленность сайта и компании заказчиков, и который в последствии ассоциировался бы с этим сайтом. Итак, перейдем к примерам: Первый пример сайта с персонажем — inkFinder

Веб дизайн и иллюстрации в нем

 

В данном случае роль персонажа, играет осьминог. Это делает сайт очень запоминающимся чем без него, и человек, впоследствии, видя изображение такого осьминога, вспоминает о данном сайте. В случае с inkFinder, подошел бы любой персонаж. Главное, чтобы он был нарисовал достаточно привлекательным и запоминающимся. Второй пример – сайт The Evnt.

Веб дизайн и иллюстрации в нем

 

В данном случае персонаж, которого мы наблюдаем на сайте – отображает конкретную тему, которой посвящен этот сайт. Персонаж нарисован интересно, и если представить, как выглядел бы сайт без него, становится понятна его ключевая роль. И третий пример — Big Eye Creative.

Веб дизайн и иллюстрации в нем

 

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

Иллюстрированные украшения

Этот тип иллюстрации в вебе носит декоративный характер. Данный тип – только украшение или декорация. Такой вариант тоже имеет право существовать. Красивые сайты запоминаются так же как и проекты с идейными изображениями. Пример:

Веб дизайн и иллюстрации в нем

 

Элементы интерфейса 1000 WP Themes, находящиеся в шапке навигации не несут никакой смысловой нагрузки, и не функциональны. Однако они помогают в создании стильного дизайна. От части красивая стилистика внешнего вида, дает понять возможности и особенности вордпресс шаблонов и дизайна, которые делает данная компания.

На одном из сайтов Coca-Cola иллюстрации сделаны только для того, что бы сделать внешний вид проекта более стильным, современным, и, как следствие, модным. На изображении ниже показаны реальные вещи, показанные так, что бы вписываться в дизайн сайта.

Веб дизайн и иллюстрации в нем

 

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

Веб дизайн и иллюстрации в нем

 

Иллюстрации в тексте (шрифте)

В данном случае мы обсудим шрифты, которые были сделаны не машиной, а нарисованы художниками и дизайнерами вручную. Такие шрифты всегда оставляют неизгладимое впечатление на посетителей сайта. Во многих случаях – использование авторских шрифтов – достаточно продуманный и интересный ход, который может привести к успеху сайта. Первым удачным примером будет сайт — Rangus.

Веб дизайн и иллюстрации в нем

 

На этом сайте кроме хорошо нарисованного персонажа есть еще и авторский шрифт, который выполнен в высшем качестве опять же придает уникальность этому сайту. В качестве второго примера представим сайт Joey Lomanto.

Веб дизайн и иллюстрации в нем

 

В данном случае не сразу заметно, что текст в шапке сайта выполнен вручную, а не использован стандартный шрифт. Это пример показывает нам, как гармонично может выглядеть нарисованный от руки шрифт. Это один из примеров, где стилистика авторского шрифта не бросается в глаза, но тем не менее делает сайт дополненным и уникальным.

Информативные иллюстрации

Ниже представленная иллюстрация предназначена для определения и пояснения. Как мы видим, тут показана вся суть данного подхода и добавить особо нечего, так что перейдем сразу к примерам:

Веб дизайн и иллюстрации в нем

 

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

Веб дизайн и иллюстрации в нем

 

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

Веб дизайн и иллюстрации в нем

 

Лучше всего, когда за основу дизайна сайта взята информационная иллюстрация – определенный элемент дизайна помещения (в данном случае) имеет свою подпись и ссылку на детальное пояснение.

Иллюстрация-противоядие (antidote)

На сегодня это последний вид иллюстрации, но немаловажный. Что же он мог бы означать. Иногда возникает необходимость в том чтобы иллюстрация могла показать в чем суть сайта при этом отвлекая от интерфейса.

Веб дизайн и иллюстрации в нем

 

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

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

Веб дизайн и иллюстрации в нем

 

На сегодня все. Можно подвести итоги. Иллюстрации в веб-дизайне – одна из самых ярких и незаменимых техник. Она имеет широчайшие возможности, в которых можно создавать сотни дизайнов не похожих друг на друга. И при всем этом фантазия и возможности дизайнеров ни чем не ограничены. Удачных вам иллюстраций в работе!

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