Skip to content

Отзывчивый веб-дизайн

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

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

В идеальном случае, отзывчивый веб-дизайн не должен зависеть от устройства, как iPhone или iPad. Вместо этого вы должны стремиться учитывать в дизайне контент и то, как он должен перетекать и адаптироваться к различным средам, в которых он может просматриваться или использоваться.

Дизайн для отзывчивого веба

Раньше получить доступ к Интернету вы могли только с очень большого компьютера, подключенного через dial-up модем, издающим звук во время подключения. Теперь же для выхода в сеть можно использовать компьютеры, ноутбуки, смартфоны, планшеты, телевизоры, игровые приставки — список кажется почти бесконечным.

Книга "Responsive Web Design", написанная Итаном Маркоттом и опубликованный A Book Apart, является блестящим введением в принципы отзывчивого веб-дизайна

Книга «Responsive Web Design», написанная Итаном Маркоттом и опубликованный A Book Apart, является блестящим введением в принципы отзывчивого веб-дизайна.

С одной стороны, это отличная новость. Мы можем находиться онлайн в любом месте и в любое время! Кто-то это считает уже само собой разумеющимся, для многих это также необходимо. Но с другой стороны, мы часто испытываем необходимость в том, чтобы сайты работали быстро.

Из-за того, что адаптивные веб-сайты становятся все более популярными, даже широкая публика (все, кто находится за пределами индустрии) ожидает наличия адаптивной версии, просматривая веб-страницы.

Вызовы, которые приносит отзывчивый веб

Работа с адаптивным дизайном не обходится без проблем. Прежде всего, существует множество устройств и размеров экрана, которые мы должны обслуживать. От очень маленьких до очень больших экранов (и все, что между ними). И, если вы разработчик, вы уже знаете, что работа с адаптивным дизайном может также превратиться в кошмар и стать чрезвычайно трудной в управлении.

Веб-сайт mediaqueri.es предлагает много вариантов вдохновения первоклассного адаптивного веб-дизайна
Веб-сайт mediaqueri.es предлагает много вариантов вдохновения первоклассного адаптивного веб-дизайна

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

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

Работа с клиентами и управление ожиданиями

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

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

Выясняем потребность клиента

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

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

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

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

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

Советы и техники для отзывчивого веб-дизайна

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

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

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

Мокапы

Большинство людей при разработке веб-дизайна прибегали к созданию макета для сайта со статической шириной в Photoshop, а некоторых используют данный подход до сих пор. И это абсолютно нормально! Если вам удобно использовать графическое приложение, то вы все еще можете использовать данный метод при создании отзывчивого веб-дизайна, в этом нет ничего предрасудительного.

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

Дизайн в браузере

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

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

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

«Принимаем решение» в браузере

Это, наверное, мой личный фаворит. Принимать решение в браузере означает, что часть работы вы проделываете в графическом редакторе, а другую часть — в браузере. Лично я считаю, что нельзя получить лучший вариант дизайна, пока его нельзя посмотреть в браузере. Типографика всегда рендерится по-разному в графическом редакторе и браузере. И при таком подходе гораздо
гораздо проще создавать прототипы и быстро итерироваться через этапы дизайна (хотя все это может измениться с появлением таких приложений, как Macaw).

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

Работая таким образом, я обнаруживаю, что часто получаю смесь мокапов, UIkit (как в виде PSD, так и в виде HTML и CSS) и полноценных прототипов на HTML и CSS. Этот набор великолепен, и он показывает эволюцию веб-сайта от начала и до того, каким мы надеемся будет итоговый веб-сайт.

Content-First, Mobile-First или Desktop-Down?

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

Во-вторых, выбор направления работы mobile-first (от мобильных экранов и выше) или desktop-down (от размеров рабочего стола к мобильным) полностью на ваше усмотрение. Про это много дебатов в сети, но на самом деле это ваше собственное решение. Если вы чувствуете себя более креативно, начиная работу от большей ширины макета к меньшей, даже если вы перестраиваете его противоположным образом, это нормально. То же самое касается и обратного подхода, от малой ширине к большей!

Инструменты, которые помогут вам разработать отзывчивый дизайн

Пожалуй закончим статью подборкой полезных инструментов, которые помогут вам в создании отзывчивого веб-дизайна:

Сетки

Типографика

Стайлгайды и UIkit

Тематические исследования

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Видео в веб-дизайне

Итоги школы дизайна для разработчиков