Обычно веб-разработка начинается с создания прототипа или скетча. Именно отсюда вырисовывается будущий дизайн. Скетч помогает показать заказчику схематично то, что его ждет в результате работы веб-дизайнера еще до первого цветного пикселя. В этой статье хочу рассказать про инструмент, который здорово в этом помогает.

Какой инструмент?

А имя нашего сегодняшнего героя – Wireframe. Пользоваться сервисом можно бесплатно, но чтобы экспортировать скетчи в PNG или PDF необходимо приобрести PRO аккаунт (для одного человека 15$ в месяц), либо использовать 7 бесплатных дней, а затем регистрироваться заново с новой почтой искать альтернативу.

Функциональность

Я расскажу об основных функциях сервиса, не связанных с покупкой PRO аккаунта. Все это вы сможете при желании найти на официальном сайте.

Холст для работы можно разбить либо обычной сеткой, либо колонками, как во всем известной Bootstrap Grid, накладывающей на холст 12 вспомогательных столбцов. Разумеется, все это можно настраивать и выставлять необходимый для работы размер сетки.

Wireframe дает возможность размещать схематично на холсте элементы интерфейса, коих можно насчитать около 15 штук (выпадающие меню, изображения, геометрические фигуры и т.д.). Их можно располагать с разными z-index, т.е. убирать на задний план или выводить на передний. Есть функция группировки элементов, которая бывает очень полезна при массовых перемещениях или копированиях. Если нужно сделать так, чтобы элемент нельзя было изменить, то его можно блокировать, а затем при необходимости снова разблокировать.

Нельзя не упомянуть про горячие клавиши. Сочетания Ctrl + C, Ctrl + V и их близкие родственники отлично понимаются сервисом, что дополнительно ускоряет разработку скетча.

Практика работы

Лично я оценил пользу этого сервиса, когда передо мной встала задача нарисовать очередной дизайн для сайта. Начал, естественно, с прототипирования. Это заняло намного меньше времени, чем скетч на бумаге. Прототип был готов за полчаса. И это с учетом всех изменений и доработок. Еще бы – ведь можно просто переместить или удалить элемент, а не рисовать новый скетч или исправлять старый, если это вообще возможно.

Хочу показать в качестве примера свою недавнюю работу.

Инструмент Wireframe - пример скетча

Инструмент Wireframe – пример скетча

Как видите, получается вполне неплохой каркас для дальнейшей разработки. Это помогает ускорить последующую работу над дизайном в Adobe Photoshop.

Я не люблю делать прототипы в упомянутом графическом редакторе, это слишком долго и неудобно, а Wireframe – ценнейшая находка. Надеюсь, что и вы оцените преимущества использования этого инструмента и cможете ускорить свою веб-разработку.

P.S. Не путать функционал и функциональность.

Быстрой и качественной разработки!

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: