Как сократить работу над интерфейсом

Материал подготовлен специально для блога SPECIA агентством Nimax.ru

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

3 ways_1

Но что делать, если проект основан на веб-технологиях, но гораздо сложнее обычного корпоративного сайта? Например, веб-сервис, личный кабинет магазина, корпоративный интранет и т.д. Количество экранов и их состояний для таких проектов может исчисляться многими десятками. У нас часто бывают проекты, у которых папка «Макеты» содержит 50-70 файлов.

3 ways_2

Такие интерфейсы, как правило, постоянно дорабатываются, да и что уж скрывать, они очень похожи друг на друга. Есть ли смысл вкладывать столько усилий в дизайн? Вспомните страницы личного кабинета Amazon, вряд ли каждая из них требовала отдельного макета.

Таким образом, для больших интерфейсов, которые находятся в постоянном развитии, стандартная схема работы слишком дорога и растянута во времени. Кроме того, замедляется процесс развития и совершенствования проекта. Каждое улучшение вязнет в долгой цепочке разработки.

Мы предлагаем использовать 3 приёма, которые помогут сократить время и затраты на разработку сложных интерфейсных проектов с большим количеством экранов, диалогов и состояний.

Приём 1: Уменьшить число макетов

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

3 ways_3

Если не отрисовывать каждый макет, а вёрстку страниц делать напрямую из прототипа, компонуя страницы в соответcтвии с таким руководством, процесс разработки значительно сократится. Обычно вполне достаточно эскизных прототипов, но при такой схеме работы прототип гораздо больше похож на точный чертеж и должен быть подробным, аккуратным, построенным по сетке.

3 ways_4

Такая модель разработки позволяет быстро проработать новую функциональность в прототипе и сразу запустить его в разработку. Дизайнера теперь можно привлекать только для создания графики или нестандартных элементов, не втягивая его в компоновку множества макетов.

Приём 2: Cтандартизация элементов вёрстки

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

3 ways_6

Приём 3: Использование готовых фреймворков

Третий приём сокращения времени логично вытекает из второго. Если у проекта нет специфических требований к дизайну, то можно использовать готовые наборы элементов для построения интерфейса. Например, Bootstrap или Foundation.

3 ways_5

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

При значительной экономии времени, интерфейс будет не менее аккуратным и профессиональным. Возможности его брендирования ограничиваются незначительно, цвета и стилизацию элементов легко подобрать под фирменный стиль. Пользователи вряд ли догадаются, что перед ними интерфейс из готового конструктора. Качество кода при этом увеличивается, ведь такие фреймворки многократно проверены и отлажены.

Экономия при использовании таких подходов к проектированию и разработке может достигать от 15% до 50% времени. Ценность такого подхода не столько в экономии денег, сколько в ускорении развития и совершенствования проекта.

Связанные посты