Как сделать дизайн сайта в Figma?
Артем, Волгоград 158 просм.
Хочу сам сделать дизайн будущего сайта для своей мастерской, прежде чем отдавать проект в разработку. Слышал, что для этого обычно используют Figma. С чего начать, если раньше в подобных программах вообще не работал?
Елена Захарова UI/UX-дизайнер
ответил
Начинать нужно не с самой Figma, а с подготовки: соберите 3-5 референсов похожих сайтов, определите список страниц и контент, который на них разместите - тексты, фото, цены. Без этого макет в любой программе превращается в бесконечное перекладывание блоков наугад.
В Figma дальше работают так. Сначала создают страницу-макет с сеткой, обычно шириной 1200-1440 пикселей для десктопа, и отдельно версию под мобильный экран. На неё чёрно-белым выставляют блоки по будущей структуре - шапка, экран приветствия, услуги, отзывы, подвал - это и есть прототип, на котором проверяют логику, а не красоту. Дальше собирают UI-кит: 2-3 базовых цвета, 2 шрифта, стиль кнопок и иконок, чтобы не изобретать оформление заново на каждом экране.
После UI-кита прототип превращают в оформленные макеты ключевых страниц - обычно достаточно 3-4: главная, страница услуги, контакты. Остальные типовые страницы делают по тем же паттернам. Если нужно показать заказчику или разработчику, как это будет работать в динамике, в Figma собирают кликабельный прототип: связывают экраны переходами по кнопкам.
Бесплатного тарифа Figma и готовых community-шаблонов достаточно для одного такого проекта. Но если опыта в дизайне нет вообще, есть риск потратить недели на макет, который потом всё равно придётся переделывать профессионалу перед версткой - в таком случае разумнее заказать хотя бы прототип у дизайнера, а самому подключиться на этапе подбора контента и правок.
Задать свой вопрос
Вопросы проходят модерацию. Ответ специалиста студии публикуется на сайте в течение пары дней.
Вопрос отправлен на модерацию. После проверки он появится на сайте вместе с ответом.
Вопрос не отправлен: нужно подтвердить согласие на обработку персональных данных.