Ошибки в веб-дизайне, которые совершают все

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

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

Ошибка 1: Элементы расставлены не по сетке

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

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

Пример: 

Динамическая – более сложная сетка, навык создания которой приходит со временем. Она выстраивается в зависимости от дизайна, идеи и композиции макета. Размер колонок в ней может отличаться. Сделать такую сетку сложнее, поэтому на первых порах рекомендуем использовать равномерную. 

Пример: 

Чтобы понять, зачем нужна сетка, давайте рассмотрим ее основные преимущества: 

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

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

• Сканирование и поиск нужной информации. В 2019 году Нильсен Норман Групп провели исследование и выявили, что сетки обеспечивают упорядоченное расположение текста по определенной структуре. Это создает ощущение предсказуемости – пользователи начинают видеть логику в контенте при прокрутке страницы. 

• Эстетичный дизайн. Все элементы, расположенные по сетке, смотрятся пропорционально и структурировано. За счет этого создается ощущение, что сайт выглядит хорошо и опрятно. 

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

Ошибка 2: Отсутствует логика в отступах

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

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

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

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

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

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

Чтобы правильно измерить расстояние от квадрата до текста, лучше воспользоваться дополнительным элементом, например еще одним квадратом. Просто нарисуйте его от конца квадрата до начала абзаца, и вы получите точный результат. В нашем случае расстояние будет не 100 пикселей, а 117. 

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

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

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

Пример справа выглядит хорошо, его удобно читать

Ошибка 3: Неправильная выключка и выравнивание

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

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

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

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

Пример: на картинке ниже в левой части выключка текста по ширине, в правой части – по левому краю. Какой текст удобнее читать? Мы думаем тот, что справа. 

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

Пример из шаблона «Видеонаблюдение» в конструкторе сайтов Craftum

Ошибка 4: Отсутствие контраста

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

При этом обращайте внимание не только на текст, но и на графические элементы, например блоки или иконки – они также должны быть хорошо заметны. Для работы с контрастом вы можете воспользоваться специальным плагином Contrast в Figma. Он подсветит фрагменты текста и покажет, где с контрастом все хорошо, а где – нет. Таким образом, с его помощью вы поймете, как составить дизайн-макет без ошибок, связанных с цветовой гаммой. 

Ошибка 5: Слишком большие или маленькие элементы

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

Несколько рекомендаций:

• оптимальный размер шрифта для основного текста – 16-18 пикселей;
• заголовки должны быть примерно в 1.96 раз больше, чем основной текст;
• минимальный размер кнопки должен быть 44х44 или 48х48 пикселей;
• стандартный размер логотипа на сайте 100х100 пикселей, иконки социальных сетей – 32х32 пикселей, баннера – 250х250 пикселей;
• большинство кончиков пальцев имеют размер 8-9 мм, поэтому высота кнопки в мобильной версии должна быть минимум 10 мм.

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

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

Ошибка 6: Неправильно подобрана тень

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

Пример:

Также не рекомендуем использовать стандартные тени, предлагаемые графическим редактором. Например, в Figma настройки по умолчанию выглядят следующим образом: 

Тень с такими настройками будет выглядеть «тяжелой». Если немного увеличить параметр размытия «Blur» и добавить смещение по Y, то станет заметно лучше. При этом стоит учитывать, что для разных объектов настройки могут отличаться. Поиграйтесь с ними и подберите наиболее подходящий вариант. 

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

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

Ошибка 7: Слишком много стилей

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

Чтобы решить такие ошибки в дизайне своих сайтов, рекомендуем на первых порах использовать один шрифт и всего пару стилей. Например, заголовки можно выделять жирным, а простой текст писать с начертанием regular. При этом ваш макет не будет выглядеть скучным, а станет аккуратным и легко читаемым. Когда вы станете лучше понимать типографику, можно будет добавить еще один шрифт. Как правило, в веб-дизайне используется не более двух шрифтов. Один, например, можно задействовать для заголовков, другой – для основного текста.

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

Пример из шаблона «Хореограф» в конструкторе сайтов Craftum

Ошибка 8: Нет разделения на смысловые блоки

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

Для понимания посмотрите на пример ниже:

Пример из шаблона «Продажа онлайн-курса» в конструкторе сайтов Craftum

Ошибка 9: Плохо подобраны иконки

Еще один совет по дизайну сайта – используйте простые иконки. Это придаст сайту более лаконичный вид, без лишнего «шума». 

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

Кроме того, иконки на сайте чаще всего небольших размеров по 60-80 пикселей, а в мобильной версии еще меньше, поэтому слишком детализированные будет сложно рассмотреть. На примере слева у иконок не так много деталей – они простые. Благодаря этому понять значение иконки будет гораздо проще.

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

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

Ошибка 10: Слишком большая длина строки текста

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

Для понимания посмотрите на пример ниже: текст в диапазоне от 0 до 60 символов считывается легко, а вот дальше воспринимать информацию становится сложнее. 

Бонус: Площадки с референсами 

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

Вот где можно найти референсы и вдохновиться ими: 

• Pinterest

• Behance

• Awwwards

• Dribbble

• Библиотека шаблонов Craftum – в ней вы найдете не только примеры сайтов, но и сможете подобрать шаблон под свои задачи, отредактировать его и создать сайт. 

На этом не всё – больше площадок с референсами и советов о том, как развивать насмотренность, вы найдете в статье «Тренируем насмотренность: полезные ресурсы для дизайнеров».

Вместо заключения

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