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