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

Улучшение интерфейса мелочами: некоторые хитрости для недизайнеров

Улучшение интерфейса мелочами: некоторые хитрости для недизайнеров

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

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

Для передачи иерархической структуры используй цвет и толщину шрифта

Улучшение интерфейса мелочами: некоторые хитрости для недизайнеров

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

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

Толщины шрифта с лихвой хватает для работы с интерфейсом пользователя, для основной части текста подойдёт толщина 400 или 500, в зависимости от шрифта, а более толстый — 600 или 700, для тех участков, которые нужно выделить.

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

Не используй серые цвет текста на цветных фонах

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

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

Этого можно добиться двумя способами.

Уменьшить прозрачность белого цвета

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

Вручную подобрать такой цвет текста, который будет основан на цвете фона

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

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

Смести тень к низу

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

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

Если хочешь больше понять как работать с тенью, у Google есть отличный материал на эту тему — Material Design Guidelines.

Меньше используй границы

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

Использование тени в ячейке

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

Использовать два различных цвета фона

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

Добавить дополнительное пространство

Это очень хороший ход — разместить элементы на большем расстоянии друг от друга и при этом совсем не обязательно добавлять новые детали в интерфейс.

Не нужно увеличивать иконки, которые должны быть маленькими

Если ты в процессе создания сайта делаешь какую-нибудь страницу с использованием иконок и тебе нужно сделать их большими, можно воспользоваться бесплатным набором иконок таких как Font Awesome или Zondicons. У них иконки в векторе, поэтому увеличивая размер, качество не пострадает. Но если используются уже готовые иконки размер которых от 16 до 24 пикселей, тут уже нужно быть осторожным. Если их увеличить, они будут смотреться не качественно и не профессионально. Они не будут передавать нужно детализации, поэтому они всегда будут казаться непропорциональными и грубыми.

Чтобы стилизовать маленькие иконки, их можно вставить в фигуру другого цвета, что визуально их увеличит.

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

Ну или, если позволяет бюджет, можно воспользоваться платными наборами, которые практически всегда включают в свои наборы иконки всех размеров. Можно воспользоваться Heroicons или Iconic.

Использовать цветные границы для выражения элементов

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

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

Или чтобы выделить активный пункт навигации:

Или вообще весь тусклый header своей страницы:

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

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

Не каждой кнопке нужен цветной фон

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

Шаблоны сервисов таких как, например, Bootstrap даже поощряют это тем, что предоставляют меню семантических стилей при выборе кнопки:

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

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

При составлении дизайна важно передать пользователю их место в этой самой иерархии.

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

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

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

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

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

Но в любом случае не бойтесь экспериментировать и играть с фонами и оттенками.


Комментарии 0

Вверх
Войти на сайт
или

Восстановить пароль Регистрация