Советы № 1: выбираем цвета и строим интерфейс

12 июня 2015

в разделе Идеи

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

Важность цвета

Цвет очень важен в восприятии мира человеком. Миллионы оттенков формируют не только то, что мы видим, но и наше настроение.

Нельзя недооценить роль цвета в веб-дизайне.

Меньше — это больше

Играйте с контрастом

Психология цветов

Никогда не перебарщивайте! Хоть и многоцветные сайты могут выглядеть красиво, они сильно отвлекают внимание от основного контента.

Палитра из 3-6 цветов — оптимальный выбор.

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

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

Комнаты отдыха — зеленые, знаки предупреждения — красные.

Восприятие цветов субъективно, но реакция на них основана на чувствах: зеленый — расслабляющий, розовый — романтичный, желтый — оптимистичный, et cetera.

Как выбрать цветовую схему?

Триада

Совмещение 3 цветов на различных сторонах спектра.

Аналоговая цветовая схема

Подбор на основе трех смежных зон цветового спектра.

Составная цветовая схема

2 цвета выбираются на основе противоположных сторон спектра.

Целостность и непрерывность в UI-дизайне

«Если хотим удержать внимание публики, мы должны поддерживать неразрывную связь с каждым предыдущим кадром» (Альфред Капус, 1908)

В кинематографе есть четыре основные категории непрерывности (по Блейну Брауну):

  • Непрерывность контента. Все видимое должно переходить из кадра в кадр.
  • Непрерывность движения. Все, что перемещается, должно сохранять свое движение.
  • Непрерывность позиции. Все объекты должны сохранять свое местоположение.
  • Непрерывность времени. Время съемки и освещение должны быть постоянны в течение всей сцены.

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

Google придерживается непрерывности так: при создании новых продуктов учитывается последовательность и иерархия элементов.

В Material Design добавили немного магии: кнопки превращаются в новые элементы интерфейса.

В плеере лишь сохранили ключевой элемент при переходе. Уже смотрится иначе.

 

По материалам Design Words.

Немного мыслей об адаптивном интерфейсе

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

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

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

А что вы думаете на этот счет?

Печатные шаблоны окна браузера

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

Перед подготовкой электронного макета мы прорабатываем его структуру. Зачастую мы создаем мокапы на ПК, но удобно порисовать-подумать по старинке — карандашом на листке А4.

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

Отдаем шаблоны окон браузера в добрые и хорошие руки.

3 урока от Клаудио Гаглиэри

Клаудио Гаглиэри, дизайн-директор веб-агентства WhyDontWeTry, рассказал об уроках, которые он извлек за 5 лет своей работы. Мы заботливо перевели и адаптировали их для вас.

Интернет интерактивный

Важность истории

Тренды убьют ваш посыл

А ТВ — нет. Люди посещают сайты в надежде найти что-то впечатляющее. Удивляйте их, играйте с ними.

Я много почерпнул именно из игр. Но это опасное слово для планерок. Все сразу крикнут: «Мы не можем делать игру». Но игрофикация важна. Ощущение достижения, сравнение поведения пользователей и пошаговые инструкции — лишь несколько примеров.

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

Недостаточно сделать красивую картинку. Какие чувства вы хотите вызывать своим сайтом? Стройте нарратив на основе ответа.

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

Будьте уникальными. Излишнее увлечение трендами сделает вас серой мышкой.

Узнайте, почему клиентам так нравится работать с нами