11 ошибок дизайна, которые обычно совершают покупатели темы WordPress

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

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

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

За последние 5 лет, работая дизайнером в тематическом бизнесе WordPress, я видел бесчисленное количество примеров красивых веб-сайтов, созданных с помощью наших тем WordPress.

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

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

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

1. Плохой контраст текста на слайдере

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

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

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

2. Слишком большие изображения слайдера

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

3. Плохое белое (негативное) пространство

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

Как бы мы ни старались, как бы мы ни пытались защитить каждый возможный аспект темы WordPress, пользователи всегда найдут способ уничтожить пустое пространство.

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

Я не буду вдаваться в подробности, а приведу несколько практических примеров.

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

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

4. Плохая мобильность

Порядок и правила такие же, как и на рабочем столе выше. Вам по-прежнему нужно обращать внимание на пустое пространство, но для мобильных устройств есть пара дополнительных правил:

• Один из них — дизайн, удобный для пальцев. Поскольку пальцы — это наши инструменты для перемещения по веб-сайту при просмотре на мобильных устройствах, нам необходимо адаптировать страницу к ним. Когда мы разрабатываем тему WordPress, мы следим за тем, чтобы кнопки и интерактивные элементы были не меньше 50 пикселей. Если вы добавляете сторонние элементы в тему WordPress, убедитесь, что они достаточно велики. Кроме того, убедитесь, что эти активные компоненты не слишком сильно слипаются, чтобы предотвратить ошибочные щелчки.
• Оптимизируйте изображения для скорости. Многие люди заходят на сайты на ходу, что означает ненадежное, а иногда и плохое соединение. Попробуйте устранить медленную загрузку сайта (на мобильных устройствах) и оптимизировать изображения.
• Протестируйте свой сайт на реальном мобильном устройстве. Вы можете изменить размер окна браузера, чтобы увидеть мобильное представление, но когда вы закончите со всеми настройками, посмотрите, как веб-сайт выглядит на реальном мобильном устройстве.

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

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

Мы заботимся о том, чтобы каждая из наших тем WordPress прошла его с легкостью.

5. Использование цветов, которые просто не идут рука об руку.

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

Я собираюсь показать вам пример:

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

Если ваш логотип похож на логотип Starbucks и состоит только из одного цвета, вам нужно будет найти дополнительный.

Один из вариантов — выбрать один и тот же зеленый цвет как для основного, так и для дополнительного цвета, но я бы крайне не одобрял этого.

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

Перейдите в их приложение и вставьте шестнадцатеричный код цвета (в моем случае #006241) вашего основного цвета внизу столбца. Затем заблокируйте его, щелкнув значок замка и нажав клавишу пробела.

Совет: Не знаете, как получить шестнадцатеричный код вашего логотипа? Проверьте, есть ли для этого полезное расширение Chrome.

Мой результат выглядит так.

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

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

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

Моим личным выбором был бы второй бежевый (#d8c99b), потому что он отлично сочетается с зеленым и уж точно его не обгонит.

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

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

К счастью для вас, в приложении Coolors есть еще одна замечательная функция. Вы можете выбрать различные оттенки каждого цвета. Наведите указатель мыши на цветной столбец и щелкните первый значок под названием «Альтернативные оттенки». Затем выберите более яркие или темные оттенки и всегда помните о контрасте.

Я сделал короткую демонстрацию того, как эти два цвета будут работать вместе. Для этой цели я взял нашу тему Adrenaline WordPress и преобразовал ее в веб-сайт Starbucks.

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

6. Не загромождайте навигацию по сайту

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

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

Содержите основную навигацию в чистоте, используя максимум 5 или 6 опций.

7. Логотип слишком большой

Есть известное предложение, которое мы все когда-то слышали от наших клиентов — «сделай логотип больше». Ваша работа, как создателя веб-сайта, состоит в том, чтобы обучить вашего клиента тому, что нет необходимости иметь логотип шириной 400 пикселей, потому что посетители веб-сайта не приходят на ваш веб-сайт, чтобы увидеть, насколько красив ваш логотип.

Загрузите логотип в размере, рекомендованном автором темы WordPress. Они, вероятно, лучше знают, какой размер логотипа лучше всего подходит для конкретной темы.

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

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

8. Плохое качество логотипа

Со мной однажды случилось так, что я получил логотип в формате Microsoft Word (.doc). Я хочу сказать, что клиенты всегда найдут способ вас удивить.

Что касается логотипа, важно, чтобы он был в наилучшем состоянии с точностью до пикселя. Для этого вам понадобится векторный формат (.pdf, .ai, .svg, .eps). Затем вам нужно перейти в ваше любимое векторное приложение (например, Adobe Illustrator) и экспортировать этот логотип в размер, рекомендованный создателем темы. Это лучшая возможность для вас получить самый четкий логотип.

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

9. Плохое качество изображения

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

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

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

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

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

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

10. Отсутствие стилей для сторонних плагинов

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

В этом нет ничего плохого. После того, как вы установите и включите плагин в тему WordPress, посмотрите, как он выглядит в интерфейсе.

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

Применение уже написанных классов CSS к вашему стороннему плагину займет у вас всего 10 минут, но в конечном итоге это окажет значительное влияние.

Если у вас нет для этого знаний, мы можем сделать это за вас.

11. Плохая читабельность

Есть известное утверждение, что типографика — это 95% веб-дизайна, так что делайте это правильно.

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

• В каждой строке должно быть 60-80 символов , включая пробелы.
• Если вы настраиваете пользовательскую высоту строки, умножьте размер шрифта на 1,4–1,6. Если у вас размер шрифта 16 пикселей, высота строки должна быть между 22,4 и 25,6.
• Оставьте достаточно места вокруг текста.
• Не используйте слишком светлый цвет текста. Все, что ярче #777777, отрицательно влияет на читабельность.
• Не используйте шрифты меньшего размера, чем рекомендуется. Самое низкое, что вы можете сделать, это 14px, но я бы рекомендовал вам выбрать 16px или 18px .
• Будьте осторожны с установкой пользовательских шрифтов в тему. Некоторые шрифты предназначены только для заголовков и плохо работают с небольшими размерами. Некоторые шрифты созданы для печати и плохо работают на экранах, а некоторые просто плохо сделаны. Подумайте дважды, если вы хотите заменить шрифт темы WordPress по умолчанию на что-то другое. Если вы все еще хотите изменить его, придерживайтесь безопасной стороны и выбирайте популярные.

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

Выравнивание по правому краю (кроме языков с письмом справа налево) и выравнивание по ширине исключены. Период.

Вывод:

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

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

РЕДАКТИРОВАТЬ: Эта статья была переведена на голландский язык — дайте мне знать в комментариях ниже, если вы хотите перевести ее на свой язык.