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

В данной статье мы собрали 8 распространённых ошибок в веб-дизайне и привели рекомендации по их исправлению. Этот материал поможет вам систематизировать ваши знания и создавать привлекательные сайты.

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

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

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

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

Для понимания ценности сетки, рассмотрим её основные преимущества:

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

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

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

Ошибка 2: Нелогичные, неправильные отступы

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

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

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

Какими должны быть отступы на сайте

Заметьте, что не следует делать отступы между блоками (Отступ 1 – Отступ 4 на картинке выше) слишком маленькими, иначе вся информация будет выглядеть как одно целое. Рекомендуем придерживаться расстояния примерно в 100 пикселей (компьютерная версия) и больше - это придаст вашему макету "воздушность". На телефоне отступы лучше делать поменьше, примерно 60 пикселей.

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

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

Изучите внимательно все три варианта, они сильно отличаются. Подумайте сами, какой из них вам удобнее читать.

Ошибка 3: Различие в выключке и выравнивании

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

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

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

Ошибка 4: Недостаток контраста

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

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

Если вы будете использовать малоконтрастные элементы на сайте, то Яндекс и Гугл могут наложить штрафные санкции на этот сайт, его поисковые позиции будут резко снижены.

Ошибка 5: Элементы чрезмерно большие или маленькие

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

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

• Для основного текста оптимальный размер шрифта составляет от 16 до 18 пикселей. На мобильных устройствах можно чуть меньше размер сделать.
• Заголовки должны быть примерно в 2 раза больше, чем текст.
• Минимальная высота кнопки должна быть 30 пикселей. Лучше 40-50 пикселей.
• Рекомендуем делать высоту кнопки в мобильной версии не менее 10 мм.

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

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

Сохраняйте в виде картинок понравившиеся вам элементы дизайна. Впоследствии вы можете обращаться к ним и искать вдохновение для дизайна нового сайта.

Ошибка 6: Перегруженный стиль

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

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

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

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

Ошибка 7: Неудачный выбор иконок

Ещё один полезный совет по веб-дизайну – использовать простые иконки. Это поможет сайту выглядеть более минималистично и исключит излишний "шум".

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

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

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

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

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

Если не можете найти в одном стиле то, что вам нужно, лучше выберите другого автора или другой стиль.

Ошибка 8: Слишком длинные строки текста

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

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

Заключение

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