Цвета
Выбрать один базовый цвет (не черный/белый) |
Создать несколько его вариаций (светлее/темнее) + белый/серый цвет. Можно использовать палтиры |
Основной цвет использовать для выделения важных элементов (например кнопки заказа и т.д.) |
Никогда не использовать черный цвет |
Цвета и оттенки имеют значение (см. соотв. пункт) |
Значения цветов
Красный |
энергия, сила, страсть, волнение. Яркие оттенки - более энергичные, темные - более мощные и элегантные |
Оранжевый |
привлекает внимание, обозначает бодрость, креативность, дружественность, уверенность и мужество |
Жёлтый |
энергетичный, обозначает счастье, очарование, любопытность, ум, свежесть |
Зелёный |
гармония, природа, жизнь, здоровье, деньги |
Синий |
спокойствие, мир, доверие, стабильность, профессионализм, доверие, честь. Один из самых любимых цветов, особенно у мужчин |
Фиолетовый |
мощь, узнаваемость, благополучие, мудрость, элитность, благородство, величие, таинственность |
Розовый |
романтичность, пассивность, забота, мир, любовь |
Коричневый |
расслабление, доверие, земля, природа, долговечность, комфорт, надёжность |
|
|
Текст
Основной текст |
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