Адаптивный веб-дизайн: лучшие практики и советы

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

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

Определите свой стиль

Создание цветовой палитры

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

Думайте в первую очередь о мобильных устройствах

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

Создавайте руководство по стилю после ваших первоначальных макетов, а не до

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

Последовательный не обязательно означает скучный

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

Некоторые элементы, которые вы, возможно, захотите стилизовать и стандартизировать, включают:

• Уровни заголовков: H1, H2, H3…
• Основные изображения или образы героев
• Основная навигация
• Вторичная навигация
• Копия тела
• Нумерованные и маркированные списки
• Вызовы или значки
• Обработка изображений контента
• Стиль цитаты
• Виджеты (ротаторы, социальные вставки, календари и т. д.)
• Крупные кнопки призыва к действию.
• Дополнительные кнопки или текстовые ссылки
• Элементы формы
• Сноски и разрешенный тип мыши
• Социальная акция

Тип

Копировать блоки

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

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

Не бойтесь разбить его

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

Да, люди ДЕЙСТВИТЕЛЬНО прокручивают вниз

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

СВЯЗАННЫЕ С

Ведущие тенденции дизайна 2020 года

Тип оценки

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

Тип Цвет

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

Тип Вес

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

Навигация

Гамбургеры!

Значок Navicon также выглядит как маленький бутерброд или гамбургер с тремя линиями укладки. Если вы считаете, что ваша основная демографическая группа пользователей не очень хорошо разбирается в онлайн-технологиях, всегда добавляйте слово «меню» над или рядом с Navicon . Исследования пользователей, проведенные на сегодняшний день, показывают, что пользователь более склонен просматривать ваш сайт, если вы включаете слово « Меню » или « Навигация » рядом с Navicon или над ним.

Включите кнопку «Вернуться к началу» внизу страницы с длинной прокруткой.

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

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

Глоссарий дизайна:

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

Копировать блок
сгруппированный абзац или серия абзацев текста.

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

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

Без засечек
Шрифт без засечек , без засечек , готик, без засечек или просто без засечек — это шрифт, который не имеет небольших выступающих элементов, называемых « засечками » в конце штрихов. Термин происходит от французского слова sans , означающего «без», и « serif » от голландского слова schreef, означающего «линия».

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

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

Область просмотра
обрамленная область на экране дисплея для просмотра информации.

Белое пространство
в макете страницы, иллюстрации и скульптуре пустое пространство часто называют негативным пространством. Это часть страницы, оставшаяся неотмеченной: поля, промежутки и пространство между столбцами, строками текста, графикой, рисунками или нарисованными или изображенными объектами.