ЦветаВыбрать один базовый цвет (не черный/белый) | Создать несколько его вариаций (светлее/темнее) + белый/серый цвет. Можно использовать палтиры | Основной цвет использовать для выделения важных элементов (например кнопки заказа и т.д.) | Никогда не использовать черный цвет | Цвета и оттенки имеют значение (см. соотв. пункт) |
Значения цветовКрасный | энергия, сила, страсть, волнение. Яркие оттенки - более энергичные, темные - более мощные и элегантные | Оранжевый | привлекает внимание, обозначает бодрость, креативность, дружественность, уверенность и мужество | Жёлтый | энергетичный, обозначает счастье, очарование, любопытность, ум, свежесть | Зелёный | гармония, природа, жизнь, здоровье, деньги | Синий | спокойствие, мир, доверие, стабильность, профессионализм, доверие, честь. Один из самых любимых цветов, особенно у мужчин | Фиолетовый | мощь, узнаваемость, благополучие, мудрость, элитность, благородство, величие, таинственность | Розовый | романтичность, пассивность, забота, мир, любовь | Коричневый | расслабление, доверие, земля, природа, долговечность, комфорт, надёжность |
| | ТекстОсновной текст | 15-25px | Заголовоки | Большие (при использовании очень больших заголовков уменьшать font-weight) | Высота строки | 120-150% размера текста | Длинна строки | 45-90 символов в нижнем регистре | Использовать только один шрифт на сайте (serif/sans-serif) | Sans-serif | более нейтральный, чистый и современный: Open Sans, Lato, Raleway, Montserrat, PT Sans, Roboto | Serif | более классический, литературный, для длинных текстов: Cardo, Merriweather, PT Serif |
Текст на картинкеТекст поверх | Если картинка достаточно темная, и текст контрастный и читаемый | Постепенное затемнение картинки (внизу или вверху) | Если текст находится вверху или внизу | Оверлей ( черного или другого цвета) на картинке | Контейнеры определенного цвета (можно с прозрачностью) в которые помещен текст | "Заблюрить" картинку или часть её, над которой текст |
| | ИконкиИспользуются | в блоках преимуществ сайта/продуктов;
в блоках пошаговых инструкций;
для меню/действий/ссылок (при этом иконки должны быть понятными и иметь также подпись, не только иконку); | Иконки не должны быть центральным элементом дизайна. По сути они лишь играют роль дополнительной помощи при ориентировании пользователя. | Использовать векторные иконки/иконочные шрифты |
Расположение и пробелыИспользовать пробелы между элементами, группами элементов и секциями сайта | Правильный подбор расстояний между элементами делает сайт читабельнее, чище и красивее. Маленькие расстояния делают сайт тяжелым и плохо читаемым. Но не стоит делать и слишком большие пробелы | Пробелы помогают выстраивать визуальную иерархию сайта, выделять блоки. Помогают акцентировать внимание пользователя на чём-либо |
КонверсияПрежде чем продать-что либо - нужно установить доверие (например предложить что-то бесплатно) | Призыв к действию нужно повторять (например дублировать кнопку "заказ" в шапке и в центре блока). Чем чаще - тем лучше (но не переборщить) | Привлекать внимание пользователей (например добавить попапы с выгодным предложением) | Рассказать пользователю о преимуществах. Кратко и лаконично | Не спрашивать много информации (например в формах) - только необходимый минимум | Использовать "социальные доказательства" - отзывы, упоминания в сми, обзоры | Использовать "ограничения" для подталкивания к действию - например ограниченное время предложения или ограниченное количество | Подчеркнуть уникальность или "элитность" продукта | Показать какие проблемы пользователя решает продукт |
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
More Cheat Sheets by Yur375