Основные принципы flat-дизайна сайтов
|
Выбрать один базовый цвет (не черный/белый)
|
|
Создать несколько его вариаций (светлее/темнее) + белый/серый цвет. Можно использовать палтиры
|
|
Основной цвет использовать для выделения важных элементов (например кнопки заказа и т.д.)
|
|
Никогда не использовать черный цвет
|
|
Цвета и оттенки имеют значение (см. соотв. пункт)
|
|
Красный
|
энергия, сила, страсть, волнение. Яркие оттенки - более энергичные, темные - более мощные и элегантные
|
|
Оранжевый
|
привлекает внимание, обозначает бодрость, креативность, дружественность, уверенность и мужество
|
|
Жёлтый
|
энергетичный, обозначает счастье, очарование, любопытность, ум, свежесть
|
|
Зелёный
|
гармония, природа, жизнь, здоровье, деньги
|
|
Синий
|
спокойствие, мир, доверие, стабильность, профессионализм, доверие, честь. Один из самых любимых цветов, особенно у мужчин
|
|
Фиолетовый
|
мощь, узнаваемость, благополучие, мудрость, элитность, благородство, величие, таинственность
|
|
Розовый
|
романтичность, пассивность, забота, мир, любовь
|
|
Коричневый
|
расслабление, доверие, земля, природа, долговечность, комфорт, надёжность
|
|
Основной текст
|
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
|
|
Текст поверх
|
Если картинка достаточно темная, и текст контрастный и читаемый
|
|
Постепенное затемнение картинки (внизу или вверху)
|
Если текст находится вверху или внизу
|
|
Оверлей ( черного или другого цвета) на картинке
|
|
|
Контейнеры определенного цвета (можно с прозрачностью) в которые помещен текст
|
|
|
"Заблюрить" картинку или часть её, над которой текст
|
|
|
Используются
|
в блоках преимуществ сайта/продуктов;
в блоках пошаговых инструкций; для меню/действий/ссылок (при этом иконки должны быть понятными и иметь также подпись, не только иконку); |
|
Иконки не должны быть центральным элементом дизайна. По сути они лишь играют роль дополнительной помощи при ориентировании пользователя.
|
|
|
Использовать векторные иконки/иконочные шрифты
|
|
|
Использовать пробелы между элементами, группами элементов и секциями сайта
|
|
Правильный подбор расстояний между элементами делает сайт читабельнее, чище и красивее. Маленькие расстояния делают сайт тяжелым и плохо читаемым. Но не стоит делать и слишком большие пробелы
|
|
Пробелы помогают выстраивать визуальную иерархию сайта, выделять блоки. Помогают акцентировать внимание пользователя на чём-либо
|
|
Прежде чем продать-что либо - нужно установить доверие (например предложить что-то бесплатно)
|
|
Призыв к действию нужно повторять (например дублировать кнопку "заказ" в шапке и в центре блока). Чем чаще - тем лучше (но не переборщить)
|
|
Привлекать внимание пользователей (например добавить попапы с выгодным предложением)
|
|
Рассказать пользователю о преимуществах. Кратко и лаконично
|
|
Не спрашивать много информации (например в формах) - только необходимый минимум
|
|
Использовать "социальные доказательства" - отзывы, упоминания в сми, обзоры
|
|
Использовать "ограничения" для подталкивания к действию - например ограниченное время предложения или ограниченное количество
|
|
Подчеркнуть уникальность или "элитность" продукта
|
|
Показать какие проблемы пользователя решает продукт
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
