Інтернет Мастерская

http://webarty.net/index.php?id=1418490629


Оптимальная стратегия создания адаптивного сайта

| источник: wedeal.ru
1. Проектирование

Участник: Проектировщик.

Входные данные: Цели и задачи проекта.

Об этапе: Создаются прототипы интерфейса для десктопа с пониманием, что сайт должен работать на небольших мобильных устройствах. На этом этапе каждый элемент оценивается критически: «Важен ли этот блок для посетителей?», «Можем ли мы от него избавиться?», «Как этот элемент будет вести себя на всем спектре устройств?».

Основное правило: «Независимо от того, насколько ваш интерфейс классный, чем его меньше, тем лучше», Алан Купер.

Прототипы удобно создавать в Axure PR или Gomockingbird.

Результат: Черновик интерфейса для десктопа с описанием, как его элементы будут вести себя на мобильных устройствах.

2. Модульная сетка

Участник: Дизайнер.

Входные данные: Черновик интерфейса для десктопа с описанием его перестроения на мобильных устройствах (без проработки внешнего вида).

Об этапе: Cоздается модульная сетка для будущего дизайна на основе черновиков интерфейса из первого этапа. Сетка необходима, чтобы получить сбалансированный и приятный глазу дизайн, который легко поддерживать после сдачи сайта.

Для создания модульной сетки удобно использовать генератор модульной сетки для адаптивного дизайна.

Результат: Модульная сетка для разрешений десктопа.

3. Дизайн

Участник: Дизайнер, front-end разработчик.

Входные данные: Модульная сетка и черновик интерфейса для десктопа с описанием его перестроения на мобильных устройствах (без проработки внешнего вида)

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

Результат: Макеты дизайна для десктопа в формате psd.

4. Верстка

Участник: Дизайнер, front-end разработчик, проектировщик.

Входные данные: Макеты дизайна для декстопа в формате psd и описание его перестроения на мобильных устройствах (без проработки внешнего вида).

Об этапе: Front-end разработчик верстает адаптивные страницы по psd макету дизайна, обсуждая и вырабатывая с дизайнером и проектировщиком наилучшие решения для мобильных устройств.

Результат: Страницы, состоящие из CSS/HTML/JavaScript, которые уже можно и нужно тестировать.

5. Тестирование

Участник: Дизайнер, front-end разработчик, проектировщик.

Входные данные: Страницы, состоящие из CSS/HTML/JavaScript.

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

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

Front-end разработчик проверяет, не разъехался ли макет, быстро ли грузится сайт, не тормозит ли он из-за обилия CSS3, и как это можно оптимизировать.

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

При этом исправлению подлежит только то, что объективно выглядит неправильно. На данном этапе важно понимать, что на всех устройствах будут какие-то отличия и добиться одинакового результата просто невозможно. Да это и не нужно, ведь мы делаем адаптивный дизайн, а не канувший в небытие «попиксельный».

Результат: Список исправлений, которые нужно внести в файлы CSS/HTML/JavaScript.

6. Разработка

Участник: Программист.

Входные данные: Страницы, состоящие из CSS/HTML/JavaScript и техническое задание.

Об этапе: После того, как макеты CSS/HTML/JavaScript утверждены, можно приступать к программированию и/или привязке к CMS.

Результат: Адаптивный сайт.

В зависимости от масштабов компании роли проектировщика, front-end разработчика и дизайнера могут быть смешаны.

комментарии