Словарь веб-дизайнера: изучаем, что такое вайрфрейм, параллакс и бургер

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

Если вас смущает непонимание профессионального сленга, значит, нужно сказать себе «Стоп» и не переживать. Мы предлагаем пройти краткий курс терминологии digital-дизайна и во всем разобраться. Вы увидите, что под сложными «молодежными» словами скрываются простые понятия.

История про веб-дизайнера Аню

Кто создает лендинги, проектирует интерфейсы в «Фигме», занимается разработкой баннеров для интернет-магазинов, экспериментирует с 3Д-графикой и анимацией? Это веб-дизайнер! Кстати, ее зовут Аня.

• Веб-дизайнер — специалист по оформлению сайтов и приложений.
• Лендинг — целевая страница, которая продвигает какой-либо продукт и призывает пользователя совершить конкретное действие, например, сделать заказ.
• Интерфейс — «лицо» сайта/приложения. Это набор кнопок, форм и других средств, с помощью которых пользователь взаимодействует с веб-ресурсом или сервисом.
• Баннер — рекламное изображение.

Аня получила заказ на редизайн сайта. Такая работа начинается со встречи с клиентом и заполнения брифа.

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

Героине нашей истории повезло. Клиент владеет базовыми терминами, поэтому ему было легко заполнить бриф. Заказчик предоставил мудборд, объяснил, какой хедер и футер требуется. Также клиент попросил обновить логотип и фавикон.

• Мудборд — подборка изображений, которые определяют концепцию проекта и задают направление дизайна.
• Хедер — блок в верхней части каждой страницы сайта. Также называется «шапкой».
• Футер — блок, который располагается под телом страницы. Другое название футера — «подвал».
• Логотип — фирменный знак бренда.
• Фавикон — миниатюрное изображение, которое размещается перед названием веб-страницы в результатах поисковой выдачи.

Аня ознакомилась с референсами и уточнила у заказчика еще несколько нюансов. Затем она согласовала ТЗ и приступила к работе.

• Референсы — примеры дизайна, на которые ориентируется исполнитель.
• ТЗ — техническое задание. Это документ, в котором подробно раскрываются клиентские требования к проекту.

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

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

Во время работы над визуальным контентом Аня создала много новых изображений в «Люстре». До этого сайт был наполнен стоковыми картинками и шакалами, которые требовали ресайза.

• Контент — текстовое и графическое содержимое веб-страниц.
• «Люстра» — редактор изображений Adobe Illustrator.
• Стоковые картинки — постановочные фото. Также термин применяется по отношению к видео.
• Шакал — изображение крайне низкого качества.
• Ресайз — изменение размера картинок.

Аню не обошла стороной и работа с типографикой. Здесь понадобилась настройка интерлиньяжа, выключка, кернинг и трекинг.

• Типографика — оформление текстового контента.
• Интерлиньяж — междустрочный интервал. Это понятие хорошо знакомо сотрудникам типографий.
• Выключка — выравнивание текста по вертикали.
• Кернинг — избирательное изменение промежутков между символами в зависимости от их формы.
• Трекинг — уменьшение либо увеличение межбуквенных интервалов в пределах слов/предложений.

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

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

Работа с десктопом завершена. Аня решила проверить, как адаптив выглядит на смартфоне, и открыла мокап мобильной версии. Идея сделать бургер была удачной! Сайт с адаптивным дизайном стал суперюзабельным.

• Десктоп — полная версия веб-ресурса. Именно так сайт отображается на компьютере.
• Адаптив — дизайн, который подстраивается под разные смарт-устройства, например, телефоны и планшеты.
• Мокап — модель для демонстрации оформления.
• Бургер — элемент в виде трех горизонтальных полосок. Они напоминают булку с прослойкой. Когда пользователь нажимает на одну из полосок, перед ним отображаются разделы сайта.

Аня — ответственный исполнитель: она четко следует ТЗ и соблюдает дедлайны. Заказчик остался очень доволен сотрудничеством с талантливым веб-дизайнером, который внимательно подбирает размер шрифтов, тщательно выверяет пробелы между буквами и добивается оптического баланса.

Воспользоваться услугами такого специалиста может любой, кто обратится в маркетинговое агентство «Концепт». Мы готовы к любой задаче — от верстки сайта до создания фирменного стиля — и всегда знаем, что делать. Ознакомиться с портфолио нашей компании можно здесь.