Дизайн сайта плоский: 57 самых красивых плоских дизайнов сайтов

Плоский дизайн сайтов (Flat Design): история, принципы, примеры для вдохновения

От автора: приветствую вас, друзья! Сегодня мы поговорим о том, что такое flat design, или плоский дизайн сайтов. Термин этот уже давно покорил сердца веб-дизайнеров и уверенно держится в тренде до сих пор. Крупнейшие компании (Google, YouTube, Microsoft, Apple Inc. и т. д.) используют его для оформления своих сайтов и приложений. Вы все еще не в секте сторонников плоского дизайна сайта? Тогда мы идем к вам!

Как вы думаете, в чем причина такой бешеной популярности flat дизайна? Отвечу вам в двух словах: он реально работает! В данной статье я поясню вам, что это за стиль, расскажу о его плюсах и минусах, покажу вам несколько отличных примеров flat дизайна сайтов, которые наверняка вдохновят вас на подвиги. Итак, поехали!

Все начиналось со скевоморфизма

Для тех, кто не в курсе, скевоморфизм — это не ругательное слово, а еще один стиль веб-дизайна. Flat design часто представляют в качестве противоположности скевоморфизму, что, на мой взгляд, не совсем правильно. Это, скорее, его упрощение, чем антагонизм.

До 2010-го года скевоморфизм был доминирующим стилем в дизайне интерфейсов. Он отображал элементы такими, какими они выглядели в реальности, активно используя текстуры, тени, отражения и прочие атрибуты трехмерного изображения. Особенно старалась в этом плане компания Apple, которая тщательно срисовывала большинство софтверных объектов с реально существующих предметов.

Вскоре псевдовыпуклые иконки перестали привлекать большинство пользователей и веб-разработчиков, что положило начало эре flat дизайна сайтов. Мир пришел к выводу, что все декоративные элементы нужно убрать, а оставить лишь то, с чем удобно взаимодействовать конечному пользователю.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

«Лучший дизайн — это как можно меньше дизайна»

Как в воду смотрел Дитер Рамс — известный промышленный дизайнер, выступающий против навязчивого дизайна, анимационных эффектов и т. п. В июне 2013-го года Apple Inc. представила революционную iOS 7, которая получила все атрибуты в стиле flat веб-дизайна. Однако, плоскость далеко не сразу «победила» реализм и объем.

Пользователи долго не могли забыть магию Стива Джобса и иконки, «которые хочется лизнуть». Многие даже распрощались с «убогой семеркой» и перешли на «лучезарный Android». Подливало масло в огонь и большое количество багов, присутствовавших в iOS 7, и белесый, полупрозрачный дизайн с параллаксом и анимацией в виде «сопли» при открытии приложений.

Те же, кто смирился с неизбежной реальностью и остался с «яблочной» операционкой, в конце концов, осознали, что плоский веб-дизайн не только интересно смотрится, но и привносит во все приложения порядок и единый визуальный стиль.

Плюсы и минусы плоского дизайна

К преимуществам использования этого стиля можно отнести:

ясность композиции и лаконичность визуальных средств. Отзывчивый интерфейс в стиле «ничего лишнего», благодаря чему пользователи быстрее осознают, что до них хотели донести;

акцент на хорошей типографике. Контент на первом месте, что чрезвычайно важно в современном изобилии информации;

меньший размер веб-страниц и ускорение работы сайта за счет минимального количества визуальных эффектов. Особенно это полезно при создании адаптивных версий, ведь, чем проще формы, тем легче их отображать на небольших экранах мобильных устройств.

Есть у flat веб-дизайна и недостатки:

ограничение фантазии веб-дизайнера упрощенными цветами, типографикой, иконографикой. Поэтому риск создать скучный и невыразительный сайт выше;

отсутствие трёхмерности и теней иногда не позволяет понять, кликабельный элемент или нет;

отсутствие конкретных закрепленных правил.

Советы по использованию плоского стиля на сайте

Если вы приняли решение использовать этот стиль на вашем сайте, поздравляю — это свидетельствует о том, что вы заботитесь об удобстве пользователей и идете в ногу со временем. Если вы только начинаете карьеру веб-дизайнера и не знаете, как правильно использовать плоский дизайн, чтобы ваш сайт выглядел актуальным, но не примитивным, воспользуйтесь следующими советами:

Забудьте о «кирпичных стенах» и ярких фонах. В плоском веб-дизайне принято использовать простые, гладкие, неяркие изображения для фона.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Никаких градиентов, объемных иконок, анимированных переходов и прочих спецэффектов. Все это утяжелит ваш сайт и привнесет суету — оно вам нужно?

Используйте плоские иконки с четкими контурами, добавляющие удобства и функциональности.

Используйте яркую, сочную цветовую палитру. Сейчас в тренде тона солнечного спектра: светлые желтые, розовые и зеленые. Главное, не переборщите — цветов на странице должно быть не больше 3-х.

Сосредоточьтесь на типографике. В плоском дизайне предпочтение отдается ярким, оригинальным надписям, которые создают призыв к действию и обеспечивают удобную навигацию по сайту. Здесь тоже важно не перестараться. Забудьте о «рукописных» и прочих вычурных шрифтах. Для выделения заголовков можно использовать заглавные буквы.

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

Максимально упростите навигационное меню и прочие элементы сайта. В качестве кнопок используйте обычные прямоугольники без теней и подсветки.

Таким образом, за прошедшие годы сайты с плоским дизайном стали стандартом, принятым абсолютно всеми. Посмотрите на большинство современных сайтов — они плоские «до мозга костей».

Напоследок, приведу обещанные примеры удачного flat дизайна, которые могут послужить вам вдохновением для создания собственных шедевров.

