С чего начинается сайт
С чего начинается театр, знают, пожалуй все. С чего начинается сайт – только я. Шутка: ) Итак, разберем одну из популярных программ, которая позволяет собрать в нечто осязаемое мысли в голове заказчиков: от фразы в стиле Горшка «Чтобы было зашибись» до не менее популярного пожелания «Чтобы я ничего не делал, а мне с сайта валились деньги». Отбросим грустные мысли о том, что на сегодняшний очередной карантинный день вторая фраза не актуальна, поговорим о прототипировании сайтов. Именно с помощью этого процесса все идеи и мысли по поводу того, а что же мы получим в итоге в интернете, получают первый осязаемый результат.
Для создания интерактивных прототипов есть несколько популярных программ: Axure, Balsamiq, Figma, Mockflow и другие. У всех есть свои плюсы и минусы, в данной статье остановимся на простом и при этом доступном с точки зрения освоения и интерактивности – Axure RP 9.
При создании лендингов, корпоративных сайтов, баз данных или систем управления бизнесом это один из самых универсальных инструментов. Разберем функционал Axure и научимся делать в нём прототип. Для начала разберём, а зачем вообще нужен этап прототипирования (или создания архитектуры сайта)
Интерактивный выполняет несколько задач:
- В прототипе в наглядном виде можно показать структуру сайта.
- Прототип позволяет показать заказчику в виде схемы все страницы проекта.
- Страницы прототипа помогают дизайнеру в отрисовке страниц в цвете, так как в нём уже показано, где именно должны быть размещены кнопки, иконки, баннеры и прочие элементы страниц.
Функционал AXURE
Так выглядит только что запущенная программа:
Сверху меню, к слову настраиваемое, слева сверху – структура сайта (по умолчанию отображается и открывается одна страница) и ниже библиотеки виджетов и мастера. Что это и зачем нужно расскажу далее. Справа колонка работы со стилями, интерактивом элементов на странице. От версии к версии разработчики добавляют новые фишки в интерфейс, делая его более удобным, а также давая возможность добираться до многих функций в меньшее число кликов. Что и для чего нужно станет понятно во время работы.
Начало работы
Чтобы начать работать, создаем новый проект: File –> New. В самом начале мы ограничиваем рабочее поле направляющими, задав рабочую ширину сайта. Если вы делаете адаптивный прототип – то есть автоматически подстраиваемый под размер экрана – стоит задать Adaptive View Sets, то есть говоря по-русски выбрать разрешения для разных видов: мобильного, планшетного, десктопного. Ограничили ширину для работы? Теперь размещаем в рабочем поле нужные вам элементы. Делаем это, просто перетаскивая и редактируя элементы из блока Libraries. После этих манипуляций мы получаем страницу, наполненную меню (горизонтальным или вертикальным) формами для заполнения, картинками, текстом. Пример – на скриншоте ниже.
Основные элементы, которые нужны для работы над страницами прототипа:
- Плашки (футер, шапка и т.д.)
- Меню
- Иконки
- Заголовки
- Текст
- Кнопки
- Формы
- Границы для разделения элементов
- Динамически панели
- Таблицы
- Чекбоксы
Все эти элементы находятся в блоке Libraries и разобраться с тем, зачем все они нужны, можно перетаскивая их в рабочее окно и меняя их параметры.
Интерактивность
Внимательный читатель задаст вопрос: «А почему нельзя нарисовать всё это на бумаге? Или даже в отличной графической программе Paint?» Нарисовать-то можно, но Axure даёт возможность интерактивного взаимодействия между элементами, то есть можно создавать нажимаемые кнопки, всплывающие окна, встраивать видео и совершать много других интересных интерактивных взаимодействий. Многие из них доступны благодаря элементу библиотеки под названием «Dynamic Panel». Собственно в названии и заключен смысл – динамическая панель может менять своё положение, размер, отображаться или скрываться со страницы. Более того, свойство динамичности можно задать любому из элементов библиотеки кликнув на него и выбрав пункт «Create Dynamic Panel» то есть превратить любой элемент в рабочем поле в динамический интерактивный элемент.
Собственно, возможность создавать взаимодействующие при клике или наведении элементы дают возможность создавать любые по сложности проекты, позволяя воплотить в реальность самые смелые мысли заказчика.
При этом каждый из элементов можно превратить в ссылку, выбрав его и слева кликнув Click or Tap. После этого откроется древо сайта с возможностью выбрать любую страницу существующего проекта или внешнюю ссылку в сети Интернет.
Путём размещения в рабочем поле элементов, создания динамических панелей, перелинковок, создания взаимодействий между элементами мы получаем проект сайта, которые показывает, как и что будет выглядеть и работать в реальности. Ниже примеры некоторых из страниц интерактивного прототипа, на которых показаны возможности программы.
Формирование результата работы над проектом
После того, как работа закончена, можно несколькими способами выгрузить результат: опубликовать в облаке Axure, сгенерировать HTML файлы или сгенерировать спецификацию в Word – все эти опции доступны в меню в разделе Publish. Для того, чтобы дать доступ всем пользователям интернет, выбирают Publish to Axure Cloud. Результатом этого выбора будет ссылка такого типа https://zsvke1.axshare.com/ Прототип утверждается в виде такого интерактивного проекта, затем работа передаётся дизайнеру, который рисует страницы в цвете. На выходе получаются макеты сайта, несколько примеров ниже.
Как происходит создание дизайна сайта, в чём могут возникнуть сложности, какие нюансы адаптивных дизайнов – обо всём этом в следующий раз.