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