Flat дизайн – новый тренд в веб-дизайне. Айкон
Flat Design (он же «плоский дизайн») – это дизайн веб-объектов, выполненный в простом минималистичном стиле. Концепция плоского дизайна состоит в отказе от скевоформизма – выборе эстетически простых изящных решений вместо визуализации объектов в трехмерном изображении с помощью теней, текстур и градиентов. В последние несколько лет интерфейсы многих популярных программ и веб-сайтов изменились, отказавшись от «реалистичных» изображений в пользу плоскости. В частности, таким образом в 2013 году изменила разработку дизайна компания Apple при выпуске операционной системы iOS 7, а Microsoft сделала выбор в пользу плоскости еще в 2010-м, использовав плоский интерфейс Metro для программы Windows Phone 7.
Причины появления Flat дизайна
По сути «плоский» дизайн сайта из-за недостаточной развитости технологий того времени был популярен в 80-е, но с появлением новых возможностей веб-разработчики постепенно уходили в сторону скевоформизма дабы порадовать неискушенных пользователей реалистичной выпуклой картинкой.
Основные принципы Flat дизайна
- При разработке дизайна используются только визуально плоские (двухмерные) объекты без эффектов объема или глубины;
- Шрифты должны быть простыми и соответствовать общему стилю дизайна;
- Используются односложные простые фигуры с четкими очертаниями;
- Применяются яркие цвета без лишних оттенков.
- Плоский дизайн концептуально соответствует тренду на минимализм, исключая любые неоправданные усложнения.
Разработка Flat дизайна
Дизайн интерфейса в стиле flat должен позволять пользователю на визуальном уровне понимать происходящее. Простота элементов, цветовые акценты, минимализм и органичные шрифты – вот движущая сила Flat дизайна. Главной же проблемой здесь является трудность в распознавании интерактивных символов. Поэтому задача разработчика – сделать все элементы активными либо же визуально выделить таковые. Опытные веб-дизайнеры не стремятся во всех работах полностью переходить на концепцию Flat. Довольно популярным в настоящее время является использование так называемого «почти плоского» дизайна, сочетающего в себе плоские элементы с объемными, позволяющими выделить и подчеркнуть мельчайшие детали.
Читайте далее: Зачем вам SEO-продвижение, когда есть SEO-талисманы!
Лучшие флэт-сайты: 20 примеров нестандартного дизайна
Далее, подборка интересных креативных флэт-дизайнов, красиво и нестандартно применивших плоское оформление / навигацию, новаторство и необычные для Flat-стиля подходы.
Бизнес сайт интригует темным флэт дизайном в стиле хай-тек, фиолетово тонированными изображениями, красивым представлением сервисов в 4-х цветах.
Coulee Creative
Оригинальный Flat сайт американского веб-агентства
Зацикленное двухцветное видео, скролл-эффекты, легкие интефейсные микровзаимодействия, анимированная скетч-картинка, расположенное по центру меню навигации с необычным интеарактивным дизайном.
Bukwild
Сайт калифорнийского digital-агентства с лаконичным продающим flat-дизайном
Начиная с главной страницы применяется нестандартная навигация. Уникально оформленные переходы с именем Bukwild повышают узнаваемость агентства. Полупрозрачные плашки эффектно представляют соблазнительные медиа-материалы.
Appico
Сайт немецкой дизайнерской студии специализирующейся на UI/UX дизайне
Красиво применяются последние & актуальные веб-тренды: элементы в общем пространстве, слои материального стиля, интересные flat-иллюстрации.
Animal Logic
Сайт мирового лидера анимации фильмов, сделан на Вордпрессе c применением CSS3
Запомнить бренд помогает интригующий и ориентированный на пользователя плоский дизайн. Красочные колонки полноэкранного меню и зловеще-иллюстрированный футер с UI-расцветкой, подстраивающейся под хедер.
Root Studio
Яркий, приятный сайт агентства графического и веб-дизайна из Лондона
Идея дизайна – произвести впечатление и визуально подкрепить коммерческое предложение «Создаем незабывемые проекты». Сайт запоминается оригинальной шапкой и футером.
Waaark
Французская студия показывает пример креативного оформления сайта на Вордпрессе
Эффектный материальный дизайн с применением HTML5 / CSS3 / jQuery. На главной странице высококлассная интерактивная анимация с реалистичным затуханием колебаний. Красота дизайна достигается оптимальными пропорциями макета & элементов страниц и переходами.
Made in Haus
У маркетинговой компании из Лос-Анжелеса залипательный сайт с интригующим визуалом
Интерактивная анимация на гланой странице увлекает (попробуйте остановить монстров). Красочно анимировано полноэкранное меню. В портфолио применяются цвето-фильтры превью проектов, интересные ролики, зацикленные видео в фоне.
Интересное сочетание ярких ретро-цветов со скетчевыми рисунками & шрифтами заголовков.
MezzoLab
Дистанционное агентство цифровых услуг. Клиенты: компания L’Oréal, футболист К. Роналду…
Необычайно компактный сайт с оригинальными переходами, привлекает внимание интересными flat-иллюстрациями и плоским видео.
MADWELL
Плоский сайт Нью-Йоркского агенства — интерактив, анимация, индивидуальный стиль
Дублируя навигационное меню, активные hot-spot точки красиво дополняют эффекты на главной странице. Красочно анимированная предзагрузка увязана с первыми экранами, а нижняя панель упрощает просмотр контента.
360I
После 20 лет присутствия на рынке 360i названо медиа-агенством года (2017)
Анимация, hover и scroll эффекты делают интересным компактный дизайн. Отлично оформлен расширенный раздел «О нас». Поддомен CAREERS представлен анимированной 3D-графикой.
Coraline Colasse
Индивидуальное Арт-портфолио парижского дизайнера К. Коласс
Интерактивный WP-сайт, использует CSS3, jQuery, GSAP. Проекты на главной странице удобно листать перетаскиванием вниз, а огромная буква C (инициал Каролины) служит трафаретным превью.
Nurture Digital
У первоклассного цифрового агентства из Лос-Анжелеса креативный, высокотехнологичный сайт
Возможность пролистывать слайд-экраны с анонсами живых клиентских кейсов – это то, что интересно посетителю. При этом он остается на главной, а иллюзию новой страницы создают смена оттенков бэкграунда и эффект анимированной прорисовки гигантской трафаретной буквы. Интригующее видео на заднем плане вовлекает и делает переходы бесшовными.
Paris American Academy
Двуязычная академия дизайна в Париже, основана американцем Ричардом Рей в 1965 г
Черно-белый минималистичный Flat-сайт с мягкими эффектами. В стильном и солидном дизайне применяются нестандартная разметка & навигация, анимированные геометричные фигуры в фоне, элементы материального стиля.
Holm Marcher & Co.
Сайт команды маркетологов из Нью-Йорка
Ненавязчивый дизайн с нестандартной навигацией. Пастельный дуотон в двухцветных изображениях не делает его скучным, наоборот, особая энергетика сочетания приглушенного красного с navy-цветом создает атмосферу профессионализма и спокойствия.
Уходящие тенденции. Дизайн в стиле Flat
Пути неисповедимы. От скевоморфизма к плоскому.
Наш друг Вики дает четкое понятие скевоморфизму – это физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами.
Иными словами, данная тенденция подразумевает использования реализма, выпуклых объектов, элементов дизайна, приближенным к их фактическому очертанию. Такой дизайн был излюбленным форматом многих творцов, он воплощал смелые и амбициозные замыслы художников.
Но тренды имеют свойство устаревать, на смену старым тенденциям приходят новые. И это случилось со скевоморфизмом. С конца 2009 года активно начал набирать новый формат в дизайне, плоский дизайн или флэт.
Прародителем плоского дизайна стал интернационализм и минимализм. Самым острым краем данного стиля стал отказ от реализма.
Какой дизайн зовется плоским?
Все довольно просто, идея flat в том, чтобы дизайн содержал разбавленные цвета. Вы не найдете в иконках или прочих элементах чистых цветов. А реалистичные тени отсутствуют полностью, но подобие теней все же есть, это контрастирующие скосы или пересечения в иконках, иллюстрациях.
Примером использования данного формата можно назвать плитку в ОС Windows 8, так называемую структуру – метро.
Так же можно было видеть измененные иконки и шрифты в IOS 7.
Дизайнеры предрекли флэту короткую жизнь.
Большинство творцов с восторгом отнеслись к плоскому дизайну, это ми-ми-мишные иллюстрации, приятные цвета. Но есть и другая сторона, это недостаток теней, потому как нельзя создать глубину объекта. Лично мое мнение флэт разбавлял обыденность своим теплом, но он не всегда мог использоваться для серьезных проектов.
Но время идет и компания Google представила новый тренд Material Design, который пришел на смену плоскому и сейчас стоит на пике популярности.
Но мы то знаем, что тренды устаревают. И не всегда дизайн должен быть трендовым!
Основные тенденции дизайна. Flat или Material. Адаптивный или отзывчивый дизайн?
Плоский дизайн
Flat design (плоский дизайн) — современный стиль графического дизайна и пользовательского интерфейса.
Он не приемлет выпуклостей, бликов, текстур и других атрибутов реализма, но задает тон разным элементам сайта. Flat design давно покорил сердца дизайнеров и уверенно находится в моде и сегодня. Google, YouTube, Microsoft, Apple используют его для оформления приложений и сайтов. «Флэт дизайн» противопоставляется скевоморфизму и насыщенному дизайну. Однако не стоит недооценивать этот стиль и считать его слишком простым или бескомпромиссным! За время своего существования он впитал в себя некоторые особенности скевофорфизма, обзавелся тенями и градиентами. Так же у Flat design есть важное преимущество — файлы изображений имеют небольшой размер и не увеличивают время загрузки страницы.
Для современного плоского дизайна характерны несколько компонентов:
Длинные тени. Они добавляют изображениям объем и глубину без необходимости жертвовать деталями иконок, которые делают интерфейс более привлекательным.
Прозрачная кнопка.
Это один из модных элементов в современном дизайне. С этим все просто — кнопка не сильно привлекает внимание, но быстро распознается на странице.Динамичные цвета. Используя энергичные цветовые решения, дизайнеры дополняют редкие визуальные эффекты и делают изображение более «живым».
Типографика в основе стиля. Во Flat design главное — удобство восприятия. Здесь приоритет за шрифтами без засечек с постоянной шириной.
Минималистичный подход. Во «Флэте» все внимание должно быть приковано к контенту.
Это один из модных элементов в современном дизайне. С этим все просто — кнопка не сильно привлекает внимание, но быстро распознается на странице.Общие тенденции современного плоского дизайна отражены в стиле Flat.2.0. Здесь наблюдается эволюция плоской конструкции, в которую добавлены некоторые трехмерные эффекты, чтобы сделать ее более привлекательной.
Материальный дизайн
Material design — это разновидность плоского дизайна, придуманная Google. В основе этого стиля лежат традиционные техники дизайна и реальные физические явления с адаптацией под web.
В итоге рождаются роскошные интерфейсы, которые передают освещение, особенность объектов и материалов, имитируют движение из настоящего мира.
В материальном дизайне контент не играет такой важной роли, как во Flat design, здесь главное — как этот контент оформлен, как он ощущается, как происходит взаимодействие с пользователем. Насыщенная графика, яркая цветовая палитра, белый фон, четко прорисованные границы изображений и заметная типографика — это основные элементы Material design. Здесь используются принципы типографического дизайна, чтобы эффектно расставить акценты, сфокусировать внимание пользователя на важных элементах. Для материального дизайна характерны упрощенная навигация в интерфейсе и интуитивная передача смысла его элементов. Все вместе это не просто создает приятную для восприятия картину, а рождает новую реальность со множеством функций и смыслом.
В материальном дизайне все интерактивно. Страница отзывается на любое действие пользователя. Но при этом присутствует и некая простота — пользователь интуитивно понимает, к чему его приведет очередное нажатие.
Адаптивный и отзывчивый дизайн
Adaptive & Responsive design — это два разных пути создания сайта. Пользователи просматривают веб-сайты с различных устройств и с экранами разных размеров. Размерная линейка экранов постоянно меняется, поэтому важно, чтобы просмотр страниц оставался комфортным. Мы выделяем два основных решения этого вопроса:
Adaptive Design (адаптивный дизайн) — дизайн, основанный на операциях с различными макетами сайта либо его разметкой. Предполагается, что пользователи будут открывать сайт с конкретных, заранее заданных, устройств и просматривать страницы на экранах определенного разрешения.
Responsive Design (отзывчивый дизайн) — подход, когда сайт создается с определенными значениями свойств, к примеру, с гибкой сеткой макета. Это позволяет одному сайту открываться на широком спектре устройств.
Современные разработчики всё чаще отдают предпочтение отзывчивому дизайну, позволяющему создать сайт, доступный для большинства пользователей.
Но и адаптивный дизайн также пользуется популярностью. Посмотрим на достоинства двух дизайнов.
Преимущества Adaptive Design:
быстрая загрузка сайта, так как сервер мгновенно определяет тип устройства и загружает необходимый программный код. Быстрая загрузка изображений за счет сжатия и адаптации под конкретные устройства пользователей;
свобода творчества для разработчиков, ведь они могут создавать различные версии сайтов, подгонять их под определенные типы устройств.
Есть и недостатки. Из-за адаптации дизайна время на его разработку сайта увеличивается. И главный недостаток — если в дальнейшем нужно будет внести доработки, то придется изменять все его версии. В связи с этим адаптивный сайт станет серьезной финансовой нагрузкой для бюджета.
Преимущества Responsive Design:
одинаковый вид в разных браузерах и платформах;
наличие одного URL, что выгодно для сео-оптимизации;
разработчики обслуживают только одну версию, что экономит время и деньги;
Среди недостатков можно отметить не такую высокую скорость загрузки страницы, как у адаптивного сайта.
Верстка responsive дизайна сложнее и занимает больше времени и средств на этапе создания сайта.
Подведем итоги
В последние годы наблюдается всплеск популярности адаптивного и отзывчивого дизайна, что и понятно — необходимо, чтобы сайт одинаково хорошо отображался на самых разных устройствах. И эта тенденция будет набирать обороты. Плоский дизайн не выходит из моды, но сейчас он начинает видоизменяться и значительно эволюционировать, в нем появляется глубина, он уже не такой простой, как был в самом начале. Flat design дополняется элементами из Material design, что позволяет ему оставаться в тренде. В итоге рождается своего рода гибрид, впитавший в себя тонкую эстетику плоского стиля и эффектную многослойность материального дизайна. Material design в свою очередь не против заимствовать элементы из «Флэта» и удивить пользователей чем-то новым. Все это наводит на мысль о том, что такой удачный симбиоз сохранится и в будущем, ведь каждый стиль хорош по-своему, и им есть чем поделиться друг с другом.
Красивые цвета в стиле flat — выбрать цвет для современного дизайна сайта или оформления презентации
Cinnabar f03434 240, 52, 52
Soft red EC644B 236, 100, 75
Chestnut Rose D24D57 210, 77, 87
Pomegranate F22613 242, 38, 19
Thunderbird D91E18 217, 30, 24
Old Brick 96281B 150, 40, 27
Flamingo EF4836 239, 72, 54
Valencia D64541 214, 69, 65
Tall Poppy C0392B 192, 57, 43
Cinnabar E74C3C 231, 76, 60
Salmon FA8072 250, 128, 114
Light Salmon FFA07A 255, 160, 122
Dark Red 8B0000 139, 0, 0
Terbox D81C21 216, 28, 33
Razzmatazz DB0A5B 219, 10, 91
Sunset Orange F64747 246, 71, 71
Wax Flower F1A9A0 241, 169, 160
Cabaret D2527F 210, 82, 127
New York Pink E08283 224, 130, 131
Radical Red F62459 246, 36, 89
Sunglo E26A6A 226, 106, 106
Foliana 2 f39fb8 243, 159, 184
Lavender Purple 947cb0 148, 124, 176
Snuff DCC6E0 220, 198, 224
Rebeccapurple 663399 102, 51, 153
Honey Flower 674172 103, 65, 114
Wistful AEA8D3 174, 168, 211
Seance 9A12B3 154, 18, 179
Medium Purple BF55EC 191, 85, 236
Light Wisteria BE90D4 190, 144, 212
Studio 8E44AD 142, 68, 173
Wisteria 9B59B6 155, 89, 182
Foliana 724b73 114, 75, 115
Sherpa Blue 013243 1, 50, 67
San Marino 446CB3 68, 108, 179
Alice Blue E4F1FE 228, 241, 254
Royal Blue 4183D7 65, 131, 215
Picton Blue 59ABE3 89, 171, 227
Spray 81CFE0 129, 207, 224
Shakespeare 52B3D9 82, 179, 217
Humming Bird C5EFF7 197, 239, 247
Picton Blue 22A7F0 34, 167, 240
Curious Blue 3498DB 52, 152, 219
Madison 2C3E50 44, 62, 80
Dodger Blue 19B5FE 25, 181, 254
Ebony Clay 22313F 34, 49, 63
Malibu 6BB9F0 107, 185, 240
Summer Sky 1E8BC3 30, 139, 195
Chambray 3A539B 58, 83, 155
Pickled Bluewood 34495E 52, 73, 94
Hoki 67809F 103, 128, 159
Jelly Bean 2574A9 37, 116, 169
Jacksons Purple 1F3A93 31, 58, 147
Jordy Blue 89C4F4 137, 196, 244
Steel Blue 4B77BE 75, 119, 190
Fountain Blue 5C97BF 92, 151, 191
Twitter Blue 1DA1F2 29, 161, 242
Link Blue 0084B4 0, 132, 180
BG Blue C0DEED 141, 192, 219
Sidebar Blue CCEAF3 221, 238, 246
Ronast Blue 2 DBF1FF 219, 241, 255
Ronast Blue 3 5FB0E5 95, 176, 229
Ronast Blue 4 D2E9F7 210, 233, 247
Ronast Blue 5 0686D8 6, 134, 216
Malachite 00e640 0, 230, 64
Summer Green 91b496 145, 180, 150
Medium Turquoise 4ECDC4 78, 205, 196
Aqua Island A2DED0 162, 222, 208
Gossip 87D37C 135, 211, 124
Dark Sea Green 90C695 144, 198, 149
Eucalyptus 26A65B 38, 166, 91
Caribbean Green 03C9A9 3, 201, 169
Silver Tree 68C3A3 104, 195, 163
Downy 65C6BB 101, 198, 187
Mountain Meadow 1BBC9B 27, 188, 155
Light Sea Green 1BA39C 27, 163, 156
Medium Aquamarine 66CC99 102, 204, 153
Turquoise 36D7B7 54, 215, 183
Madang C8F7C5 200, 247, 197
Riptide 86E2D5 134, 226, 213
Shamrock 2ECC71 46, 204, 113
Niagara 16a085 22, 160, 133
Emerald 3FC380 63, 195, 128
Green Haze 019875 1, 152, 117
Speech Aquamarine 03A678 3, 166, 120
Ocean Green 4DAF7C 77, 175, 124
Niagara 1 2ABB9B 42, 187, 155
Observatory 049372 4, 147, 114
Jungle Green 26C281 38, 194, 129
Ronast Green 43a351 67, 163, 81
Ronast Green 2 62B170 98, 177, 112
Ronast Green 3 429F4F 66, 159, 79
Saffron Mango fabe58 250, 190, 88
Confetti e9d460 233, 212, 96
Cape Honey FDE3A7 253, 227, 167
California F89406 248, 148, 6
Fire Bush EB9532 235, 149, 50
Tahiti Gold E87E04 232, 126, 4
Casablanca F4B350 244, 179, 80
Crusta F2784B 242, 120, 75
Sea Buckthorn EB974E 235, 151, 78
Lightning Yellow F5AB35 245, 171, 53
Burnt Orange D35400 211, 84, 0
Buttercup F39C12 243, 156, 18
Ecstasy F9690E 249, 105, 14
Sandstorm F9BF3B 249, 191, 59
Jaffa F27935 242, 121, 53
White Smoke ececec 236, 236, 236
Lynch 6C7A89 108, 122, 137
Pumice D2D7D3 210, 215, 211
Gallery EEEEEE 238, 238, 238
Silver Sand BDC3C7 189, 195, 199
Porcelain ECF0F1 236, 240, 241
Cascade 95A5A6 149, 165, 166
Iron DADFE1 218, 223, 225
Edward ABB7B7 171, 183, 183
Cararra F2F1EF 242, 241, 239
Silver BFBFBF 191, 191, 191
Cream Can F5D76E 245, 215, 110
Ripe Lemon F7CA18 247, 202, 24
Saffron F4D03F 244, 208, 63
Yandex FFDB4D 255, 219, 77
Soft Gold B49151 180, 145, 81
10 принципов «плоского дизайна»
В этой статье я расскажу вам о flat-дизайне.
Вы наверняка уже что-то слышали об этом, так как flat за последние несколько лет стал одним из ведущих трендов в вебе.
Сегодня мы разберемся, что такое flat-дизайн, как он возник и что вам нужно, чтобы создать чистый, яркий и отзывчивый дизайн.
Вы можете найти хорошие примеры flat-дизайна на сайте https://market.envato.com/. Там есть множество макетов, иконок и шаблонов, которые дадут вам четкое понимание о том, как выглядит современный дизайн.
1. Что такой flat-дизайн?
Flat-дизайн — современный стиль пользовательского интерфейса, а также графического дизайна, отличающийся минималистичностью. Для flat-дизайна характерны использование минимума элементов и отсутствие различных эффектов текстуры, тени и света, к примеру: смешанных цветов, градиентов, бликов и так далее.
Флэт противопоставляется скевоморфизму (скевоморфизм — это принцип дизайна, когда какому-то одному продукту придаётся облик другого, т.е. когда различные элементы интерфейса копируются с реальных объектов — прим.
перевод.), а также насыщенному дизайну. Однако,стоит сказать, что flat-дизайн вовсе не такой простой, каким он кажется на первый взгляд. Он включает в себя некоторые особенности скевоморфизма, но об этом мы поговорим чуть позже.
В общем, флэт помогает сосредоточить пользователя на контенте, без отвлечения на визуальные эффекты. Flat-дизайн подчеркивает простоту элементов, в то же время делая интерфейс более отзывчивым, приятным и легким в использовании.
2. Немного истории
Flat-дизайн, как известно, существовал задолго до того момента, когда он стал мировым трендом в вебе. Flat-дизайн был довольно популярен в 80-е годы в связи с тем, что техника в то время еще не была настолько развита, чтобы поддерживать сложные эффекты, текстуры и тени. Однако, уже тогда дизайн стремился к скефоморфизму, стараясь сделать элементы интерфейса как можно более реалистичными.
Flat-дизайн, в том облике, в котором он мы видим его сейчас, стал набирать популярность после того, как Microsoft стала выпускать продукцию в так называемом metro-стиле. Metro — UI-дизайн от Microsoft, поражающий своей стильностью и простотой.
В 2010 году Microsoft выпустила Windows Phone 7, который использовал flat-дизайн с острыми краями и простой графикой, унаследованной у одного из ранних продуктов Microsoft (Zune). Позже, вдохновленная успехом , Microsoft выпустила операционную систему Windows 8, основанную на том же самом плоском стиле Metro.
В конце концов, flat-дизайн достиг своего пика популярности в 2013 году, когда Apple выпустила iOS 7, демонстрирующий принципиально новый дизайн с полностью измененными элементами пользовательского интерфейса, включая иконки и шрифты. Фирма Apple создала наглядные принципы UI- и -иконочного дизайна.
Вскоре после этого, Google тоже начал использовать стиль flat в своих приложениях и веб-страницах, назвав его Material Design. У Google даже есть целый раздел, посвященный этому стилю, включающий описание целей веб-дизайна, его принципов и указания по созданию различных объектов дизайна: иконок, макетов и так далее.
С этого времени флэт стал ключевым направлением в веб-дизайне, сделав сайты, приложения и элементы интерфейса элегантными, чистыми и стильными.
Таким образом, есть три глобальных примера флэт-дизайна от фирм, без которых сложно представить современный мир технологий:
Microsoft’s Metro design
Apple iOS 7 design
Google’s Material Design
3. Помните о чистоте
Flat-дизайн, по-видимому, назван “плоским” из-за отсутствия трехмерных элементов и реалистичных эффектов, таких как: градиенты, текстуры, блики, полутона, тени. Запомните, стиль флэт — это двухмерный (плоский) способ изображения объектов.
Более того, в flat-дизайне предметы изображаются очень упрощенно и стилизованно.
А иногда даже используется просто силуэт или контуры объекта, т.е. ровно столько, чтобы сделать объект узнаваемым, но не перегружать его незначительными деталями.
Минимализм в наши дни стал мировым трендом: простота форм и использование острых краев создает чистый и приятный глазу дизайн. Простые формы более понятны и легки для восприятия. Это делает дизайн минималистичным, чистым, не давая ему приобрести загруженный, беспорядочный вид.
4. Доводите до совершенства
Знайте, когда дело доходит до создания flat-иконок и UI-элементов, вы должны заставить их выглядеть хрустящими, аккуратными и идеальными до пикселя, т.е. настолько, насколько это возможно. Причем, это относится и к растровой, и к векторной графике.
С программой Adobe Photoshop здесь все ясно: она работает с растровой графикой, которая основана на пикселях.
Что касается программы Adobe Illustrator, то она использует векторную графику, состоящую из кривых и линий, называемых векторами, которые задаются математическими формулами.
Когда-то Adobe Illustrator не был особо удобной программой для создания идеальной до пикселя графики. Хорошая новость в том, что последние версии Иллюстратора стали отличным инструментом для создания хорошей графики.
Должна сказать, что векторная графика в основном подразумевает работу с простыми, плоскими формами, чистыми цветами и сетками. Adobe Illustrator очень гибок в настройках и позволяет тебе адаптировать сетку к своим нуждам, выравнивать объекты и использовать различные типы снэппинга. Благодаря этому процесс создания совершенного дизайна, который будет чисто и стильно смотреться на любом дисплее, стал более легким. Если ты хочешь научиться создавать идеальную графику, то тебе стоит ознакомиться со статьей: How to create pixel-perfect artwork using Adobe Illustrator.
5. Цвет
Одна из наиболее специфичных особенностей flat-дизайна, помимо теней, это использование цвета. Большинство цветов, которые использует flat-дизайн в своих элементах состоят всего из нескольких базовых цветов.
Цвет в flat-дизайне отличается яркостью, насыщенностью, сочностью. Цветовая схема флэта не ограничивается несколькими особенными цветами.Она содержат множество оттенков, и их выбор зависит только от того, что ты изображаешь, будь то иконки сладостей или объекты в стиле ретро в утонченной ретро-палитре.
Допустим, вы дизайнер интерфейсов и хорошо разбираетесь в цветовых палитрах, вы экспериментируете с цветовой панелью в программах Photoshop и Illustartor, смешивая цвета, как заблагорассудится. Однако, этот процесс довольно сложен и требует хорошей интуиции, опыта и навыков. Здесь вы найдете некоторые инструменты, которые могут помочь вам в создании собственной цветовой палитры.
Некоторые из них подходят для всех видов дизайна и иллюстраций, а не только для flat-дизайна. К примеру, Adobe Color CC, больше известный, как Кулер. Сегодня есть доступ к нему, как через веб-сайт, так и непосредственно через продукты Adobe. Кулер — очень гибкий инструмент, который позволяет тебе или создать свою собственную цветовую палитру, или выбрать из пользовательские палитры из библиотеки.
Другой простой и удобный генератор цветовых палитр — Coolors. Просто нажмите пробел и программа сгенерирует цветовую палитру, вы можете корректировать цвета, также есть функция экспорта.
Есть еще несколько аналогичных сервисов с заказными палитрами, которые могут быть полезны. Однако, есть один инструмент, созданный специально для флэт-дизайна. FlatUIColors.com by Designmodo — сервис с набором “плоских” цветов, очень удобно для работы. Этот сайт стал очень популярным среди дизайнеров, ищущих хорошие цветовые решения для совершенного дизайна. Попробуйте!
И еще вы можете найти большее разнообразие цветов и палитр в Google’s Material Design guide.
6. Длинные тени
Как упоминалось выше, для flat-дизайна характерны простота, много свободного пространства — вот почему флэт отвергает использование любых эффектов. Однако, есть один эффект, характерный для flat-дизайна. Этот эффект стал трендом и характерной особенностью флэта.
Мы сейчас говорим о длинных тенях. У них есть некоторые типичные характеристики, делающие этот эффект узнаваемым, а именно: 45-градусный наклон и большой размер ( тень может быть в несколько раз длиннее самого предмета. В результате, длинные тени придают флэту некоторый эффект глубины.
Этот эффект делает объект более трехмерным, но одновременно оставляя его в контексте flat-дизайна.
7. Работа со шрифтами
Типографика играет большую роль в flat-дизайне. Часто текст становится главным элементом композиции.
Во флэте обычно используются простые шрифтовые начертания, делающие весь дизайн в целом чистым и читабельным. Ты можешь найти множество бесплатных шрифтов в Adobe Typekit, если ты используешь продукты Adobe. На Font Squirrel вы также найдете много хороших бесплатных шрифтов. Но не забывайте читать лицензию, если вы собираетесь использовать шрифт в коммерческих целях.
Чаще всего в flat-дизайне принято использовать верхний регистр и контрастные цвета, это делает текст более разборчивым.
Используйте шрифты с осторожностью, помните, что он должен подчеркивать дизайн и соответствовать ему, а не выглядеть отдельным элементом.Это не значит, что ты не можешь использовать шрифты с засечками или рукописные сложные шрифты. Просто помни о минималистичности и держи все в балансе. Однако, флэт все-таки чаще использует шрифты без засечек, так как они выглядят более строго и аккуратно.
8. Плюсы и минусы Flat-дизайна
Несмотря на то, что flat-дизайн стал таким популярным благодаря своим многочисленным плюсам, у него все же есть и недостатки, с которыми сталкиваются дизайнеры при использовании этого стиля. Давайте рассмотрим все за и против.
Плюсы
Популярность
Флэт-дизайн превратился в тенденцию, собирая все больше позитивных отзывов\ от дизайнеров и веб-дизайнеров, и вовсе не кажется, что он теряет свои позиции. Наоборот, он распространяется все больше и больше, обретая некоторые новые формы и особенности, становясь все более креативным.
Простота
Флэт-дизайн простой, минималистичный и чистый. Флэт в вебе помогает пользователям сосредоточиться на контенте, а не отвлекаться на визуальные эффекты. Это также работает для интерфейсов мобильных приложений: чистый дизайн с большими кнопками делает использование мобильных устройств совершенным.
Яркость
Цвет — другой классный плюс в флэт-дизайне. Яркие и насыщенные цвета выглядят привлекательными и чистыми, а отсутствие градиентов делает дизайн стильным. Более того, такие чистые цвета делают его более позитивным, презентабельным, flat-дизайн создает нужное настроение.
Недостатки
У флэта есть еще множество достоинств, но никакой дизайн не идеален, и мы не можем идеализировать его. Здесь некоторые недостатки flat-дизайна, которые мы обязаны упомянуть:
Неотзывчивость
Иногда отсутствие важных деталей или визуальных эффектов делает процесс создания дружеского для пользователя интерфейса сложным, и это в целом делает весь дизайн неотзывчивым. Не всем пользователям флэт кажется комфортным, потому что может быть сложным найти элементы на веб-странице, на которые ты должен кликнуть или нажать на экране мобильного телефона, потому что они не интерактивны.
Проблемы с типографией
Как упоминалось ранее, не всякий шрифт может подойти flat-дизайну. Иногда такой насыщенный шрифт с острыми краями выглядят действительно сбалансировано и стильно. Однако, в том случае, если шрифт выбран неверно, это может разрушить весь дизайн. Ты должен действительно хорошо чувствовать какие шрифты подходят для флэта а какие нет. Недостаток опыта делают выбор шрифта очень трудным.
Слабые визуалы
Из-за ограничений в использовании эффектов, цветов и шрифтов, флэт может выглядеть слишком простым и холодным. Его минималистичность может также стать его главным недостатком — другой flat-дизайн в итоге выглядит точно так же, как и ваш. Поэтому очень сложно сделать ваши иконки или веб-страницы отличными от чужого дизайна, потому что вы используете те же самые упрощенные формы, ограниченные цветовые палитры и аналогичные шрифты. В результате, со временем flat-дизайн может стать скучным.
9. Будущие тренды flat-дизайна
Нельзя сказать, что flat-дизайн полностью сформировался и остановился в своем Может быть, это из-за его недостатков, упомянутых выше, флэт стремится к развитию и изменению, приобретению новых особенностей и усилению визуальной выразительности.
Если ты внимательно посмотришь последний пример флэт-дизайна, ты можешь заметить что он действительно постепенно от своих строгих инструментов и начинает добавлять тонкие эффекты , такие как: градиенты, тени, освещение и другие визуальные эффекты.
Эти мелочи придают flat-дизайну некоторой глубины, при этом не перегружая деталями, как это делают в скевоморфичном дизайне.Эти незначительные улучшения делают флэт более отзывчивым и удобным, а также привносят свежий взгляд, делая флэт более гибким и универсальным.
Таким образом, флэт не теряет своих особенностей, но становится более интересным, гибким — он действительно становится лучше.
Выводы
Таким образом, мы обсудили некоторые факты из истории флэт-дизайна, и поговорили о цветах, формах и типографике. Мы рассмотрели разные точки зрения, остановились на достоинствах и недостатках флэта и узнали некоторые главные принципы создания хорошего дизайна.
Я надеюсь, что вы почерпнули для себя новую информацию из этой статьи или хотя бы нашли ее интересной. Вы обязаны попробовать создать флэт-дизайн, если вы не делали этого прежде.
В конце концов, что еще следует упомянуть о flat-дизайне?
Если вам действительно нравится флэт с его острыми краями, сочными цветами и хрустящими шрифтами, его чистоту и минималистичность, то действуйте!
Это в тренде, но, как и со всяким другим графическим стилем, не ограничивайтесь одной техникой. Если флэт в тренде, это не значит, что в свем проекте вы не можете использовать другие стили. Скевоморфизм со своими крошечными деталями и текстурами тоже может стать хорошим решением. Главное, помните, что дизайн свой для каждого проекта, он должен выражать его дух, цель, сущность, оставаясь при этом удобным и функциональным. Вперед!
Источник: design.tutsplus.com
Перевод: команда webdesign2.ru
Что я думаю о плоском дизайне
Плоский дизайн, Metro-стиль, flat design, flat UI — определенно мир сошел с ума. Если бы пару-тройку лет назад мне показали вот такую подборку сайтов 25 Best Examples of Flat UI Design Websites, я бы сказала, что их откопали на какой-то жутко древней помойке типа «10000 бесплатных шаблонов сайтов». Однако се ля ви! Это новейшие дизайны современных сайтов в мега-трендовом нынче стиле flat design.
С подачи Microsoft Metro-стиль вдруг стал настолько популярен, что даже многие уважаемые и известные веб-дизайнеры перекроили свои красивые блоги на нечто предельно лаконичное и жутко скучное 🙁 Вы только посмотрите этот видео-ролик, в котором мелкомягкие предлагают свое видение нашего недалекого будущего.
Как по мне, так больше смахивает на стерильный кабинет стоматолога. Жуть!
Существует мнение, что мы живем в мире маятников. Сегодня туда качнет, завтра обратно. Был плоский и убогий дизайн сайтов времен Windows 95, потом появился богатый на всевозможные свистелки и перделки в стиле web 2.0, а сегодня снова маятник качнулся в сторону упрощения и минимализма.
А где же мой любимый гранж и ретро стиль? Неужели позабыт заброшен, как неактуальный? Не думаю. И дело даже не в маятнике, который по законам логики когда-нибудь качнется снова в сторону скевоморфизма или еще чего покруче. Просто не всем и не всегда нужен этот новомодный плоский дизайн. Например, для оформления портфолио дизайнера или фотографа он совершенно неприемлем, я считаю. Это серость и убогость.
Я думаю, что изначально идея плоского дизайна была основана не на удобстве пользователя, как это стараются преподнести его сторонники, а банальной проблемой адаптации богатых на текстуры и градиенты фонов и иконок под различные размеры мобильных девайсов. Куда проще адаптировать плоский элемент, нежели блестящую кнопку-конфетку. И все! Все остальное — бла-бла-бла… и не более того.
Лично мне просто скучно рисовать что-то плоское. И пока что мои заказчики не требуют именно плоский дизайн, что весьма радует. И я не боюсь быть не в тренде. Каждому, как говорится, свое. Поживем — увидим, куда еще качнет маятник 🙂
А как вы относитесь к плоскому дизайну сайтов?
UPD от 20.11.2014: Я передумала 🙂 Что я думаю о плоском дизайне сегодня.
Язык дизайна IBM — плоский стиль
Плоский стиль — это самый смелый и наиболее графический стиль иллюстраций, используемый в IBM. В виде название предполагает, что плоский стиль использует основные геометрические формы для создания людей, предметы, места и даже идеи. Также требуется продуманное нанесение цвета. и тон, чтобы очерчивать формы восхитительными и интересными способами. Пожалуйста примите к сведению следующие рекомендации при создании иллюстраций в плоском стиле.
Мы создали стартовый набор Adobe Illustrator, который вы можете использовать, чтобы повысить свои навыки в создании убедительных иллюстраций, связанных с брендом.В нем вы найдете правильно нарисованные сетки для иллюстраций в плоском стиле, руководство по анатомии, лежащей в основе стиля, и основной набор простых элементов, которые вы можете использовать или рекомбинировать, чтобы сформировать свое собственное повествование с иллюстрациями. В набор входит вдохновляющая галерея примеров, демонстрирующих техники, которые вы можете использовать в этом стиле. Эти примеры не являются библиотекой готовых произведений искусства; они предназначены исключительно для того, чтобы помочь вам в исследованиях. Используйте их, чтобы изучить и проанализировать технические аспекты этого восхитительно смелого стиля.
Объекты на иллюстрациях в плоском стиле должны использовать основные геометрические формы в качестве фундамент. Иллюстратор может эффективно нарисовать практически любой объект или сцену с помощью искусно комбинируя квадраты, круги, прямоугольники и треугольники.
Два квадрата и два круга, чтобы сделать глаз.
Два круга и один квадрат в форме сердца.
Размер и интервал
Все объекты в плоской иллюстрации должны быть не менее 8 пикселей в ширину или высокий. Это измерение очень важно, так как используйте форму тоньше или короче. будет отображаться как линия и изменит характер вашей иллюстрации.Точно так же любое отрицательное пространство или расстояние между фигурами также должно быть минимальным. размером 8 пикселей.
Построение 2х Сети, базовая сетка для плоского стиля была установлена на 8 пикселей, в отличие от 4 пикселей для сетка стиля линии. Этот метод гарантирует, что ваш минимальный размер формы и интервал не менее 8 пикселей, что также поможет убедиться, что ваши иллюстрации не становитесь слишком переполненными и занятыми.
Иллюстрации в плоском стиле должны быть созданы с использованием функции «привязки к сетке». в Adobe Illustrator.Этот параметр гарантирует, что точки вдоль вашего рисунка можно привязать к линиям сетки под вашей линией. Расположение сетки line дает точную и продуманную эстетику, которая жизненно важна для любого IBM иллюстрация.
Убедитесь, что точка привязки четко прилегает к пересекающимся линиям сетки.
Не забывайте использовать «привязку к сетке», иначе это может привести к смещению точек привязки.
При наложении фигур должна быть безопасная область не менее 8 пикселей, чтобы объекты четко пересекаются друг с другом.
Используйте четко расположенные формы с разделением не менее 8 пикселей.
Не используйте случайно размещенные фигуры с разделением менее 8 пикселей.
Объекты в плоской иллюстрации должны быть построены с использованием основных геометрических фигур. Иллюстратор может эффективно нарисовать практически любой объект или сцену, искусно объединение квадратов, кругов, прямоугольников и треугольников. Этот пример показывает лежащая в основе геометрия чертежа.
Используйте стандартные углы — предпочтительны 15 °, 30 °, 45 °, 60 °, 75 ° и 90 °.С использованием эти стандартные углы помогут вашим иллюстрациям выглядеть последовательными. Хотя вы можете использовать любой угол, мы рекомендуем придерживаться стандартных предлагаемых углов здесь.
Создавайте кривые, используя сетку в качестве ориентира, и используйте четверть круга, полукруга и, по возможности, полные круги, чтобы получить чистые и простые изогнутые формы. Следование этому руководству поможет обеспечить эстетичный вид.
По возможности используйте четкие и правильные кривые.
Не используйте неправильные кривые, если их можно избежать.
Органические кривые Безье могут быть использованы для придания вашему дизайну большего реализма и характера. иллюстрацией, но ее следует использовать намеренно и точно. Основные формы всегда следует закладывать фундамент и использовать для заземления более неровных кривые.
Закругленные углы и размещение
В Adobe Illustrator вы можете закруглить углы углов для плавного и контролируемый взгляд. Вот некоторые характеристики, которые следует использовать при применении радиуса к ваш объект.
Вложенные линии этой кривой должны оставаться на одинаковом расстоянии с увеличением радиуса.
Избегайте использования угловых углов разного радиуса во вложенной конструкции.
Каждый стиль иллюстрации имеет немного другое выражение цвета в зависимости от характеристики используемых элементов. При наложении форм на плоскости стиля иллюстраций, необходимо различать формы, которые часто опираются на использование различных техник штриховки. Для общих подходов к цвету, пожалуйста, посетите иллюстрацию советы и техники страница.
Градиенты и заливка
Градиенты могут быть эффективным способом придания большей точности вашей иллюстрации подразумевая глубину, размер и движение.Они также могут быть эффективными и необходимые средства для создания четкости между соседними формами.
В большинстве случаев рекомендуется использовать непрозрачные формы и избегать использования световые эффекты, такие как прозрачность и умножение. Этот метод помогает обеспечить одинаковые цвета на всех наших иллюстрациях. Эффекты прозрачности все еще могут подразумевается тщательным использованием образцов из палитры или использованием градиентов где один из образцов сливается с фоном.
набросков, нарисованных от руки, и векторных изображений в плоском стиле
Использование правильного стиля или языка для вашей иллюстрации является ключевым моментом. Узнайте, как различия между набросками, нарисованными от руки и векторными стилями могут повлиять на ваше сообщение.
Изображение на обложке через cosmaa
Иллюстративный дизайн намного старше графического дизайна. Действительно, узоры на древних сосудах появились раньше Пола Рэнда примерно на 30 000 лет. Теперь, когда у нас есть компьютеры, которые помогают нам создавать векторы и достигать идеальной геометрии, мы можем использовать различные стили для формирования наших дизайнов.Вариантов практически безграничны, поэтому нам следует подумать о том, что сообщают эти стили.
Два обычно независимых стиля, которые мы можем сравнить: рисованная иллюстрация и более плоская векторная иллюстрация. Мы рассмотрим, как они представляют определенные типы дизайна, а также можем усилить сообщение с помощью игривого, нарисованного самодельного эстетического подхода или сдержанного и прямого подхода. Затем мы узнаем, как сочетание этих двух стилей может поддерживать друг друга.
Векторная иллюстрация
В векторной иллюстрации формы и символы дизайна являются упрощенными представлениями, такими как значки, с помощью компьютера для создания определенных краев и точных кривых.Возможно, вы помните революцию в плоском дизайне, произошедшую несколько лет назад, когда многие производители телефонов и компьютеров перешли на плоский стиль пользовательского интерфейса, а не на скевоморфный стиль, и дизайнеры приложений последовали их примеру.
Эта идеология переносится на иллюстрацию, где мы тщательно разбираем элементы до основных форм. Цвета могут стать более важными при использовании плоского стиля. UX-дизайн основан на этом взаимодействии, упрощении информации, чтобы она была очень понятной и универсальной.
Чтобы превратить плоские векторы в дизайн, дизайнеры накладывают геометрические фигуры, которые могут варьироваться от простых до очень сложных.Это очень современный стиль, уходящий корнями в те же принципы деконструктивизма, что и абстрактная геометрия.
Изображение предоставлено Bloomicon
Для прямого общения, например, с дизайном интерфейса или иллюстрацией учебного дизайна, плоский стиль поможет вам общаться с большим количеством людей с большей ясностью. По мере того, как мы начинаем видеть иконографические шаблоны в используемых нами устройствах, и все больше отраслей используют эти шаблоны, развивается язык.
Плоский векторный стиль поможет сделать ваше сообщение деловым, с четкой тематикой и простой цветовой палитрой.Вы также можете добавить тонкие, но определенные тени и блики, чтобы добавить глубины. При использовании с более игривыми изображениями вы можете создавать более живые значки.
Рисованный стиль
Рисованный стиль — это другой конец иллюстрации. Независимо от того, нарисован ли он от руки и используется в пиксельном дизайне или сделан на компьютере с помощью векторов, он передает более игривую эстетику или самодельный стиль.
Рисунок (извините) из увлечения приключениями на открытом воздухе, Walking Designs создает ряд иллюстративных брендов для клиентов, от закусок до курортов.Их лента в Instagram — отличный способ увидеть процесс набросков идей на различных носителях с помощью различных ручек и карандашей, прежде чем создавать более совершенные иллюстрации. Круто то, что вы можете видеть, насколько усовершенствованные или неочищенные идеи превращаются в готовый продукт.
В этой обстановке схематичный стиль поддерживает приземленную атмосферу «сделай сам», например, почерк мамы на пакете домашних закусок.
Мы можем видеть стиль рисования, используемый в рекламе. Это может быть дикая типографика, чтобы показать нацарапанное сообщение, или динамические графические элементы, которые добавляют движение и характер.
https://www.instagram.com/p/BZzOPcCgm0M/
На этой обложке книги Адама Дж. Курца мы видим рукописное название, подкрепленное рваной бумагой, что говорит о веселом, но измученном состоянии. Это соответствует и поддерживает предмет, поскольку творческая карьера может быть найдена в различных состояниях игрового беспорядка (или бедствия).
В редакционном дизайне для печатных и онлайн-журналов добавление рисованных графических элементов было популярно на протяжении различных периодов дизайна, но сейчас особенно благоприятное время для «прославленных каракулей».Такие художники, как Бифф, превратили рисунок в дизайн, пользующийся уважением в отрасли.
Смесительная установка с рисованной иллюстрацией
Если плоская иллюстрация похожа на застегнутый на все пуговицы современный профессионал, рисованный стиль может добавить некоторого блеска бедрам и привнести плоский стиль из его оболочки. Когда они собираются вместе, получается более динамичное объединение, которое может пересекать жанры для передачи большего количества идей.
Иллюстратор Дэниел Кларк добавляет структурные формы из архитектуры к своим геометрическим плавным формам, смешивая рисунок и живопись с компьютерным дизайном в журналах и афишах мероприятий.
https://www.instagram.com/p/BDsj-ANGItA/
Добавление текстур или качества наброска к определенным элементам иллюстрации придаст ей энергию или действие, которое может усилить ее. Антонио Уве использует текстуры, чтобы превратить свои макеты простых форм и цветов в нечто среднее между дизайном в стиле Мемфис и плоской иллюстрацией в стиле модерн. У них есть учебная основа, но с большим количеством визуальных элементов внутри.
Знакомство с тем, как стили взаимодействуют друг с другом, позволяет использовать их в качестве рецептов, чтобы избавиться от догадок в новых проектах.И наоборот, вы можете поиграть со стилями таким образом, чтобы удивить зрителя, смешивая сообщения. Саркастическое заявление с обучающей или консервативной атмосферой делает заявление немного смешнее. Возьмите это оттуда и продолжайте расширять свой арсенал визуального языка.
Узнайте больше о стилях и техниках в этих статьях:
Дэвид Хокни (р. 1937)
«Я подумал, что это интересная вещь, с которой можно поиграть, стиль как предмет … холст имел форму фигуры, так что вам не нужно было иметь иллюзионизм в картине, потому что иллюзия находилась снаружи в картине. форма холста; стиль настоящей картины может быть полностью плоским.Это просто очень абстрактная фигура, составленная из очевидных образных соединений небольшого прямоугольника поверх большего, который, когда он лежит на мольберте, выглядит как фигура; основанием мольберта становятся ножки—D. HOCKNEY
«… четыре картинки, которые я прислал, имели одно и то же общее название:« Демонстрация универсальности », а затем подзаголовок; каждая картина якобы была написана в разном стиле. Тогда я заинтересовался стилем. Я понял, что можно поиграть со стилем в картине, чтобы создать «коллаж», не используя разные материалы; можно было нарисовать что-то так в этом углу, а в другом — по-другому, и картине не нужно было единство стиля, чтобы иметь единство »
-D.ХОКНИ
«… большие работы 1961 года, которые я начал в 1960 году, — это работы, которые я осознал как художник»
-D. ХОКНИ
«Ибо он боролся в ужасных битвах.
В невидимых конфликтах с образами.
. Выведены из его заброшенной пустыни.
Фигура в плоском стиле (1961) — важная ранняя работа Дэвида Хокни, впервые показанная на выставке «Молодые современники» Королевского общества британских художников в 1962 году.Фигура состоит из двух полотен, формально перекликающихся с головой и туловищем, и пары ножек мольберта. На грубо сплетенном холсте, выкрашенном плоским кирпично-красным цветом, лицо схематично изображено опущенной белой линией и серым кружком; тело раскрашено в три широкие полосы красного, черного и бордового цветов и содержит сердце в стиле игральных карт и белые очертания пары рук, руки которых покрывают стилизованный набор гениталий. Шквал белой краски на животе в стиле Твомбли, кажется, указывает на это чувство мастурбационного стыда, в то время как фраза, адаптированная из стихотворения Уильям Блейк Уризен — «Пламя неистового желания» — тихо написана в верхнем правом углу, дальше. подчеркивая подавленную либидинозную энергию фигуры.На выставку «Молодые современники» Хокни представил четыре работы: как он объясняет, «четыре присланные мною картины имели одно и то же общее название: Демонстрация универсальности , а затем подзаголовок; каждая картина якобы была написана в разном стиле. Тогда я заинтересовался стилем. Я понял, что можно поиграть со стилем в картине, чтобы создать «коллаж», не используя разные материалы; можно было нарисовать что-то так в этом углу, а в другом — по-другому, и картина не нуждалась в единстве стиля, чтобы иметь единство »(Д.Хокни в Н. Стангосе (ред.), Дэвид Хокни Дэвидом Хокни , Лондон, 1976, стр. 66). Это было основополагающим творчеством художника. Чайная живопись с фигурой в иллюзионистском стиле (1961) сейчас находится в коллекции Тейт, а Швейцарский пейзаж в живописном стиле (1961, переименованный 1962 год Бегство в Италию — Швейцарский пейзаж ) находится в Кунстпаласте Дюссельдорфа. Фигура в плоском стиле инкапсулирует этот экспериментальный период в творчестве Хокни и в своей новаторской структуре становится чем-то вроде автопортрета; работа воплощает ненасытное живописное любопытство художника, а также связана с его культовыми картинами начала Love Paintings в своем выражении тайной чувственности, которую он хотел исследовать более открыто после своего первого визита в Америку в 1961 году.
В то время как A Demonstration of Versatility был именно таким — молодой художник, гордо демонстрирующий свою изобретательность и адаптируемость, — эти работы оказались больше, чем процветание художественной школы. В 1965 году Хокни вспоминал, что он «намеренно пытался доказать, что я могу создать четыре совершенно разных типа картин, как Пикассо. У всех них было подзаголовок, и каждый был выполнен в разном стиле, египетском, иллюзионистском, плоском, но, глядя на них позже, я понял, что отношение в основном такое же, и вы приходите немного видеть себя там »(Д.Хокни, цитируется по М. Ливингстон, Дэвид Хокни, , Лондон, 1981, стр. 41). Он осознал парадоксальную последовательность своего проекта: выбор цитирования вместо того, чтобы сразу заимствовать какой-либо конкретный стиль, конечно же, является стилем сам по себе. Освободившись от идеализированной эмоциональной самопроекции абстрактного экспрессионизма, преобладавшей в то время, Хокни заявил, что контролирует стиль своей живописи не меньше, чем выбранный им предмет. Его восторг от исследования предметности своего холста и мольберта — основных инструментов художника — ощутим: исследования иллюзионизма, пространства и поверхности на плоскости картины, очевидные здесь, станут лейтмотивом его художественной карьеры.Как пишет Хокни, «холст имел форму фигуры, так что вам не нужно было иметь иллюзионизм в картине, потому что иллюзия находилась снаружи в форме холста; стиль настоящей картины может быть полностью плоским. Это просто очень абстрактная фигура, составленная из очевидных образных соединений небольшого прямоугольника поверх большего, который, когда он лежит на мольберте, выглядит как фигура; основой мольберта становятся ножки. (Деревянные ножки были добавлены, чтобы они выглядели как подставка для мольберта; они прикреплены к картине и лежат на стене.Мое волнение в то время было вызвано тем, как изображение было расширено за пределы подрамников самим мольбертом »(Д. Хокни в Н. Стангосе (ред.), Дэвид Хокни, Дэвид Хокни , Лондон, 1976, стр. 66- 67).
Помимо новаторского живописного формализма Хокни, личные коннотации «Рисунок в плоском стиле » также связаны с другим важным ранним произведением, его Love Paintings 1960 и 1961 годов. В этих работах, наиболее известными из которых являются . Мы, два мальчика, вместе цепляясь за (1961, Коллекция Совета по делам искусств), он исследовал гомоэротические темы в кривом эллиптическом стиле, цитируя строки Уолта Уитмена наряду с граффити в туалете и газетными вырезками и обращаясь к себе и своим любовным интересам через код пронумерованных инициалов.Отличительные черты этих крупномасштабных картин — фрагментарный текст, полосы теплых абстрактных цветов, стилизованные фигуры и конечности, а также иконографические сердечки святого Валентина — все это отображается в Figure in a Flat Style . Откровенное воскрешение Хокни гомосексуальной страсти в этих произведениях было смелым в то время: гомосексуальность был незаконным в Англии до 1967 года, и притворная анонимность этой серии, завершенной, когда Хокни еще учился на втором курсе Королевского колледжа искусств, произвела фурор. дерзкое заявление о восстании.Фигура в плоском стиле «Пламя неистового желания» приобретает аналогичную силу в контексте фигуры, скрывающей свои гениталии, намекая на разочарование и подавление. Хотя сексуальность никогда не была доминирующей темой работ Хокни, эти ранние мотивы были важным предшественником его более поздних картин. Он впервые посетил Лос-Анджелес в 1961 году и там обнаружил гедонистический новый мир открытости и гламура, который послужил источником вдохновения для многих из его самых знаковых работ 1960-х годов. Радуясь творческой свободе, Figure in a Flat Style готовит почву для одной из самых выдающихся карьер в британском искусстве: Хокни сочетает настойчивую материальность живописи и ее силу иллюзионизма, создавая триумф игривой изобретательности, которая также делает энергичным романтическое заявление о самоидентификации.
Полное руководство по плоскому дизайну
Легко сказать, что 2013 год пока что был годом плоского дизайна.
Даже Apple, являющаяся движущей силой тенденции скевоморфного дизайна на протяжении многих лет, пробует некоторый уровень плоского дизайна, когда в конце этого года выпускает iOS 7.
Так вы тоже готовы попробовать? Не знаете, как начать? WebdesignerDepot здесь, чтобы помочь с руководством по ресурсам для плоского дизайна. Мы составили гигантский список всего, что связано с плоским дизайном, от бесплатных наборов пользовательского интерфейса до цветовых палитр и вариантов типографики.
Если вы хотите испытать плоский дизайн или поплавать немного глубже, у нас есть все, что вам нужно для начала, от готовых инструментов до руководств для мастеров своими руками.
Плоский дизайн 101
Плоский дизайн — это стиль, в котором отсутствуют «уловки», которые дизайнеры часто используют для создания реалистичного или трехмерного эффекта. Стиль характеризуется общим минималистичным внешним видом, яркими, но приглушенными цветами, жирной — часто ретро — типографикой и простыми элементами пользовательского интерфейса, такими как кнопки или значки.
При использовании плоского дизайна избегают таких украшений, как скосы, тиснение, тени, градиенты или искусственные текстуры.
Этот стиль дизайна очень популярен для простых веб-сайтов, включающих всего несколько страниц, и для мобильных приложений. Плоский дизайн также подвергался критике за его общую простоту, использование иллюстраций (которые некоторые называют карикатурными) и стиль пользовательского интерфейса, который может быть трудным для понимания некоторыми пользователями.
Анимация обычно не используется в проектах с плоским дизайном, а большие изображения используются в.В минималистичных схемах дизайна дизайнеры часто оставляют достаточно места для контента, позволяя ему рассказывать историю в простой и прямой форме.
Несколько других тенденций начали проявляться в плоском дизайне: «почти плоский дизайн», «дизайн с длинными тенями» и переоценка всегда популярного минималистского дизайна.
«Почти плоский дизайн» основан на плоском дизайне, но может включать некоторую степень минимального эффекта, например, простую тень внутри элемента или базовый градиент.
«Дизайн с длинными тенями» используется почти исключительно для значков и представлен изображением в рамке значка, имеющей тонированную область, выходящую за пределы изображения; длинные тени обычно падают под углом 45 градусов и имеют те же характеристики, что и остальная часть схемы плоского дизайна.
Плоский дизайн также вернул акцент на минималистский дизайн, даже для дизайнеров, не использующих методы плоского стиля. В рамках общей тенденции был сделан новый акцент на пустом пространстве; цвет, четкие формы и линии; и возвращение к простой и базовой типографике.
Комплекты пользовательского интерфейса
Комплекты пользовательского интерфейса— отличный способ начать работу с плоским дизайнерским проектом.
Комплектымогут сэкономить ваше время — что важно при следовании тенденциям — благодаря заранее разработанному пакету деталей.Большинство наборов пользовательского интерфейса представлены в формате файлов Adobe Photoshop (PSD) и полностью редактируются, если вы знакомы с программой.
Наборы, представленные ниже, варьируются от простых бесплатных до более всеобъемлющих для загрузки с вариантами лицензирования. Количество доступных наборов пользовательского интерфейса в плоском стиле растет с каждым днем; мы составили список, который включает несколько различных стилей.
При выборе набора пользовательского интерфейса не зацикливайтесь на цвете или цветовой палитре. Большинство наборов включают в себя пригодные для использования цвета, если вы не имеете в виду палитру, но позволяют изменить общую цветовую схему всего за несколько щелчков мышью.Экономьте время, создавая пригодные для использования образцы перед открытием набора, чтобы вам не приходилось вручную вводить значения цвета для каждого изменения. Также рассмотрите возможность использования вашей цветовой палитры так же, как дизайнер набора использовал образцы по умолчанию, отражая выбор цвета по тону, насыщенности и контрасту для элементов в комплекте.
Полулегкий UI (бесплатно)
Featherweight UI — это простой, готовый к работе с сетчаткой глаза комплект, который включает в себя несколько четких элементов, включая меню, прокрутку фотографий, карту, простые значки и виджеты прокрутки.Несмотря на то, что комплект не очень большой, он имеет элегантный стиль и обыгрывает более ретро-цветовую тему, часто связанную с плоским дизайном.
Polaris UI kit (бесплатно)
Еще один комплект от Designmodo в более темном стиле. Этот комплект содержит множество кнопок и панелей, которые отражают внешний вид плоского пользовательского интерфейса Windows. Хотя Polaris содержит детали, выполненные в плоском стиле, он также включает некоторые элементы в скевоморфном стиле.
Erste UI kit (бесплатно)
Этот простой набор пользовательского интерфейса содержит несколько основных элементов, таких как кнопки входа в социальные сети, меню и медиаплеер.Цвета характерны для плоского дизайна, с использованием палитры основных оттенков.
FlatUI kit (бесплатно)
Набор, разработанный Freepik.com для WebdesignerDepot, содержит большое количество элементов, от навигации до раскрывающихся меню, инструментов для обмена в социальных сетях и модулей электронной коммерции.
Flat UI (бесплатно)
Этот бесплатный комплект от Designmodo — одной из первых дизайнерских групп, полностью охваченных трендом плоского дизайна — представляет собой яркую стартовую часть.В комплект входят сотни элементов, включая кнопки, значки, образцы цвета и пункты меню.
Flat UI kit (бесплатно)
Набор плоских виджетов пользовательского интерфейсаRiki Tanone представляет собой забавный небольшой пакет, содержащий несколько более собранных частей: диаграмму, медиаплеер, колесо задач и счетчик. Это отличный стартовый инструмент для того, чтобы представить, как объединить более простые части пользовательского интерфейса в более сложные.
Metro UI kit (бесплатно)
Комплект Metro UI — это красочный комплект, воплощающий в себе концепцию квартиры, которая была заново представлена в Windows phone.Цвета и стиль напоминают интерфейс телефона с множеством красочных блоков и простой типографикой. В комплект входят календарь, статистика, диаграмма, значки, меню и элементы поиска.
Monotone flat UI kit (бесплатно)
Хотя использование разнообразных ярких цветов является популярным выбором для многих дизайнеров, использующих плоский дизайн, однотонные цветовые палитры одинаково характерны для этой тенденции. Этот набор пользовательского интерфейса от Себастьяна Шеера включает в себя несколько простых элементов и отличную градацию цвета.
Vertical Infinity (бесплатно)
Vertical Infinity от CSS Author — один из самых больших доступных бесплатных наборов, готовый к работе с сетчаткой. Управляемый комплект включает в себя все, от раскрывающихся меню до кнопок для формирования элементов, виджетов и значков социальных сетей. Это простой стиль, без особых дополнений, но его легко использовать практически в любом приложении.
Lil UI kit (6 долларов)
Этот набор пользовательского интерфейса от Lil Squid Design — почти украденный с таким количеством согласованных частей, включая 18 категорий элементов.Векторный набор настраивается и был разработан для визуальной простоты и единообразия.
Flat UI kit (19 долларов США)
Комплект плоского пользовательского интерфейсаIdeation Pro включает в себя несколько приятных простых элементов — значки, поля форм и кнопки, которые помогают запустить проект. Элементы идеально сочетаются друг с другом, имеют яркие цвета и отлично подходят для простого мобильного проекта.
Flat UI pro (от 39 долларов)
Flat UI Pro — это комплексный набор пользовательского интерфейса Designmodo с плоским дизайном.Комплект разработан для Twitter Bootstrap и включает полные файлы PSD для настройки. Комплект полностью отзывчивый; содержит массу элементов, иконок и глифов; образцы цвета и готов к отображению сетчатки.
Flat UI PSD (5 долларов США)
Хотя этот комплект выполнен в плоском стиле, некоторые элементы можно считать «почти плоскими». Например, кнопки имеют светлую тень позади текста, чтобы обеспечить немного больший цветовой контраст.
Square UI (от $ 39)
Square UI — это комплексный набор пользовательского интерфейса от Designmodo с большим набором кнопок и элементов.Этот набор отличается от некоторых других, потому что он нарушает традицию цветовой палитры и использует гораздо более темную схему. В комплект входят элементы, навигация и сотни компонентов. Комплект загружается в редактируемом формате слоев для настройки и включает светлые и темные цветовые палитры с предварительно созданными файлами образцов. Этот продуманный комплект меньше похож на комплект, чем многие другие варианты, и готов к отображению сетчатки.
Плоские иконки
Иконки в плоском стиле есть повсюду, и вы можете бесплатно получить многие из этих наборов в самых разных местах.
Как и наборы пользовательского интерфейса, большинство пакетов значков поставляется в формате PSD, что упрощает настройку значков.
Многие значки разработаны в соответствии со спецификацией и стилем для приложений мобильных устройств. Эти значки, однако, имеют и другое применение, и из них могут быть отличные кнопки для веб-сайтов.
При выборе набора значков ищите наборы, которые содержат значки в вариантах размера, которые соответствуют вашим потребностям. В то время как некоторые комплекты нарисованы как векторные фигуры, другие могут иметь заданные размеры, что может привести к потере качества при использовании слишком большого размера.
40 плоских иконок социальных сетей (бесплатно)
Этот всеобъемлющий набор значков социальных сетей включает почти все популярные сети и веб-сайты в красивый набор значков, в котором используется как плоский стиль, так и дизайн с длинными тенями. Значки установлены таким образом, чтобы их было легко идентифицировать, и имеют четкий и отчетливый цветовой контур. Каждый значок также доступен в четырех размерах — 32, 64, 128 и 256 квадратных пикселей. Хотя вы можете настроить этот комплект, вряд ли вам это понадобится.
Freebie PSD — плоские иконки (бесплатно)
Эта простая загрузка включает сложные значки в плоском стиле.Эти значки содержат немного больше деталей и стиля, чем большинство плоских элементов. Этот комплект доступен только для загрузки на ПК.
12 плоских иконок SEO (бесплатно)
Этот набор иконок социальных сетей — один из самых ярких. Набор, разработанный Владиславом Карповым для WebdesignerDepot, содержит 12 значков, которые демонстрируют все, от производительности SEO до копирайтинга и веб-аналитики, которые используют как плоский стиль, так и содержат несколько длинных теней. Этот комплект отлично подойдет для дизайна портфолио или сайта агентства.
Бесплатный набор плоских иконок (бесплатно)
Хотя многие схемы плоского дизайна полагаются на яркие визуальные эффекты, некоторые дизайнеры предпочитают делать значки более простыми, чтобы они не конкурировали с другими элементами и частями общего дизайна. Этот небольшой набор значков (9 значков) содержит элементы с низким содержанием цвета и низким контрастом для простоты использования.
Плоские иконки файлов (бесплатно)
Каждому дизайнеру, создающему сайт, включающий загружаемые файлы, нужен набор значков файлов.Эта четверка значков представляет собой наиболее популярные параметры файлов — загрузка, загрузка, настройки и диаграммы. Или вы можете изменить центральные значки для своих пользовательских параметров.
Flat icons freebie (бесплатно)
Плоские значки с закругленными краями — одни из менее используемых значков. Этот набор делает именно это, сохраняя целостность плоского дизайна. В комплект входят девять значков для общих элементов, таких как погода, почта и календарь.
Плоские иконки социальных сетей (бесплатно)
В наши дни ни один сайт не обходится без набора ссылок на социальные сети.Набор Designmodo содержит 35 кнопок социальных сетей для различных популярных сетей. Цветовая схема яркая, а цвета значков соответствуют сетям, с которыми они связаны, создавая немедленную визуальную подсказку.
PSD плоские социальные иконки (бесплатно)
В этом наборе из 16 иконок социальных сетей используются как плоский стиль, так и методы дизайна с длинными тенями. Этот набор также выходит за рамки идеи квадратных значков, представляя собой сочетание круглых и квадратных форм со слегка закругленными углами.
Плоские иконки IconShock (от $ 19)
Это может быть самый большой набор плоских иконок.В этом наборе, состоящем из 3600 значков трех размеров, есть значки практически для всего. Он включает в себя основные элементы, типы файлов, формы и общие элементы. Чего ему не хватает, так это популярных иконок социальных сетей. Это также бесплатно для личного использования.
FlatIcons (от $ 30)
FlatIcons с различными опциями, включая несколько форматов файлов, является одним из самых простых и всеобъемлющих наборов на рынке. Каждый значок настраивается по форме, размеру и масштабу. Наборы построены таким образом, что каждый значок идеально сочетается каждый раз, и имеют отличную встроенную функцию поиска, чтобы вы могли быстро найти нужный значок.Файлы распространяются как в виде копируемых значений CSS / unicode, так и в формате PSD.
Плоские элементы прочие
Иногда вам нужны элементы, которых нет в других наборах. В наши дни плоский стиль используется практически для всего, включая эти полезные инструменты.
Шаблоны продуктов Apple (бесплатно)
Готовитесь представить новый дизайн и хотите продемонстрировать его внутри устройства? Шаблон Apple от MediaLoot выполнен в плоском стиле и может использоваться разными способами.
Плоские веб-элементы E-comerce (бесплатно)
Хотя плоский дизайн не был принят большим количеством сайтов электронной коммерции, простые сайты продаж могли бы выиграть от простых кнопок в этом наборе. В этом наборе достаточно базовых элементов, от модуля чата до кнопок корзины и оформления заказа, чтобы начать работу или использовать его для интернет-магазина.
Плоские кредитные карты (бесплатно)
Важно обращать внимание на каждую деталь при выборе схемы дизайна, даже такой маленькой, как эти значки кредитных карт.Ключевым моментом является поддержание единообразия, эти простые кредитные карты узнаваемы и вписываются в любой плоский дизайн.
Пользовательский интерфейс списка друзей (бесплатно)
Создайте аккуратный и организованный список с помощью этого UI PSD, разработанного для интерфейса iPhone. Коралловый цвет довольно распространен в плоском дизайне, как и простая типография без засечек и значки.
Радиальный график (бесплатно)
Диаграммы и графики могут быть одними из самых сложных элементов для создания с нуля.Этот PSD радиального графика — отличный инструмент для начала работы. Цвета и размеры настраиваются и легко меняются благодаря этому простому векторному дизайну.
Форма регистрации (бесплатно)
Плоский дизайн популярен для дизайна веб-сайтов, рекламирующих что-то, что скоро появится, от полноценного сайта до мобильного приложения. В обоих случаях это делает использование формы регистрации популярным, что упрощает уведомление пользователей о запуске сайта или приложения.
Плоские рамки для браузера (5 долларов США)
Создайте пользовательский фрейм браузера для скриншотов в плоском стиле.(Это становится обычным явлением для дизайнеров и сайтов, которые хотят продемонстрировать будущие приложения.) Этот комплект содержит 10 различных стилей фреймов браузера в векторном формате, которые можно использовать как есть или настроить для совершенно другого внешнего вида.
Плоский шаблон флаера ($ 6)
Большинство веб-сайтов включают в себя сопутствующие товары, от визитных карточек до плакатов или листовок. Шаблон флаера с плоским дизайном поможет вам преобразовать план веб-дизайна в пригодный для использования печатный образец в том же плоском стиле.Листовка поставляется в виде готового к печати шаблона с цветами CMYK и обрезкой под обрез.
Ароматная визитка (6 $)
Сопоставьте визитки с идеей, лежащей в основе той же схемы плоского дизайна на вашем веб-сайте. Шаблон визитной карточки Flavor имеет стандартный размер и готов к печати в формате CMYK. Цвета и шрифты могут быть подобраны к дизайну вашего сайта для идеального результата.
Таблицы цен (4 $)
Даже если основная цель вашего сайта — не продажи, но вы предлагаете продукты или подписки, может быть важно иметь таблицы цен.Этот набор монотонных таблиц дополняет множество других элементов плоского дизайна и является элементом, который не входит во многие комплекты пользовательского интерфейса. Этот конкретный комплект создан для Twitter Bootstrap.
WordPress шаблоны
Не обязательно создавать отличный веб-сайт с плоским дизайном с нуля. Дизайнеры тем WordPress сразу же ухватились за эту тенденцию, и для загрузки доступно довольно много отличных платных и бесплатных тем.
Что хорошо в использовании готовой темы, так это то, что вы можете настроить и запустить свой дизайн и сайт практически в кратчайшие сроки.Качественные темы будут иметь чистый, четкий согласованный вид. Выберите покупку (или загрузку) темы, которая включает в себя все необходимое прямо «из коробки». Подумайте, должен ли ваш сайт быть отзывчивым, ему нужны функции или формы электронной коммерции, если вам нужно что-то, что предлагает настройку, готовую графику Retina, многостраничный или одностраничный дизайн и пакеты значков или включения. Составьте список желаний и потребностей, чтобы упростить поиск нужной темы.
Как правило, лучшие варианты, поддержка и гибкость приходят с премиальной (или платной) темой WordPress.Эти темы часто выглядят более профессионально, имеют более чистый код и предлагают поддержку, которой часто не хватает в бесплатных версиях. Однако бесплатные темы могут быть забавным и простым способом начать создание сайта. Хотя эти параметры темы могут быть ограничивающими и предлагать лишь небольшой набор опций, которые включают платные темы, они могут быть полезны.
Duena (бесплатно)
Эта простая тема, созданная для блогов, использует яркую кремовую цветовую палитру.
Fizz (бесплатно)
В этой отзывчивой теме в плоском стиле используются чистые линии и яркие цвета на чередующемся темном и светлом фоне.Некоторые фоновые изображения немного текстурированы.
Текущий (бесплатный)
Current идеально плоский во всех аспектах дизайна и разработан как переходная страница для нового продукта.
Attitude (бесплатно)
Эта простая и профессиональная тема в почти плоском стиле включает больше возможностей, чем многие другие бесплатные темы.
Bloq (бесплатно)
Bloq красиво использует плоский дизайн и плоские цвета (а некоторые значки даже имеют длинные тени).
Frontier (бесплатно)
Эта плоская тема ориентирована на минимализм и включает множество надстроек, таких как рекламные баннеры и настраиваемые меню.
MetroBlog (бесплатно)
MetroBlog использует яркие цвета и мозаику — характеристики плоского дизайна — но также включает поля градиентных цветов, которые делают эту тему блога почти плоской.
Viper (бесплатно)
Один из лучших доступных вариантов бесплатной электронной коммерции. Viper имеет большие полужирные поля для текста и четкую навигацию.
SimpleCorp (бесплатно)
Хотя эта тема имеет некоторые характеристики плоского дизайна, стиль более плоский (особенно обратите внимание на значки).
BirdFlat (бесплатно)
Гибкая тема блога с параметрами цвета и стилей заголовков.
SympalPress (бесплатно)
Эта бесплатная тема совсем не проста с красивыми формами, почти плоскими значками, яркими цветами и типографикой.
Тетрис (бесплатно)
Tetris использует простые стили блоков и карточки для простого дизайна сайта.Внешний вид отлично подходит для сайтов с отличными изображениями или визуальными эффектами.
Арго (40 долларов)
Argo использует мозаику и простую структуру, которая может работать как для портфолио, так и для бизнес-сайтов. Тема WordPress отличается четкими линиями и простыми пунктами меню с плоскими компонентами. Он доступен в трех цветовых вариантах — зеленом, оранжевом и синем — с монотонной палитрой.
Business Essentials (45 долларов США)
Эта простая, но классическая тема идеально плоская и отлично подходит для бизнеса, который находится на пике тенденций.Современный стиль прост и включает в себя все необходимое для бизнес-сайта, включая страницы профиля компании, значки социальных сетей, а также возможность печати и загрузки PDF-файлов.
Illustrate (45 долларов США)
Эта тема предназначена для портфолио и демонстрации. В теме используются четкие рамки и яркие цвета, характерные для плоского дизайна, для создания современного вида. Одна из замечательных особенностей этой темы — создание настраиваемой цветовой палитры на основе параметров портфолио. Тема полностью адаптивна и включает длинный список доступных опций.
Современное метро (40 долларов)
Для сайтов, работающих на WordPress, тема Modern Metro соответствует пользовательскому интерфейсу Metro. На макете представлены живые плитки, которые можно перемещать и настраивать. Тема адаптивна и имеет возможность настраивать цветовую палитру, различные диаграммы соответствия и набор из 1368 плоских значков.
Shift (35 долларов)
Shift — это современная яркая тема с множеством инструментов настройки. Цвета, гарнитуры и виджеты можно настраивать (включая форматы PSD).Плоский дизайн отличается четкостью и точностью до пикселей, он готов к работе с сетчаткой и отличается быстрым откликом.
Лосось и сливки (75 долларов США)
Эта тема — одна из самых острых. Его легко настраивать, а адаптивный дизайн готов к работе с сетчаткой. Встроенные цветовые палитры удивительно плоские, с использованием названия лососевого, синего или выбранного вами оттенка.
Конфеты (35 $)
Эта полностью адаптивная тема разработана для сайтов в стиле портфолио и использует яркие цвета.Чисто плоская тема также использует отличную палитру шрифтов с отличным внешним видом в настройках по умолчанию.
Альфи (40 долларов)
Эта тема отличается множеством возможностей с различными вариантами макета, цветами фона и набором из 361 значка, готового к работе с сетчаткой. Кроме того, тема включает простой генератор шорткодов и построена с использованием Bootstrap.
Biggie (7 долларов)
Color выделяет эту плоскую тему. Он простой, современный, отзывчивый и включает в себя несколько виджетов.Монотонная схема плоских цветов — приятный штрих, и это одна из немногих чисто одноцветных тем.
Bonbon (49 долларов США)
Часть того, что привлекает некоторых людей в плоском стиле, — это использование креативных иллюстраций и значков. Вот где на помощь приходит Bonbon. Он использует яркие цвета и забавный стиль в адаптивной теме с поддержкой Retina. Он даже поставляется с пакетом отличных иллюстраций значков, которые можно настроить.
Квартира (39 $)
Flat выглядит так, как и следовало ожидать от базового плоского дизайна без одной особенности.В высокой цветовой палитре используются приглушенные тона, а не некоторые яркие оттенки, характерные для плоского дизайна.
Новости (45 $)
Плакатам, которые часто пишут, понравятся новости, простая тема, в которой используются фото и текстовые карточки для индексации большого количества контента. Стиль простой и плоский, с яркими цветами и простыми иконками.
Кофе и сливки (40 долларов)
Эта одностраничная тема включает несколько опций и две опции навигации. Он полностью адаптивен и идеально использует тренд плоского дизайна.
Квартира Админ (18 $)
В этой плоской теме, предназначенной для бизнеса, есть множество форм, таблиц, настраиваемых страниц и интеграции элементов. Адаптивный дизайн полностью настраивается, а загрузка включает бесплатные обновления функций и поддержку.
Эскиз (40 $)
Мощная одностраничная тема, в которой используются несколько разных экранов, поощряющих прокрутку. Тема настраивается и включает в себя функции социальных сетей и контактную форму.Эта тема имеет много плоских характеристик, но ее можно отнести к категории почти плоских.
Showy (35 долларов)
Эта тема практически противоположна своему названию, с простым и современным интерфейсом.
Evolux (45 долларов)
Благодаря разнообразию форматов сообщений эта тема является отличным инструментом для демонстрации продукта или дизайна. В теме есть большие рамки изображений, простой и жирный текст.
Jobify (55 долларов США)
Jobify — это тема, созданная специально для создания рабочих мест с использованием модного плоского дизайна.Мощная, отзывчивая тема использует простую типографику, цвет и сетки и интегрируется с другими наборами инструментов для работы.
MetroFolio (40 долларов)
MetroFolio использует карточный макет метро, который стал ассоциироваться с плоским дизайном. Простая тема имеет простой в использовании интерфейс, настраивается и предназначена для портфолио.
FlatPack (55 долларов)
FlatPack включает в себя несколько шаблонов и вариантов для предприятий, желающих рассмотреть сайт, разработанный в плоском стиле.
Метролиум (45 долларов)
Эта тема отлично справляется с использованием цветных блоков в плоском и почти плоском стиле. У него много опций, и предварительный просмотр в реальном времени хорош.
Плоский портфель ($ 35)
В Flat Portfolio замечательно то, что он предназначен для отображения вашего портфолио в среде, готовой к сетчатке. Настраиваемая тема также адаптивна и включает неограниченное количество цветов и использование шрифтов Google.
Гипертекст (40 долларов США)
Это тема для дизайнеров или разработчиков, которым нужен дополнительный контроль, поскольку она имеет множество расширенных параметров администрирования с HTML5, CSS3 и полностью адаптивна.Гипертекст также полностью настраивается с точки зрения цвета, типа страницы и языка.
Предохранитель (45 $)
Поскольку Fuse разработан для творческих профессионалов, он изящный и фокусируется на изображениях, используя простые и красивые детали плоского стиля.
Минерал (45 $)
Цветовой оттенок изображений, которые используются на некоторых сайтах с плоскими схемами дизайна, является частью того, что вы найдете в Mineral. Тема включает гибкую галерею AJAX, адаптивный дизайн и множество скинов.
Чернила (49 долларов США)
Ink сочетает в себе отличное использование рамок изображений с цветами и стилем плоского дизайна. Анимация наведения работает отлично, а тема позволяет группировать изображения в виде слайд-шоу.
Amada (40 долларов)
Amada — это тема, воплощающая минималистичные идеалы плоского дизайна с простыми цветами и линиями. В теме также используется простая типографика с чистыми линиями. Он отзывчивый, готов к работе с сетчаткой и обладает исключительными эффектами прокрутки.
Планер (45 долларов)
Если вам нравятся иконки, то Glider — это тема для вас. Пакет содержит 960 векторных иконок, поддерживает сетчатку и поддерживает блог. Тема также поддерживает несколько языков.
Шестиугольная (40 $)
Эта почти плоская тема является основой отличного минималистичного сайта и имеет очень профессиональный внешний вид. Дизайн адаптивный и включает несколько вариантов макета, включая блоги.
Изумруд (40 долларов)
Если вы хотите на цыпочках перейти к плоскому дизайну и любите параллаксную прокрутку, Emerald для вас.Почти плоская тема проста и включает впечатляющие эффекты прокрутки и неограниченную цветовую палитру.
Кумаон (40 долларов)
Kumaon — это тема, созданная для бизнеса с инструментами для отличных отзывов и призывов к действию. Тема также включает 300 плоских иконок и несколько форм.
Анубис (40 долларов)
Для простой плоской темы Anubis обладает множеством функций, включая впечатляющую типографику и цвет прямо из коробки. Тема адаптивна, включает в себя множество опций и настроек, а также несколько шаблонов страниц.
Red Star (45 долларов)
Это одна из немногих тем, которая позволяет включать / выключать отзывчивость. Тема ориентирована на чистую, простую типографику и включает в себя красивые шаблоны страниц.
Лес (40 долларов)
Forest отлично выглядит и имеет надежный код для его поддержки. Тема работает с блоками в стиле виджетов, что упрощает перемещение элементов.
Панели (40 $)
Panes по умолчанию использует два очень популярных цвета плоского дизайна — бирюзовый и ярко-фиолетовый.Одностраничный дизайн настроен для Plug and Play, включает интеграцию с картами Google и позволяет настраивать цвета и шрифты. Эффект прокрутки в карточном стиле тоже довольно изящный.
Нова (45 $)
Nova — отличный пример того, как использовать новые шрифты в плоском дизайне. Все элементы в этой теме созданы с использованием ярких цветов, простых линий и минималистичной основы. Тема Retina-ready основана на Bootsrap и имеет множество вариантов настройки — каждый из основных цветов извлекается прямо из палитры основных принципов плоского дизайна.
Red Sky (40 долларов)
Red Sky — одна из тех тем, которые не похожи на тему. Визуальный макет отзывчивый и работает с яркими цветами и большими изображениями. Одностраничная тема представлена в трех стилях; все они имеют плоский дизайн.
Lambo (45 долларов)
Что касается темы фотографии, то больше всего намеков на плоский дизайн в Lambo можно увидеть в типографике и выборе цвета акцента. Простой выбор шрифтов с яркими цветами подчеркивает ощущение плоской поверхности.Однако с текстурированным фоном общая концепция почти плоская.
Righter (2 доллара)
Эта тема предназначена для ведения блогов и написания статей. Сверхпростая тема имеет адаптивный макет, чистый, минималистичный вид и отличается бережливым кодом. Он не включает никаких настоящих наворотов.
DC, июнь (29 долларов)
В этой теме в виде сетки используются большие цветные блоки и открытое пространство для демонстрации изображений. Тема очень чистая, отзывчивая и включает в себя несколько шаблонов страниц.
FlatCo (45 долларов)
Тема FlatCo — одна из самых насыщенных, когда дело доходит до формата и типа сообщений. Тема также включает в себя более 300 плоских значков и несколько элементов диаграмм и графиков, что делает ее полноценным набором для множества проектов.
Renova (40 долларов)
Эта одностраничная тема проста и прекрасна в истинном плоском стиле. Значки и формы являются основными, их можно настроить по цвету. Тема включает в себя простые анимации, которые при наведении курсора делают действия более плоскими.
Octavus (40 долларов)
Octavus использует плоский дизайн таким образом, чтобы он выглядел и ощущался модно, но при этом не был «слишком модным». Сочетание изображений и цветных блоков в этой отзывчивой и готовой к сетчатке теме теме упрощает взаимодействие с пользователем.
шаблоны
Плоские шаблоны дизайна также начинают появляться на рынке дизайна, даже самые неопытные веб-дизайнеры могут создать простой сайт, используя эту тенденцию.
Шаблон хостинга (бесплатно)
Этот шаблон потребует некоторой работы с вашей стороны, но он включает в себя основу для базового дизайна веб-сайта в плоском стиле.Он использует модные элементы и цвета и поставляется в виде загружаемого PSD-файла, поэтому вам понадобится некоторый опыт работы с бэкэнд, чтобы преобразовать этот дизайн в действующий сайт.
iPhone UI шаблон с плоским дизайном (бесплатно)
Благодаря множеству простых шаблонов iPhone, использующих плоскую схему дизайна для дизайна приложений, этот сайт предоставляет пять стилей загружаемых файлов: логины, профили пользователей, лента действий, настройки и дизайн боковой панели. Загружаемые шаблоны содержат все необходимое для начала работы и позволяют полностью настраивать каждый дизайн.
Плоский мобильный шаблон Delta (8 долларов)
В то время как многие дизайнеры выбирают адаптивные сайты, Delta — это шаблон только для мобильных устройств в плоском стиле. Он включает в себя множество надстроек больших шаблонов для маленького экрана. Используемый плоский стиль очень прост и использует монотонную цветовую палитру.
Плоский шаблон целевой страницы Flappster (20 долларов США)
Этот дизайн целевой страницы предназначен для продвижения нового сайта или приложения. В шаблоне целевой страницы, основанном на Twitter Bootstrap, используется прокрутка панели с параллаксом и яркая плоская тема с множеством кнопок призыва к действию.В шаблоне есть множество плоских кнопок и значков, которые можно полностью настроить в связанных файлах PSD. В шаблоне также используется набор прилагаемых плоских иллюстраций.
Шаблон начальной загрузки iLevel (15 долларов США)
Этот шаблон для адаптивного веб-сайта отличается плоским дизайном и длинными тенями для супер-модной темы. Фреймворк основан на Twitter Bootstrap и включает 30 страниц и четыре доступные цветовые палитры. Шаблон также включает в себя несколько плоских значков, иллюстраций и плагинов для мультимедийных потоков.
Шаблон значка приложения iOS7 (4 доллара США)
Любой дизайнер или разработчик, продающий приложение в магазине Apple iTunes, вероятно, знает о грядущих изменениях в дизайне Apple iOS 7. Этот набор иконок поможет вам быстро создать иконку в новом стиле, который можно считать почти плоским. Иконки готовы к работе с сетчаткой, и пакет включает в себя форматы иконок для iTunes, iPad, iPhone, Spotlight и Settings, а также единую сетку значков.
Цветовые схемы
Цвет — важная часть любого дизайн-проекта квартиры.Когда дело доходит до плоского дизайна, цвет часто используется одним из трех различных способов: жирным и ярким, в виде монотонной схемы или в разноцветных панелях. В плоском дизайне для создания палитры часто используются комбинации из трех, четырех, пяти или более ярких цветов, а не один или два доминирующих цвета для большинства проектов.
Смелый и яркий цвет — способ добавить веселья в процесс дизайна. Для достижения наилучших результатов придерживайтесь определенной цветовой темы при выборе жирного цвета, ищите цвета с аналогичной насыщенностью, оттенком или затенением или находящиеся на дополнительных позициях на цветовом круге.Смелый цвет должен выглядеть намеренно.
Монотонные цветовые схемы также популярны, когда речь идет о плоском дизайне. Цветовая палитра часто состоит из ярких оттенков, таких как изумруд или персик, и использует как оттенки (добавление белого), так и тона (добавление черного) для создания контраста и разнообразия.
Разноцветные панели — еще один распространенный вариант. Вместо того, чтобы смешивать и сопоставлять цвета по всему дизайну, каждая прокручиваемая страница или панель использует свой уникальный цвет с черным и белым.Общий эффект может быть визуально привлекательным и помогает создать ощущение организации и визуальной иерархии.
Цветовая палитра Flat Design (бесплатно)
Возьмите HTML и CSS для плоских цветов с готовым кодом от Лукаса Кобба. HTML и CSS написаны и готовы к использованию для 20 цветов, обычно используемых в плоском дизайне. Подберите каждый цвет к названной диаграмме, возьмите код и добавьте на свой сайт. Оттенки такие же, как выделенные цветами Flat UI.
Flat UI colors (бесплатно)
Flat UI colors — это простой сайт, на котором представлены самые популярные оттенки в плоском дизайне.Flat UI Colors выделяет 20 из этих популярных цветов и позволяет пользователям одним щелчком мыши получить соответствующие значения RGB или HEX для каждого цвета. Выберите формат цвета, щелкните цвет, и значения сохранятся в буфер обмена.
Adobe Kuler (бесплатно)
Пользователи инструмента создания цветовой палитры Adobe Kuler создали множество ярких комбинаций, используя цвета, характерные для плоского дизайна. От ярких до более приглушенных ретро-оттенков — есть отличные палитры для вдохновения.Одним щелчком мыши можно редактировать и загружать каждую палитру. Обязательно ознакомьтесь с «Flat Color Set 4», «Icon with Flat colors 5», «Logo Lockups 2», «FLAT COLORS Ui Bright» и «Cool Tone Flat».
ColourLovers (бесплатно)
ПользователиColourLovers создали тысячи цветовых комбинаций, используя концепции плоских цветов. Этот список отсортирован по рейтингу пользователей и служит источником вдохновения, если вы не хотите использовать «старые плоские цвета». Не забудьте проверить «мир плоский», «атласные балетки», «нью-йоркская квартира», «квартира» и «терапия плоской землей».”Щелкните любую палитру для названий цветов и значений RBG и HEX.
Типографика
Чистая типографика — важная часть тренда плоского дизайна.
Поскольку плоский дизайн делает упор на простоту, выбор шрифта также должен быть ясным и простым. Чаще всего дизайнеры выбирают простой шрифт без засечек и используют один или два веса. Некоторые расширяются и используют один шрифт без засечек и один новый или специальный шрифт.Тем не менее, эта тенденция характеризуется очень ограниченным количеством шрифтов для каждого проекта, обычно не более двух.
Лучшие шрифты для использования в проектах плоского дизайна, создают четкое ощущение контраста в сочетании с фоном.
Тип обычно черный или белый, без дополнительных украшений или цвета. (Многие из выбранных ниже шрифтов даже рекламируются с использованием этого стиля и концепций плоского дизайна.)
В дополнение к основным шрифтам, количество используемых слов также должно быть сведено к минимуму.Язык также должен быть простым и легко читаемым, чтобы оставаться в рамках минимального стиля плоского дизайна.
Наконец, убедитесь, что у шрифта достаточно места для вдоха в плоских дизайнерских проектах. Это включает как пространство вокруг слов, так и расстояние между буквами, которое может быть несколько увеличено для типа отображения. Если вы выберете более тонкий шрифт, подумайте о том, чтобы использовать его слишком большого размера. Шрифты с тонкими штрихами, такие как Helvetica Neue, могут не создавать достаточного контраста для четкого чтения при меньшем размере или на определенном фоне.
Bellota (бесплатно)
Шрифт без засечек, который маскируется под новый шрифт с мелкими засечками, Bellota легко читается и украшен орнаментом — сложное сочетание. Он выглядит женственно и хорошо смотрится на высококонтрастном фоне.
Caviar Dreams (бесплатно)
Этот супер-круглый шрифт одновременно современный и простой. Буквы различны и различны по размеру для чтения. Тем не менее, штрихи довольно тонкие и для оптимальной читаемости требуется фон с большим контрастом.
Flex Display (бесплатно)
Apple вызвала в сообществе дизайнеров споры об использовании сверхтонкого шрифта в предстоящем выпуске iOS 7 (решение, которое было несколько отменено). Но тонкий шрифт может работать в определенных ситуациях. Flex Display имеет очень тонкую обводку и имеет практическое применение в качестве большого или негабаритного шрифта в условиях высокой контрастности.
Lato (бесплатно)
Lato — это простой шрифт, который хорошо подходит для различных размеров и включает в себя начертание от сверхлегкого до сверхжирного.Этот шрифт довольно популярен среди дизайнеров, работающих над проектами плоского дизайна. Это не тот шрифт, который следует выбирать, если вы хотите, чтобы ваш шрифт отличался от основного.
Telegrafico (бесплатно)
Еще один шрифт с заглавными буквами, с широким штрихом, который хорошо сочетается с большим количеством места. Внешний вид современный, с широкой стойкой и острыми краями.
Proxima Nova (от $ 29)
Шрифты из семейства Proxima Nova предлагают множество вариантов и довольно популярны среди дизайнеров.Простой и элегантный стиль шрифта без засечек позволяет легко использовать его и сочетать с другими стилями. Простой геометрический стиль соответствует ощущению плоского дизайна.
FF DIN (от 78 долларов США)
Простой, простой и геометрический, DIN был разработан Немецким институтом стандартов для использования на дорожных знаках — само определение плоского и простого. Его популярность привела к тому, что FF DIN стала очень успешной цифровой версией.
Монтсеррат (бесплатно)
Геометрическая простота и почти беззаботное ощущение округлости делают Monserrat отличным выбором для плоского дизайна.
Primary Sans (бесплатно)
Плоский дизайн отличается простотой, а этот великолепный округлый шрифт сам по себе прост.
Dense (бесплатно)
Основная характеристика плоского дизайна — отсутствие сложности. Когда дело доходит до гарнитуры, это означает геометрическую конструкцию, такую как Dense.
Riona Sans (от 25 долларов)
Если вы ищете немного более серьезный шрифт для использования в бизнесе, но при этом хотите получить плоский внешний вид, тогда не ищите ничего, кроме Riona Sans.
Bariol (бесплатно)
Bariol — еще одно дружелюбное лицо с очень закругленными концами. Намного лучший вариант, чем Arial Rounded, его геометрия напоминает трафарет.
Canter (бесплатно по запросу)
Связанный, возможно, с цветами мороженого, которые объединяют плоский дизайн с модернизмом, модернистские стили также проникают в гарнитуры; Галоп с его тяжелыми пропорциями — яркий тому пример.
Deco Neue (бесплатно)
Еще одна дань модернизма, Deco Neue, вероятно, следует называть Neue Deco, но давайте не будем возражать против этого.Это отличный выбор для яркого отображаемого текста.
Niveau (от 40 долларов)
Опять же, геометрическая простота — отличный выбор для ровного ровного тона. Ниво является прекрасным примером.
Учебники
Хотя плоский дизайн — это скорее стиль, чем изученный инструмент, дизайнеры могут ознакомиться с некоторыми из обычно используемых приемов и техник.
Видеоуроки могут быть одним из самых простых способов узнать что-то новое.Для достижения наилучших результатов выберите видео, которое соответствует вашему уровню знаний в том, что касается используемого программного обеспечения и скорости урока.
Видеоурок по плоскому дизайну (бесплатно)
Это 17-минутное видео от Designmodo расскажет, как создать простой веб-сайт в стиле плоского дизайна с помощью Adobe Photoshop.
В видео рассказывается, как размещать элементы, создавать цветовую палитру и некоторые из лучших шрифтов Designmodo. Кроме того, вы узнаете, как работать с сеткой и как использовать комплект пользовательского интерфейса в процессе проектирования.
(Видеоинструктор использует части из двух комплектов Designmodo, Flat UI и Flat UI Pro, о которых мы упоминали выше.) Инструкции просты и легки для выполнения, но вам нужно хорошо разбираться в программном обеспечении Adobe, чтобы получить максимальную отдачу от этого видеоурока. .
Видеоурок по плоскому веб-дизайну (бесплатно)
Это видео от 1st Web Designer покажет вам создание целевой страницы портфолио в плоском стиле в виде почти часового видео, предназначенного для начинающих.
В этом руководстве вы познакомитесь с использованием инструментов Photoshop для создания базовой целевой страницы в сетке и с использованием частей из наборов пользовательского интерфейса.
Инструкции ясны и просты в использовании, а видео движется в темпе, который удобен для тех, кто не имеет большого опыта работы с Photoshop.
Как создать длинную тень (бесплатно)
Это простое руководство требует базовых знаний Adobe Illustrator и проведет вас через пошаговый процесс создания длинной тени с помощью инструмента Pathfinder или функции наложения.С помощью любого метода вы можете создать значок с длинной тенью за считанные минуты.
Сделай мой дизайн плоским (бесплатно)
Самостоятельно рекламируется как «простейшее руководство по плоскому дизайну в сети» Make My Design Flat, предоставляет простой код до и после, который преобразует кнопки в плоский стиль.
Сайт предоставляет наглядный пример и показывает код для каждого типа кнопки. Вы можете скопировать код или использовать его для настройки своего собственного.
Уроки плоского дизайна Зака Свинхарта (бесплатно)
В этой серии видеороликов о плоском дизайне, состоящей из двух частей, обучающий по веб-инструментам Зак Свинхарт объясняет концепции плоского дизайна, дает несколько советов по его использованию и демонстрирует несколько примеров.
Во второй части он проведет вас через создание простого плоского веб-сайта в Photoshop, включая методы создания контраста, цветовых блоков и шрифта.
Предметы плоские
В Интернете прошла увлекательная дискуссия о плоском дизайне. Если вы действительно хотите понять жанр и понять, как лучше всего его применить, ознакомьтесь с этими замечательными статьями.
Эпоха плоского дизайна
Плоский дизайн: тренд или революция?
Что такое плоский дизайн?
Принципы плоского дизайна
Основные принципы плоского дизайна — и ресурсы для начала!
Получите накачку из-за плоского дизайна
Плоский дизайн: подробный взгляд
Аутентичный дизайн
Взгляд на плоский дизайн и его важность
Как добиться желанного плоского дизайна (9 полезных советов)
Вдохновение для плоского дизайна
Все эти разговоры о плоском дизайне были бы неполными без галереи для вдохновения.
Поскольку новые проекты, использующие плоский дизайн, публикуются каждый день, невозможно успевать за каждым новым сайтом, пакетом пользовательского интерфейса или проектом, но эти ресурсы каталогизируют одни из лучших с частыми обновлениями.
Галерея плоского дизайна Awwwards
Галерея плоского дизайна Behance
Галерея плоского дизайна Dribbble
Галерея плоского дизайна
Плоский дизайн на Pinterest
FlatDSGN галерея
Плоский дизайн пользовательского интерфейса
Flat trendz галерея
Заключение
Начать работу с методами плоского дизайна проще, чем вы думаете, особенно с учетом всех доступных инструментов и ресурсов.Но вы должны действовать быстро, потому что тенденции могут исчезнуть так же быстро, как и начаться.
Плоский дизайн быстро превратился из дизайнерской тенденции в мейнстримную технику, которую используют крупные веб-сайты, такие как Google, Microsoft и Yahoo. Если он может работать для сайтов такого масштаба, он может работать и для множества проектов. Но это может быть не для всего, помните, когда начинаете новый проект, чтобы содержание и сообщение сайта помогали определять дизайн. Flat часто ассоциируется с простотой; Запомни.
Вы разработали проект квартиры? Какие ресурсы вы нашли более полезными? Дайте нам знать об этом в комментариях.
Плоский дизайн веб-сайтов: принципы и примеры
С понятными, простыми пользовательскими интерфейсами и быстрой загрузкой веб-страниц плоский веб-дизайн никуда не денется. Вот несколько важных принципов и отличных примеров этого стиля.
Простые 2D, минималистичные интерфейсы, смелые и контрастные цветовые схемы, а также преднамеренное отсутствие взаимодействия — все это указывает на характерные черты плоского дизайна.
Появившись на сцене веб-дизайна примерно в середине 2000-х годов, плоский дизайн веб-сайтов произвел революцию во всем, от веб-интерфейсов и мобильных интерфейсов до операционных систем и программного обеспечения для ПК. Но зачем нужен этот визуально привлекательный, но в то же время упрощенный дизайн? Почему бы не сделать детали детализированными и трехмерными?
Создавайте четкие и эстетичные плоские конструкции уже сегодня с помощью инструмента для создания прототипов Justinmind!
Скачать бесплатноВ этом посте мы рассмотрим, как появился плоский дизайн веб-сайтов и как этот стиль превратился в плоский дизайн 2.0. Мы также рассмотрим некоторые принципы, регулирующие этот стиль, когда вы откроете свой инструмент для создания прототипов, а также несколько отличных примеров, которые вдохновят вас на следующие проекты.
Откуда появился плоский дизайн веб-сайтов?
Прежде всего, давайте посмотрим, когда и как впервые появился плоский дизайн веб-сайта. Плоский дизайн пользовательского интерфейса уходит корнями в швейцарский стиль 1950-х годов, раннюю форму графического дизайна. Швейцарский стиль характеризовался четкой и разборчивой типографикой без засечек, а изображения и текст сочетаются таким образом, чтобы обеспечить эстетическую и функциональную гармонию продукта.
Перенесемся в 2000-е, и мы увидим цифровое возрождение швейцарского стиля: плоский дизайн. Сначала известный как Metro Design, разработанный Microsoft, плоский дизайн начал внедряться на MP3-плеере Zune.
Zune имел довольно современный для своего времени плоский интерфейс с большими строчными шрифтами без засечек. Тем не менее, устройство не имело большого успеха, в основном потому, что ему приходилось конкурировать с iPod. Затем Microsoft выпустила свои платформы Windows 7 и 8, которые перекликались с плоской конструкцией, использованной в Zune.
Пока все это происходило, сотрудники Apple занимались практикой, известной как скевоморфный дизайн — методологией проектирования, которая визуализирует все элементы как трехмерные и как можно более реалистичные. Значки и фон были разработаны для отражения реальных объектов и сред, таких как корзина для хранения удаленных файлов.
Однакоскевоморфный дизайн не был трендом. В то время было необходимо познакомить людей с технологиями. Благодаря визуализации пользовательских интерфейсов как репрезентативных для реального мира пользователя, кривая обучения пользователя будет значительно сокращена, и вскоре они будут быстрее формировать ментальные модели того, как работают пользовательские интерфейсы.
Так почему же появился плоский дизайн пользовательского интерфейса и почему он должен был заменить богатый интерфейс веб-сайта 2000-х годов? Короткий ответ — практичность. Длинный ответ — это сочетание различных факторов, относящихся к UX-дизайну.
Преимущества плоского дизайна веб-сайтов
Хотя скевоморфизм и богатый дизайн могли казаться лестными в свое время, честная правда заключалась в том, что ссылки на реальный мир в буквальном смысле давали дизайнерам много дополнительной работы.В дополнение к этому, команды тратили так много времени на графический дизайн, что пользовательский опыт часто оставался второстепенным.
Пользовательский интерфейс веб-сайта в лучшем случае был нечетким, а в худшем — просто непригодным для использования большинством веб-пользователей. Богатый дизайн и скевоморфизм привели к загромождению экранов без четких пространственных отношений между объектами и без четких направлений.
Производительность веб-страницы также снизилась — страницы загружали графику дольше. На этом этапе было ясно, что мир дизайна должен найти решение этой проблемы.Это была достаточная причина, чтобы отказаться от этой техники проектирования и начать думать о чем-то, что работало бы лучше, как с точки зрения удобства использования, так и с точки зрения производительности веб-сайта.
Дополнительный вес к этому аргументу заключался в том, что пользователи уже были знакомы с основами работы компьютеров, веб-сайтов и мобильных телефонов. Это привело к выводу, что богатый дизайн и скевоморфизм были отправлены в мусорное ведро.
На помощь приходит плоский дизайн веб-сайтов! Опираясь на швейцарский стиль, о котором мы упоминали ранее, плоский дизайн веб-сайтов с ног на голову превратил скевоморфный и богатый дизайн.В веб-интерфейсах появились плоские значки, четкие контуры, плоские кнопки и минималистичный дизайн пользовательского интерфейса.
Векторная графика стала преобладать над растровым изображением, а плоские элементы управления пользовательского интерфейса не имели абсолютно никаких вариаций затенения или цветового градиента.
Идея заключалась в полном отходе от любого вида 3D, что привело к гораздо более простому и ясному дизайну пользовательского интерфейса. Для дизайнеров это означало, что у них было больше времени, чтобы сосредоточиться на реальном пользовательском опыте. Для веб-сайтов это означало более быстрое время загрузки страницы и меньшую вероятность наказания со стороны Google.
Безусловно, после Web 2.0 2000-х годов плоский дизайн веб-сайтов был глотком свежего воздуха.
Но плоский дизайн веб-сайта — это еще не все солнце и розы. Плоский дизайн веб-сайта также принес с собой ряд проблем. Во-первых, из-за отсутствия визуальных подсказок пользователи часто не понимали, как взаимодействовать с элементами и элементами управления веб-страницы.
Значки или изображения, которые были кнопками, не казались интерактивными. 3D-теней не было, а дизайн не был изометрическим.По этой причине такие элементы, как кнопки, имели тенденцию сливаться с тем, что пользователь не нажимал.
Чтобы еще больше усложнить проблему, плоский дизайн веб-сайта также означал, что пространственные отношения между определенными элементами на одной странице были нечеткими. Это усугублялось отсутствием анимации, которая также служит индикатором взаимосвязи между определенными элементами на веб-странице.
Эволюция плоского веб-дизайна: плоский дизайн 2.0
Введите нового героя — плоский дизайн 2.0, иногда известный как «почти плоский дизайн» или «глубокий плоский дизайн». Плоский дизайн 2.0 сохраняет ту же простоту, что и плоский дизайн веб-сайтов, с использованием упрощенных значков и дизайна пользовательского интерфейса, но с добавленной размерностью слоя, что делает его в некотором смысле похожим на дизайн материалов Google.
ИнтерфейсыFlat design 2.0 часто имеют изометрический эффект, который можно даже сравнить с дизайном 2.5D многих ретро-видеоигр, таких как SimCity 2000, Doom и Duke Nukem 3D. Это также привело к тому, что изображения и элементы с плоским дизайном 2.0 получили название «псевдо 3D».
Исчезли жесткие правила плоского дизайна веб-сайтов. Плоский дизайн 2.0 позволяет использовать тени, позиционирование света, наслоение по оси Z и анимацию, чтобы добавить немного глубины. И помимо того, что он не ограничивается только монохроматическими шрифтами (как в плоском дизайне), плоский дизайн 2.0 позволяет дизайнерам свободно использовать цветовые градиенты, чтобы добавить дополнительную глубину элементам пользовательского интерфейса и графике.
Этот тонкий, но улучшенный уровень глубины в плоском дизайне 2.0 означает, что дизайнеры могут упростить вещи и снизить когнитивную нагрузку на пользователя, одновременно улучшая UX, предлагая визуальные подсказки.Благодаря плоскому дизайну 2.0 кнопки теперь выглядят интерактивными, а пространственные отношения между элементами на экране были восстановлены.
Можно сказать, что плоский дизайн 2.0 привносит в стол дополнительное ощущение функциональности и удобства использования, и, похоже, он сохранится на некоторое время. Это также не просто преходящая тенденция, а шаг к улучшению юзабилити в области UX.
Принципы отличного плоского дизайна веб-сайта
Хорошая новость в том, что создание отличного плоского веб-дизайна — это проще простого по сравнению со скевоморфным дизайном начала 2000-х годов.И действительно замечательно то, что у вас также будет больше времени, чтобы сосредоточиться на опыте пользователей.
Чтобы получить эффект плоского дизайна веб-сайта
Прежде всего, давайте рассмотрим основы. Чтобы добиться отличного эффекта плоского дизайна 2.0, вам нужно сначала заложить фундамент отличного плоского дизайна веб-сайта. Вот несколько советов, которые сделают ваш веб-дизайн плоским, как британский блин.
Иконки для плоского дизайна веб-сайтов
Используйте иконки с базовым 2D-дизайном, которые показывают простые иллюстрации.В плоском дизайне веб-сайтов нет места слишком сложной символике. Подойдет простое базовое представление функции значка. Также важно, чтобы у ваших иконок был чистый дизайн. Это поможет вашим пользователям легко понять свою цель.
Что касается цвета, вам нужно использовать жирные монохромные палитры. Однако, когда дело доходит до дизайна кнопок CTA, использование смелых и контрастных цветовых комбинаций может выделить кнопки и элементы.
Изображения для плоского дизайна веб-сайта
Возможно, вы захотите переосмыслить эту наполненную контентом домашнюю страницу, потому что, как в старой пословице: картинка стоит тысячи слов.Это не могло быть более справедливым, чем плоский дизайн веб-сайта. Изображения могут не только стать отличной заменой текста, но также могут помочь вам извлечь выгоду из ценного пространства на экране.
Использование простых векторных изображений или одного яркого цвета для всего фона означает, что вы не только уменьшаете беспорядок, но и получаете больше времени для этих важнейших элементов пользовательского интерфейса. Заменяя изображения на слова, вы можете привлечь больше внимания к важным элементам, таким как кнопки CTA.
Контраст в плоском дизайне веб-сайта
Текст и шрифт должны быть удобочитаемыми.В плоском дизайне веб-сайтов очень важно не использовать слишком много разных шрифтов — в противном случае ваш дизайн может стать несвязным и потерять свой минималистский вид. Попробуйте использовать другие размеры и толщину вместо изменения шрифта и используйте типографику без засечек для оптимальной читаемости.
Речь также идет о прозрачности, но не в переносном смысле, когда речь идет о шрифте и кнопках! При разработке шрифта убедитесь, что цвета выделены жирным шрифтом и обеспечивают резкий контраст с фоном.Напряжение глаз для чтения текста не способствует удобству использования, особенно когда вы сталкиваетесь с солнечными бликами на открытом воздухе.
Визуальная иерархия в плоском дизайне веб-сайта
Визуально расставьте приоритеты для наиболее важного контента и призывов к действию, используя контрастные цвета и размеры элементов. Создавайте иллюзию трехмерной иерархии при наведении курсора между элементами, увеличивая один при наведении курсора или добавляя взаимодействие, которое временно изменяет цвет кнопки.
Чтобы получить плоский дизайн 2.0 эффект
Когда дело доходит до создания плоского дизайна 2.0 для вашего веб-сайта, на самом деле мы говорим просто о расширении самого плоского дизайна веб-сайта с добавлением некоторых 3D-стилей и анимации.
Вот несколько быстрых указателей, которые помогут вам создать веб-сайт с плоским дизайном 2.0.
Трехмерное моделирование и ось Z
Прежде всего: пора восстановить связь с отстраненными друзьями веб-дизайна — тени и позиционирование света.Используйте эти эффекты умеренно, чтобы придать дополнительный уровень глубины элементам дизайна вашего плоского веб-сайта, таким как кнопки CTA и графический дизайн в изображениях. Правила плоского дизайна 2.0 даже позволяют использовать различные цветовые градиенты в каждом элементе, чтобы еще больше усилить 3D-эффект.
Затем, чтобы придать плоскому дизайну веб-сайта более четкое представление об иерархии, используйте ось Z, чтобы создать впечатление многоуровневости. Самый простой способ представить это — представить эффекты параллаксной прокрутки. Использование слоев в масштабе z сразу создает иллюзию трехмерной среды.
Анимация помогает пользователю действовать. Придание элементам внешнего вида, отвечающего требованиям мира физики, на самом деле может иметь большое значение с точки зрения удобства использования. Почему? Потому что вы предоставляете больше контекста.
Анимация может помочь пользователям понять пространственные отношения между элементами на экране. Например, нужно ли пролистывать список карточек, значков или элементов? Анимация также может помочь сделать трехмерную атмосферу более интуитивно понятной для пользователя.
Не переусердствуйте — количество анимаций должно быть сведено к минимуму, особенно когда они не используются для выполнения определенной функции.Анимация никогда не должна мешать дизайну или составлять его часть.
SVG-элементов — это то, что нужно, когда дело доходит до плоского дизайна веб-сайтов, и то же самое верно и для плоского дизайна 2.0. Держитесь подальше от растровых изображений, так как они плохо масштабируются. Векторные изображения можно масштабировать в соответствии с разрешением экрана любого устройства, что повышает отзывчивость веб-сайта — одна из основных целей плоского дизайна веб-сайтов.
Примеры плоского дизайна веб-сайтов
Теперь давайте взглянем на несколько потрясающих примеров отличного плоского дизайна веб-сайтов.В наш список мы включили множество веб-сайтов, которые являются хорошими примерами как плоского веб-дизайна, так и плоского дизайна 2.0. Время вдохновиться!
Откажитесь от 450 GSM для сохранения классической простоты плоского дизайна веб-сайтов и в то же время, используя методологии плоского дизайна 2.0. Этим ребятам удается сохранять простой и интуитивно понятный дизайн.
Высокие контрасты, приглушенные пастельные тона фона и плоские пуговицы с закругленными краями делают вещи однозначно… плоскими! За исключением красной птицы оригами справа — добавлено дополнительное измерение с использованием затенения и эффекта тени.
Зеленая кнопка CTA для «начала печати» меняет градиент на более светлый оттенок пастельно-зеленого при наведении на нее курсора. Эта минималистичная анимация показывает, что на нее можно нажимать.
Caps viens-là — это простая и увлекательная онлайн-игра, которая является прекрасным примером эволюции плоского дизайна веб-сайтов с его графикой в формате 2.5D. Дизайнеры создали ощущение глубины с помощью 3D-стиля и теней, но предметы, с которыми вы взаимодействуете, безошибочно 2D.
Добавьте графику и анимацию, и вы получите смесь двухмерности и трехмерности современности, которая представляет собой плоский дизайн веб-сайтов 2.0.
Представьте себе веб-сайт дипломированной бухгалтерии. Вы, вероятно, не думаете о чем-то веселом, освежающем и творческом. Но QAccounting ставит под сомнение этот образ мрачного консервативного дизайна финансовых веб-сайтов, предлагая забавный плоский дизайн веб-сайтов.
Вас привлекает кружащаяся, пульсирующая векторная графика, которая придает домашней странице почти игровой вид. В дизайне использованы различные смелые градиенты синего, с добавлением ярких красных и пурпурных оттенков.
Намеренно грубые подчеркивания создают имитацию тени на кнопках; наведите на них курсор, и они станут с красного цвета синим, указывая на возможность нажатия.Чтобы добавить к взаимодействию, сгусток энергии летает по экрану, следуя за курсором во время его движения, создавая анимацию на странице и помогая направлять взгляд.
Turner’s Dairy — отличный пример традиционного плоского веб-дизайна. Он органично сочетает реальные изображения их продуктов с яркими цветами. На сайте не используются тени и 3D-эффекты. Единственная анимация — это движение каждой панели и кнопки, на которые вы наводите курсор, чтобы продемонстрировать возможность нажатия.
Дизайн громкий, забавный и показывает, что вам не нужно создавать 3D-дизайн, если вы хотите, чтобы он спрыгнул со страницы.
CSS conf. ЕС перемещается по всей Европе, проводя конференции по программированию и принимая различных докладчиков, являющихся экспертами в этой области. Их плоский дизайн веб-сайта — отличный пример того, как использовать цвет в ваших интересах, чтобы создать простой, но привлекательный дизайн, который направляет взгляд на всю страницу.
Нет ничего, что могло бы квалифицировать эту страницу как плоский дизайн 2.0, но в этом нет необходимости — этот дизайн намеренно плоский. Элементы выглядят интерактивными, если просто навести на них курсор более яркого оттенка.
Olapaloma, издательское агентство из Барселоны, действительно хорошо справляется с созданием потрясающе простых визуальных эффектов. Они использовали принципы плоского дизайна 2.0, оставаясь при этом верными первоначальным концепциям плоского дизайна веб-сайтов.
По всему сайту мы видим четкую, ярко-синюю и желтую цветовую схему. Подвижные наклонные линии на заднем плане создают трехмерную иллюзию. Стрелки прокрутки и прыгающие кнопки CTA создают впечатление кликабельности, а перемещение мыши в разные части экрана меняет цвет фона.
Рождественский веб-сайт Google, Santa Tracker, является прекрасным примером плоского дизайна 2.0. Все изображения имеют тонкий 3D-стиль, чтобы придать им псевдо-3D вид. В то же время многослойные элементы и тени, падающие на фон, создают живую атмосферу.
На веб-странице происходит постоянное движение: падают снежинки, а на заднем плане движутся машины и другие спрайты. При наведении курсора на любое из зданий появляются шарики с информацией, которые перенесут вас в различные рождественские игры.
Wthr.live — забавный прогноз погоды, созданный, чтобы вдохновить дизайнеров. Это блестящий пример того, как плоский дизайн веб-сайта может вызвать интерес и заинтересовать пользователя.
Во-первых, сайт получает глубокий плоский значок с движущимся шрифтом Sans-Serif в центре на жирном однотонном фоне. Он минималистичен в том смысле, что предоставляет необходимое количество информации, не переусердствуя.
Информация, которую он предоставляет, — это то, о чем пользователь заботится в данный момент, например, температура сейчас и позже, а также такие детали, как влажность и скорость ветра.
Dots, компания по производству мобильных игр из Нью-Йорка, сделала отличные вещи для своего рекламного веб-сайта, и при этом оставалась абсолютно плоской.
Их мобильную игру можно считать представителем плоского дизайна 2.0, но на их веб-сайте все остается неизменным. Без анимации и с абсолютным минимальным количеством взаимодействий при наведении курсора мыши на интерактивные элементы, это урок того, как плоский дизайн веб-сайта не обязательно должен иметь однообразный характер.
Привлекательный контраст стильных пастельных тонов и ярких мультяшных изображений создает веселый дизайн, который кажется конфеткой для глаз.
Приземлившись на сайт Lânder, вы сразу же видите показ анимации, когда к центру экрана летит поток типичного беспорядка на столе. Каждый объект выглядит как блочный, мультяшный, но с дополнительным слоем деталей. Сморщенные листы бумаги позволяют сайту напрягать мышцы своего плоского дизайна 2.0 вместе с бумажными каракулями и бликами на фотографиях.
CTA не имеют оттенков или градиентов, но выглядят интерактивными, с контрастным оранжевым и жирным белым шрифтом, которые также темнеют при наведении на них курсора.
Нравится или нет, плоский дизайн веб-сайта, похоже, останется. И на то есть веская причина: он не только предлагает чистый и понятный пользовательский интерфейс, который создает меньше визуального шума для пользователя, но и плоский дизайн веб-сайтов по умолчанию более отзывчив.
В наши дни, когда в Интернете доступно огромное количество контента, удержание внимания пользователя важнее, чем когда-либо. Использование плоского дизайна веб-сайта помогает вашим веб-страницам загружаться быстрее и помогает избежать штрафных санкций со стороны Google.
Однако в дальнейшем становится ясно, что плоский веб-дизайн развивается, с появлением плоского веб-дизайна 2.0. Сделав все возможное и внедрив принципы плоского дизайна 2.0, вы можете сделать свой веб-сайт максимально интуитивно понятным, с новейшими стилями дизайна и при этом оставаться отзывчивым.
[История дизайна] Плоский стиль Samsung демонстрирует красоту простоты — Samsung Global Newsroom
Простота считалась безвкусной и обыденной в то время, когда вершиной инноваций были только диковинный дизайн и новейшие технологии.Но когда дело доходит до дизайна бытовой техники, в конце концов, тонкость может быть не такой уж и плохой. Samsung Electronics считает Flat Style идеальным способом понять и интерпретировать сущность продукта с точки зрения простоты, а не сложности. Flat Style, дизайн, в котором тонко объединены возможности разнообразного взаимодействия с пользователем, теперь переосмыслен вне словарного определения слова «пешеход».
Линии и поверхности, гармонирующие с окружающим пространствомFlat Style начинается с минимализма, который стремится к завершению в простоте.Плоская дверца холодильника без ручек напоминает нам о красоте, вдохновленной простыми линиями и четкими поверхностями. Это результат неустанного созерцания кухонной техники как визуального компонента, завершающего кухонное пространство.
Действительно, Flat Style стремится к гармонии с пространством. Прямые линии стены, пола и кухонной стойки сливаются с плоской лицевой поверхностью холодильника. Размер холодильника был разработан с учетом глубины кухонной стойки, поэтому он идеально вписывается, без каких-либо выступов, когда он помещается в кухонный холодильник.Кроме того, холодильник спроектирован с учетом удобства, позволяя пользователям удобно открывать и закрывать дверцу холодильника, даже когда он находится внутри шкафа.
Сочетание прочности и геометрической красотыПосмотрите на отделку из нержавеющей стали, нанесенную на внешнюю поверхность холодильника. Использование Flat Style здесь добавляет надежности кухне.Металл помогает сохранить исключительную долговечность и придает изысканный и деликатный блеск помещению, которое он занимает. Ручка и внутренние полки холодильника также были спроектированы так, чтобы сохранить металлический вид и ощущение, в целом создавая неизменно солидное впечатление от холодильника в целом.
Flat Style придает кухонному прибору эстетический вкус, как если бы он был скульптурой. Внешний вид холодильника наполнен эстетической красотой, вытекающей из простых форм, поэтому его дизайн хорошо сочетается с современным интерьером.Расположение дверей и ручек, напоминающее величественный горизонт высотных зданий, создает образ двух вертикально уходящих вниз колонн, образующих конструкцию колонны. С помощью всего лишь минимального сочетания таких простых линий вы можете ощутить изысканный класс.
«Сохранение прямых линий» — Красота внутри и снаружи
Безупречный поток, который приходит с проектированием кухонной техники в Flat Style.Это чувство сплоченности, которое проявляется от внутренних к внешним краям экстерьера. Flat Style стремится к простоте, и это понятие отражено в мелких деталях внутреннего дизайна. Углы внутреннего пространства имеют форму, близкую к перпендикулярному углу, чтобы сформировать пространственную форму, состоящую из прямых линий, которая сохраняет эстетическую простоту внешнего корпуса. Проще говоря, Flat Style — это последний штрих к неизменной эстетической привлекательности, которая пронизывает продукт изнутри.
Удобство использования с продуманными функциями и дизайномКаким бы красивым ни был холодильник, важно с самого начала учитывать его повседневное использование. Мелочи могут иметь большое значение.
Элементы управления, которые не используются часто, были перемещены внутрь холодильника, чтобы оставаться вне поля зрения. Диспенсер для воды также упрощен и включает только кнопки для часто используемых функций, таких как выбор между водой или выбором льда, в то время как остальные функции объединены с внутренним дисплеем.
Дизайн Kitchen Fit модели RB8000 сводит к минимуму толщину дверцы холодильника, обеспечивая при этом на 100 л больше максимальной емкости по сравнению с другими холодильниками того же размера. Кроме того, наклонные ручки полок RS8000 наносятся наклонными движениями, чтобы пользователи могли удобно тянуть полки, не повредив запястья.
В мире, наполненном нетрадиционными, уникальными идеями и чрезмерными выражениями, сила простоты становится все более заметной.Samsung Electronics стремится к функциональному дизайну, который выражает красоту сущности вещей и простоту, передаваемую через совершенную форму, которая отдает приоритет основным принципам. По определению Samsung, Flat Style — это кухонный прибор, который органично взаимодействует с пространством и гармонирует с ним за счет чистой и вневременной простоты, лишенной всех сложностей.
Модульный комплект нижней трети — плоский
ОПИСАНИЕ
Это полностью модульный и автоматизированный шаблон After Effects и Premiere Pro, который позволяет создавать собственные нижние трети плоского стиля из одного шаблона.Он очень прост в использовании и быстро вносит изменения. Обязательно посмотрите видео, чтобы увидеть его в действии!
Основные характеристики
- Интеллектуальный автоматический размер. Размер нижней трети автоматически подстраивается под размер и видимость слоев с логотипом и текстом
- Расширенные средства управления интервалом
- Быстрая и простая смена цвета
- Отражение элементов одним щелчком мыши
- Простые в использовании элементы управления синхронизацией анимации
- Возможность настройки времени анимации с помощью маркеров
- Альтернативные варианты анимации
- цветовых предустановок
- Наборы настроек анимации
- Готово к использованию в Premiere Pro как файл MOGRT (шаблоны анимационного дизайна)
Технические характеристики
- Хорошо организованный
- Быстрая и простая настройка
- Универсальные выражения
- Файл очень малого проекта (380 КБ)
- Нет ограничений на использование
- Совместимость со всеми разрешениями
- Видеоурок в комплекте (HD)
- Только 1 дополнительный прекомпилированный логотип для пользовательского логотипа, все остальное — векторы
- Подключаемый модуль не требуется
- Шрифт не входит
- Совместимость с After Effects CC 13+
- Совместимо только с Premiere Pro CC 17+
Модульный комплект нижней трети — живое занятие № 1