Плоский дизайн (англ. flat design) — минималистичный подход к дизайну объектов, который подчеркивает удобство использования, он в большей степени ориентирован на конечного пользователя.
Плоский дизайн начал развиваться в противовес концепции скевоформизма и выступал против методов «реальной» визуализации объектов в пользу более упрощенных и эстетически простых решений.
Скевоморфизм — объект или элемент его дизайна, выполненный как имитация другого объекта или материала. Данное направление в дизайне стремиться воплотить реальный внешний вид объектов с помощью реалистичных текстур, теней, градиентов [1].
В процессе разработки сайта в структуре учитываются мельчайшие подробности и технические элементы, которые могли бы облегчить поиск пользователей, и не только привести их на конкретную интернет-страницу, но и задержать их на ней. При этом очень важной деталью является описание структуры сайта. На начальном этапе целесообразнее всего использовать линейный тип, поскольку смешанный тип план-сайта может достаточно быстро запутать пользователя, и ему уже будет нелегко вернуться на нужную страницу. Структура веб сайта должна быть максимально простой, чтобы людям не приходилось запоминать обратное возвращение, как целую блок-схему. Для всех посетителей нового ресурса структура web-сайта будет неизвестной, возможно просто похожей на те, что они уже встречали. Именно поэтому, даже если продукция и услуги, представленные на сайте, удовлетворяют интересы пользователя, но ему сложно разобраться в структуре веб сайта, он покидает страницу. Навигация должна быть удобной, то есть для того, чтобы увидеть наглядное изображение необходимого товара и прочитать подробную информацию о нем, потенциальный клиент не должен переходить по десяти ссылкам разветвленной схемы.
На самом деле, существует всего лишь три этапа посещения сайта пользователем. Первый — это его непосредственный вход на сайт, второй — передвижение по сайту, третий — выход, причем, либо с получением необходимой информации, либо не удовлетворенный нерешенными задачами. Таким образом, исход будет зависеть от того, насколько разработчик упростил работу пользователя. Реальность такова, что сегодня существует достаточное число точек, ведущих на конкретный сайт, и столько же вариантов выхода. Но, будучи незнакомыми с описанием структуры сайта, пользователи довольны до тех пор, пока у них присутствует чувство уверенности в том, что шаг за шагом они приближаются к своей цели. К сожалению, очень часто эти надежды не оправдываются.
Любой посетитель, оказавшись на сайте, вначале ищет навигационные элементы, то есть меню или различные ссылки. При этом важно, чтобы содержимое указанных деталей было идентично их названиям, в противном случае они не только не помогут пользователю в поисках, но и запутают его. Другими словами, навигационные элементы направлены на то, чтобы структура web-сайта стала пользователю более понятной, и он сразу же мог определить, сможет ли он на конкретном сайте найти необходимую ему информацию или нет. Безусловно, сложность создания структуры сайта зависит от типа сайта. К примеру, интернет-ресурс большой компании будет иметь совсем иные разделы, нежели чей-то персональный сайт.
Разветвление информации при разработке сайта и структуры обязательно, ведь таким образом к ней облегчается доступ не только пользователей, но и редакторов, которые должны следить за её обновлениями и дополнениями.
К сожалению, на сегодняшний день имеет место мнение разработчиков о том, что чем разветвленнее и шире будет правильная структура сайта, тем профессиональнее покажется их работа, но при этом они не учитывают, что создание структуры сайта производится для рядовых пользователей, а не подобных себе специалистов. Ведь навигация создается именно для посетителей ресурса, поэтому и определяющими критериями при её формировании должны быть удобство, простота и легкий доступ.
При правильной структуре сайта представлении информации разделяется на структурные группы и соответствующие уровни. Конечно, в зависимости от направленности и типа сайта требования могут быть другими, но основополагающие принципы серьезные разработчики должны соблюдать всегда.
Пример — мобильное приложение «Блокнот», в котором записи можно вести на пролинованных страницах с фактурой бумаги.
На первый взгляд может показаться, что упрощение элементов дизайна может сделать Ваш товар серым, блеклым и не интересным. Это не так.
Решения «плоского» дизайна могут быть красивыми и очаровательными, привлекать своей чистотой и утонченностью. В период переизбытка информации, рекламного шума продукты «плоского» дизайна кажутся островком спокойствия, устойчивости и понятности.
«Плоский» дизайн получил такое название, так использует двумерную визуализацию объектов. В нем отсутствуют элементы, направленные на придание глубины и объемности: такие как тени, рефлексы, градиенты, текстуры, блики. Элементы плоского дизайна передают только контуры реального объекта.
В последние несколько лет мы видели быстрый переход в разработке интерфейса программного обеспечения, веб сайтов и UI приложений. Дизайнеры все чаще предпочитают яркому и красочному 3D плоскость, лаконичность и минимализм. Эта тенденция распространилась очень быстро и практически повсеместно.
Давайте же рассмотрим, почему так получилось, и что оказывает влияние на дизайн интерфейса в целом. Также здесь приводятся практические советы и рассматриваются особенности реализации плоских интерфейсов.
Итак, как же коллективное сознание от любви к текстурированным, и объемистым интерфейсам перешло к простым цветам и плоскому дизайну? Этот переход был вызван множеством факторов. Ниже приводятся основные из них [2]:
1. Информационная перегрузка.
В нынешнее время, с развитием технологий, мы имеем дело с непрерывным потоком информации. Некоторая информация является для нас важной и актуальной, но большинство из нее не имеет для нас никакого значения. Мы постоянно усваиваем эту информацию, оцениваем ее важность для себя, фильтруем ненужное, и создаем новый контент. Большая часть контента переехала на устройства с небольшими экранами, которое усугубляет ощущение перегрузки. В данном случае упрощение интерфейса может несколько уменьшить это неприятное ощущение.
2. Простой интерфейс.
К подобным факторам часто призывают разработчики веб-приложений и сервисов, с небольшим набором функций. В то время как традиционные разработчики программного обеспечения, как правило, пытаются наполнить свои продукты избытком функций, чтобы оправдать высокие ценники. Это сдвиг в сторону ориентированных микро-приложений, в которые простота имеет превосходство над набором усложненных опций. Более простые приложения и с виду выглядят более привлекательно, не отпугивая посетителя избытком непонятных функций.
3. Содержимое на первый план.
Как это часто бывает, когда новые устройства и технологии выходят на рынок, мы в восторге от их «продвинутости» и интерактивности. Этот интерфейс-ажиотаж постепенно успокаивается, а интересы пользователей устремляются в сторону содержания. Медиа потребление выводит на первый план возможности девайса в плане прослушивания музыки, просмотра видео, написания каких-либо текстовых сообщений (для работы, общения и. т.д.) Мы сами выбираем для себя то, что нам нужно от устройства, и потому мудреный интерфейс может играть с нашим гаджетом злую шутку.
4. Технологическая грамотность населения.
Насколько быстро смартфоны и планшеты проникли во все слои населения по всему миру — настолько и уменьшилась забота о простоте и очевидности управления. Ранее были опасения, что пользователи могут не замечать каких-либо кнопок, путаться в управлении и. т.д. — то теперь население готово к новым свершениям технологического процесса. Windows 8 и Chrome для Android даже поддерживают сенсорные команды, функционирующие за пределами экрана, без визуального индикатора.
5. Влияние технологий.
Большая часть программного обеспечения ограничивается платформами, на которой оно работает. Размеры экрана и плотность пикселей являются ограничивающим фактором для оборудования. В то же время, минимальный интерфейс требует очень ограниченную палитру дизайна, что означает, что каждый элемент должен аккуратно выделяться. Типографские шрифты, во многом определяют как эстетику и удобство плоским дизайном.
Если ваши целевые устройства не могут справиться, с предложенным дизайном — вам не повезло. Чем меньше размер экрана и плотность пикселей на мобильных устройствах — тем меньший интерфейс может быть представлен. Конечно, поддержка @-лицевого шрифта ускорило обращение минимальных конструкций.
6. «Резиновый» дизайн
С распространением подключенных устройств различных размеров, интерфейсы пришлось стать более гибкими, а дизайн — приспособленным к различному разрешению экранов. Ввиду того, что резиновый дизайн не требует особой эстетики, можно было бы утверждать, что плоские интерфейсы поддаются ему легче. Есть и еще другое преимущество: при минимальном дизайне снижается вес страницы и время загрузки.
Жестких правил в области дизайна не существует. Довольно удивительно, как дизайнеры активно вкладываются в создание чрезвычайно простых пользовательских интерфейсов.
Каждый, кто заказывает создание собственного Интернет-ресурса, даже не подозревает о том, насколько этот процесс сложен и кропотлив. Прежде чем приступить к разработке сайта компании, необходимо провести ряд маркетинговых исследований, в том числе и в части Интернет-сайтов конкурентов, а именно: оценить дизайн, наполнение, структуру и другие элементы, ведь рейтинг компании также во многом зависит от того, насколько профессионально был выполнен её сайт.
После тщательной оценки Интернет-ресурсов своих конкурентов вы сможете определить положительные и отрицательные аспекты и учесть их при разработке собственного сайта. Вам станет ясно, что следует, а что категорически нельзя размещать на странице. Стоит обратить внимание и на то, какие сайты в поисковых системах выводятся на первые места, и по каким запросам.
Все эти аналитические данные находят отражение в техническом задании. Этот документ представляет собой перечень задач, которые будет выполнять сайт, а также способы их осуществления путем формирования удобной навигации, структуры сайта, его дизайна, контента. В нем прописывается стоимость всех услуг.
Только имея на руках техническое задание, специалисты могут приступить к разработке сайта компании.
Безусловно, огромное внимание уделяется оптимизации под поисковые системы, чтобы обеспечить более частую посещаемость. Это тоже немаловажно, ведь именно от того, какое число посетителей побывает на вашем сайте, будет зависеть его успех. Кого-то из них обязательно заинтересуют представленные предложения, у компании появятся постоянные клиенты, которые расскажут о вашем существовании еще многим другим потенциальным клиентам.
После того, как все тесты успешно пройдены, сайт попадает на сервер; заранее приобретается домен. Процедура создания сайта — это дело рук далеко не двух и не трех мастеров, над ней работает целая команда профессионалов, а именно: программисты, оптимизаторы, художники, контент-менеджеры, верстальщики и многие другие.
Литература:
1. Нильсен Я., Перниче К. Веб-дизайн: анализ удобства использования веб-сайтов по движению глаз = Eyetracking Web Usability — М.: «Вильямс», 2010. — С. 480. — ISBN 978–5-8459–1652–5.
2. Титтел Э., Ноубл Дж. HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML & CSS For Dummies, 7th Edition — М.: «Диалектика», 2011. — 400 с. — ISBN 978–5-8459–1752–2.
