Чем важна графика для сайтов и почему по возможности лучше всего использовать векторную? Само собой, сайтам и приложениям в первую очередь необходим функционал, удобство и содержательность. Но как привлечь внимание пользователя к тому или иному элементу? Как добавить дополнительные эффекты при взаимодействии с интерфейсом, которые заинтересуют посетителя и продлят время, проведенное на сайте?
Такие элементы очень важны, поскольку даже изначально не заинтересованный в целевом действии человек может в итоге превратиться в потенциального клиента, если информация разделена графически. Но при этом нам нельзя перегружать страницу: каждая иллюстрация отнимает время на загрузку.
Посмотрите на эту схему и наведите мышью на отдельные ее элементы — они будут менять свой цвет. При этом каждая группа элементов может работать как ссылка на отдельную страницу. Более того, для них можно задавать отдельный функционал: появление подсказок при наведении или по клику, анимации, увеличение частей изображения и многое другое.
Как вы думаете, сколько весит эта схема? Всего 42 килобайта! — это практически ничто по сравнению с растровым изображением такого же качества. При этом иллюстрация полностью масштабируемая. Нажмите Ctrl+ чтобы убедиться в этом — качество изображения нисколько не ухудшится.
И конечно же эта графика отзывчивая — адаптируется под размеры дисплеев мобильных устройств. Всех вышеперечисленных свойств никак нельзя достичь с помощью растровой графики.
Этим мы и пользуемся при создании отдельных графических элементов для сайтов наших клиентов. С помощью векторной графики мы делаем логотипы, иконки, элементы управления, планы, схемы и карты с эффектами при наведении, анимациями и различным дополнительным функционалом.
Например, это небольшая часть набора иконок для Aurora Bio:
Эти элементы дополнительно привлекают внимание к отдельным текстовым блокам на сайте. С их помощью также можно визуализировать прочитанное (если мы добавляем к тексту тематический рисунок) — это обеспечит лучшую запоминаемость. Наоборот, с помощью векторных иконок мы можем разрядить пространство, что добавит удобства при чтении.
Векторные иконки, схемы и планы также могут быть интерактивными и нести определенный функционал. Это ведет к положительному пользовательскому опыту. Не все посетители ищут лишь сухую информацию, многих привлекают эффекты при наведении курсора и анимации. К тому же, интерфейс таким образом можно сделать понятнее: элементы, меняющие свое состояние, практически всегда несут в себе определенную функцию.
Но одной векторной графики на сайте конечно же будет недостаточно. Нам требуются фотографии, иллюстрации, баннеры и другая растровая графика. Но что если мы хотим сделать интерактивным часть растрового изображения?
Опять же SVG может помочь нам в этом. Кнопка на этом телефоне — это группа векторных заливок, которая может работать как ссылка на отдельную страницу или JS-функцию.
При этом не нужно дополнительно наслаивать на изображение прозрачные блоки, перекраивать код вашего сайта, утяжеляя страницы — графика будет уже максимально оптимизированной и быстрой.
Обращайтесь к нам, если вам нужны векторные иллюстрации для сайта, иконки, схемы, планы или карты. Мы создаем графическое наполнение для уже существующих проектов, а также разрабатываем сайты с нуля — от дизайна до технической поддержки.
Мы предлагаем: