Начало статьи читайте здесь: 20 советов по веб-дизайну.
А мы продолжаем:
10. Поддерживать визуальную иерархию
Мы коснулись визуальной иерархии, когда упомянули паттерны сканирования глаз и навигацию. Тем не менее, это настолько важный принцип, что он заслуживает отдельной точки! Хотя дизайн сайта должен быть эстетичным и инновационным, он также должен быть логичным. То есть вам нужно сознательно структурировать свой контент таким образом, чтобы он имел смысл для пользователя, даже если это только на подсознательном уровне.
Этот сайт для биткойн-компании CTSO является отличным примером. Текст заголовка находится в верхней части визуальной иерархии дизайнера, за ним следует боковая панель навигации. Однако вместо того, чтобы убирать их с домашней страницы, это используется для направления их через различные опорные точки на одностраничной домашней странице.
11. Обратите внимание на детали
Большая картина, несомненно, важна, когда дело доходит до веб-дизайна. В конце концов, именно то, как все визуальные элементы объединяются, определяет общий внешний вид вашего веб-сайта. Однако важно не упускать из виду мелочи. Внимание к более мелким деталям, таким как значки нижнего колонтитула, интервал между текстами и микро-взаимодействия, действительно помогает выделить ваш сайт.
Этот сайт-футер для натуральной косметики компании Carbon Beauty является отличным примером. Он не только дополняет стильный и минималистичный сайт бренда, но и сам по себе является произведением искусства. Они объединили симметрию, линии, кнопки и значки, чтобы помочь дольше удерживать аудиторию на странице и побуждать их по-разному взаимодействовать с брендом.
12. Используйте закон Фитта
Закон Фитта, созданный психологом Полом Фиттсом в 1954 году, гласит, что время, необходимое для перемещения к цели, напрямую зависит не только от ее расстояния, но и от размера цели. Хотя эта теория изначально относилась к двигательной системе человека, сейчас она является центральным принципом проектирования UX (пользовательского опыта). Идея, часто используемая в отношении кнопок, заключается в том, что элементы, которые вы хотите легко выбирать (например, ваши основные призывы к действию), должны быть большими и располагаться близко к пользователям.
13. С умом выбирайте свои изображения
Говорят, что картинка рисует тысячу слов, и это, безусловно, относится к дизайну веб-сайтов. Снимки могут служить очень многим целям в веб-дизайне, будь то рассказ истории, демонстрация работы продукта, пробуждение эмоций или создание атмосферы. Однако важно помнить, что не все фотографии созданы одинаковыми. Обязательно тщательно продумайте фотографии, которые вы используете в своем веб-дизайне. Они должны быть не только профессионального качества и высокого разрешения, но и соответствовать вашей общей эстетике и иметь четкую цель.
14. Приоритет пользовательского опыта
Пользовательский опыт не только для дизайнеров UX. Любой, кто хочет, чтобы их аудитория действовала на вашем веб-сайте (подписывалась на рассылку или покупала что-то), должны обратить внимание на путь клиента. Хорошей новостью является то, что это не обязательно должен быть сложный или очень технический процесс. Это просто для того, чтобы сделать вашу аудиторию как можно проще для желаемых шагов.
15. Рассмотрите возможность использования систем сетки
Использование компоновки сетки - надежный способ сделать ваш сайт аккуратным, организованным и профессиональным. По сути, это пересекающиеся горизонтальные и вертикальные линии, которые служат направляющими для размещения и выравнивания элементов в вашей композиции. Это мощный визуальный инструмент, который создает последовательность и порядок в вашем дизайне, что может быть особенно полезно, когда многое происходит!
В этой концепции блога для The Hilgart дизайнер Руслан Сииз использовал макет на основе сетки, чтобы сформировать основу своего макета. Несмотря на то, что на этой домашней странице есть некоторые асимметричные элементы и разные столбцы, это делает ее аккуратной и структурированной.
16. Избегайте больших кусков текста
Вы получаете только один шанс произвести хорошее первое впечатление на нового посетителя сайта. Вот почему так важно, чтобы предложение вашего бренда было сразу понятным для вашей аудитории. Хотя это частично относится к вашему копирайтингу (письменному контенту), дизайн вашего сайта также играет важную роль. По этой причине использование больших кусков текста на вашем веб-сайте категорически запрещено, особенно на вашей домашней странице. Мало того, что это может разбавить сообщение вашего бренда, но это может сделать ваш сайт выглядеть загроможденным и грязным.
17. Используйте инвариантность
Принцип инвариантности заключается в том, что вы помещаете один другой вариант в однородную группу. Это может быть незаменимым инструментом при разработке таблиц цен на вашем сайте.
18. Закон Хика
За пределами мира дизайна этот принцип обычно называют «усталостью от принятия решений». Названная в честь британских и американских психологов Уильяма Эдмунда Хика и Рэя Хаймана, идея заключается в том, что «с каждым дополнительным выбором увеличивается время, необходимое для принятия решения». Таким образом, чем больше вы перегружаете своего пользователя слишком многими различными опциями (будь то кнопки или пункты меню), тем больше времени потребуется, чтобы побудить их к действию. И поскольку у вас, как правило, очень узкое окно для создания впечатления, это не очень хорошая вещь! Вот почему так важно ограничить ваши призывы к действию и сделать те, которые вы используете, максимально эффективными.
19. Используйте симметрию
Хотя есть время и место для более абстрактных, асимметричных дизайнов, вы не ошибетесь с симметрией. Обращаясь к тому, что две половины целого идеально отражают друг друга, это простой способ сразу же сделать дизайн вашего сайта более сбалансированным, аккуратным и профессиональным.
20. Дизайн для веб и мобильных
Если вы обращаете внимание только на один принцип дизайна сайта, сделайте так! Смартфоны никуда не денутся - фактически они становятся все более популярным способом потребления контента. Вот почему так важно разрабатывать как для настольных компьютеров, так и для мобильных устройств. Это означает, что ваши заголовки и абзацы хорошо работают на обоих устройствах, чтобы изображения и другие визуальные элементы не были обрезаны и чтобы ваши кнопки легко использовались на маленьком экране. Это также включает в себя обеспечение быстрой загрузки вашего сайта на обоих устройствах.
Оптимизация вашего сайта для мобильных устройств иногда означает использование различных макетов для рабочего стола. Вы можете увидеть это в действии в мобильной версии приведенного выше примера. Здесь они использовали полноэкранное изображение и сетку, чтобы улучшить мобильность. Это показывает, почему так важно рассматривать дизайн для мобильных устройств и веб как две разные сущности.
Принятие этих советов дизайна на борт не делает вас приверженцем правил. Это просто гарантирует, что у вас есть прочный фундамент, так что вы можете рисковать и экспериментировать, где это важно.
Понравилась статья поставьте, пожалуйста, "лайк" и подпишитесь на наш канал, нас это стимулирует на написание новых статей.
Читайте также: