В этом мастер-классе мы научимся оформлять работу для Dribbble. Если вы ещё не знакомы с этим сервисом, важно понимать: сюда выкладывают не только полноценные проекты, но и отдельные экраны. Это может быть не вся обложка сайта, а внутренняя страница или даже одна секция. Принцип здесь простой — чем больше работ, тем лучше. Оптимально иметь 30–50 работ в портфолио.
Это один из самых удобных сервисов для начинающих дизайнеров. Здесь можно набивать руку: делать секцию услуг, блок контактов, обложку сайта — и публиковать всё это как отдельные работы. Моя рекомендация, если вы начинающий дизайнер интерфейсов (и не только), — сфокусироваться именно на этом сервисе. Он помогает быстро собрать портфолио, остаётся актуальным и является одним из самых популярных в профессиональной среде.
Для Dribbble из одного проекта мы сделаем сразу два макета для портфолио: в первом покажем первый экран, во втором — сайт целиком. Такой приём часто используют дизайнеры, получая две работы из одного проекта.
Шаг 1: Выгружаем проект
Переходим в проект, выделяем фрейм главной страницы и нажимаем на плюс в поле Export на панели характеристик. Выбираем JPG или PNG — в данном случае разницы нет.
Нам также понадобится отдельно первый экран. У Figma есть ограничение на размеры экспортируемых изображений: если загрузить весь макет, сервис сожмёт его до максимальной ширины или высоты 4096 px (обойти это можно, но в рамках урока не будем рассматривать этот способ). Нам же нужна полноценная обложка.
Поэтому дублируем главную страницу, удаляем лишние секции, уменьшаем фрейм и также выгружаем его.
Шаг 2: Создание страницы и фрейма
Создаём новую страницу в проекте, называем её «Обложка» и переносим в самое начало — она будет работать как презентация проекта.
Для Dribbble важно, чтобы изображение корректно отображалось в ленте, поэтому создаём фрейм в пропорции 1920 × 1440 px.
Фон должен быть контрастным относительно цветовой схемы сайта. Ничего изобретать не нужно — у нас уже есть яркий акцентный цвет проекта, используем его, например синий.
Далее размещаем нашу обложку, можно немного увеличить её для выразительности. Смещаем немного выше центра, скругляем углы на 20 px и добавляем аккуратную тень. По сути это баннер, и здесь мы свободны в визуальном решении — повторяйте за мной.
Шаг 3: Добавление тени
Рисуем прямоугольник чуть уже обложки и размещаем его ниже. Цвет используем тот же, что и в проекте.
В панели характеристик добавляем эффект Layer Blur: размытие 80 px и прозрачность 20%.
Перемещаем прямоугольник под изображение.
Готово — получаем аккуратное и выразительное представление макета.
Шаг 4: Вариант с представление всей страницы
Дублируем фрейм. Удаляем обложку, тень оставляем.
Теперь загружаем всю главную страницу, уменьшаем её и располагаем так, чтобы были видны первые две секции. Затем дублируем изображение, уменьшаем и показываем оставшиеся секции.
Прямоугольник с тенью размещаем так, чтобы он находился под вторым изображением, но над первым — тогда тень будет создавать дополнительный объём и глубину.
Всё — второй макет для портфолио на Dribbble готов. Быстро, просто и аккуратно.
Шаг 5: Добавление работ на Dribbble
Нажимаем Share Work, добавляем изображение, заполняем необходимые поля — и работа опубликована. Поздравляю.
Заключение
Этот способ оформления — не строгий стандарт и не единственный вариант. Это лишь отправная точка, с которой можно начать.
На Behance проекты оформляют иначе: подробно раскрывают идею, задачи, ход работы, процесс и итоговый результат. Там действует принцип «лучше меньше, но глубже».
Dribbble же ценит регулярность и объём. Здесь работает правило «чем больше работ, тем лучше». Поэтому на старте карьеры рекомендую сосредоточиться именно на Dribbble.
Ещё раз подчеркну: начинайте с Dribbble, перерабатывайте любые интересные вам макеты, публикуйте их и формируйте портфолио, не тратя на это чрезмерно много времени.