1. Сайт http://dunked.com.

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

2. Интерфейс Microsoft.

Microsoft — это одна из компаний, которая сделала flat style таким популярным. Может, помните плеер Zune — конкурента iPod, который Microsoft выпустила в середине 2000-х? Так вот, дизайн этого продукта резко отличался от большинства приложений того времени, во многом благодаря крупной типографике, плоским иконкам, большим и ярким формам.

Этот интерфейс, который назвали Metro, позже перекочевал на персональные компьютеры (ОС Windows 8), интерфейс Xbox 360 и другие программные продукты Mircosoft.

3. Сайт http://www.vox.com.

Ну что, вдохновились? Долой псевдореалистичную 3D эстетику!

На этом все. Подписывайтесь, делитесь нашими статьями с друзьями в социальных сетях. Высоких вам конверсий!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

40+ классных примеров веб-дизайна в стиле Flat

В наши дни так называемый плоский или Flat дизайн набирает все большую популярность. Сегодня большинство крупных компаний переделывают свои сайты под этот тренд. Такие компании как Apple, Android и конечно же Microsoft ловко используют плоские интерфейсы в своих продуктах.

Плоский дизайн делает интерфейсы свободными от тяжелых фоновых изображений, градиентов и теней. Большее внимание теперь уделяется типографии и чтобы все отлично различалось на любых размерах устройств.

Хватит много болтать. Перейду к теме сегодняшней статьи и с радостью представлю вам замечательную подборку из более чем 40 потрясающих примеров веб сайтов в стиле Flat

Организации

Blocklevel

Nitrografix

Conversionforge

Madebyfibb

Fhoke

PSD2HTML

Pexelplant

Playgroundinc

Northbounddesign

Приложения

Sumall

Nextr

Geckoboard

Numbrs

Triplagent

Inky

Kippt

Publiq

Продукция

Winds Phone

Fitbit

Wistia

Mailchimp

Teamsort

Yourkarma

 

Kinhr

Портфолио

Adam Rudzki

Theissland

Sammrkiewi

Ivomynttinen

Evan Richards

Builtbybuffalo

Daniel Pertrarolo

Stedesign

Прочее

WDMTG

Mint Themes

BYNC

Redbull Studios

MTCDC

Tree House

Square Space

Chilicon Graphic

Dunked

Adayinbigdata

Лучшие флэт-сайты: 20 примеров нестандартного дизайна

Плоских сайтов становится больше, а нестандартные идеи Flat-дизайнеров проявляются в самых разных нишах. Плоский дизайн применяют известные бренды и в его популярности сомневаться не приходится. Флэт-сайты эволюционируют, что заметно по новым стилевым композициям и применению свежих оформительских идей. Вместо привычной оригинальности раннего плоского дизайна – в новых интерфейсных решениях упор делается на хорошем опыте пользования (UX). В моде веб-дизайн: демонстрирующий индивидуальность & ориентированный на пользователя.

Далее, подборка интересных креативных флэт-дизайнов, красиво и нестандартно применивших плоское оформление / навигацию, новаторство и необычные для 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-цветом создает атмосферу профессионализма и спокойствия.

5 основных принципов / Все о дизайне / Pollskill

Flat дизайн —это ключевое направление в дизайне на ближайшие годы, поэтому предлагаем познакомиться с ним ближе и узнать 5 основополагающих принципов, легших в его основу.

Home

Знакомство с flat дизайном

На русском языке flat design переводится как «плоский дизайн», а стал он абсолютным фаворитом после презентации Apple ОС iOS. Во главу угла встал минималистичный подход к дизайну для юзабилити. Ставка сделана на комфорт пользователя. Это ярко выраженный протест против «сквеформизма» (визуализация объектов, как в реальности). Выбор пал на более упрощенные и при этом простые в эстетическом плане решения. Пользователи, уставшие от реалистичных визуализаций, с восторгом встретили это направление, и все больше web-проектов переходят именно к этому формату.

https://dribbble.com/rikitanone

Хочется отметить, что «плоско» — не значит «скучно». Решения flat дизайна могут быть красивыми, они более утонченные, чистые, избавленные от избыточности чего-либо, трансформируясь в «островок спокойствия». Они, наконец, делают контент понятным. Осталось узнать основные принципы, чтобы применять их на практике.

• Принцип №1: долой ненужные эффекты

«Плоский» дизайн не стремится передавать объемы, поэтому в основе лежит двумерная визуализация. Это значит, что вы не увидите ни теней, ни рефлексов, ни бликов с текстурами (исключение составляют длинные тени). Только передача контуров, и ничего более.

https://dribbble.com/dylanopet

• Принцип №2: чем проще, тем лучше

Рекомендуется использование односложных фигур в дизайне, как и следить за четкостью контуров, что призвано подчеркнуть легкость и невесомость. Кроме того, такие лаконичные элементы хорошо имитируют сенсор, порождая желание к взаимодействию с объектом (призыв к нажатию, прикосновению). Впрочем, простота элементов не равна простоте дизайна в целом — это относится только к очертаниям. В результате, все, что видит пользователь, ему понятно, и он может с легкостью этим пользоваться.

• Принцип №3: типографика и ее важность

Флэт дизайн призывает крайне осторожно работать со шрифтами. То есть их характер обязан дополнять дизайн-схему, не противореча ей. Более того, во флэт дизайне шрифт — это еще и ключевой навигационный элемент.

http://www.tvlcorp.com/

• Принцип №4: цветовые акценты

Не только шрифт, но и цвет —существенная часть в «плоском» дизайне. В подавляющем большинстве палитры базируются на 2-3 цветах, хотя, конечно, есть и исключения. Обычно выбираются сочные и яркие, но при этом чистые цвета. Как было отмечено, нет никаких градиентов и излишних переходов.

