Игорь Кунцевич перечисляет некоторые правила, которые помогут разработчикам, работающим без дизайнера (видео, презентация):

1. Цвет для кнопки при ховере: базовый цвет -20% насыщенности (в модели HSL). Либо +20% насыщенности, если получается плохой контраст с фоном.
2. Цвет для неактивной кнопки: базовый цвет -70% насыщенности.
3. Надписи на кнопках должны быть глаголами (синтаксис элементов интерфейса).
4. Минимальное требование к странице 404 — надпись «Эта страница была удалена или никогда не существовала» и ссылка на главную. Можно поместить эту надпись в стандартное оформление сайта.
5. Анимация в интерфейсе должна длиться 300–800 мс. Тогда пользователь заметит ее, но не будет чувствовать, что всё тормозит.
6. Если к кривой для анимации нет требований, используйте easeOutCubic. Она похожа на взаимодействие в физическом мире: сперва мы быстро приближаемся к объекту, а потом аккуратно берем его.

Пейдж Лаубхеймер из «Нильсен-Норман-Групп» дает определение UI-паттерну «Карточка» и показывает, когда его следует использовать.

Для представления однородных данных карточки подходят хуже списков. В списке нужную информацию найти проще:

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

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

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

Эрик Кеннеди делится приемами, которые он освоил, работая дизайнером:

1. Псевдообъемные элементы. Некоторые элементы — такие как кнопки — как бы торчат из экрана наружу. Другие — радиокнопки или нажатые кнопки — наоборот, вдавлены в него. Понять, как ведут себя тени возле этих элементов, помогает простое правило: свет падает сверху. Это значит, что на выпирающих элементах тень должна быть внизу, а на вдавленных — вверху.
2. Начать с черно-белого. Чтобы интерфейс выглядел «чисто», следует начать с простого черно-белого дизайна, а потом по необходимости добавлять в него цвета. Можно добавить один основной цвет или выбрать цветовую схему.
3. Много пустого пространства. Большие отступы между элементами и большое количество свободного пространства делают интерфейс проще.
4. Наложение текста на картинку. Чтобы текст, наложенный на картинку был читаемым, применяют один из нескольких методов: накладывают темный полупрозрачный слой поверх картинки, размывают изображение или применяют scrim — смягчение изображения. Всё это можно делать как со всей картинкой, так и только с областью под текстом.
5. Стилизация текста. Есть переменные, которые можно менять у текста: размер, цвет, жирность, курсив, капитализация, межбуквенное расстояние, отступы. Их изменение делает текст более заметным (крупнее, контрастнее, жирнее) или менее заметным (меньше, неконтрастнее, тоньше). Чтобы все надписи выглядели сбалансированно, нужно, повышая заметность одним способом, понижать его другим. Например, для крупной надписи с большими отступами можно выбрать более тонкое начертание и менее контрастный цвет. Исключение — заголовок страницы, к которому можно применять только методы повышения заметности.
6. Хорошие шрифты. Автор рекомендует Ubuntu, Open Sans, Bebas Neue, Montserrat, Raleway, Cabin, Lato, PT Sans. Все они, кроме Bebas Neue, доступны на Google Fonts.
7. Учиться у других. На Дрибле и других ресурсах, где дизайнеры выкладывают свои работы, можно смотреть, как реализуют различные элементы дизайна. Нет ничего плохого в том, чтобы заимствовать чужие решения.

Иэн Сторм Тейлор советует не использовать в дизайне чистый черный цвет.

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

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

Дадли Стори объясняет, как работает цветовая модель HSL — интуитивно более понятная, чем RGB.

Три составляющих HSL — это hue (тон), saturation (насыщенность) и lightness (светлота).

Тон — это угол (от 0 до 360) на цветовом круге, где по часовой стрелке расположены цвета радуги.

Насыщенность показывает в процентах (от 0 до 100), насколько цвет далек от серого. С нулевым значением насыщенности цвет будет серым, а при 100% — наиболее чистым.

Светлота тоже измеряется в процентах, она показывает расстоние до черного и белого. 0% — это черный, 100% — белый. На 50% находится равноудаленный цвет.

Польза от использования модели HSL:

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