Вопросы для выявления основных требований к фронтенд-разработке (разработке веб-интерфейсов)

Для повышения точности оценки сроков и стоимости работ по фронтенд-разработке необходимо выявить основные требования к разработке интерфейса. В «Студии 15» вместе с макетами дизайна на оценку ответственным лицам передают следующую информацию.

Вопросы для выявления основных требований к разработке веб-интерфейса

1. Какого типа требуется вёрстка?

  • Фиксированная. Ширина сайта не изменяется на разных разрешениях экрана.
  • Резиновая. Ширина сайта изменяется в зависимости от ширины экрана пользователя, сайт «растягивается».
  • Адаптивная (adaptive). При изменении ширины окна браузера интерфейс перестраивается только в определенных точках (например 320 px, 768 px, 1024 px). Промежуточные состояния интерфейса не прорабатываются.
  • Отзывчивая (responsive). Уделяется внимание всем возможным размерам экранов. Интерфейс изменяется, когда это необходимо с точки зрения UX/UI, а не в определенных точках.

2. Для каких разрешений нарисованы дизайн-макеты?

Если на сайте не требуется адаптивность, то скорее всего будет достаточно только одного разрешения макетов. Но если необходимо делать адаптивный интерфейс, то из дизайна должно быть понятно, как ведут себя элементы интерфейса на разных разрешениях экрана. В идеале требуются макеты с разрешением 320 px, 768 px, 960 px, 1280 px.

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

3. Какие браузеры и платформы требуется поддерживать?

Чем больше браузеров и платформ необходимо поддерживать, тем больше требуется времени на тестирование и отладку интерфейса, тем дороже будет работа.

Есть сильно устаревшие версии браузеров, например, Internet Explorer 8, поддержка которых приведет к серьезному, иногда экспоненциальному, росту трудозатрат и сильным изменениям в технологии разработки интерфейса.

Если интерфейс разрабатывается для уже существующего сайта, то разумно будет посмотреть текущую статистику посещений и выбрать поддерживаемые версии браузеров.

Если статистика отсутствует, то можно спрогнозировать версии браузеров исходя из целевой аудитории.

Например, во многих государственных учреждениях установлено устаревшее ПО и потребуется поддержка старых версий браузеров.

Если целевая аудитория «обычная», то можно использовать общемировую статистику и поддерживать только относительно свежие браузеры.

  • Chrome, Firefox, Safari, Edge >0,1 % использований;
  • Android Chrome, iOS Safari >0,1 % использований;
  • Internet Explorer 11.

4. В какой программе разработаны исходники дизайн-макетов?

Adobe Photoshop, Adobe XD, Sketch, Figma…

В зависимости от формата исходных макетов дизайна сайта предъявляются различные требования для работы с ними. Например, Sketch запускается только на MacOS, поэтому если разработчик работает на Windows, то требуется совершить действия для экспорта макетов в другие приложения.

5. Необходимо ли следовать практике Pixel Perfect при вёрстке макетов?

По умолчанию мы допускаем погрешность до 5 пикселей в размерах блоков отступов и плашек от дизайна. Однако, готовы подогнать вёрстку под макет со 100 % соответствием.

6. Необходимо ли прорабатывать разметку для поисковых систем и социальных сетей?

Для повышения качества позиционирования сайта в выдаче поисковых систем и получения дополнительных возможностей для представления карточки сайта в результатах поиска для доработки HTML-структуры используется стандарт семантической разметки Schema.org.

Подобным же образом решается задача корректной публикации материалов сайта в социальных сетях, для дополнительной разметки HTML-структуры используются протоколы Open Graph, Twitter Card и другие.

7. Какой уровень доступности интерфейса необходимо обеспечить?

Доступность интерфейса для людей с ограниченными возможностями можно прорабатывать с различным уровнем качества. Работа заключается в соблюдении рекомендаций WCAG 2.0 при проектировании и разработки дизайна, написании HTML, CSS, JS кода. Прорабатывается навигация по интерфейсу с клавиатуры и корректность озвучки сайта с помощью скринридера.

Для сайтов органов власти РФ предъявляются дополнительные требования к цветовым схемам, размерам шрифтов и прочему.

8. Какие есть технические требования к разработке интерфейса?

Технологии, инструменты, стиль кода и прочее. Где должна быть организована инфраструктура с репозиторием и дев-сервером.

9. Возможно изучить исходный код проекта?

Если работа подразумевает развитие уже существующего проекта, то необходимо провести аудит имеющейся разработки на предмет определения сложности погружения и внесения изменений в проект.