Наиболее частые ошибки дизайнеров глазами веб-разработчиков

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

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

А если вы хотите овладеть профессией веб-дизайнера или веб-разработчика, есть онлайн курсы eddu.pro

Ошибка №1. Дизайнеры не учитывают адаптивную верстку и нестандартные разрешения экранов

В основном все макеты создаются под три основных разрешения экранов: ПК и лэптопы (1920, 1440, 1360 пикселей по горизонтали), планшеты (ширина до 767 пикселей) и смартфоны (ширина экрана 375 пикселей). При этом при создании макета для ПК и ноутбуков дизайнеры часто забывают о док-панели в MacBook или нижней панели задач Windows. Также иногда не принимают во внимание панели браузеров. В результате, лендинг иногда полностью не помещается на экране.

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

Исправить ситуацию с ультраширокими мониторами можно так:

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

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

Вот пример так называемой резиновой верстки:

А в следующем примере использовался вариант с отступами слева и справа:

Особенности макетов для Apple iPhone

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

Некоторые дизайнеры также забывают предоставлять разработчикам видеоролики и картинки в высоком разрешении. А ведь это необходимо для сохранения качества контента при отображении на мониторах с разрешением 4К и 5К. Если картинка предусмотрена под весь экран, то необходимо подготовить её в формате 3440 пикселей для мониторов 4К. Если же по задумке картинка должна занимать только половину экрана, то достаточно будет размера в 1720 пикселей. Иногда разработчики вынуждены извлекать нужный контент из готовых макетов, но при увеличении до нужных размеров сильно страдает качество (исключение составляют изображения в формате SVG).

Почему можно не делать версию под планшет для простых сайтов

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

Ошибка № 2: Специалисты забывают учесть поведение динамических элементов страницы и анимации.

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

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

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

Пример неправильного оформления формы (нет никаких уведомлений):

Пример формы с уведомлением об успешном завершении процедуры:

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

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

Ошибка №3. Дизайнеры не интересуются форматом и типом данных контента, который динамически обновляется на сайте

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

Рассмотрим для примера процесс проектирования сайта HR-компании. Поскольку вакансии на портале будут постоянно актуализироваться, просто невозможно сразу разработать стандартный дизайн для страницы поиска вакансий и каждой вакансии в отдельности. Сначала нужно узнать, какая именно информация будет в вакансии (например, если в ней не упоминается метро, то рисовать лого метро вообще не нужно). Можно также посоветоваться с разработчиками, как сделать лучше.

Также важно выяснить, обязательно ли наличие конкретного поля или раздела. Очень часто дизайнеры забывают создать сообщение о том, что какой-то информации пока нет. В итоге пользователь видит на странице бездушную надпись “No items found” или что-то в этом роде.

Пример страницы без настроенного сообщения об отсутствии информации:

Пример правильно оформленной страницы без данных:

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

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

А вот пример правильного оформления таких блоков — используется механика разворачивания отзывов:

Ошибка №4: Дизайнеры не интересуются тем, как заказчик будет добавлять или изменять контент после запуска проекта

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

Например, к первому экрану на этом сайте прикреплен следующий баннер мероприятия Портфолио включает профессионально отрисованную титульную страницу и часовую 3D-модель каждой модели на странице. Конечно, такая работа не для всех. Клиенты вряд ли будут сами производить такой контент. А бюджеты могут быть очень ограничены. Кроме того, клиентам может быть сложно самостоятельно добавить фирменные фотографии и другой контент в нужном формате (как в примере ниже).

Ошибка №5: Использование разных наборов стилей для макетов настольных ПК и мобильных устройств

Типы заголовков H1-H6 существуют в HTML и используются для наименования стилей. Однако при создании нового набора стилей для мобильной версии сайта некоторые специалисты могут непреднамеренно изменить тип заголовка или стиль элементов в соответствии с версией для настольного компьютера. Например, H1 в макете настольной версии становится H2 в макете мобильной версии. В результате разработчикам приходится дублировать весь элемент и использовать CSS-классы для создания своеобразного «костыля».

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

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

Ошибка № 6: Специалисты забывают подготовить дизайн для разработчиков или прорисовывают не все элементы.

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

Пример open-graph:

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

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

Это примеры правильной работы с иконками (в том числе фавикон):