С ростом технического прогресса мы имеем все больше и больше возможностей выхода в интернет: теперь это не только стационарные компьютеры, но и разнообразные планшетные устройства, мобильные телефоны, смартфоны, ноутбуки, и даже телевизоры. Разрешение экрана таких устройств может варьироваться от 320 до 2560 пикселей, поэтому традиционный дизайн сайта с фиксированной шириной уходит далеко в прошлое. А на смену ему приходит адаптивный веб-дизайн, особенность которого и заключается в создании таких веб-страниц, которые должны удобно просматриваться с помощью любого устройства, предоставляющего выход в интернет. Таким образом, адаптивный дизайн избавляет разработчиков от необходимости создавать несколько версий веб-сайта для различных устройств, что крайне не эффективно.
Этапы разработки адаптивного дизайна сайта
С введением адаптивного дизайна сайта изменяются и этапы его разработки, требуя более плотной интеграции действий дизайнера и разработчика. Ниже приведен последовательный алгоритм создания адаптивного сайта с кратким описанием каждого этапа. Сразу следует сделать оговорку: идеальной стратегии не существует - она определяется в процессе взаимодействия индивидуально.
1 этап: Проектирование.
Здесь в первую очередь стоит собрать все необходимые данные о бизнесе клиента, его конкурентах и поставить основные цели проекта: что, зачем и кому. Далее можно начать создание прототипов интерфейса, учитывая тот факт, что сайт должен практично отображаться на небольших устройствах. Для этого критически оцениваются все элементы дизайна: насколько важен блок, можно ли от него отказаться, как он будет отображаться на конкретном устройстве и т.д. Здесь как нельзя, кстати, применимо правило Алана Купера «Независимо от того, насколько ваш интерфейс классный, чем его меньше, тем лучше»
2 этап: Построение модульной сетки.
Используя наработки первого этапа проектирования , создается модульная сетка будущего интерфейса сайта. Это необходимо для создания легко поддерживаемого и приятного дизайна. Здесь можно использовать специальный инструмент –
генератор модульной сетки для адаптивного дизайна.
3 этап: Дизайн.
Только теперь настает очередь самого
дизайна сайта. Используя определенные графические инструменты и готовые прототипы, производится расстановка блоков по модульной сетке. При этом лучше проконсультироваться с разработчиком о возможности того или иного варианта.
4 этап: Верстка.
Psd макеты дизайна передаются на верстку. Основными используемыми инструментами в разработке адаптивного сайта являются HTML5, CSS3 media queries и JavaScript. Основная суть заключается в написании различных стилей для каждого разрешения (диапазона значений).
5 этап: Тестирование.
Разработанная страница проходит тестирование на разных вариантах устройств, причем проводят оценку все участники команды со своей профессиональной точки зрения. Дизайнер смотрит на отступы, размер иконок, шрифты. Разработчик отвечает за загрузку, обилие css3 и оптимизацию стилей, корректность отображения. Проектировщик оценивает удобство использования сайта конкретным устройством, насколько легко найти интересующую информацию.
6 этап: Разработка.
Итогом всех перечисленных этапов является программирование или привязка сайта к CMS.
Таким образом, в результате плотного взаимодействия участников разработки мы получаем качественный адаптивный веб-дизайн сайта.
Вернуться назад
+375 (17) 377-55-68
+375 (29) 307-35-45
+375 (29) 807-33-75
+375 (25) 799-75-45
Telegram
Viber
Оставить комментарий: