Дизайн – это первое, что видит посетитель сайта. Если вместо красоты и удобства он увидит беспорядочное нагромождение красивых картинок и огромных простыней текста, он сразу уйдет на другой сайт. Продуманный, грамотный веб дизайн — основной путь к привлечению новых клиентов и увеличению продаж. Начинающие специалисты при создании сайтов допускают одинаковые ошибки. Поэтому изучение чужих промахов поможет избежать множества проблем.
Почему веб дизайн - это важно
Ошибки дизайнеров при разработке сайта могут привести к тому, что он не будет нести никакой пользы заказчикам или владельцу. Кроме красивой подачи материала важно учитывать алгоритмы Google, чтобы сайт смог продвигаться вверх в поисковой выдаче и не стал еще одной заброшенной страницей в сети
Google оценивает сайт по двум типам сигналов ранжирования: взаимодействие с пользователями и сигналы репутации сайта в их глазах. Эти показатели полностью связаны с содержанием страницы, определяются с учетом поведения посетителя сайта.
То есть, для того, чтобы повысить привлекательность сайта в глазах Google, дизайнеру нужно сделать так, чтобы:
- посетители долго задерживались на сайте;
- переходили по ссылкам;
- число отказов было небольшим.
А значит, необходимо сделать сайт привлекательным визуально, полезным и удобным в использовании.
Неопытный разработчик не может знать все нюансы и хитрости. Поэтому желательно привлекать для создания сайтов обученных профессиональных дизайнеров, которые, благодаря интернету, доступны сегодня даже тем, кто проживает далеко от Москвы и ведет бизнес онлайн.
На что обратить внимание
Веб дизайн и разработка невозможны без учета некоторых факторов, отсутствие которых сведет на нет все усилия разработчиков и владельцев сайта. Прежде чем приступать к работе, нужно взять карандаш и лист бумаги, проработать план и эскиз будущего сайта. Большинство ошибок совершаются еще на этапе планирования и разработка макета. И только после четкого определения макета сайта и его композиции, можно приступать к оформлению в компьютере.
Самые главные ошибки:
- Непродуманность концепции, отсутствие карты. Важно разработать правильную структуру, учесть функциональность и красоту. Имеет значение фирменный стиль компании, нельзя применять устаревшие варианты или разнобой в стилях.
- Усложнение и теснота. Ошибка возникает при избытке информации из-за желания использовать каждый сантиметр пространства. Читать такую страницу невозможно и желания не может быть. Необходимо заранее определить приоритеты, что нужно показать в первую очередь. Важно отделить элементы настоящего дизайна от того, что является бесполезным оформительством.
- Незавершенность. Веб дизайн предполагает, что каждый макет должен быть доработан до конца. Не нужно увлекаться дизайном, но и забывать о UX-составляющей сайта, ведь кроме красоты, важна эффективность и польза для посетителей.
- Некачественный контент. Google положительно реагирует на релевантный контент с разумным количеством ключевых слов. Важна читабельность текста. Он должен быть хорошо отформатирован и привлекателен для глаз. С учетом этого подбираются стили, шрифты, отступы, ключевые фразы.
- Неправильное применение картинок, видео, инфографики. Они должны быть подобраны в едином стиле. Web design визуального контента должен быть продуманным и лаконичным, чтобы он не мешал общему восприятию. У каждой картинки должна быть цель: проиллюстрировать сказанное, вызвать эмоции, показать принцип работы.
- Неадаптивная верстка сайта. Важно продумать о том, чтобы ваш сайт красиво отображался на любых гаджетах.
Непродуманная навигация также негативно отражается на качестве сайта. Пользователь должен сразу же увидеть все кнопки, разделы, форму обратной связи. Google не любит перегруз рекламой, отсутствие форм обратной связи или интеграции с социальными сетями.
Что еще нужно учесть: единое оформление иконок, единая цветовая гамма, применение единых форм. Избыток рекламы и всплывающие окна также не приветствуются Google.
Это общие рекомендации по созданию дизайна сайта. Но веб дизайн, как и любой другой творческий процесс, не обходится без совершения ошибок разработчиками, особенно начинающими.
Отсутствие деления на смысловые блоки
Информация легче усваивается, если ее сгруппировать в отдельные логические блоки. Текст на сайте делится на блоки с помощью цвета фона и отступов. Пользователь сразу понимает, что в разных блоках содержится разные виды контента. Размер отступов должен быть от 120 до 180 пикселей. Логические части нужно держать отдельно, чтобы не произошло их смещение.
Отсутствие или избыток акцентов
Продуманный веб дизайн предполагает использование акцентов, которые играют важную роль: они помогают вести взгляд пользователя в нужном направлении, подсказывать, где самое важное. Без акцентов страница выглядит скучной.
Если внутри основного текста размещается цитата или ключевая фраза, она должна стать самостоятельным объектом и бросаться в глаза. Поэтому ее нужно сделать на 10-15 пикселей крупнее основного текста, отделить отступами 75-120 пикселей, выровнять по центру. Акценты хорошо работают, если их мало. Если их много, то чтение становится трудной задачей.
Неравномерные отступы
При создании важно, чтобы страница сайта выглядела упорядоченно, отступы были одинакового размера. Веб дизайн предполагает наличие равных отступов перед всеми заголовками и текстами, дает ощущение того, что все блоки несут одинаково важную информацию. Отступ должен быть не менее 120 пикселей.
Ошибкой будет не делать отступ между фотографией и заголовком. Здесь обязательно нужно оставить не менее 60 пикселей. Картинка и текст — самостоятельные элементы, поэтому их правильное расположение поможет расставить акценты, раскроет содержание страницы.
Низкий контраст цветов
Веб дизайн должен учитывать такой важный момент, как контраст между текстом и фоном. Он должен быть достаточно сильно выраженным, иначе текст будет трудно читаться. Чтобы сделать текст четким и читаемым, поверх изображения нужно разместить контрастный фильтр.
Чаще всего при разработке используется черный цвет, но можно взять другие яркие цвета или комбинировать их. Другой способ — начать с размещения контрастного тексту изображения или текст поместить на темной части картинки.
Избыток стилей
Еще одним распространенным примером ошибки веб дизайна можно считать использование слишком большого количества стилей на одной странице. От этого она труднее воспринимается, а дизайн выглядит не совсем аккуратным. Профессиональные дизайнеры используют один шрифт, один цвет и два варианта написания (обычный и жирный). Страница выглядит аккуратно и стильно.
Курсив применяйте только для выделения отдельного слова или короткой фразы в качестве акцента. Для набора текста или заголовков курсив лучше не использовать.
Узкие цветовые блоки
Типичная ошибка – акцентирование узких блоков. Не стоит выделять цветом узкие элементы, к примеру, заголовки. Они и так уже бросаются в глаза благодаря размеру, отступам и наличию разных типов. Поэтому одинаковый цветовой фон нужно использовать для всего блока информации с заголовком и текстом. Это показывает, что это один логический блок.
Избыток столбцов
Узкие столбцы в веб дизайн лучше не применять. Их трудно читать, особенно если внутри них много текста. Глаза быстро устают, потому что приходится часто перескакивать со страницы на страницу. Лучше всего сделать поменьше столбцов и поменьше текста, чтобы его стали читать.
Излишнее центрирование текста
Выравнивание по центру оправданно, если на странице мало текста. Иначе на странице трудно ориентироваться. Выключку лучше использовать в заголовках и акцентах. Размер шрифта нужно увеличить до 24 пикселей и больше. Если на странице нужно много текста, рекомендуется использовать блоки с раскрывающимся текстом.
Текст закрывает важные элементы
Начинающие дизайнеры делают еще одну ошибку: закрывают значимые или мелкие детали текстом. Важно помнить об это моменте, иначе изображение будет не видно, а текст станет неразборчивым. Нужно попробовать вертикальное расположение текста с его размещением по центру или по левому краю.
Отсутствие иерархии
Грамотный веб дизайн предполагает построение визуальной иерархии на странице. Она должна быть четкой, чтобы посетитель сразу увидел, что важно, а что вторично. Для этого заголовок Н1 нужно сделать больше остальных заголовков или такого же размера, если он слишком длинный.
Смысловая иерархия должна соблюдаться и внутри блока. Самым большим должен быть заголовок, подзаголовок – чуть поменьше и менее насыщенного цвета. Названия преимуществ нужно сделать поменьше, чем заголовок, но такой же насыщенности. Описания преимуществ наберите самым мелким из шрифтов.
Перегруженное меню
Правильный веб дизайн не приветствует перегрузки меню. В нем достаточно 5-7 пунктов. Посетители сайта должны сразу и легко находить нужную информацию для решения своей проблемы. Если меню перегружено, они не смогут легко перемещаться по сайту и быстро находить то, что им нужно. Это значит, что посетители недолго пробудут на сайте.
Google положительно реагирует на ресурсы, которые способны долго удерживать посетителей на своих страницах. Чем меньше отказов, чем больше сессий, тем выше вероятность ранжирования в контент Google.
Неправильное оформление заголовков
Очень крупный шрифт подойдет только для короткого заголовка. Если заголовок длинный, размер шрифта нужно взять поменьше, иначе он будет мешать всем остальным блокам на странице и его будет трудно читать.
Заголовок должен не теряться между текстами. Он обычно относится к последующему абзацу, поэтому расстояние между заголовком и последующим абзацем должно равняться расстоянию между абзацами. А отступ перед заголовком обычно в 2-3 раза больше.
Google не любит слишком длинных заголовков, особенно если они не связаны с основной темой публикации и не содержат ключевых слов.
Обводка в кнопках
Обводка нужна только для прозрачных кнопок. На цветной кнопке она выглядит бессмысленной, перегружает страницу, затрудняет восприятие контента.
Избыток цветов
Большое количество акцентов мешает правильному восприятию страницы. Посетителю трудно понять, что важно, а что вторично. Необходимо использовать 1-2 цвета, с помощью которых выделяются важные элементы.
Как видим, задача дизайнера – не только создать уникальный сайт, но и внести вклад в то, чтобы поднять его в рейтинге Google. Когда на рынке в вашей нише присутствует большая конкуренция, все вокруг заполнено такими же услугами и товарами по тем же ценам, продуманный и оптимизированный по параметрам Google сайт – это решающий фактор для покупателя.