Show Menu

flat-design Cheat Sheet by

Основные принципы flat-дизайна сайтов
web-design

Цвета

Выбрать один базовый цвет (не черный­/белый)
Создать несколько его вариаций (светл­ее/­темнее) + белый/­серый цвет. Можно исполь­зовать палтиры
Основной цвет исполь­зовать для выделения важных элементов (например кнопки заказа и т.д.)
Никогда не исполь­зовать черный цвет
Цвета и оттенки имеют значение (см. соотв. пункт)

Значения цветов

Красный
энергия, сила, страсть, волнение. Яркие оттенки - более энерги­чные, темные - более мощные и элегантные
Оранжевый
привлекает внимание, обозначает бодрость, креати­вность, дружес­тве­нность, уверен­ность и мужество
Жёлтый
энерге­тичный, обозначает счастье, очаров­ание, любопы­тность, ум, свежесть
Зелёный
гармония, природа, жизнь, здоровье, деньги
Синий
спокой­ствие, мир, доверие, стабил­ьность, профес­сио­нализм, доверие, честь. Один из самых любимых цветов, особенно у мужчин
Фиолетовый
мощь, узнава­емость, благоп­олучие, мудрость, элитность, благор­одство, величие, таинст­вен­ность
Розовый
романт­ичн­ость, пассив­ность, забота, мир, любовь
Коричневый
рассла­бление, доверие, земля, природа, долгов­ечн­ость, комфорт, надёжность
 

Текст

Основной текст
15-25px
Заголовоки
Большие (при исполь­зовании очень больших заголовков уменьшать font-w­eight)
Высота строки
120-150% размера текста
Длинна строки
45-90 символов в нижнем регистре
Использовать только один шрифт на сайте (serif­/sa­ns-­serif)
Sans-serif
более нейтра­льный, чистый и соврем­енный: Open Sans, Lato, Raleway, Montse­rrat, PT Sans, Roboto
Serif
более класси­ческий, литера­турный, для длинных текстов: Cardo, Merriw­eather, PT Serif

Текст на картинке

Текст поверх
Если картинка достаточно темная, и текст контра­стный и читаемый
Постеп­енное затемнение картинки (внизу или вверху)
Если текст находится вверху или внизу
Оверлей ( черного или другого цвета) на картинке
Контейнеры опреде­ленного цвета (можно с прозра­чно­стью) в которые помещен текст
"­Заб­люр­ить­" картинку или часть её, над которой текст
 

Иконки

Исполь­зуются
в блоках преиму­ществ сайта/­про­дуктов;
в блоках пошаговых инструкций;
для меню/д­ейс­тви­й/с­сылок (при этом иконки должны быть понятными и иметь также подпись, не только иконку);
Иконки не должны быть центра­льным элементом дизайна. По сути они лишь играют роль дополн­ите­льной помощи при ориент­иро­вании пользо­вателя.
Исполь­зовать векторные иконки­/ик­оночные шрифты

Распол­ожение и пробелы

Исполь­зовать пробелы между элемен­тами, группами элементов и секциями сайта
Правильный подбор расстояний между элементами делает сайт читабе­льнее, чище и красивее. Маленькие расстояния делают сайт тяжелым и плохо читаемым. Но не стоит делать и слишком большие пробелы
Пробелы помогают выстра­ивать визуальную иерархию сайта, выделять блоки. Помогают акцент­ировать внимание пользо­вателя на чём-либо

Конверсия

Прежде чем продат­ь-что либо - нужно установить доверие (например предложить что-то бесплатно)
Призыв к действию нужно повторять (например дублир­овать кнопку "­зак­аз" в шапке и в центре блока). Чем чаще - тем лучше (но не перебо­рщить)
Привлекать внимание пользо­вателей (например добавить попапы с выгодным предло­жением)
Рассказать пользо­вателю о преиму­щес­твах. Кратко и лаконично
Не спрашивать много информации (например в формах) - только необхо­димый минимум
Исполь­зовать "­соц­иальные доказа­тел­ьст­ва" - отзывы, упоминания в сми, обзоры
Исполь­зовать "­огр­ани­чен­ия" для подтал­кивания к действию - например ограни­ченное время предло­жения или ограни­ченное количество
Подчер­кнуть уникал­ьность или "­эли­тно­сть­" продукта
Показать какие проблемы пользо­вателя решает продукт

Download the flat-design Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/yur375_flat-design.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          More Cheat Sheets by Yur375

          Web Console Cheat Sheet
          BEM Cheat Sheet
          Адаптивная вёрстка Cheat Sheet