Плоский дизайн примеры. Основные принципы плоского «flat» дизайна

1. jQuery галерея с эффектом перелистывания страницы

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

Уникальный способ отобразить ваши фотографии в виде jQuery необычной галереи.

3. jQuery галерея изображений для товара, плагин «slideJS»

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

Изображение увеличивается при наведении на него курсора мыши.

5. Элегантная Lightbox галерея «ppGallery»

6. Мини-галерея jQuery «Touch-Gallery»

7. Новая jQuery галерея с миниатюрами

Профессиональная jQuery галерея 2011 года.

8. jQuery плагин «Nivo Zoom»

Еще один качественный jQuery плагин от разработчиков Nivo слайдера. Увеличение изображение по нажатию на миниатюру.

9. jQuery галерея «3d Wall Gallery»

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

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

11. Необычное отображение изображений в jQuery галерее

С помощью ползунка сверху можно изменить расстояние между изображениями в стопке. При нажатии на изображение оно поворачивается.

12. Плагин jQuery галереи «MB.Gallery»

13. jQuery галерея, растягивающаяся на весь экран

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

14. Легкая jQuery галерея

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

16. Стильная галерея с использованием библиотек jQuery и Raphael

Интересный эффект при наведении курсора мыши на миниатюру.

17. Новая версия jQuery плагина «Supersized» версия 3.1

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

18. jQuery плагин «Galleria 1.2.2»

Новая jQuery галерея для ваших проектов.

Галерея выплывает на странице по нажатию на кнопку. Миниатюры отображаются вокруг увеличенного изображения. Можно управлять автоматической сменой изображений. Используемые технологии: jQuery, CSS, PHP.

20. Плагин «Timer Gallery»

jQuery галерея. Реализована автоматическая смена слайдов и прокрутка миниатюр, если их слишком много.

Плагин галереи изображений на jQuery.

22. javascript галерея для просмотра на мобильных устройствах «PhotoSwipe»

Галерея изображений, оптимизированная для просмотра на мобильных устройствах (телефонах или планшетах).

23. javascript галерея с 3D эффектом

24. Галерея «jQuery morphing gallery»

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

25. jQuery плагин «Galleria 1.2.3»

26. jQuery галерея изображений «Image Wall»

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

27. CSS3 галерея

Интересный эффект при наведении.

28. Галерея с миниатюрами «TN3 Gallery»

jQyery галерея с миниатюрами. Реализована возможность просмотра в компактном окне и в окне на весь экран, а также возможность отключать/включать автоматическую смену слайдов.

29. Сетка изображений «Grid-Gallery»

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

30. jQuery галерея «Swap Gallery»

Легкая галерейка jQuery в несколько строк кода.

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

31. Галерея изображений jQuery

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

Изображение и его миниатюры выполнены в виде кругов.

33. jQuery плагин портфолио фотографа «Portfolio Image Navigation»

Оригинальное javascript решение для оформления портфолио фотографа. Навигация между изображениями осуществляется с помощью стрелок Вверх/Влево/Вправо и при помощи мини-квадратов (имитация перемещения в 2D пространстве). Можно сгруппировать фотографии из разных фото сессий в разные вертикальные ряды и перемещаться по ним с помощью элементов навигации. Смотрите демонстрацию.

34. Плагин «jmFullZoom»

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

35. Фото-карта

Галерея интегрированная с Google картой. Можно развернуть на весь экран, нажав на иконку в правом нижнем углу. Отлично подойдет для туристических сайтов.

36. Галерея изображений с миниатюрами

jQuery галерея с миниатюрами.

37. jQuery галерея «Galleriffic»

Слайд-шоу с миниатюрами.

38. jQuery CSS3 плагин «Wave Display Effect»

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

Много вариантов отображения и настроек.

42. Plogger

43. Простенькая симпатичная галерея, сделанная на CSS, без использования скриптов

Красиво выглядит и отлично работает во всех современных браузерах

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

46. Галерея в виде стопки фотографий

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

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

Пример можно увидеть здесь:

Скачать

Мы рассмотрим более подробно как создать меню из Демо 2 , когда меню появляется слева вверху.

HTML часть

Сперва необходимо подключить библиотеку jQuery, которую можно скачать здесь и плагин Flipping Gallery , между тегами :

1 2 3 4 5 6 <head > ... <"http://code.jquery.com/jquery-1.9.1.js" > <script type = "text/javascript" src = "http://code.jquery.com/jquery.flipping_gallery.js" > ... </ head >

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

1 2 3 4 5 6 7 8 <div class = "gallery" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > ... </ div >

А чтобы добавить описание для изображений(как в демо 4 и 5) необходимо использовать атрибут data-caption :

1 2 3 4 5 6 7 8 <div class = "gallery" > <a href = "#" data-caption= "Очень" > <a href = "#" data-caption= "классная" > <a href = "#" data-caption= "галерея" > <a href = "#" data-caption= "с помощью" > <a href = "#" data-caption= "Flipping" > ... </ div >

JS часть

1 2 3 4 5 6 7 8 9 $(".gallery" ) .flipping_gallery ({ direction: "forward" , selector: "> a" , spacing: 10 , showMaximum: 15 , enableScroll: true , flipDirection: "bottom" , autoplay: 500 } ) ;

