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

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

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

Давайте перейдем к делу!

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

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

1) Типография и шрифты

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

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

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

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

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

Дополнительные идеи о том, как сочетать шрифты вместе, можно найти в предыдущем посте «Сопряжение шрифтов в веб-дизайне: раскрытие и объяснение 7 основных принципов».

Добавьте визуальные эффекты к вашему тексту - приличное количество текста в вашем контенте - это здорово. Фактически, рекомендуется иметь не менее 300 слов на странице, чтобы помочь с точки зрения SEO. Но будьте осторожны, имея слишком много текста и недостаточно наглядных пособий. Для книг, блогов, статей и другого длинного контента ожидается много текста, но если вы разрабатываете красивую привлекательную целевую страницу, слишком много контента утомит пользователя, прежде чем он продолжит поиск. Я часто проектирую с мыслью, что первая страница должна быть воронкой продаж, по которой клиенты проходят через дверь, ТОГДА они могут погрузиться в другие страницы, блоги и другие ресурсы для получения более подробной информации.

Домашняя страница Elegant Themes в настоящее время является прекрасным примером этого.

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

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

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

2) Управление изображениями и цветом

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

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

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

Я взял красивый темно-бордовый и оранжевый цвета из одежды моих клиентов и смог собрать весь сайт в красивом униформе. Теперь вы редко будете в ситуации, когда вы можете заклеймить весь сайт с помощью изображения, но тот же принцип может быть применен при использовании фоновых изображений с призывом к действию и т. Д.!

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

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

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

3) Настойчивый призыв к действию

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

Вот пример того, как я реализовал призыв к действию для недавнего клиента.

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

Вот несколько рекомендаций, которых я придерживаюсь, когда дело касается призыва к действию:

Завершите свою домашнюю страницу сильным призывом к действию - Чаще всего мой дизайн домашней страницы почти повторяет сайт в целом. Например, если сайт имеет такую ​​структуру:

• О нас
• Услуги
• Отзывы
• Блог
• Контакт

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

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

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

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

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

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

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

Завершение серии

Что ж, я надеюсь, что эта серия статей помогла вдохновить вас некоторыми хорошими принципами и тактиками веб-дизайна, которые вы можете применить в своих начинаниях! Давайте сделаем краткий обзор того, что мы прошли во всей мини-серии:

Часть 1

• Подготовка вашего мышления
• Как узнать о хороших тенденциях в дизайне
• Получите отзывы и конструктивную критику своей работы

Часть 2

• Следуйте правилу третей
• Макет и поток
• Визуальная иерархия

Часть 3

• Типография и шрифты
• Изображение и цвет
• Настойчивый призыв к действию

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

За то, чтобы все мы с каждым днем ​​становились все лучше, веб-дизайнеры Divi!

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!