Параметры и код стилей
Разработчики могут посмотреть размеры, отступы, цвета, параметры текста и доступные фрагменты кода стилей на панели «Спецификации».
Онлайн-инструмент для веб-дизайна
Создавайте макеты сайтов онлайн
Продумайте структуру страницы, оформите блоки и покажите переходы в интерактивном прототипе. В Pixso можно работать над веб-дизайном вместе с командой и готовить макеты для разработки.
Работайте в браузере или установите приложение.
Проектируйте страницы для разных экранов
Структура страницы
Разместите основные блоки: навигацию, первый экран, описание продукта и форму заявки. Настройте сетку, чтобы выстроить текст, изображения и кнопки в понятном порядке.
Макеты для компьютера и телефона
Создайте фреймы нужной ширины и продумайте расположение блоков для каждого экрана. Уточните размеры текста, отступы и порядок элементов в мобильном варианте.
Auto Layout для повторяющихся блоков
Задайте интервалы, внутренние отступы и правила изменения размеров. Карточки и кнопки будут учитывать изменения текста по этим настройкам — без ручного выравнивания каждого элемента.
Собирайте страницы из общих элементов
Шаблон как отправная точка
Выберите подходящий макет и адаптируйте его под свой проект: замените тексты, изображения и расположение блоков. Используйте готовую структуру там, где она соответствует вашей задаче.
Компоненты для повторяющихся элементов
Сделайте кнопки, поля и карточки компонентами и размещайте их экземпляры на страницах. Подготовьте варианты размеров и состояний, чтобы не рисовать каждый элемент заново.
Единые цвета и типографика
Сохраните цвета и параметры текста как стили. Применяйте их к заголовкам, подписям и элементам интерфейса, чтобы страницы сайта выглядели согласованно.
Покажите, как будет работать интерфейс
Переходы между экранами
Свяжите кнопки и другие элементы с нужными фреймами. Покажите, например, переход из каталога к карточке товара и далее к оформлению заказа.
Прокрутка и всплывающие окна
Настройте прокрутку содержимого фрейма и открытие меню или диалогов поверх текущего экрана. Пройдите сценарий в предпросмотре, чтобы заметить пропущенные связи и неудачные переходы.
Обсуждение в контексте макета
Поделитесь прототипом с командой или заказчиком. Сохраняйте замечания в комментариях к макету рядом с нужным элементом, чтобы было понятно, что требуется изменить.
Подготовьте дизайн к разработке
Графика для проекта
Выберите изображения, иконки или отдельные слои и задайте настройки экспорта. Подготовьте нужные ресурсы в подходящем формате, например PNG, JPG или SVG.
Общий файл и доступ
Выберите, кто может просматривать файл, а кто — редактировать его. Обновляйте макеты по той же ссылке, чтобы участники проекта работали с актуальным дизайном.