Рассмотрим что означает каждый метод:

  • direction — метод отвечающий за то, как будут появляться изображения. Если «forward», то изображение из начала будет помещаться в конец, если «backward» — наоборот. По умолчанию значение задается «forward».
  • selector — селектор по которому выбираем изображения, его можно изменить по желанию.
  • spacing — задает отступ между изображениями в перспективе.
  • showMaximum — задает количество изображений, которые видны пользователю. Можно использовать хоть 100 изображений, но показываться будут только первые 15, что очень удобно и не нагружает браузер.
  • enableScroll — можно просматривать изображения используя колесо мыши.
  • flipDirection — определяет куда будет скользить изображение: «left» — влево, «right» — вправо, «top» — вверх и «bottom» — вниз. По умолчанию оно скользит вниз.
  • autoplay — автозапуск галереи. Задается в милисекундах, т.е. через сколько будут сменяться изображения.

Вывод

Теперь у вас есть великолепная галерея, которую можно использовать при размещении своих фотографий.

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

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

Популяризации плоского стиля в дизайне способствовал выпуск операционной системы Windows 8 от Microsoft в стиле Metro, а также iOS 7, в котором компания Apple также выбирает плоский стиль. Именно после этого и наступает настоящая эра плоского дизайна. Вскоре на Flat -design переходят и крупные поисковые сервисы и приложения - Google , Youtube , появляется множество сайтов, использующих принципы плоского стиля в своем дизайне. В последние годы дизайн в стиле flat является лидером в мировых тенденциях дизайна сайтов .

Преимущества плоского дизайна

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

5 принципов плоского дизайна сайтов

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

1 - Использование двухмерных объектов

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

2 - Иконки и простые объекты

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

3 - Простые шрифты в стиль дизайна

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

4 - Игра цвета

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

5 - Минимализм

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

Используйте яркую, сочную цветовую палитру. Сейчас в тренде тона солнечного спектра: светлые желтые, розовые и зеленые. Главное, не переборщите - цветов на странице должно быть не больше 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 эстетику!

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

Как нельзя рисовать флет-иконки

«Плоский» дизайн сайтов вошел в моду вместе с интерфейсами новой Windows. Росту популярности этого стиля в России способствовало увеличение количества веб-дизайнеров самоучек, которые не знают, что интерфейс веб-сайта и «пальцевый» интерфейс (смартфонов) не одно и то же (легко промотать страницу вниз пальцем — и, напротив, понадобится много терпения и реальной заинтересованности, чтоб крутить колесо мыши вниз на 3-4 экрана). На русских flat-сайтах часто можно встретить такие иконки:

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

За неумением нарисовать качественную графику, дизайнеры-новички легко хватаются за возможность все упростить. При этом упускается из внимания, что дизайн в стиле «минимализм» предполагает именно качественную проработку деталей интерфейса, а не просто размещение скаченных из интернета иконок на цветных квадратах в стиле Windows 8 (что можно встретить сейчас на многих якобы «современных лендинг пейдж»).

Пример хороших плоских иконок:

Цвета и иконки должны сочетаться не только между собой, но и составлять единое целое.

Проблемы некачественного флет дизайна

1. Навигация и юзабилити

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

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

2. Длинные плоские сайты-портянки

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

3. Непонятные кнопки

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

4. Плохо нарисованные иконки

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

Предполагаю, что работа над созданием иконок происходит примерно так: по ТЗ нужна иконка «Индивидуальный подход к клиентам». Лично у меня возникает образ менеджера и двух клиентов, к каждому из которых ведет стрелочка своего цвета (к синему клиенту- синяя стрелочка, к красному клиенту – красная стрелочка). Если дизайнер рисовать не умеет, он будет искать иконку в готовых наборах (в лучшем случае – купит в фотобанке, в худшем – скачает из интернета) и использует ту, которая наиболее подходит по смыслу. Скорее всего, это будет иконка человечка с галстуком или чемодан. В общем-то, не сильно далеко ушел, но все же в дизайне сайта будет понятно, что чемодан к «Индивидуальному подходу к каждому» и Часы к «10 лет на рынке» (кстати, реально видела!) – дизайнер схалтурил.

5. Ложная ориентация на контент

Flat дизайн сайта предполагает ориентацию на контент. Ну, очевидно – если акцент не на графику – то на информацию. Но если внимательно посмотреть «современные» лендинги в стиле flat, которые предлагают российские веб-студии, то контенту как раз уделяется мало внимания. А именно:

  • Текст преподносится как попало. Не понятно, как в нем расставлены акценты, за что зацепиться, а что второстепенно.
  • Отсутствует дизайн как таковой. Таблицы, маркерованные списки, заголовки, анонсы – часто вообще не проработаны.
  • Часто голый текст. Отсутствуют картинки и иконки, подкрепляющие визуально текстовые блоки. В итоге – акцент ни на графику, ни на текст, а на сам «стиль». При этом компания с ее предложениями теряются.

Так нужен ли вообще flat-дизайн для сайтов?

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

Большинство Заказчиков не разбираются в качестве графики и и при утверждении дизайна сайта ориентируются на свой личный вкус (нравится / не нравится). И тут свою роль играет мода.

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

Пример качественного flat дизайна:

Мода на flat-дизайн сайтов временная, как и любая другая мода. Кто-то создает оригинальные, креативные дизайны, а кто-то их копирует и подражает в стиле, поскольку не умеет придумывать сам. И, как грибы, растут дешевые «модные» сайты…

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