Как говорят дизайнеры: что такое референс и зачем нужен пиксель перфект

Если сомневаетесь в выбранном направлении, узнайте, какая профессия из сферы IT может вам подойти.

Решение — использовать референс. Дизайнер просит клиента показать примеры, которые ему нравятся. Клиент присылает три ссылки на сайты квест-комнат.

Дизайнер видит конкретные элементы:

• Яркий фон, анимированные кнопки, крупные заголовки
• Тёмная цветовая палитра, старинные шрифты
• Реалистичные изображения в пиратской тематике

В итоге дизайнер создаёт макет, комбинируя элементы из присланных референсов, а заказчик получает задуманный результат. Референс — настоящий язык между дизайнером и клиентом, он помогает избежать недопонимания и ускорить процесс работы.

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

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

Зачем нужен: показывает визуальную концепцию ещё до начала работы и вдохновляет команду.

Пример:
Студент создаёт мудборд для мобильного приложения по обучению рисованию.

Он собирает в папку:

• Фотографии красочных художественных работ
• Подходящие цвета: например, оттенки розового и фиолетового
• Шрифты с плавными линиями
• Эмодзи с кисточками и карандашами

Что значит: правила по использованию фирменного стиля — логотипа, шрифтов, цветов, иконок.

Зачем нужен: гарантирует, что бренд представлен в единой концепции, и экономит время на обсуждение шрифтов и цветов для каждого проекта.

Пример:
Компания открывает новый бренд одежды.

В гайдлайне указаны:

• Основные цвета— тёмно-синий (#1A1A2E) и бирюзовый (#40E0D0)
• Логотип в нескольких вариантах
• Закруглённые кнопки с радиусом 8 px
• Фотографии товаров — на белом фоне

Что значит: удобство интерфейса сайта или мобильного приложения для пользователя.

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

Пример:
Студент делает лендинг для кафе-пиццерии.

Как он проверяет юзабилити:

• Кнопки «Заказать» и «Добавить в корзину» достаточно большие для нажатия
• Меню понятно и логично разделено по категориям
• Форма бронирования столика простая, без лишних полей

Что значит: маленькая иконка сайта, которая отображается на вкладке браузера.

Зачем нужен: сайт становится узнаваемым среди многих других вкладок, пользовали легче находят и чаще пользуются

Пример:
Студент создаёт сайт для онлайн-магазина электроники — и выбирает фавикон в виде открытого ноутбука, чтобы пользователи сразу ассоциировали вкладку с техникой. Вместо этого также можно использовать логотип компании.

Что значит: эффект при наведении курсора на элемент — кнопку, ссылку, картинку.

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

Пример:
Дизайнер делает приложение для фитнес-студии:

• При наведении на кнопку «Записаться» цвет меняется с синего на зелёный, а иконка слегка увеличивается. 
• При наведении на картинки с разными видами занятий появляется короткое описание.

Знание сленга дизайнеров помогает новичкам быстрее влиться в рабочие процессы: можно уверенно участвовать в обсуждениях команды, а коллегам не надо тратить время на лишние объяснения. Основные термины в дизайне несложно выучить — особенно, если постоянно используешь их на практике.

Например, в IT-колледже Maxitet студенты не только учатся работать в Figma и Photoshop, но и общаться на профессиональном языке. Для своих проектов ребята создают мудборды, проверяют юзабилити и приносят референсы — и уже на первых курсах учёбы проходят стажировки в компаниях.