https://dribbble.com/fffabs

• Принцип №5: выбор в пользу минимализма

Flat дизайн — это яркий пример такого всемирного тренда, как минимализм. Дизайнеры отказываются от излишних «наворотов», уходят от сложных и неявных подходов к визуализации, что дает свои плоды в виде пользовательской активности.

http://www.flatvsrealism.com/

Плоский или почти плоский? Ищем компромисс!

В завершение хочется отметить, что сегодня имеет место быть синергия между плоским и неплоским дизайном. Речь идет о «почти плоском» дизайне. Это наиболее распространенное применение описанного концепта, когда вместе с простыми и лаконичными элементами и двумерным пространством дизайнеры применяют 1-2 приема для глубины и перспективы.

Также трендом 2017 года стал Semi Flat Design — полуплоский дизайн. Под влиянием Material Design, он стал немного более пространственным. Появляются легкие тени, которые делают дизайн полуплоским. Флэт-дизайн актуален и сегодня, за счет теней он стал глубже и сложнее, но основная концепция не нарушается.

https://www.behance.net/gallery/45942097/Resourse-UIUX-Tool-for-Web-Services

Плоский дизайн: вдохновляющие примеры сайтов

Сегодня речь пойдет о популярном в веб-дизайне направлении — плоском или flat -дизайне.  Здесь вы не увидите различные текстуры и градиенты, броские тени и тиснение. Смысл плоского дизайна заключается в том, чтобы акцентировать внимание на минимализме, чистых цветах и резкой типографике. Убираются все дополнительные отвлекающие элементы, а на первый план выходит цвет. Иконки, кнопки, элементы навигации — очень просты и яркие, что делает их заметными и легко-кликабельными. Давайте посмотри на примеры таких сайтов веб-дизайне.

 

oak.is 

_____________________________________________________

etch apps 

_____________________________________________________

microsoft

_____________________________________________________

build windows

_____________________________________________________

invoisse 

_____________________________________________________

plover.co 

_____________________________________________________

lowdi.com 

_____________________________________________________

designembraced

_____________________________________________________

mixpanel 

_____________________________________________________

minimal monkey 

_____________________________________________________

boat studio

_____________________________________________________

spelltower 

_____________________________________________________

koken 

_____________________________________________________

geckoboard 

_____________________________________________________

symbolset

_____________________________________________________

splitsecnd

_____________________________________________________

neueyorke 

_____________________________________________________

standbuy

_____________________________________________________

square space

_____________________________________________________

supereight studio

manos crafted

_____________________________________________________

designzoom 

_____________________________________________________

theissland

_____________________________________________________

ubiant

_____________________________________________________

jake giltsoff

 

_____________________________________________________

vt creative 

_____________________________________________________

future insights live

_____________________________________________________

alan-horne 

 

 

Автор подборки — Дежурка

Смотрите также:

Веб-дизайн

: красивые примеры веб-сайтов

Вдохновение • Примеры сайтов Кристиан Василе • 2 апреля 2013 г. • 6 минут ЧИТАТЬ

Flat Design — это новая тенденция, обозначенная сообществом как интерфейс, похожий на интерфейс Metro UI от Microsoft, поскольку он оставляет позади тени, тиснение, тонкие текстуры и градиенты, предпочитая чистые макеты, четкую типографику и сплошные цвета. Новый дизайн Google и разработка Microsoft с Windows 8 на самом деле основаны на старом тренде под названием Flat Design, который тогда не был очень популярен, но был очень прост в разработке, поэтому люди использовали его.

В этой статье мы хотели бы показать, что, по нашему мнению, является отличным примером веб-сайтов Flat Design.

Примеры плоских конструкций в веб-дизайне

SpellTower

SpellTower — это одностраничный веб-сайт для игры-головоломки для Android, который использует несколько цветовых фонов по всему макету, а также несколько кнопок для их простого и понятного меню. Большие изображения также не пропущены в их дизайне.

Kickfolio

Kickfolio — это интерактивное приложение для iPhone, а их современный, стильный веб-сайт использует разные сплошные цвета и кнопки с привлекательными современными эффектами.

Online Email Template Builder

С открытками вы можете создавать и редактировать шаблоны электронной почты онлайн без каких-либо навыков кодирования! Включает в себя более 100 компонентов, которые помогут вам создавать собственные шаблоны электронных писем быстрее, чем когда-либо прежде.

Попробуйте бесплатные другие продукты

Лоренцо Верзини

Лоренцо — итальянский арт-директор и дизайнер из Лондона, который очень хорошо воспринял стиль Flat Design. У него отличная, большая графика, изображения и интерактивные элементы по всему сайту.

Oak.is

Oak.is создает шрифты и другое графическое решение для того, что они называют продуктивными людьми. Кажется, что Flat Design был идеальным для этих парней и их веб-сайта, который фантастический, а также отзывчивый, и я думаю, что все мы — отзывчивый сайт.

Etchapps

Etchapps — это команда дизайнеров и разработчиков, которые «помогают брендам с большими идеями». Они занимаются дизайном интерфейса и разработкой приложений, а их сайт полностью адаптирован и работает с Flat Design.Их веб-сайт очень похож на интерфейс Windows 8, который сам по себе построен в стиле Flat Design.

Microsoft

Веб-страница Microsoft — самый популярный плоский дизайн. Некоторые могут возразить, что это не Flat Design, а Metro UI, однако имейте в виду, что Metro UI был построен на платформе Flat Design, поэтому поразительное сходство. Microsoft использует тот же подход, с большими изображениями, большим текстом и использует всю ширину браузера, в том числе, когда размер браузера изменен.

