Примеры сайтов flat дизайн: Флэт (flat) дизайн: лучшие практики плоского дизайна

Обратите внимание: Плоский дизайн может показаться простым, однако это не значит, что его проще создать. Скорее всего, вам понадобится помощь талантливого визуального дизайнера.

6 приемов для улучшения пользовательского опыта

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

kentuckyderby.com

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

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

1. Никогда не делайте одинаковым обычный и кликабельный текст

Например, если для ссылок вы используете жирное начертание, или определенный цвет, то не следует использовать жирное начертание или такой же цвет текста просто так. Используйте визуальный дизайн, чтобы четко обозначить активные и неактивные кнопки и элементы. Будьте постоянны.

surfstudio. ru

uxsofia.com

piraja.no

2. Четко обозначайте активные элементы

Активными элементами могут быть: текст, кнопки, изображения, графические элементы, вкладки и иконки.

• Кнопки должны хоть немного быть похожи на настоящие.

• Если вы выбрали дизайн в стиле flat, воздержитесь от использования прозрачных кнопок (они выглядят как текст, заключенный в тонкую прямоугольную рамку).

• Мелкие элементы должны увеличиваться при клике мышкой.

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

karavaev-lab.ru

planetpass. com

channel.iloverunning.ru

3. Используйте традиционные макеты и стандартные шаблоны сайтов

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

teavana.com

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

4. Уделите внимание контрасту

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

sabemasson.com

Главная активная кнопка ‘See more’ на первом экране уже не так заметна, и на фоне крупного изображения она «потеряна» для пользователя. Улучшить дизайн страницы можно, добавив цветовой акцент, например, более темный оттенок голубого, который уже используется в пользовательском интерфейсе.

5. Добавьте глубину

Плоский дизайн необязательно должен быть совсем плоским. Добавьте слабые трехмерные тени или градиенты. Так вы четко обозначите взаимосвязь между элементами.

Материальный веб-дизайн (Material Design) — визуальный язык, созданный компанией Google, был представлен в 2014 году. Лучшее качество материального дизайна — это тщательно продуманная структура с четкими правилами, действиями и визуальными свойствами. К сожалению, его не всегда правильно применяют на деле. Например, зачастую тени и градиенты используются для улучшения визуального ряда, а не для того, чтобы поддержать пользователей и создать для них четкие индикаторы.

material.io

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

Скриншот приложения LiquidText

В довольно плоском по форме приложении для аннотаций для iOS используются едва видимые тени. Они попадают под интерактивные элементы и панель инструментов и разделяют элементы пользовательского интерфейса от текста.

6. Сомневаетесь? Добавьте ссылку

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

nrdc.org

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

Подведем итоги

Плоский дизайн — мощное направление в дизайне — но только при правильном применении.

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

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

Рассмотрите каждый элемент на соответствие этому чеклисту, чтобы проверить удобство пользования:

Чек-лист:

Подсказки, какие элементы кликабельные, постоянны по всему сайту.

Кликабельные элементы выделяются, имеют достаточный контраст и заметны.

Кликабельные элементы находятся именно там, где пользователи ожидают их найти.

Отсутствуют элементы, которые выглядят кликабельными, хотя таковыми не являются.

Все элементы, относящиеся к одному и тому же фрагменту контента (иконка, изображение, текст), связаны и указывают на одну и ту же страницу.

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

Оригинальный текст: Kate Meyer / nngroup.com
Перевод: Светлана Граудт
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Читайте также:

Навигация по сайту — примеры как сделать навигацию удобной

Белое пространство: способы вёрстки контента на сайте

Виджеты для сайта бесплатно — Прокачай Тильду!

Обучение веб дизайну: 70+ лучших ресурсов о веб-дизайне

Картинки для сайта — как подбирать фото и изображения на фотостоках

Где найти фото — руководство по поиску картинок для сайта или статьи

