Как оформить портфолио веб-дизайнеру — мокап с адаптивом для iPhone, MacBook и полной страницей

Мокап для портфолио фрилансера: покажи адаптив сайта на всех устройствах

Ты делаешь сайты. Делаешь хорошо. Адаптив под мобилки, всё как положено. Но в портфолио — унылые скриншоты, которые не передают и половины работы.

Клиент листает, видит картинку и думает: «Ну сайт и сайт». А то, что ты три дня возился с адаптивной версией — он даже не узнает.

Сегодня покажу мокап для Фотошопа, который решает эту проблему. Одна картинка — и клиент видит твою работу сразу на всех устройствах.

Зачем фрилансеру такой мокап

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

Представь два портфолио:

Первое. Скриншот сайта. Просто скриншот. Может, даже обрезанный криво.

Второе. Красивая презентация: сайт на экране MacBook, рядом мобильная версия на iPhone, и тут же видно всю страницу целиком.

Кому ты больше доверишь свой проект? Вот и клиент так же думает.

Что внутри мокапа

В одном PSD-файле три варианта отображения:

MacBook с десктопной версией. Показывает, как сайт выглядит на большом экране. Сразу понятно — это не шаблон из конструктора, а нормальная работа.

iPhone с мобильной версией. Вот тут начинается магия. Клиент видит: фрилансер не просто сделал сайт, он сделал адаптивный сайт. Это уже другой уровень.

Полная длина страницы. Для лендингов и многостраничников. Когда нужно показать всю структуру — от первого экрана до футера.

Всё это можно разместить на одном изображении. Заказчик смотрит и сразу понимает объём работы.

Почему адаптив важно показывать

Сейчас около 60% трафика идёт с мобильных устройств. Если ты делаешь сайты без адаптива — ты теряешь клиентов. Если делаешь с адаптивом, но не показываешь — теряешь заказы.

Логика простая: клиент не технарь. Он не будет открывать твой сайт с телефона, чтобы проверить. Он посмотрит картинку в портфолио и примет решение.

Покажи ему мобильную версию сам. На красивом мокапе. Пусть видит, за что платит деньги.

Как пользоваться

Даже если Фотошоп для тебя — это «та программа с пёрышком», справишься:

1. Открываешь PSD-файл
2. Находишь смарт-объекты (они подписаны)
3. Двойной клик — открывается окно для вставки
4. Вставляешь свой скриншот, сохраняешь
5. Готово

На всё уходит минут пять. Один раз разберёшься — потом будешь делать на автомате.

Где это использовать

— Биржи фриланса. Kwork, FL, Хабр Фриланс — везде нужно портфолио. Красивое портфолио = больше заказов.

— Собственный сайт. Если есть свой сайт-визитка, такие картинки поднимают его уровень в глазах клиента.

— Соцсети. ВКонтакте, Телеграм, Behance — везде, где показываешь работы.

— Коммерческое предложение. Отправляешь КП клиенту — вставляешь примеры работ. Мокап делает их убедительнее.

Скачать бесплатно

Ссылка на мокап — Мокап сайты на мобилке и ноуте с бликом

И да, это бесплатно. Без подписок, регистраций и прочей ерунды.

Итог

Хорошее портфолио — это не про «я скромный, пусть работы говорят сами за себя». Работы не умеют говорить. За них говорит презентация.

Потрать пять минут на оформление каждого проекта. Клиенты это оценят. Рублём.