Сборка окон

«Сборка Windows» — это еще одна страница Microsoft, поэтому вполне нормально, что она работает так же, как и веб-сайт родительской организации. Это одностраничный веб-сайт, посвященный даже с ноября 2012 года, проводимый Microsoft в Редмомде, штат Вашингтон. Сайт отлично работает в полном размере и на мобильных устройствах, хотя я чувствую, что им не хватает некоторых деталей стиля здесь и там на портативных устройствах.

Рождество в форме

Это интерактивный онлайн-календарь, построенный на основе Flat Design, с такими же большими изображениями, только у этого есть какое-то взаимодействие между пользователями, включенными в него.Хотя дизайн красивый, страница не имеет адаптивной сетки.

Invoisse

Invoisse — это целевая страница веб-приложения, которое еще не было выпущено. Сайт представляет собой одностраничную страницу с возможностью прокрутки вниз. Уникальным является то, что во время прокрутки меняются цвета фона. Очень приятное прикосновение к простому, чистому и современному веб-сайту.

Построен Буффало

Это креативное агентство из Брайтона, Великобритания, с очень современным веб-сайтом Flat Design.Он имеет несколько страниц, он отзывчив (и хорошо выглядит как на настольном компьютере, так и на мобильном устройстве) и обладает очень хорошей информационной архитектурой. Их страница потрясающая, и я просто в восторге!

Площадь

Страница, на которой мы представляем большой набор красивых компонентов, основанных на тенденции Flat Design, является еще одной классной страницей, созданной с помощью этой платформы.

ржанка

Plover — это веб-сайт с веб-приложением, где пользователи могут создавать фотогалереи, продавать распечатки и даже сохранять свои изображения в облаке.Страница не адаптивная, хотя она работает с изображениями (и это плохо), но, тем не менее, дизайн представляет собой простой плоский интерфейс, достойный внимания.

Rdio

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

Vine

Веб-страница

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

Lowdi

Хотя веб-страница Lowdi не так проста, как другие страницы, представленные здесь, она уникальна и дает приятные ощущения.Навигация имеет естественный поток, и это приятно просматривать.

Осборн Барр

На веб-сайте

Osborn Barr вы найдете огромные картинки и легко читаемый текст, который сегодня ценит каждый. И когда веб-сайт также отзывчив, то становится ясно, что они не намного лучше, чем этот.

Все это были веб-сайты, которые в настоящее время работают и работают, но у нас есть еще три примера проектов Dribble, которые еще не созданы, однако их проекты заслуживают упоминания здесь.

Руководство для студентов

Домашняя страница выглядит очень красиво, с большим заголовком и всеми видами важной информации прямо над сгибом.

CottagePages

CottagePages — это еще один дизайн Dribble, который также может быть настоящим веб-сайтом, потому что он выглядит действительно хорошо. Это показывает огромное фоновое изображение, которое дает определенное чувство, не крадя центр от важного содержания.

CreativeStatus

CreativeStatus имеет очень простой дизайн домашней страницы и интегрирует в нее социальные сети. Я считаю, что макет еще не полностью закончен, однако я думаю, что он выглядит очень хорошо.

Flat UI Kit

Вы, наверное, слышали о Bootstrap, популярной клиентской среде, разработанной сотрудниками Twitter для собственного использования. Что ж, вы, возможно, слышали и о Flat UI, который представляет собой бесплатный пользовательский интерфейс HTML, основанный на Bootstrap в Twitter.

Была очевидная потребность в новой платформе, потому что, хотя Bootstrap отлично работает, он часто остается без собственного стиля и выглядит не слишком блестяще, но монотонно и по умолчанию.

Поэтому здесь, в Designmodo, мы решили создать свой собственный фреймворк / шаблон, и людям, похоже, нравится Flat UI, который упаковывает PSD-файлы кнопок, селекторов, входов, флажков, тегов, индикаторов выполнения, меню, элементов навигации и ползунков, а также цветов. образцы и SVG глифы.

Этот интерфейс значительно упрощает вашу жизнь, потому что он помогает вам с элементами, которые вы обычно тратите на разработку часов.И что еще более удивительно, мы предлагаем все эти вещи бесплатно. И, кажется, мы не единственные, кто думает, что этот интерфейсный интерфейс является удивительным, но также и все дизайнеры, которые начали его использовать.

Итог

Все веб-сайты, представленные выше, являются прекрасными примерами плоского дизайна, который, кажется, является новой тенденцией, особенно с введением Metro Style / Modern UI от Microsoft. Хотя это был ретро-стиль еще несколько лет назад, похоже, он возвращается, и я не удивлюсь, если еще больше сайтов примут этот стиль в ближайшем будущем.

Как то, что вы читаете? Подпишитесь на наши главные истории.

,Плоский веб-дизайн

: принципы и примеры

С понятными, простыми пользовательскими интерфейсами и быстрой загрузкой веб-сайтов плоский веб-дизайн никуда не идет быстро. Вот несколько важных принципов и отличных примеров этого стиля.

Простые 2D, минималистичные интерфейсы, смелые и контрастные цветовые схемы, а также преднамеренное отсутствие взаимодействия — все это указывает на характерные черты плоского дизайна.

Взрыв на сцене веб-дизайна примерно в середине 2000-х годов, плоский дизайн веб-сайта должен был революционизировать все: от веб-интерфейса и мобильных интерфейсов до операционных систем и программного обеспечения для ПК.Но зачем нужен этот визуально привлекательный, но при этом упрощенный дизайн? Почему бы не детализировать вещи и 3D?

Создавайте четкие и эстетически привлекательные плоские конструкции сегодня с помощью инструмента для создания прототипов Justinmind!

Скачать бесплатно

