Мокап для портфолио фрилансера: покажи адаптив сайта на всех устройствах
Ты делаешь сайты. Делаешь хорошо. Адаптив под мобилки, всё как положено. Но в портфолио — унылые скриншоты, которые не передают и половины работы.
Клиент листает, видит картинку и думает: «Ну сайт и сайт». А то, что ты три дня возился с адаптивной версией — он даже не узнает.
Сегодня покажу мокап для Фотошопа, который решает эту проблему. Одна картинка — и клиент видит твою работу сразу на всех устройствах.
Зачем фрилансеру такой мокап
Когда заказчик выбирает исполнителя, он смотрит портфолио. И тут важно не только что ты сделал, но и как ты это показываешь.
Представь два портфолио:
Первое. Скриншот сайта. Просто скриншот. Может, даже обрезанный криво.
Второе. Красивая презентация: сайт на экране MacBook, рядом мобильная версия на iPhone, и тут же видно всю страницу целиком.
Кому ты больше доверишь свой проект? Вот и клиент так же думает.
Что внутри мокапа
В одном PSD-файле три варианта отображения:
MacBook с десктопной версией. Показывает, как сайт выглядит на большом экране. Сразу понятно — это не шаблон из конструктора, а нормальная работа.
iPhone с мобильной версией. Вот тут начинается магия. Клиент видит: фрилансер не просто сделал сайт, он сделал адаптивный сайт. Это уже другой уровень.
Полная длина страницы. Для лендингов и многостраничников. Когда нужно показать всю структуру — от первого экрана до футера.
Всё это можно разместить на одном изображении. Заказчик смотрит и сразу понимает объём работы.
Почему адаптив важно показывать
Сейчас около 60% трафика идёт с мобильных устройств. Если ты делаешь сайты без адаптива — ты теряешь клиентов. Если делаешь с адаптивом, но не показываешь — теряешь заказы.
Логика простая: клиент не технарь. Он не будет открывать твой сайт с телефона, чтобы проверить. Он посмотрит картинку в портфолио и примет решение.
Покажи ему мобильную версию сам. На красивом мокапе. Пусть видит, за что платит деньги.
Как пользоваться
Даже если Фотошоп для тебя — это «та программа с пёрышком», справишься:
- Открываешь PSD-файл
- Находишь смарт-объекты (они подписаны)
- Двойной клик — открывается окно для вставки
- Вставляешь свой скриншот, сохраняешь
- Готово
На всё уходит минут пять. Один раз разберёшься — потом будешь делать на автомате.
Где это использовать
— Биржи фриланса. Kwork, FL, Хабр Фриланс — везде нужно портфолио. Красивое портфолио = больше заказов.
— Собственный сайт. Если есть свой сайт-визитка, такие картинки поднимают его уровень в глазах клиента.
— Соцсети. ВКонтакте, Телеграм, Behance — везде, где показываешь работы.
— Коммерческое предложение. Отправляешь КП клиенту — вставляешь примеры работ. Мокап делает их убедительнее.
Скачать бесплатно
Ссылка на мокап — в статье на сайте https://e-integrate.ru/kak-oformit-portfolio-veb-dizajneru-mokap-s-adaptivom-dlya-iphone-macbook-i-polnoj-stranitsej/
И да, это бесплатно. Без подписок, регистраций и прочей ерунды.
Итог
Хорошее портфолио — это не про «я скромный, пусть работы говорят сами за себя». Работы не умеют говорить. За них говорит презентация.
Потрать пять минут на оформление каждого проекта. Клиенты это оценят. Рублём.