Перед тем, как запускать какой-либо сайт, особенно, если он нацелен на продажу каких-то услуг и/или является визитной карточкой компании, неплохо было бы продумать дизайн. Изначально делается эскиз-макет дизайна сайта, где расставляются все блоки, которые будут находится на странице. В данном случае практически никакого дизайнерского решения не применяется. Этот этап называется прототипированием.
Где делать прототип сайта
Каждый дизайнер решает сам, в какой программе и на каком сервисе делать первичный прототип. Также эти аспекты могут заранее обговариваться в техническом задании со стороны клиента. Например, многим дизайнерам проще сделать прототип на листке бумаге, а потом показать фотографию заказчику.
Кто-то предпочитает использовать онлайн-сервисы, кто-то программы, например, Photoshop или другие графические редакторы. В рамках данной статьи рассмотрим, наиболее удобные сервисы и программы для прототипирования сайта веб-дизайнеру.
Вариант 1: Wireframe CC
Это самый популярный сервис у веб-дизайнеров. Здесь можно буквально за пару минут сделать дизайн-макет сайта на несколько устройств. При этом вам не потребуется чтения инструкций и мануалов, так как всё интуитивно понятно. Основной функционал сайта предоставляется на бесплатной основе и без регистрации. Единственным серьёзным недостатком является тот факт, что интерфейс на английском языке.
После регистрации вы сможете сохранять часть своих макетов и делиться ими с коллегами и/или заказчиками. Также созданные прототипы можно скачивать в виде обычного изображения.
Принцип взаимодействия с интерфейсом очень прост. Вам нужно просто кликнуть в нужном месте на «холсте» и нарисовать прямоугольник или квадрат. Всплывёт меню, где представлены варианты оформления. Можно оставить этот прямоугольник как есть, скруглить ему углы, сделать кругом (эллипсом), заготовкой под изображение или текстовый блок.
Читайте также:
Планоплан 3d — планировщик квартир, бесплатная онлайн программа
Сервисы поиска по картинке
Paint онлайн — проект «Drawi»
Архив Интернета что это и как им пользоваться (Wayback Machine)
Чтобы изменить опции, уже созданного элемента, по нему нужно кликнуть левой кнопкой мыши. В контекстном меню выберите тот параметр, значение которого вы хотели бы поменять. Практически все управляющие элементы на сайте реализованы таким образом, что они появляются только тогда, когда в них есть необходимость.
Разница между платной и бесплатной подпиской в том, что вы можете работать сразу над несколькими макетами в одном аккаунте (при платной подписке). Также некоторым элементам в премиум-аккаунте можно задавать анимацию и т.д. Всё это можно без проблем экспортировать в PDF и PNG, в то время, как во free-версии экспорт сильно ограничен. Платная подписка, на момент написания этой статьи, стоила 15$ в месяц.
Вариант 2: Wires
Данный вариант не существует, как отдельное решения, а является одним из разделов сайта Quirktools.com. Тем не менее по функционалу он не уступает предыдущему сервису. Интерфейс тоже на английском языке, также есть платные и бесплатные аккаунты. Вы можете работать с прототипами, не проходя регистрации, но в таком случае вы сможете работать только с одним прототипом. Если вам нужно выполнить что-то серьёзнее одного-двух набросков, то рекомендуется пройти регистрацию. Оплачивать подписку необязательно.
При условии, что вы авторизовались на сайте, у вас будет возможность на бесплатном аккаунте сохранять до трёх проектов. Для личных нужд и небольшого потока работ этого вполне хватит. При создании макета можно также выбрать, будет ли он публичным или приватным:
- В первом случае вы можете давать ссылку на просмотр созданного макета любому человеку;
- Второй случай подразумевает то, что над проектом работаете только вы. По завершению, чтобы поделиться результатами работы с другими, нужно будет скачать макет.
Перед началом работ у вас появится окошко с настройками нового проекта. Здесь нужно выбрать, будет ли он приватным или же публичным. Также нужно выбрать варианты разрешения. На сайте уже имеются заготовки готовых разрешений под планшет, смартфон и экран монитора, но вы можете задать нужное разрешение самостоятельно, поставив маркер напротив пункта «Custom».
Чтобы создать новый объект, нажмите на иконку в виде четырёх квадратов в верхней левой части экрана. Откроется меню, где нужно будет выбрать тип объекта. В зависимости от типа выбранного объекта вы увидите область редактирования его содержимого. Там могут быть разные параметры.
К объектам на прототипе можно добавлять комментарии. Дополнительно вы можете просмотреть, как это всё выглядит, если убрать верхнее меню с управляющими элементами. Если всё хорошо, то работу можно сохранить как изображение или в виде PDF-файла. Также проект будет сохранён в библиотеке вашего аккаунта.
Сервис очень прост и имеет базовые возможности для редактирования первичного дизайн-макета. Некоторые дополнительные возможности, а также снятие ограничений по количеству работ в аккаунте можно убрать. Цена за месяц премиум-подписки – 10$.
Вариант 3: InVision App
Этот сервис уже подразумевает полноценный инструмент для веб-дизайнера, а также для разработчиков мобильных приложений. Бесплатной подписки нет, только возможность использовать в «тестовом» режиме ограниченную часть функционала. В остальных случаях придётся оформлять подписку на месяц.
По факту может является заменой профессиональных инструментов для многих веб-дизайнеров. Здесь можно сделать не просто прототип, а полноценный дизайн, который останется только отправить на вёрстку.
Возможно, некоторые пользователи могли бы предположить, что стоить такое «удовольствие» будет немало. На самом деле здесь есть только один вариант подписки, которую нужно оплачивать каждый месяц. Цена – 15$.
Вариант 4: NinjaMock
Данный вариант будет интересен тем пользователям, которые привыкли отрисовывать макет сайта на листке бумаги. Весь интерфейс стилизован под бумагу, но при этом по функционалу не уступает первым двум рассмотренным сервисам. Дополнительно имеет перевод на русский язык, но к сожалению, только частичный. Использование сервиса платное, а цена варьируется от количества проектов. Первый проект бесплатный.
По мнению разработчиков этого сервиса, нет смыла создавать прототипы с высоким уровнем детализации, так как её, как правило, делают уже на готовом макете в профессиональных программах, например, в Photoshop. По расценкам:
- Создание первого пробного макета – бесплатно;
- Создание одного проекта – 4$;
- Создание трёх и более проектов 10-12$.
Для всех типов аккаунта доступны базовые инструменты редактирования и добавления различных элементов. Готовый дизайн проект можно не только сохранить на сайте и поделиться им с командой или заказчиком, но и скачать на компьютер в виде изображения или редактируемого файла PSD.
Вариант 5: Moqups.com
Сайт Moqups.com предлагает пользователю широкий функционал для создания не просто прототипа, но и полноценного дизайн-макета. По сути это что-то вроде Фотошопа, функционал которого адаптирован исключительно под потребности веб-дизайнеров и разработчиков. Сервис тоже платный.
Здесь есть библиотека, где можно найти практически любой элемент, который используется на сайте, в мобильном и веб-приложении. Все элементы, которые вы добавляете в макет проекта можно сортировать по папкам, как в том же Photoshop. Взаимодействие с элемента происходит при помощи их перетаскивания на рабочую область проекта.
Параметры объекта, добавленного из библиотеки можно менять по своему усмотрению. Например, вы можете добавлять какие-либо дополнительные элементы, которые будут работать в связке с основным, менять шрифт, размер текста, толщину линий, цвет и т.д. Можно создавать собственные объекты и сохранять их в библиотеке сервиса. Также вы можете загружать изображения в отдельную библиотеку. На сайте имеется обширный каталог с иконками, картинками и другими графическими элементами.
Для небольшой задачи есть бесплатный аккаунт. В данном случае из библиотек сервиса вам будет доступно только 300 элементов. Также бесплатный тариф позволяет работать только с одним проектом.
Если вам нужно часто заниматься прототипированием сайтов, обмениваться результатами с коллегами и заказчиками, а также использовать нестандартные подходы в решении задач, то рекомендуется приобрести платную подписку. Она стоит 19$ в месяц, что довольно дорого.
Вариант 6: Photoshop
Данный вариант является наиболее популярным среди многих веб-дизайнеров и разработчиков. Чтобы разобраться в его функционале, новичку придётся изучить не только документацию, но посмотреть видео-мануалы. Те, кто умеют уже пользоваться Фотошопом, могут без проблем делать прототипы сайтов.
Помимо того, что здесь можно просто схематично «раскидать» элементы, сделав первичный набросок, так его можно редактировать в любой момент. Например, если заказчик утвердил ваш прототип, то прямо в нём можете дорабатывать «схематичные» элементы до готового варианта.
Как видите, кроме набросков «на бумаге» их можно делать в специализированных сервисах и программах. Функционал их примерно схож, но где-то он платный, а где-то бесплатный. Некоторые дизайнеры используют несколько из описанных сервисов, разделяя их под конкретный тип задач.