Анализ и подготовка контента при создании сайта

Как написать текст для лендинга — создание текста для landing page

Шрифт для сайта — как выбрать или поменять шрифты

Размеры изображений для 7 социальных сетей — справочник

Как создать сайт. Пошаговое руководство

37 лонгридов с отличным дизайном

Лучшие флэт-сайты: 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-цветом создает атмосферу профессионализма и спокойствия.

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

Дизайн, пользовательский интерфейс, UX, вдохновение

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

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

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

1. Кардиохирургическое руководство: плоский стиль с иллюстрациями и UX-анимацией

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

• Тема: Медицина, Руководство по хирургии
• Достоинства дизайна: Интерактивный дизайн, плавная микроанимация, компактность
• Страна: Испания
• Дизайнер: La Negrita 

Посетите вебсайт

2. Studio 9P: Торжественное открытие, анимация и множество мемов

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

• Тема: Веб-разработка, Портфолио
• Достоинства дизайна: Динамичный дизайн, плавные переходы, большой выбор шрифтов и пользовательских эмодзи
• Страна: Франция
• Дизайн: Studio 9P

Посетите вебсайт

3.

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

• Тема: Продукты питания и напитки, электронная коммерция
• Достоинства дизайна: Забавная загрузка и анимация заголовка, отличное сочетание мультяшного дизайна с реальными объектами как часть опыта
• Страна: Канада
• Дизайн: Polyform Studio

Посетите вебсайт

4. Mila Real Estate Professionals: Чисто и просто, но очень увлекательно

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

• Тема: Недвижимость, Агентство
• Достоинства дизайна: Простота, чистый дизайн и код, плавная микроанимация и эффектные иллюстрации.
• Страна: Франция
• Дизайн: АКРОЛАБ

Посетите вебсайт

5. La Puce à l’oreille: красивый мультяшный интерфейс и классная навигация

La puce à l’oreille создает подкасты для детей и подростков. Веб-сайт предлагает подкасты, сотрудничество, мероприятия и интерактивные мероприятия для разных возрастов, от 4 до подростков. Он имеет красочный плоский мультяшный интерфейс и потрясающую навигацию, размещенную в интерактивных формах. Определенно стоит проверить.

• Тема: Недвижимость, Агентство
• Достоинства дизайна: Красивая цветовая гамма, хорошо проработанный мультяшный интерфейс, интересная навигация
• Страна: Канада
• Дизайнер: Акуфен

Посетите вебсайт

6. Дома века: олдскульный плоский дизайн с плавной микроанимацией

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

• Тема: Недвижимость, строительство и проектирование частных домов
• Достоинства дизайна: Профессиональный дизайн, простота, хорошая структура, большие изображения и чистая плавная микроанимация.
• Страна: Россия
• Дизайнер: Микаэл Сагиров

Посетите вебсайт

7. Винная таверна Alzavino: современный и стильный веб-интерфейс

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

• Тема: Бары и рестораны, винный погребок
• Достоинства дизайна: Чистый, минималистичный, простой в навигации, современный дизайн с крупными заголовками, высококачественными изображениями и уютной цветовой гаммой, подходящей для бренда.
• Страна: США
• Дизайн: Gardner Design

Посетите вебсайт

8. 2Создание: минимальный плоский дизайн, типографика и анимация

Мы не могли не включить веб-сайт материнского корабля, особенно после того, как получили столько удовольствия от редизайна. Здесь мы решили создать одностраничный сайт с навигацией по разделам. Используя фирменные цвета и фирменный шрифт бренда, мы воспользовались преимуществами простого плоского дизайна, чтобы сосредоточиться на более интерактивном опыте с плавной анимацией, типографикой и сделать ваше пребывание веселым. В конце концов, это должно быть весело, вот и все! <3