В этом посте мы рассмотрим, как появился плоский дизайн веб-сайта и как этот стиль превратился в плоский дизайн 2.0. Мы также рассмотрим некоторые принципы, управляющие этим стилем, а также некоторые замечательные примеры, которые вдохновят вас на создание следующих проектов.

Откуда появился плоский дизайн сайта?

Прежде всего, давайте посмотрим, когда и как появился плоский дизайн сайта.Плоский дизайн пользовательского интерфейса может проследить свое происхождение от швейцарского стиля в 1950-х годах, ранней формы графического дизайна. Швейцарский стиль характеризовался четкой и разборчивой типографикой без засечек, а изображения и текст сочетаются в эстетической и функциональной гармонии продукта.

Перенесемся в 2000-е, и мы начинаем видеть цифровое возрождение швейцарского стиля: плоский дизайн. Первый известный как Metro Design, выпущенный Microsoft, плоский дизайн начал развертываться на MP3-плеере Zune.

В свое время

Zune имел довольно современный дизайн плоского пользовательского интерфейса с большими строчными шрифтами Sans-Serif.Тем не менее, устройство не имело большого успеха, главным образом потому, что оно должно было конкурировать с 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.

Контраст в плоском дизайне сайта

Текст и шрифт должны быть читаемыми.В плоском дизайне веб-сайта важно, чтобы вы не использовали слишком много разных шрифтов — если вы это сделаете, ваш дизайн может стать несвязным и потерять свой минималистский вид. Попробуйте использовать разные размеры и вес вместо изменения шрифта и используйте типографику Sans-Serif для оптимальной читабельности.

Речь идет также о прозрачности, хотя и не в переносном смысле, когда речь идет о шрифте и кнопках! При разработке шрифта вы должны убедиться, что цвета выделены жирным шрифтом и обеспечивают резкий контраст с фоном.Напрягать глаза при чтении текста не очень удобно, особенно когда вы сталкиваетесь с солнечными бликами на улице.

Визуальная иерархия в плоском дизайне веб-сайта

Визуальная расстановка приоритетов для наиболее важного контента и CTA с использованием контрастных цветов и размеров элементов. Создавайте иллюзию трехмерной иерархии при наведении курсора на элементы, увеличивая их при наведении курсора на курсор, или добавляя взаимодействие, которое временно меняет цвет кнопки.

Чтобы получить плоский дизайн 2.0 эффект

Когда речь заходит о создании плоского дизайна 2.0 для вашего веб-сайта, мы на самом деле просто говорим о расширении самого плоского дизайна веб-сайта с добавлением 3D-стиля и анимации.
Вот несколько быстрых советов, которые помогут вам создать сайт с плоским дизайном 2.0.

3D-стилизация и ось 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-х мерной и 3-х мерной современностью — плоский дизайн сайта 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, вы можете быть уверены, что ваш сайт максимально интуитивно понятен, с последними стилями дизайна, и при этом остается отзывчивым.

,

Окончательное руководство по плоскому веб-дизайну

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

В этом руководстве я хочу представить полную коллекцию статей, учебных пособий, бесплатной графики и макетов веб-сайтов на основе плоского дизайна.Любой, кто все еще занимается этой концепцией, обязательно узнает что-то новое. Эти тенденции существуют давно, но мы только недавно стали свидетелями значительного роста плоского веб-дизайна.

И это имеет много веских причин! Плоский дизайн, смешанный с содержимым страницы, легче читать и с ним легче взаимодействовать.

Ярлыки до:

Не следует ожидать использования плоского дизайна в каждом проекте. Как и все тенденции дизайна, плоские макеты сайтов должны использоваться исключительно тогда, когда детали совпадают.В противном случае это может привести к тому, что минималистский подход превратится в более сложный сайт. Но при тщательном совмещении я обнаружил, что плоские пользовательские интерфейсы блестящие, простые и настолько легко соблазняющие, что будут очаровывать ваших посетителей на долгие годы.

Рекомендуемое чтение: Витрина с красивым плоским дизайном пользовательского интерфейса

Популярность плоских сайтов

Как упоминалось в этой статье о Forbes, плоский дизайн веб-сайтов становится все более зрелым в отрасли.Он удаляет множество более сложных текстур, узоров, теней, пузырьков, градиентов и других блестящих эффектов, чтобы сосредоточиться на простоте. Плоские кнопки по-прежнему выглядят интерактивными, а поля ввода по-прежнему выглядят редактируемыми. Плоские макеты сайтов в целом по-прежнему выглядят интерактивными, но без более изысканной графики.

Плоская конструкция была известна уже некоторое время, но недавно набрала обороты с мобильной платформы Microsoft, а теперь и Microsoft Windows 8. Дизайн Metro начал основную тенденцию, которая подтолкнула мяч к плоской планировке.И веб-интерфейсы, и мобильные интерфейсы столкнулись с серьезным скачком в модных новых пользовательских интерфейсах. А с адаптивными веб-сайтами, стирающими разницу между настольными и мобильными устройствами, плоский пользовательский интерфейс преодолел разрыв для простоты с небольшим культурным уклоном.

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

полезных дизайнерских руководств

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

В публикации в блоге Medium, посвященной проблемам плоского дизайна и пользовательского интерфейса, автор Мисси Титус продолжает объяснять, что плоский пользовательский интерфейс должен помогать решать ваши проблемы или просто облегчать их рассмотрение.Убирая текстуры, швы и тени, вы не должны удалять важный контент со страницы. Тенденции дизайна — это просто определенный вид.

