3 эффективных принципа веб-дизайна для «не дизайнеров»

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

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

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

3 эффективных принципа веб-дизайна для «не дизайнеров»

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

1) Правило третей

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

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

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

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

Сохранение объектов и фокусных точек в 1 или более из 4 точек пересечения часто приводит к гораздо более сбалансированному, симметричному виду, в отличие от второго примера, когда объект находится ниже точки пересечения. Взгляните на изображение ниже. Первый пример НЕ следует правилу третей.

В этом примере соблюдается правило третей.

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

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

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

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

В этом примере есть 4 основных элемента, которые находятся в точках пересечения или рядом с ними. Вкратце, я хотел акцентировать внимание на следующем:

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

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

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

2) Макет и поток

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

На более традиционных рынках бизнеса, таких как производство, юридические фирмы, рабочие отрасли и т. Д., Вы, вероятно, найдете веб-сайты с большим количеством текстового контента, меньшим объемом открытого пространства и, несомненно, с изображениями и элементами дизайна, которые менее… привлекательны. И по какой-то причине большинство моих клиентов в этих отраслях категорически против слишком большой прокрутки. Так что знание того, как разработать макет с хорошим потоком, является ключевым! Я часто обнаруживаю, что мне нужно попытаться сбалансировать МОЙ творческий стиль дизайна с тем, что работает в отрасли моего клиента, целевой демографической группе и желаниями и потребностями моего клиента. С учетом всего сказанного, есть несколько основных принципов компоновки и последовательности операций, которые можно применять независимо от того, с кем вы работаете или в какой отрасли они находятся.

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

Давайте посмотрим, что я имею в виду.

В первом примере слева есть изображение слева, текст справа с красивой кнопкой с призывом к действию, затем ваш глаз читает вниз и влево к другому разделу текста / CTA, затем с другим изображением справа и повторить. Наоборот, на изображении справа - перевернутый узор. Преобразование текста в изображение, изображение в текст и т. Д. Следование этому шаблону стиля z - отличный способ заинтересовать читателей и прекрасный способ уравновесить текст и изображения вместе.

Это не единственный вариант размещения в потоке при хорошем дизайне страницы, но хорошей практикой является то, что мы берём контент слева направо, а затем вниз. Затем слева направо, затем вниз и так далее. Поэтому, если сомневаетесь, попробуйте следовать шаблону стиля z, чтобы помочь организовать поток содержимого вашей страницы. И последнее замечание по поводу прокрутки - я стараюсь держать свои сайты в пределах 3-5 прокруток. Чаще всего, чем больше вам нужно прокручивать, тем больше будет страница и тем медленнее она будет загружаться. Опять же, нет правильного или неправильного в отношении прокрутки, но если вы еще не работали с клиентами с более старомодным мышлением, вы гарантированно столкнетесь с некоторым противодействием. Я пытаюсь еще раз убедить этих клиентов, что не стоит бояться прокрутки. Социальные сети научили нас постоянно прокручивать и быстро просматривать контент.

3) Визуальная иерархия

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

Я не собираюсь намеренно указывать на сайты, на которых, как мне кажется, не хватает «хорошего дизайна», но я уверен, что вы встречали множество сайтов, на которых есть шведский стол из текста и изображений одинакового размера без четких призыв к действию, верно? Этого мы хотим избежать. Использование хорошей иерархии - лучший способ помочь пользователю вашего веб-сайта узнать, ЧТО им следует щелкнуть или сделать дальше.

Вот пример недавнего дизайна, который я создал с учетом иерархии:

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

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

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

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

В заключение

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

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

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

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

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