• Тема: Веб-разработка, веб-дизайн, разработка бренда
• Достоинства дизайна: Чистый, минималистичный, удобный для навигации, одностраничный, большие заголовки и визуальные эффекты, плавная микроанимация и Саймон на одной из фотографий.
• Страна: Болгария
• Дизайн: htmlBurger (Привет! ;))

Посетите вебсайт

9. Веб-сайт портфолио Пабло Фариаса: Beautiful Interactive Gallery

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

• Тема: Мастерство, создание музыкальных инструментов, портфолио
• Достоинства дизайна: Крупный жирный шрифт, музейный вид, динамичная интерактивная галерея
• Страна: Италия
• Дизайн: ET Studio

Посетите вебсайт

10. Портфолио Roger Haus Illustrator

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

• Тема: Цифровые иллюстрации, NFT, Фрилансер
• Достоинства дизайна: Оригинальность, чистый дизайн, использование иллюстраций художника в качестве элементов, оттенок сюрреализма
• Страна: Испания
• Дизайнер: Юлия Гусева

Посетите вебсайт

11.

Веб-сайт Anni Wang, UX-инженера, который предлагает красочный и интерактивный способ взять интервью у дизайнера, чтобы выяснить, подойдет ли она для вашего проект. Мы сразу полюбили этот сайт за креативную идею формата интервью. Вы можете выбрать свои собственные предпочтения для собеседования, например сосредоточиться на типах вопросов (технических, связанных с UX или личных). В самом интервью вам дают карточки с утверждениями Анни, и вы перетаскиваете карточку вправо, если согласны, или влево, если не согласны с утверждением. В зависимости от вашего выбора вы узнаете, подходит ли Анни для вашей работы.

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

• Тема: UX-дизайн, Фрилансер
• Достоинства дизайна: Оригинальная концепция, отличное исполнение дизайна и кода, динамичность и интерактивность.
• Страна: США
• Дизайн: Anni Wang

Посетите вебсайт

12. Онлайн-коучинг Тома Эванса: Big Bold Old Good Old Flat

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

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

Посетите вебсайт

13.

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

• Тема: Продукты питания и напитки, электронная коммерция
• Достоинства дизайна:  Четкая, хорошо структурированная, легко читаемая, плавная анимация и фотографии реальных продуктов как часть опыта с классной анимацией при наведении курсора.
• Страна: США
• Разработано: Нелинейный

Посетите вебсайт

14. Веб-сайт портфолио Карлоса Молины: Brutalist Flat Design at its Best

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

• Тема: UI/UX дизайнер, портфолио, реклама
• Сильные стороны дизайна:  Отличный взгляд на тенденцию брутального дизайна, яркая анимация, интерактивный опыт, веселье
• Страна: Испания
• Дизайн: Карлос Молина

Посетите вебсайт

Final Words

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

Тем временем вас также могут заинтересовать некоторые из следующих статей по теме:

• 6 лучших примеров систем проектирования, на которых можно поучиться и улучшить свои собственные
• 30 первоклассных портфолио UX-дизайна со всего Интернета
• Как создать образ идеального героя: руководство, практические советы и примеры

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

Поделиться

• Доля
• Твитнуть
• Поделиться
• Приколи

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

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

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

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

Башня заклинаний

Кикфолио

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

Дуб.is

Этчапс

Майкрософт

Сборка окон

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

счет-фактура

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

Квадрат

ржанка

Радио

Вайн

Лоуди

Осборн Барр

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

КоттеджСтраницы

CreativeStatus

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

Нижняя линия

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

SpellTower

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

Кикфолио

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

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

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

Oak.is

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

Etchapps

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

Microsoft

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

Сборка Windows

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

Это фигура Рождество

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

Invoisse

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

Built By Buffalo

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

Квадрат

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

Plover

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

Rdio

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

Vine

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

Lowdi

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

Osborn Barr

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

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

Справочник для учащихся

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

CottagePages

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

Творческий статус

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

Flat UI Kit

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

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

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