Если понаблюдать за развитием дизайна интерьеров, экстерьеров, даже за направлением развития социальных взаимодействий в той или иной сфере (политика, образование, масс-медиа, интернет и пр.), то достаточно часто можно услышать о таких концепциях, как «открытость» и «прозрачность». Но знаете, что интересно? Эти концепции отлично можно использовать и в более узкой сфере деятельности, такой как веб-дизайн. И причина тому весьма незаурядна – общие концепции дизайна, они общие для всех направлений этого самого дизайна, также находят отражения и в иных областях.
Концепция открытости позволяет создавать макеты веселые и функциональные, визуально привлекательные и строгие одновременно. Пользователям становится проще перемещаться по сайту и контролировать контент, что вы предложили ему для ознакомления. Да, разумеется, концепция имеет свои нюансы использования, реализации, вариации сочетания, но все это больше относится к теории дизайна в целом.
Мы же в этом материале пойдем иным путем и будем рассматривать использование концепции открытости сразу на примерах. Разных по формату, объему, масштабу и тематике. Таким образом, мы попробуем, что называется, «убить двух зайцев»: найдем новые идеи веб-дизайна и чуть-чуть углубимся в теорию. Посмотрим, что из этого выйдет…
Особенности концепция открытости веб-дизайна
В дизайне интерьеров концепция открытости – это когда несколько пространств объединяются таким образом, чтобы создать одно большое пространство, которое словно поток, заполнило бы всю площадь квартиры или дома. Например, большой единый проход между комнатами, плавно перетекающий в кухню. Нет дверей, но есть арки или неполные стены. Это скорее подходит и более наглядно можно увидеть в дизайне квартир-студий, огромных по площади и без стандартного разделения на множественные небольшие комнатки.
В веб-дизайне реализация концепции несколько похожа. «Открытый» макет также реализуется путем создания огромного пути между элементами, яркого и воздушного. Таким образом, свободное пространство используется максимально, а элементы создаются невероятно простыми, но гармоничными, дабы создавался баланс между этим самым пространством и элементами.
Цвет… он может быть насыщенным, но не ярким и кричащим. Его задача плавно обволакивать элементы и подчеркивать «открытость». Разумеется, что именно поэтому белому или светлым оттенкам отдается предпочтение. А если говорить о размере страниц, то уже и не играет роли, потому как прокрутка может быть длинной или короткой, или все страницы будут иметь фиксированный размер по ширине Х высоте. Это неважно. Свободу и открытость можно создать и реализовать при любом варианте.
Другой вопрос в том, когда лучше использовать «открытость». Ну, согласитесь, не для каждой тематики или типа сайта такая концепция вообще уместна. Да, веб-дизайнеры пытаются создать нечто подобное и для интернет-магазинов, и для бизнес-проектов. Но это уже смешивание стилей, поскольку продумать такой вариант дизайна сложно и... затратно по времени. Наиболее приемлемо бывает использование «открытости» в макетах с призывом к действию или с подробным описанием услуг. То есть там, где не может произойти смешивания огромного числа элементов и стилей дизайна. Где всего-то и нужно расставить иконки/изображения и создать немного текста. Большего не требуется вообще.
Но это общая теория и особенности, казалось бы, что ясные и понятные, но даже благодаря им, не всегда можно достичь желаемого визуального решения. Главное, что следует иметь в виду при работе с «открытостью» - визуальный «поток свободы» должен быть очевиден даже не для вас лично, а для пользователей. Именно они должны точно знать, что делать на сайте, куда перемещаться, где и что находится, и куда и что ведет. Только тогда, можно смело говорить о том, что в макете данного сайта использовалась концепция открытости. В противном случае, получится так, что вроде бы все есть (меню, кнопочки, картиночки), а куда кликать и зачем – непонятно. И вообще неясно, чего данный сайт от меня (как пользователя) хочет?
Яркие цвета против белого
Проект NooFlow весьма интересен с разных точек зрения. Сразу, что бросается в глаза – легкость и быстрота работы сайта в целом. Да, вот уж что есть, то есть.
Большинство идей концепции открытости подразумевают и используют в качестве фона – светлый тон/белый цвет. Но представьте, что вполне возможно использовать и любой иной. И именно такой розово-красный (не алый) и применен на данном сайте. Правда только на домашней странице (или частично на других), а в дальнейшем фон светлый и легкий, с едва заметным геометрическим рисунком-линиями. Но выглядит весьма ошеломляюще и интересно. И глаза не режет аляповатостью.
Если прогуляться по сайту, то в целом использовался дизайн с разделенным экраном, сбалансировано сочетание элементов с текстом. Все понятно, удобно читать, смотреть, изучать. Даже всплывающее меню прозрачное и не рассеивает внимание посетителей.
Но в целом идея сводится к тому, что использование яркого цвета может быть простым и непритязательным. Дизайн в целом имеет много свободного пространства, свободного потока и пути, благодаря которому удобно изучать контент, и который своим наличием побуждает нас пролистывать страницу за странницей.
Нескольку путей изучения контента
Иногда идея свободного потока способна связывать не только элементы контента, но и прокладывать своеобразный путь от логотипа, меню и персонализации к основному содержанию сайта. Именно это и реализовывали дизайнеры на Brightscout. Или наоборот, зависит от того, что начинает пользователь первым рассматривать на сайте: изображение, а потом логотип.
Какова идея концепции открытости здесь? Представьте себе план этажа дома. Вот эта же техника проектирования и здесь присутствует. Поясним. Имеется несколько точек входа с воображаемыми путями и потоками, вы можете изучать контент сверху вниз, снизу вверх, с середины и в стороны, или сразу пролистывать страницы, которые также предлагают разный путь визуального изучения. Но при этом существуют большие кнопки призыва к действию, созданные в общей цветовой палитре, которые и не выделяются-то особо, но заметны.
Функциональность данного сайта проста, понятна и удобна. И само изображение логотипа использовано везде, где только можно. Между секциями страницы, в качестве дополнительной иконки и прочее. Просто прогуляйтесь по сайту и вы наглядно увидите, о чем мы рассказывали.
Много пустоты или эффективность?
Много свободного пространства не бывает? Бывает. Иногда. Но иногда также бывает и так, что это огромное количество свободного места, пустого на страницах, выглядит уместно и элементы на нем не теряются и сайт «голым» не выглядит. Хотя, да, общее мнение многих дизайнеров сводится к тому, что чем больше пустого пространства, тем концепция открытости более наглядна. Хотя… не в этом дело. Задача пространства подсказать пользователю, где кончается одна часть сайта и начинается другая.
Вот эту идею и использовали на сайте Duotix для того, чтобы подчеркнуть визуальное различие между блоками контента, каждый из которых имеет свой призыв к действию. И это при том, что и страницы были разделены напополам.
Если говорить о фоне, то можно увидеть чередование белого и цветных тонов, что аккуратно помогают каждому из нас, как посетителям, перемещаться по сайту. Таким образом, несмотря на открытость и обилие свободного пространства, дизайн смотрится очень свежо и функционально. Он приятен и понятен. Наверно, это один из лучших примеров реализации концепции «открытости» и «свободы» в веб-дизайне.
Частичная свобода
Идея простоты визуального изучения контента использовалась везде в наших примерах, но иногда концепция открытости может применяться не ко всему дизайну в целом, точнее выглядеть таковой. Речь идет о проекте abelodor, где можно увидеть мысленное разделение страницы на две части по горизонтали. Вверху много свободного пространства, там словно бы чисто и ярко, просторно и уютно. В нижней же, наоборот, очень много объектов (карточек), информации, фотографии.
Если начать прокручивать страницу, то концепция сохраняется, но вот эти нижние элементы начинают уменьшаться, сгруппировываются и создают, таким образом, иллюзию свободного и чистого полотна, под которым появляются новые объекты. Посмотрите это лично, дабы нагляднее понять весь смысл идеи открытости в данном случае.
Тем не менее, этот проект очень хорошо отражает тот факт, что не все сайты электронной коммерции должны быть перегружены карточками товаров, акционными предложениями, рекомендациями и прочим, и прочим. Интернет-магазин вполне можно создать очень и очень современным, с совершенно, казалось бы, неподходящим к тематике, дизайном. Очень свежо и оригинально!
И в таком варианте может быть выполнена только начальная страница, а уже внутри товары могут находиться в стандартном сетчатом виде и рассортированными по категориям.
Асимметрия цветов и объектов
Асимметричность – хороший друг для концепции открытости. И хорошим примером послужит проект hampshirelight. Если в целом посмотреть на дизайн сайта, то создается некое чувство воздушности, парения в воздухе. Все выглядит легким и неутяжеленным: каждый элемент, будь то изображение или текст, типографика, сочетания ярких и нейтральных цветов.
В большей степени достигнуто это именно типографикой и увеличенным расстоянием между строк. Но при этом шрифт используется тонкий, без засечек. И хотя это очень рискованный шаг, (как мы говорили ранее, такой шрифт тяжело читать) благодаря именно большим отступам каждая буква выделяется, самостоятельна, но текст не является «разбитым».
Таким образом, если предположить, что типографика была бы обычной (среднестатистической), то эффект открытости не был бы реализован в полной мере. Создавалось бы ощущение, что дизайнеру потребовалось попросту заполнить чем-нибудь свободное пространство, и он разрисовал его цветными прямоугольниками. Но в данном случае мы видим целостную картину, которая своим видом говорит пользователю: «здесь много места, здесь широко».
В интернете очень много и других примеров дизайна с концепцией открытости. И, разумеется, кто-то найдет и лучшие, по его мнению, и, может, более занятные. Но мы подобрали те, что по нашему мнению, более всего олицетворяют вариации использования концепции. Дополнительно мы рекомендуем посмотреть такие проекты как: cruxmedia(с glith-эффектом), walkingmen (воздушность во всем, от изображений до типографики), open-wear (насыщенный информационный портал, который при этом создан строго в концепции открытости изучения и единого потока исследования), icon-shop, .jt, hesterslife, bucketlistly.
Выводы
Мы рассмотрели тенденцию веб-дизайна с концепцией открытости и свободы как то, что способно преобразовать проект и совершенно иначе представить его в интернете. И все от того, что корнями эта тенденция уходит в теорию дизайна в целом. Дело в том, что макеты, использующие данную концепцию, никогда не устареют.
Свобода, вообще, никогда не может устареть, с философской точки зрения. А значит при любых трендах, модах, стилях использование открытости всегда уместно и только приветствуется.
И да, речь не идет только о свободном пространстве. Нет. Идея открытости, это совокупность и пространства, и размещения элементов, игры цветов, размеров шрифта к объектам и прочее, и прочее, где эта совокупность создает единый поток, путь для изучения контента. Но насколько этот путь прост и понятен, светел и ясен, насколько воздушен и ненавязчив, не перегружен в целом? Проект может быть и блогом, и новостным порталом, и интернет-магазином, но концепция может отражаться и там.
Что опять-таки возвращает нас к тому, что веб-дизайн очень творческая профессия, требующая некоторого внутреннего видения и осознания того, что создается на холсте, как это будет восприниматься посторонними (не вами, но пользователями, и заказчиком).