Wireframe.cc
Преимущества Wireframe.cc:
- Все управление происходит онлайн в браузере. Не требуется скачивание и установка на ПК.
- Простой минималистичный интерфейс с интуитивно-понятным редактором.
- Большинство основных и необходимых функций доступны бесплатно.
- Отлично подходит для быстрого создания незагруженных простых интерфейсов, представления портфолио.
- Для работы не требуется регистрация.
- Быстрое сохранение готового результата: полученной индивидуальной ссылкой можно поделиться с другим человеком.
- Возможность добавлять комментарии к объектам.
Кому полезен сервис Wireframe.cc
В Wireframe.cc можно создать прототип сайта или лендинга, разместить текст и показать заказчику, как будет смотреться конечный результат. Прототип, созданный в Wireframe.cc, облегчит работу дизайнеру, поможет добиться единого видения концепции сайта.
Прототип лендинга — это отображение схемы текстовых блоков, медиа-контента, кнопок в том виде, как это должно быть на готовой веб-странице. Макеты лендингов можно делать вручную на бумаге или в специализированных программах — Figma, Photoshop, Axure и других. Как правило, эти программы сложны в управлении, требуют установки на ПК, регистрацию или платные. Некоторые недоступны в РФ из-за санкций. Поэтому Wireframe.cc выигрывает на их фоне.
Для чего нужен прототип сайта
Макетирование — это первый этап разработки любого цифрового продукта. Прототип формирует и показывает структуру сайта или приложения. Он нужен не только заказчику, а также самому вебмастеру или разработчику, когда тот решает самостоятельно создать веб-продукт с нуля с нуля. Чтобы сайт был понятным, логичным, сначала создается его прототип.
При создании прототипа не нужно уделять излишнее внимание дизайну, вставлять фотографии и видео — их расположение будет показываться квадратами и прямоугольниками. Однако желательно добавить реальные тексты, чтобы понять, сколько места они занимают, не будут ли наслаиваться друг на друга или не помещаться. Элементы отображаются схематично: важно показать основную функциональность сайта, его маркетинговую составляющую. Прототип нужен, чтобы:
- Понять, какая информация необходима или должна размещаться на каждой странице.
- Предотвратить серьезные ошибки в структуре, юзабилити, навигации сайта. На прототипе будет четко отображен рабочий вариант.
- Быстро вносить изменения , если во время прототипирования приходят новые идеи или требуется включение новых функций. Внести корректировки в схему на первых этапах легче, чем когда сайт делается с нуля без прототипа.
- Сэкономить время . Когда создается прототип, разработчик или дизайнер не отвлекается на подбор цветовой гаммы, оформление, спецэффекты. Он концентрируется на одной задаче, затем последовательно приступает к другой.
- Быть подстраховкой для фрилансера . Когда фрилансер подготовил прототип, он отправляет его клиенту на согласование. Если клиент все согласовал и утвердил это в договоре, то в случае возникновения правок в готовый макет клиент должен будет оплатить эти изменения как дополнительную услугу.
Как начать работать в Wireframe.cc
Чтобы попасть в сервис и начать работу, нужно перейти на официальный сайт по ссылке
Поле по умолчанию предлагается с сеткой и небольшого размера. Можно увеличить размер, убрать сетку, либо оставить ее по желанию. Сетка помогает делать макет более структурированным и аккуратным, но некоторым удобнее работать без нее. Чтобы убрать сетку, нужно перейти в настройки в правом верхнем углу. Откроется список, где нужно убрать галочку напротив Show grid . Можно также добавить колонки. Нужный размер задается в разделе Canvas Size . Первое число — ширина, второе — высота листа.
Чтобы сохранить изменения и финальный результат, нужно нажать Save . Таким образом можно получить уникальную ссылку. Ее можно пересылать заказчику, либо заходить по ней и продолжать редактирование в последующем.
Особенности работы в Wireframe.cc
Чтобы производить какие-либо действия с графикой на будущем прототипе лендинга, нужно сначала выделить место левой кнопкой мыши, где будет находиться элемент, и только затем — выбрать сам элемент. Этим
После выделения места на листе сервис предложит разные объекты. Программа будет угадывать, что нужно, предлагать объекты в зависимости от того, область какого размера была выделена. Например, если выделить большую квадратную область — это будут одни объекты, если выделить узкую горизонтальную полоску — то другие объекты.
Сервис предлагает разместить такие объекты, как прямоугольники с квадратными и закругленными краями, эллипсы, имитации изображения, абзаца, текста, списка, заголовков, общие текстовые блоки, аннотации и другие. Можно также размещать слайдеры, разделители, полоски прокрутки, раскрывающиеся списки. Чтобы выбрать нужную фигуру, на нее нужно нажать левой кнопкой мыши.
Верстка прототипа в Wireframe.cc
Когда объект вставлен на экран, по нему нужно кликнуть два раза, чтобы открыть Панель редактирования . В зависимости от объекта опции панели редактирования различаются. Например, у графических фигур можно задать толщину линий, цвета фона и границы.
Чтобы создать кнопку, нужно сначала выделить на экране место, где она должна быть. Из предложенных объектов для кнопки оптимально выбрать прямоугольник с закругленными краями. Затем нужно открыть панель редактирования и сделать кнопку определенного цвета, например, серого или красного.
На кнопке, как и на любых других фигурах, можно размещать текст. Сначала выделяется место, где текст должен быть расположен. Затем нужно кликнуть по объекту с текстом и заменить тестовый текст на тот, который требуется.
Объекты можно сгруппировать. Это позволит каждый раз переносить их на другое место вместе, а не по отдельности. Чтобы сделать группу объектов, нужно выделить их, удерживать клавишу Shift и перемещать в нужное место.
Чтобы сделать макет изображения, нужно выделить квадратную область и выбрать объект изображение. По нему нужно кликнуть два раза и по желанию залить серым или любым другим цветом.
В
Как делать блоки подстройки и работать со слоями
Блоки подстройки состоят из нескольких слоев и накладываются друг на друга. Например, два прямоугольника разных цветов и блок с текстом. Их можно создавать в любом порядке: в
Чтобы собрать блок подстройки, нужно перетащить одну фигуру на другую, внутрь этой фигуры поместить третий объект, например, текстовый блок. Если нужно поменять слои местами, нужно выделить объект, кликнуть правой кнопкой мыши и нажать на опцию — переместить данный слой вверх или вниз.
Как выравнивать объекты
В
После выделения объекта нужно нажать на Кнопку выравнивания . Так элементы будут выровнены по одной линии, расстояние будет одинаковым. Чтобы выровнять блок с элементами относительно другого объекта, нужно выбрать все элементы, сгруппировать их, нажать на Ctrl/Cmd + G . Затем нужно выбрать объект, относительно которого нужно выровнять, применить необходимый тип.
Как делать другую страницу макета
Эта опция доступна в платной версии. После того, как сделана первая страница макета, например, приветственный экран, нужно нажать на иконку карты сайта и далее — на Add new page . На новую страницу можно скопировать блок с меню и сохранить макет.
Также в макете можно будет делать кликабельные ссылки — например, показывать, куда будет вести кнопка, когда на нее кликнет пользователь. Для этого нужно выделить прямоугольник-кнопку с текстом, кликнуть правой кнопкой мыши. В меню далее понадобится выбрать Link , затем — выбрать экран, на который ведет ссылка.
Опции панели управления
В панели управления есть такие кнопки, как:
- Группировка элементов . Она позволяет объединять фигуры. Нужно выделить объекты и нажать Group Elements .
- Блокировка информации от редактирования . Это кнопка с замком. После нажатия на нее исключается возможность менять выделенные объекты. Если нажать на нее повторно, редактировать снова возможно.
- Добавление комментариев . Это функция добавления аннотаций, которая позволяет оставлять комментарии коллегам или запрашивать у них обратную связь. Нужно выделить область, нажать на Add Annotation . Затем понадобится написать сам текст комментария и сохранить его нажатием на ОК. Элементы, на которых есть комментарии, будут подсвечиваться оранжевой сеткой, текст появится при наведении мыши. Комментарии можно добавлять в том числе к тем объектам, которые были заблокированы от редактирования.
Как сохранить прототип или отправить его другому человеку
При работе в
Чтобы отправить прототип заказчику или коллеге, нужно его сохранить, нажав на Save , скопировать ссылку. Если другой человек по этой ссылке открывает макет, он может вносить туда изменения. Для удобства и избежания случайного редактирования можно сгруппировать все получившиеся блоки и заблокировать возможность их изменения.
Можно ли делать прототипы для мобильных устройств
Создатели
Тарифы и цены
Большая часть основных функций доступна бесплатно. Сервисом можно пользоваться неограниченное время. Демо отсутствует. На бесплатной версии есть несколько ограничений:
- отсутствуют учетные записи пользователей;
- макеты общедоступны — любой может внести изменения;
- можно делать прототип только одной страницы.
Для расширения функционала нужно купить платную версию. Ее стоимость начинается от $16 в месяц для одного пользователя; стоимость самого высокого тарифа с большим числом функций — $99. Количество проектов на платных тарифах неограниченно. Можно будет создавать интерактивные прототипы, экспортировать в pdf, png файлы. Платные тарифы предлагают тестовый период 7 дней.
Недостатки Wireframe.cc
Пользователи отмечают несколько недостатков сервиса:
- Малое количество объектов и цветов . Сервис подходит только для создания простого прототипа. Отсутствуют стрелки, таблицы.
- Не удобно скроллить страницу с макетом . При скроллинге курсор мыши перескакивает в разные места.
- Не получиться добавлять или импортировать свои изображения на бесплатном тарифе.
- Нет возможности запрещать редактирование полностью . Любой человек, получивший ссылку на готовый макет, может нажать на кнопку с замком и продолжить редактирование.
- Мало информации о разработчиках . На самом сайте нет ничего о компании, ее команде, других проектах, не понятен год создания сервиса.
Вывод
Создание прототипа лендинга может быть сложным, но процесс можно упростить с помощью сервиса
ТОП Записей
Партнерки
Сервисы
Еще немного интересного