Конечно, плоский дизайн не для каждого сайта. Существует так много различных тенденций на сайте, и все они популярны по определенной причине — людям нравится разнообразие. Тщательно продуманные плоские 2-D интерфейсы отличаются простотой использования. И это позволяет посетителям сосредоточиться больше на вашем контенте, чем на чем-либо еще. Еще одна замечательная статья о принципах плоского дизайна поможет вам понять более конкретные особенности интерфейса.

В первую очередь вы хотите сосредоточиться на иерархии контента на странице. Элементы обычно не пересекаются, и страница должна течь очень естественно. Это включает в себя переключение между цветами и содержимым коробки. Легче думать о странице, построенной вокруг типографики, и эти различные текстовые блоки сообщат пользователю, как взаимодействовать со страницей.

Некоторые кнопки могут использовать плоский цвет фона, в то время как другие кнопки могут использовать формы и пиктограммы. Текст и цветовые схемы веб-страницы — это две жизненно важные концепции дизайна вашего плоского веб-сайта.

У Metro look, первоначально популяризированного Microsoft, есть отличная система выбора цветов. Это важно, потому что цвета делают ваш сайт выделяющимся. Цвета делают кнопки, ссылки и заголовки не такими черно-белыми. Но иногда бывает сложно выбрать схему, которая работает хорошо.

Вам нужно просмотреть примеры других конструкций и увидеть, как профессионалы делали это в прошлом. Проверьте выдающуюся галерею вдохновения FlatDesign для коллекции аналогичных интерфейсов веб-сайта.

Цвета сплющенного дизайна

DesignModo опубликовал очень большую коллекцию ресурсов, основанную на плоском дизайне пользовательского интерфейса. Что касается цвета, я хочу отметить еще одну статью, в которой обсуждается плоский дизайн и цветовые тренды. Сами схемы составляются, начиная с одного цвета, отображаемого на полном оттенке, затем убирая оттенок ниже и смешивая черный / серый. Этот метод создаст несколько оттенков для вашей новой цветовой палитры.

Наиболее насыщенные и яркие цвета выделяются среди любого светлого или темного фона.На DesignModo они опубликовали еще один интересный пост о ретро цветовых схемах, который может идеально вписаться в плоский макет сайта. Но на самом деле этот процесс требует некоторой практики и интуиции при создании нового проекта.

Онлайн-ресурс Flat UI Colours — отличное место для начала, когда вы пытаетесь сосредоточить свои творческие усилия на плоских цветовых схемах.

Статьи по теме

Вместо того, чтобы копировать и повторно использовать необычный контент в этой статье, я хочу поделиться другими вдохновляющими постами в блоге, которые связаны с плоскими пользовательскими интерфейсами.Я прочитал бесчисленные статьи на эту тему, и точки зрения изящны.

Потратьте несколько минут, чтобы просмотреть только 2 или 3 статьи из этого списка, и вы можете быть удивлены тем, что вы можете узнать.

Бесплатные ресурсы

С некоторыми теоретическими соображениями мы должны перейти к обсуждению других ресурсов плоского дизайна. И графика, и примеры кода доступны по всему Интернету, если вы знаете, где искать. Открытые исходные коды являются одними из лучших способов для новых разработчиков погрузиться в новую тенденцию дизайна.

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

Графика

Дизайнеры и разработчики нуждаются в графике. Символы, значки, логотипы и другие общие графические черты можно найти практически на каждом макете сайта. Таким образом, халявная графика с использованием плоских технологий становится все более популярной в Интернете.Это небольшая коллекция моих любимых наборов пользовательского интерфейса и иконок, созданных в области плоского дизайна.

Pixeden Flat Icons Set

Я просто обожаю Pixeden за их удивительную коллекцию халявы и премиальной графики. Совсем недавно я нашел несколько снимков Dribbble, рекламирующих бесплатный набор Flat Design Icons. Иконки выпущены в 4 томах, каждый из которых содержит свой набор иконок. Наборы vol1 и vol2 были случайно помечены одинаково, но вы можете сказать, что это огромная коллекция плоских иконок — все бесплатно для использования в любом количестве веб-проектов!

Pixeden: Том № 1 — Том № 2 — Том № 3 — Том № 4

Dribbble Mirror: Том № 1 — Том № 2 — Том № 3 — Том № 4

Красочный плоский Iconset

Freebiesbug содержит массу отличных PSD-файлов для дизайнеров.Одним из исключительных примеров является их набор плоских красочных иконок для пользовательских интерфейсов. Вы можете скачать этот бесплатный набор с их сайта или непосредственно со страницы Dribbble. Набор включает в себя 12 дизайнов иконок, основанных на популярных интернет-сервисах. И эта коллекция не может быть полезна для каждого проекта, но приятно знать, что есть много плоских халяв для графических дизайнеров.

Flat Web Browser Icons

Существует несколько причин, по которым вам может понадобиться добавить значки браузера на свой веб-сайт.Дизайнерским агентствам и SaaS-компаниям часто приходится перечислять свои функции и поддерживаемых клиентов. И эти плоские значки браузера являются идеальным компаньоном для любого нового макета. Вы также можете скачать этот набор иконок из оригинального снимка Дриббл, опубликованного Стефано Тирлони.

Flatilicious Icons

Flatilicious — это несколько совершенно новых иконок, выпущенных дизайнером Лукасом Юриком только в прошлом месяце на Dribbble. Эта замечательная коллекция включает в себя 48 бесплатных плоских иконок в PSD-файле.Вы можете использовать их в любых веб-или мобильных проектах. Что мне особенно нравится в этом наборе, так это разнообразие иконок на выбор. Поистине креативный шедевр для дизайнеров, которые только начинают изучать плоский интерфейс.

IconShock Flat Icons

