Разница между созданием хорошего и посредственного веб-сайта обычно определяется сразу. Часто бывает так, что веб-дизайнер загоняет свой проект в виртуальный «уголок». Вот где дизайн становится неспособным приспособиться к различным вариантам использования.
Обычно это происходит на этапе создания прототипа. Мы тратим много времени и творческой энергии на идею, которая выглядит потрясающе. Нашим клиентам это может понравиться так же сильно, как и нам. Но только когда мы действительно начинаем его воплощать в жизнь, мы начинаем полностью осознавать последствия.
Дизайн макетаслужит компасом для нашего сайта. Если мы не сможем заранее продумать то, что требуют определенные элементы, все может плохо закончиться. Конечным результатом является сайт, которому приходится идти на серьезные компромиссы, чтобы работать на разных устройствах и в разных браузерах. Это может негативно повлиять на доступность, производительность и соблюдение передовых практик.
К счастью, многое можно спланировать заранее. Давайте рассмотрим несколько ключевых моментов, которые следует учитывать, прежде чемделиться своими идеями с клиентом.
Как элементы адаптируются к разным экранам
Есть причина, по которой так много говорят о подходе к веб-дизайну «mobile first». По сути, это позволяет нам начать с самого необходимого для веб-сайта. Потом мы можем добавлять разные элементы и улучшать дизайн по мере увеличения области просмотра.
Тем не менее, у каждого из нас есть свои предпочтения в создании прототипов. Тем, кто все еще использует “десктопный” подход, важно подумать о том, как все эти модные элементы дизайна будут работать на телефоне.
Если вы планируете внедрить CSS Gridили Flexbox, то они очень помогут с точки зрения наилучшего использования доступной площади экрана. Но для работы других элементов может потребоваться больше усилий.
Например, большие ползунки может быть очень сложно использовать на маленьких экранах. Сложные изображения могут быть не такими впечатляющими, а текст может выходить за рамки. Производительность также может отставать.
В этом случае вам придется решить, стоит ли вообще показывать слайдер на мобильных устройствах. Или, возможно, его можно было бы реорганизовать, чтобы лучше адаптироваться для работы во всех ситуациях.
Влияние на доступность
Дизайн начинается с выбора подходящих шрифтов и цветов. Оба они глубоко связаны с брендом и доступностью.
Шрифты должны быть четкими, а размер — удобочитаемым. Хотя причудливый шрифти декоративный шрифт могут выглядеть красиво, они должны быть достаточно большими, чтобы их можно было читать, и ограничивать их использование в заголовках. Если эти требования не могут быть выполнены в разумных пределах, возможно, лучше вообще исключить их из вашего проекта.
Кроме того, серьезной проблемой должен быть цветовой контраст. Цвета фона и переднего плана должны иметь приемлемый коэффициент контрастности, чтобы считаться доступными. К тому же это просто хорошая практика.
Если вы не уверены в своей палитре, воспользуйтесь онлайн-инструментом,чтобы определить ее пригодность. Иногда даже небольшая корректировка — это все, что нужно для соответствия стандартам WCAG AA.
Помимо этих двух элементов, также хорошо иметь план того, как вы будете отображать такие элементы, как значки. Они интуитивно понятны? Они будут сопровождаться текстом?
Обратная совместимость
Не каждый веб-сайт должен быть полностью совместим, скажем, с Internet Explorer 9. И устаревшие браузерыне обязательно должны удерживать нас от использования последних версийCSS или JavaScript. Но следует подумать об обратной совместимости.
Особое беспокойство вызывают элементы дизайна, которые сделают веб-сайт полностью непригодным для использования на более старом программном обеспечении. Даже если конкретный браузер составляет небольшой процент посетителей вашего сайта, это все равно отсекает потенциальные конверсии.
Стоит задуматься о том, какое влияние дизайнерские решения окажут на этих пользователей. Доступных резервных вариантов для данной технологии может быть достаточно, чтобы все выглядело достойно и практично. Еще лучше то, что их довольно просто реализовать.
Раньше предполагалось, что дизайнеры должны гарантировать, что элементы выглядят и работают одинаково во всех браузерах. В наши дни это может быть слишком сложной задачей. Пока пользователь может перемещаться и потреблять контент с помощью некоторых из более древних программ, этого может быть достаточно.
Сценарии, которых еще не было
Даже самые маленькие веб-сайты со временем должны будут развиваться. По мере добавления новых типов контента это необходимо будет учитывать в дизайне. Если вы не готовы, реализация этих элементов может противоречить тому, что уже есть.
Подумайте, например, о добавлении серии видео. Хотя процесс добавления этого контента может быть достаточно простым — как он впишется в уже созданный вами внешний вид? Будете ли вы использовать пользовательский интерфейс браузера по умолчанию или создавать что-то в соответствии с вашим брендом?
Хотя вы не всегда можете предсказать будущее, вы можете спланировать всевозможные сценарии. Это часть того, что позволяет вам достичь дизайн-система. Установив некоторые рекомендации по умолчанию с самого начала, вам будет легче работать с будущими дополнениями.
Реальность такова, что то, что мы создаем сегодня, вероятно, изменится в будущем. Следовательно, стоит быть готовым к такому повороту событий.
Делаем правильно с первого раза
Создание этого первого макета — это гораздо больше, чем просто создание хорошего внешнего вида. Это даже выходит за рамки впечатления ваших клиентов. Действительно, это упражнение, которое заставляет нас взглянуть на наш проект в целом.
Эстетика должна радовать глаз. Но дизайн также должен быть доступным и адаптироваться к различным экранам. Кроме того, по мере развития событий может потребоваться адаптация к различным типам контента.
Если это звучит ошеломляюще — сделайте глубокий вдох. Здесь на помощь могут прийти ваш опыт и знания. Правильные инструменты также могут помочь.
Подумайте, что сработало (а что нет) в ваших прошлых проектах. Ищите способы реализовать разные функции. Сделайте это, и вы будете на пути к успешному проекту!
0 комментариев