Основные принципы дизайна веб-сайта

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

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

В этой статье рассматриваются:

• Визуальная иерархия
• Макеты Gutenberg, Z и F
• Золотое сечение
• Правило третей
• Теория цвета
• Гештальт-теория
• Негативное пространство и минимализм
• Оптимизированный для мобильных устройств дизайн

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

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

Визуальная иерархия — это относительная важность, которую зритель придает визуально дифференцированному набору объектов.

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

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

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

• Размер и масштаб. Относительный размер имеет значение, но не менее важен и масштаб. Если что-то явно больше или меньше, чем оно «должно быть», вы это заметите.
• Фокус. Расфокусированные изображения и шрифты кажутся дальше, чем четко сфокусированные.
• Цвет. Изменения в цвете, оттенке или интенсивности могут привлечь внимание.
• Шрифт. Размер текста, шрифт и эффекты помогают ранжировать информацию на странице.
• Движение. Если одно изображение перескакивает на статичную страницу, вы заметите то, что движется, но будьте осторожны. Слишком много движений может дезориентировать.
• Негативное пространство. Вы можете изолировать ключевые элементы, чтобы они выделялись среди других областей страницы.

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

Макеты Gutenberg, Z и F

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

Три наиболее часто используемых макета — это макет Гутенберга, макет Z и макет F. Каждый из них использует различные принципы дизайна веб-сайта.

Макет Гутенберга

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

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

Z-макет

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

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

В макете Z вы размещаете материал в каждом из четырех углов и в центре диагонали.

F макет

Макет F работает лучше, когда вы хотите включить больше — больше всего, но особенно больше текста.

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

Золотое сечение

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

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

Но не нужно пытаться выудить то, что вы помните о квадратных уравнениях с седьмого класса. Все, что вам нужно запомнить, это число 1,618 (на самом деле подойдет и 1,6).

Если у вас есть общая площадь X, и вы хотите знать, насколько большой должна быть ваша большая половина, просто разделите X на 1,618. Очень просто.

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

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

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

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

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

Теория цвета

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

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

Вот четыре разных способа подобрать гармонирующие цвета бренда и веб-сайта:

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

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

Гештальт-теория

Теория гештальта фактически была разработана психологами как основа для понимания когнитивных процессов.

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

• Сначала увидеть связное целое, а затем увидеть его части
• Сначала увидьте запутанное целое, а затем попытайтесь разбить его на более простые части или группы.

Из этой базовой теории вытекают семь принципов дизайна веб-сайтов:

1. Закон подобия. Группировать вещи по сходству. Похожие вещи идут вместе.
2. Закон близости. Сгруппируйте вещи по общим регионам или относительному расстоянию между ними. Вещи, которые находятся близко друг к другу, принадлежат друг другу.
3. Закон простоты. Люди видят неоднозначные объекты в простейших возможных терминах. Например, вы будете воспринимать перекрывающиеся круги именно так, а не как набор дуг.
4. Закон непрерывности. Люди чаще видят вещи как непрерывные, чем как отдельные. Вы будете следовать за объектами по путям или кривым.
5. Закон восприятия. Люди видят фигуры — или точки фокусировки — и фоны. Вещи стоят по отношению к другим вещам.
6. Закон замыкания. Люди заполняют недостающую информацию, чтобы понять смысл вещей. Ломаная линия остается линией.
7. Закон симметрии. Люди видят симметричные вещи как связанные.

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

Негативное пространство и минимализм

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

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

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

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

Оптимизированный для мобильных устройств дизайн

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

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

‌ Это не только предотвращает разочарование посетителей, но и является важным фактором поисковой оптимизации (SEO). Алгоритм Google определенно учитывает мобильную оптимизацию.

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

Принципы дизайна сайта — вы можете это сделать!

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

У вас есть много полезных принципов дизайна веб-сайтов, которые помогут вам создать идеальный сайт, но самые важные выводы таковы:

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

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