Современный веб дизайн базируется на принципах: Принципы веб-дизайна и их использование на практике

Содержание

Принципы веб-дизайна и их использование на практике

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

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

Принцип первый: балансировка

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

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

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

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

Принцип второй: акцентирование

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

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

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

Принцип третий: повторение

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

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

Принцип четвертый: выравнивание

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

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

Принцип пятый: контрастирование

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

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

Принцип шестой: удобство восприятия

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

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

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

Веб-дизайн / Теория

71377

23-04-2013

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

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

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

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

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

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

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

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

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

От этого зависит то, насколько уравновешенным окажется дизайн в визуальном плане. Группирование элементов в дизайне создает визуальную нагрузку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

По материалам книги Патрика Макнейла «Веб-дизайн. Идеи. Секреты. Советы«.

Формирование культуры пользователей посредством визуальной композиции веб-сайтов

Автор: Захарова Марина Вадимовна

Рубрика: Культурология

Опубликовано

в Молодой учёный №20 (124) октябрь-2 2016 г.

Дата публикации: 18.10.2016 2016-10-18

Статья просмотрена: 161 раз

Скачать электронную версию

Скачать Часть 8 (pdf)

Библиографическое описание:

Захарова, М. В. Формирование культуры пользователей посредством визуальной композиции веб-сайтов / М. В. Захарова. — Текст : непосредственный // Молодой ученый. — 2016. — № 20 (124). — С. 782-785. — URL: https://moluch.ru/archive/124/34321/ (дата обращения: 09.10.2022).

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

Ключевые слова: web-сайт, web-дизайн, графическое оформление сайта, вебмастеринг, интернет-культура

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

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

Веб-дизайн — это процесс производства web-сайтов, который включает техническую разработку, структурирование информации, визуальный (графический) дизайн и доставку по сети. Рассмотрим подробнее, из каких этапов состоит процесс создания веб-сайта. Детальное понимание процесса создания сайта даст нам возможность определить, чем занимаются на каждом этапе и кого принято называть веб-дизайнером. Исходя из четкого понимания цели, для которой создается сайт, объемов сайта, его функциональности задаются основные параметры визуального представления и структуры сайта. Данный этап заканчивается после утверждения технического задания заказчиком, с которым работает менеджер проекта.

На первом этапе происходит структурирование информации (юзабилити). Сюда входят форма и организация содержимого сайта, а также широкий ряд вопросов — от продумывания логической структуры веб страниц до выбора наиболее удобных форм подачи информации. Дизайнер, менеджер проекта прорабатывает концепцию графического оформления сайта. В графическом редакторе компонуется визуальное пространства сайта с помощью элементов украшения или навигации. [1] Собственно, дизайн страницы представляет собой графический файл, который выполняется дизайнером.

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

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

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

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

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

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

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

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

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

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

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

Литература:

Веб-дизайн/ DesigNonstop — О дизайне без остановки [Электронный ресурс] — URL: http://www.designonstop.com/webdesign/article/chto-takoe-veb-dizajn-ego-osnovnye-elementy-etapy-i-principy.htm (дата обращения: 26.09.16)
Веб-дизайн/ Журнал WebForMySelf: все для создания сайта [Электронный ресурс] — URL: http://webformyself.com/trendy-veb-dizajna-glavnye-napravleniya-2016-goda (дата обращения 26.09.16)
Ляшенко Е. С. Семантика веб-дизайна интернет-культуры/ автореферат диссертации по культурологии [Электронный ресурс] — URL: http://cheloveknauka.com/semantika-veb-dizayna-internet-kultury#ixzz4N0Wu3CSK (дата обращения: 26.09.16)
Макнейл П. Веб-дизайн. Идеи. Секреты. Советы. М.: Вильямс, 2010. — 480 с.

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

Ключевые слова

веб-сайт, web-дизайн, графическое оформление сайта, вебмастеринг, интернет-культура, web-сайт

web-сайт, web-дизайн, графическое оформление сайта, вебмастеринг, интернет-культура

9 Принципы хорошего веб-дизайна

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

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

Ниже приведены некоторые рекомендации, которые помогут вам при рассмотрении вашего следующего веб-проекта.

1. НАЗНАЧЕНИЕ ВЕБ-САЙТА

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

Описание опыта
Создание репутации
Генерация потенциальных клиентов
Продажи и послепродажное обслуживание

2.

ПРОСТОТА

Простота

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

Цвет

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

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

Образы

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

3. НАВИГАЦИЯ

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

4. F-ОБРАЗНОЕ ЧТЕНИЕ ШАБЛОНА

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

5. ВИЗУАЛЬНАЯ ИЕРАРХИЯ

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

6. СОДЕРЖАНИЕ

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

7. МАКЕТ НА ОСНОВЕ СЕТКИ

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

8. ВРЕМЯ ЗАГРУЗКИ

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