Этот фантастический набор плоских иконок, выпущенных iconShock, включает в себя более 3600 различных примеров. Дизайн имеет небольшой глянцевый эффект на многих значках и выделяется среди других похожих наборов значков. И это здорово, потому что иконки были изменены в 3 различных параметра для больших, средних и маленьких элементов сайта.Какая коллекция для этих свободно доступных плоских иконок!

Пользовательский интерфейс планирования событий без изменений PSD

Более темная цветовая схема от этой бесплатной входной информации действительно выделяется благодаря использованию плоских элементов дизайна. Сам интерфейс создан для веб-сайта, чтобы обрабатывать пользовательский ввод для планирования события или, возможно, подписки на посещаемость. Конечно, вы можете использовать эту халяву только для практики. Но я также думаю, что различные стили PSD наряду с самой цветовой схемой обеспечивают хорошую основу для обучения.Вся заслуга в этой халяве достается Дилану Опету.

Раскрывающееся меню PSD

Когда вы разрабатываете макет сайта, может быть сложно собрать идеи для вдохновения. Различные объекты страницы из ползунков изображений, навигационных ссылок, миниатюр и, конечно же, выпадающих меню могут быть трудны для мозгового штурма без примеров. Эта бесплатная PSD содержит отличное выпадающее меню веб-сайта. Значки легко масштабируются, и вы можете дублировать многие из одних и тех же теней, используя эффекты CSS3.Проверьте оригинальный снимок Dribbble, чтобы загрузить копию и увидеть другой предварительный просмотр.

Freebie Flat UI Kit

Если вы ищете коллекцию веб-элементов пользовательского интерфейса, не ищите больше! Эта блестящая плоская пользовательская среда PSD, выпущенная Andreea Nicolaescu, является отличной отправной точкой при написании кода для вашего собственного сайта. Используйте этот набор PSD не только для графики, но и для помощи в выборе цвета и подборе полной цветовой схемы.PSD построен на белом фоне, который наиболее распространен среди минималистских дизайнеров. Вы можете просмотреть полноэкранный предварительный просмотр оригинального снимка Dribbble.

Flat UI Kit PSD # 1

Наряду с блестящими плоскими значками я также хочу поделиться коллекцией наборов пользовательских интерфейсов. Этот первый PSD-файл был создан Riki Tanone и выпущен бесплатно на Dribbble. Это небольшой файл, но он содержит ряд необычных элементов, таких как видеоплеер и почтовый ящик.Цвета блестящие, и они почти напоминают мне различные пастельные оттенки.

Flat UI Kit PSD # 2

Теперь этот второй набор пользовательского интерфейса был также выпущен Рики Таноне и больше фокусируется на элементах блога. Он примерно такого же размера, как и другие PSD, и содержит элементы блогов, такие как поле подписки, календарь, поле ввода текста, поле ввода тегов и некоторые другие полезные вещи. Цветовая гамма более устойчива, но плоские кнопки / элементы выглядят почти одинаково.Если вы хотите начать быстро, я рекомендую скачать оба этих набора и практиковаться в свое время.

Flat UI Kit PSD # 3

Этот альтернативный плоский комплект пользовательского интерфейса был разработан Девином Шульцем, а также бесплатно выпущен на Dribbble. Мне очень нравится этот PSD-файл, потому что он фокусируется в основном на общих элементах сайта. Поля ввода, горизонтальная и вертикальная навигация, ползунки, кнопки и множество других объектов страницы. Цветовая гамма соответствует серому / зеленому почти на каждом элементе и выглядит просто фантастически.

Все эти бесплатные наборы пользовательского интерфейса идеально соответствуют культуре плоского дизайна. И я уверен, что есть еще много примеров, которые можно найти в Интернете. На самом деле, просто поиск в Dribbble представляет длинный список результатов для плоских комплектов пользовательского интерфейса. Я призываю всех дизайнеров ознакомиться с подобными примерами и посмотреть, что вы можете создать из этих плоских элементов веб-страницы.

Flatlyfe UI Kit PSD

Дизайнер Дилан Опет, который также создал бесплатную версию пользовательского интерфейса для планирования мероприятий, также выпустил новый плоский набор для пользовательского интерфейса.Элементы основаны на общих объектах веб-сайта, таких как ползунки, кнопки, переключатели, теги и поля ввода. Я определенно рекомендую загрузить копию и использовать эти проекты на некоторых сайтах практики. Даже процесс кодирования стилей CSS3 на основе этого PSD будет огромным опытом обучения.

WDD Flat UI Kit PSD

Совсем недавно на депо Webdesigner Depot появилось большое сообщение о выпуске нового плоского комплекта пользовательского интерфейса. Этот набор предназначен больше для трендов метро с похожей цветовой палитрой, элементами интерфейса, ползунками, полосами и другими необычными объектами страницы.Я думаю, этот комплект пользовательского интерфейса также может быть использован для дизайна мобильных приложений. Это бесплатная загрузка после того, как вы введете свой адрес электронной почты для подписки на рассылку.

Открытый исходный код

Веб-разработчики Frontend всегда заинтересованы в последних тенденциях. Веб-дизайн и разработка имеют тенденцию перекрываться во многих ключевых областях, и это часто происходит, когда вы кодируете интерфейс веб-сайта. Проверьте некоторые из этих бесплатных примеров кода, которые вы можете использовать в своих проектах плоского дизайна.

Flat UI

Комплект Flat UI, вероятно, является лучшим ресурсом для веб-разработчиков, попадающих в эту тенденцию. DesignModo выпустила как бесплатную версию, так и профессиональную версию, которая включает в себя как PSD-файлы, так и HTML / CSS-кодированные элементы. Но бесплатная версия поразительна и содержит все основные элементы, которые вам понадобятся, такие как поля ввода, кнопки переключения, заголовки, значки и многое другое. Их бесплатная версия также размещена на Github для разработчиков, которые могут захотеть развить проект и расширить функциональность.