9. ПОДДЕРЖКА МОБИЛЬНЫХ УСТРОЙСТВ

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

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

Услуги веб-дизайна, ориентированные на результат

Убедитесь, что ваш следующий веб-сайт ориентирован на рост. Привлекайте больше посетителей и повышайте конверсию

10 эффективных принципов веб-дизайна, которые должен знать каждый дизайнер

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

Джефф Карделло

Превосходный веб-дизайн

От 101 до продвинутого уровня узнайте, как создавать сайты в Webflow, пройдя более 100 уроков, включая основы HTML и CSS.

Начать курс

Бесплатный курс

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

10 принципов хорошего веб-дизайна

Вот 10 принципов, которые помогут вам разработать следующий веб-сайт.

1. Цель закладывает основу

Latinxs Who Design имеет очевидную миссию.

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

Дизайн сайта — это не то, что вы должны придумывать по ходу дела. Цель даст вам четкий план и направит дизайн и создание контента. Крылатое это не практическая философия дизайна.

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

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

2. Содержание придает смысл

Purple Mattress рассказывает о преимуществах своего бренда в простой и оптимистичной форме.

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

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

— Якоб Нильсен, «10 эвристик юзабилити для дизайна пользовательского интерфейса»

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

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

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

3. Визуальные элементы привлекают внимание людей

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

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

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

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

4. Гармония заставляет дизайн петь

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

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

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

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

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

5. Типографика формирует восприятие

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

Самое важное в печати то, что она передает мысли, идеи, образы от одного разума к другому.

— Беатрис Вард, «Хрустальный кубок»

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

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

Неправильный шрифт может испортить важное содержимое. Просто спросите ученых, которые объявили об открытии частицы бозона Хиггса, с помощью слайд-шоу с участием Comic Sans. Людям было что сказать об этом выборе типографики. И кто знает — может быть, скептики ошибались? Обязательно узнайте и полюбите причину выбора шрифта.

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

Раскройте свой творческий потенциал в Интернете

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

Начните бесплатно

Подпишитесь на участие в программе предварительной оценки Webflow

Спасибо! Теперь вы подписаны!

Ой! Что-то пошло не так при подписке.

Начать бесплатно

6. Организация объединяет

Упорядоченный дизайн сайта Blue Apron делает легким и привлекательным чтение о подписках на наборы продуктов.

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

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

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

7. Цвета задают тон

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

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

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

8. Белое пространство создает баланс

В онлайн-портфолио Дэна Мачадо используются огромные пробелы и четкие линии.

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

9.

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

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

Пути к разделам и контенту вашего сайта должны быть понятными и простыми в использовании. Представьте себе перекресток с 3 вариантами улиц вместо 10 — простота делает путешествие лучше.

10. Подлинность способствует доверию

С самого начала до приобретения крупной корпорацией компания Ben & Jerry’s поддерживала связь и оставалась верной своим ценностям.

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

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

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

Несколько простых правил откроют для вас бесконечные возможности дизайна

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

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

21 июля 2020 г.

Веб -дизайн

Поделиться этим

Бесплатно, пока вы не будете готовы к запуску

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

Начните работу — это бесплатно

Трансформация процесса проектирования по телефону

8 принципов и законов веб-дизайна, которые работают в 2022 году

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

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

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

Содержание

Каковы 8 принципов веб-дизайна?
- 1. Визуальная иерархия
- 2. Божественные пропорции
- 3. Закон Хика
- 4. Закон Фитта
- 5. Правило третей
- 6. Законы и принципы гештальт-дизайна
- 7. Белое пространство и чистый дизайн
- 8. Бритва Оккама
Заключение

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

Упражнение. Расположите круги в порядке важности:

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

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

Если в меню вашего сайта 10 пунктов, все ли они одинаково важны? Где вы хотите, чтобы пользователь щелкнул? Сделайте важные ссылки более заметными.

Иерархия зависит не только от размера. Amazon делает кнопки призыва к действию «Добавить в корзину» и «Купить сейчас» более заметными, используя цвет:

Какие кнопки привлекают ваше внимание? Цвет может помочь элементам веб-страницы выделиться.

Начните с бизнес-цели

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

Вот пример. Это скриншот, который я взял с сайта Williams-Sonoma. Они хотят продавать уличную посуду.

Визуальная иерархия необходима для эффективного веб-дизайна.

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

Это визуальная иерархия — вечный принцип веб-дизайна — отлично сделано.

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

2. Божественные пропорции

Строчная греческая буква фи используется для золотого сечения.

Золотое сечение — это магическое число 1,618 (φ). Считается, что дизайны, в которых используются пропорции, определяемые золотым сечением, эстетически приятны.

Последовательность Фибоначчи. Каждый член является суммой двух предыдущих членов: 0, 1, 1, 2, 3, 5, 8, 13, 21 и так далее. Интересно то, что две, казалось бы, несвязанные темы дают одно и то же точное число.

Вот как выглядит золотое сечение:

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

Может ли золотое сечение работать в веб-дизайне? Вы держите пари. Вот Твиттер:

Вот комментарий креативного директора Твиттера Дуга Боумана, сделанный много лет назад. Выбор дизайна был не случайным:

Итак, если ширина вашего макета 960 пикселей, разделите ее на 1,618 (= 593 пикселя). Вы знаете, что ширина области содержимого должна быть 593px и боковая панель 367px. Если высота веб-сайта составляет 760 пикселей, вы можете разделить его на части по 470 и 290 пикселей (760/1,618 = ~ 470).

(Источник изображения)

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

3. Закон Хика

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

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

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

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

Они хорошо справляются с фильтрами:

4. Закон Фиттса

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

Spotify упрощает нажатие кнопки «Воспроизвести» по сравнению с другими кнопками:

В приложении для мобильного телефона кнопка воспроизведения также расположена в удобном для нажатия месте.

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

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

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

Давайте представим, что есть форма, которую вы хотите, чтобы люди заполнили. В конце формы есть две кнопки: «Отправить» и «Сбросить» (очистить поля).

99,9999% хотят нажать «Отправить». Следовательно, кнопка должна быть намного больше, чем «сброс».

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

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

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

Ниже посмотрите, чем изображение справа интереснее? Это правило третей в действии.

Правило третей — это простой принцип дизайна изображений. (Источник изображения)

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

6. Законы и принципы гештальт-дизайна

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

Вот что я имею в виду:

Обратите внимание, как вы могли видеть собаку, не фокусируясь на каждом черном пятне, из которого состоит собака? Основатель гештальтизма Курт Коффка объяснял это так: «целое существует независимо от частей».

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

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

Гештальт-закон близости

Люди группируют предметы, находящиеся близко друг к другу в пространстве. Они становятся единым воспринимаемым объектом.

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

Закон близости показывает, как разум естественным образом группирует (или разделяет) предметы в зависимости от их расстояния друг от друга.

Craigslist использует этот закон, чтобы упростить понимание того, какие подкатегории попадают под категорию «для продажи»:

Гештальт-закон подобия

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

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

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

Гештальт-закон Закрытия

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

Без закона замыкания мы бы просто видели разные линии разной длины. Но закон замкнутости соединяет линии в целые фигуры.

Использование закона замыкания может сделать логотипы или элементы дизайна более интересными. Хорошим примером является логотип Всемирного фонда дикой природы, разработанный сэром Питером Скоттом в 1919 году.61:

Гештальт-закон симметрии

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

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

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

Люди предпочитают симметричную внешность асимметричной. Чередование столбцов изображений и текста, ползунки по центру и список из трех столбцов дополняют визуальное удовольствие от дизайна домашней страницы Trello:

Гештальт-закон общей судьбы

Мы склонны воспринимать объекты как линии, которые движутся по пути . Мы группируем вместе объекты, которые имеют одинаковую тенденцию движения и, следовательно, находятся на одном и том же пути.

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

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

Гештальт-закон непрерывности

Люди склонны воспринимать линию как продолжающую установленное направление. Когда есть пересечение между объектами (например, линиями), мы склонны воспринимать две линии как два отдельных, непрерывных объекта. Стимулы остаются отчетливыми даже при перекрытии.

Fixel использует это для соединения лиц с биосом:

Существуют и другие законы гештальта, такие как Фигура и фон или Закон хорошего гештальта. (Объекты, как правило, группируются в восприятии, если они образуют регулярный, простой и упорядоченный узор — например, олимпийские кольца.) Тем не менее, рассмотренные выше принципы являются лучшими руководящими принципами веб-дизайна.

7. Пустое пространство и чистый дизайн

Белое пространство (также называемое «негативным пространством») — это часть веб-страницы, которая остается «пустой». Это пространство между графикой, полями, отступами, пространством между столбцами, пространством между строками текста или визуальными элементами.

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

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

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

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

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

Узнайте больше о пробелах и простоте.

8. Бритва Оккама

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

В сообщении о своем опыте работы с Angelpad команда Pipedrive пишет:

Команда Angelpad и наставники ставили перед нами разные задачи. «У вас слишком много вещей на вашей домашней странице» — это то, с чем мы сначала не согласились, но мы рады проверить. И оказалось, что мы действительно ошибались. Мы удалили 80% контента и оставили на главной странице одну кнопку регистрации и одну ссылку «Узнать больше». Конверсия в регистрацию увеличилась на 300%.

Дело не только во внешнем виде, но и в том, как он работает. Некоторые компании, например 37Signals, превратили «простую» в бизнес-модель. Вот цитата из книги Rework, , написанной основателями Джейсоном Фридом:

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

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