iCheck

Плагин jQuery iCheck — это инструмент для улучшения ваших кнопок ввода. В частности, чекбоксы и радиовходы — это два элемента, которые сложно оформить с помощью CSS. iCheck является полностью бесплатным и открытым исходным кодом, который идеально подходит для новых разработчиков. Вы можете создавать выдающиеся интерфейсы, которые идеально вписываются в макет вашего сайта с помощью всего лишь нескольких настроек.

Плоские радиокнопки

Бесплатные ресурсы, которые публикуются в Design & Code. Может использоваться в любом проекте сайта.Я не слышал о сайте до недавнего времени, когда нашел их плоские радиокнопки, которые просто выглядят изящно. Оригинальный дизайн основан на более темном фоне с лимонно-зелеными радиокружками. Существует также небольшая анимация при переключении между новыми выборами.

Boxy Buttons

Веб-разработчики, вероятно, знакомы с облачными IDE, такими как jsFiddle и JSBin. Ну, CodePen — это еще один пример, который фактически каталогизирует и представляет последние ручки в одном месте.Разработчики будут практиковать свои навыки и выпускать потрясающие бесплатные коды для всего мира.

В этом примере представлен общий набор плоских интерфейсных кнопок, выполненных в 3 разных размерах. Очевидно, вы можете обновить цветовую схему в соответствии с вашим собственным сайтом. Но я действительно впечатлен состоянием наведения / активности на каждой кнопке. Хотя дизайн «плоский», вы все равно можете заметить тень под кнопкой при нажатии. Это действительно хороший эффект, и было бы здорово найти такие вещи для свободного использования.

Простые стили кнопок

Эти простые стили кнопок также можно найти в CodePen. Это более простой пример, который на самом деле не поддерживает активное состояние. При наведении указателя мыши используются переходы CSS3 для обновления цвета фона с элегантным эффектом анимации. Возьмите этот пример с небольшим количеством соли и посмотрите, сможете ли вы расширить коды для своих собственных нужд.

Форма регистрации

фрагменты CSSFlow могут быть одной из лучших онлайн-галерей для бесплатных кодов HTML / CSS.Этот конкретный пример представляет собой форму регистрации с использованием плоской кнопки и пары полей ввода. Вы можете на самом деле попробовать демонстрационный пример и посмотреть, как это работает в вашем собственном браузере. Кнопка отправки имеет естественное наведение и активное состояние, плюс поля ввода также светятся в фокусе. Начать не так много, но вы можете найти другие примеры плоского дизайна на странице фрагментов CSSFlow.

50 красивых веб-сайтов с плоским дизайном

Какое окончательное руководство по дизайну было бы полным без каких-либо красивых примеров? Идеи плоского дизайна интересно обсуждать и обсуждать, однако разговоры не всегда приведут вас к финишной черте.Просмотр некоторых примеров других макетов на самом деле может помочь вам собрать в уме интерфейсы, о которых вы, возможно, и не думали самостоятельно.

Я собрал 50 роскошных плоских макетов веб-сайтов, которые, я надеюсь, окажутся вдохновляющими для дизайнеров по всему миру.

Inky

Squidee

WerkPress

Campaign Monitor

RGBto

MapBox

Fitbit

United Pixelworkers

Президент на один день

Treehouse

Rock Werchter 2013

Эрик Форд

Minimal Monkey

,

36 Flat Примеры дизайна веб-сайтов для вдохновения | Веб-дизайн

Самыми модными темами 2013 года стали веб-сайты

, посвященные дизайну плоского пользовательского интерфейса и дизайну плоских мобильных интерфейсов. В этом году индустрия веб-дизайна получает все более интересные технологии, такие как HTML5, CSS3, Responsive Design , Long Shadow и Flat Design. Используя эти методы, дизайнеры создают отличные сайты.

Плоская концепция использует минималистский подход. Примеры дадут читателям более четкое представление о плоском пользовательском интерфейсе в веб-дизайне.Плоский дизайн пользовательского интерфейса очень популярен, но сегодня существует тенденция использовать дизайн Long Shadows , а также плоский дизайн для веб-страниц.

Вас могут заинтересовать следующие статьи, связанные с современными тенденциями.

Неограниченное количество загрузок
Более 1 500 000+ шрифтов, макетов, халявы и дизайнерских активов

Красивые плоские веб-дизайны

В этом посте мы собрали тридцать шесть примеров веб-сайта Flat Design для вашего вдохновения.Все эти плоские веб-сайты созданы профессиональными веб-дизайнерами и агентствами веб-дизайна со всей сети.

Teamgeek

Сайт One Pager для Teamgeek — южноафриканского агентства полного сервиса.

Teamgeek

Poolhouse

Poolhouse — независимое цифровое агентство, занимающееся разработкой рекламных кампаний для кандидатов, организаций и компаний.

Poolhouse

Фиксированное цифровое агентство

В Fixed у нас есть все, что вам нужно для продвижения и позиционирования вашего продукта или услуги в цифровой среде

Фиксированное цифровое агентство

MoonCamp

Mooncamp — неземной красивый и простой Basecamp следующий клиент для iPhone.Используйте любую из учетных записей Basecamp, связанных с вашим профилем, и легко перемещайтесь по приложению всего несколькими нажатиями, используя наше исключительное меню.

MoonCamp

Робби Леонарди

Резюме с боковой прокруткой погружается в красочный мир, вдохновленный игрой, напоминающей Super Mario Brothers. Леонарди в настоящее время является разработчиком контента для веб-сайтов, специализирующимся на графике для Fox News.

,