За последние 10 лет интернет изменился очень сильно. И в то же время, он не изменился совсем. Если проанализировать развитие интернета за последнее десятилетие, то можно заметить, что большинство сайтов устроены по самому обычному примеру. Сайт включал следующие составляющие: шапка сайта (header), подвал сайта (footer), боковая панель сайта (sidebar), и непосредственно содержание. Это был самый обычный проект сайта. В то же время, стоит отметить подъем Macromedia Flash, и, как следствие, появление альтернативных вариантов в проектировании сайтов, т.е. вариантов проектов, которые не подпадали под общепринятую формулу, описанную выше. С момента подъема Flash метод стандартной формулы был забыт на какое-то время. Я сказал «на какое-то» время, т.к. позже он вернулся, чтобы взять свое.
Если вы посмотрите какую-либо из популярных сегодня галерей, посвященную современному веб-дизайну, вы, без сомнения, заметите, что фундаментальная структура страниц не фиксирована. Она может быть гибкой ,и изменяться настолько, насколько это необходимо. На мой взгляд, это одно из лучших изменений, которое могло произойти в веб-дизайне. Новое правило состоит в том, что фиксированной формулы нет вообще.
Все это говорит о том, что в веб-дизайне можно выделить несколько высокоуровневых трендов, то, что я считаю нестандартным проектом. Нестандартные эти проекты потому, что они не следуют какой-то определенной формуле или предопределенной системе. Но я могу привести десятки, если не сотни примеров, подходящих под эту категорию.
Здесь вы найдете интересные тенденции и необычные проекты, которые, надеюсь, помогут вам определить те фундаментальные структуры, которые вы будете использовать в веб-дизайне в дальнейшем. Давайте посмотрим…
Разделение экрана
В этой категории мы рассмотрим подборку сайтов, на которых используется метод разделения экрана. Применяется способ вертикального разделения. Исследуя несколько образцов подобного типа, я выявил много причин применения этого метода. Но в основном этот метод используется по 2-м причинам.
Первая – в дизайне могут использоваться два первоначальных элемента одинаковой важности. Общепринятый подход к веб-дизайну – выстраивать вещи в порядке значимости. Эта значимость отражается в иерархической структуре дизайна. Но что делать в том случае, если тебе нужно продвигать две вещи одновременно? Этот метод позволяет сделать обе вещи равнозначными и позволяет пользователю осуществить быстрый выбор между ними в момент просмотра.
Вторая причина, по которой, как я выявил, используют этот подход, состоит в том, что необходимо передать двойственность. Возьмем, к примеру, вебсайт Eight and Four.Здесь они хотят передать, что их одинаково сильными сторонами являются цифровые корни и талантливый персонал. Этой парной структурой они выделяют то, что их отличает от других. Разделенный экран – отличный способ показать это. Лично мне также нравится, как эти две стороны объединены при помощи амперсанда (знака &).
Никаких выделений!
Один из ключевых элементов, используемых в веб-дизайне, включает следующие составляющие: ящики, рамки, выделители и контейнеры разных типов, используемые для того, чтобы разделить содержимое страницы. Включая шапку сайта, в которой элементы расположены аккуратно и отделены от контента. На сегодняшний день одна из общих тенденций сводится к тому, чтобы избавиться от всех ненужных выделений.
Это минималистический подход, но он идет на шаг дальше и имеет несколько интересных поворотов на протяжении всего пути.
В этом примере удалены как шапка сайта, так и его подвал. Это больше похоже на интерактивный киоск. Иерархия контента выстроена слева направо, что помогает сделать сайт очень удобным. И поэтому нет нужды использовать выделения, чтобы отделить панель навигации от контента.
Здесь мы видим, что содержание выражено отсутствием шапки и подвала сайта. Вместо того, чтобы читать сначала шапку сайта, вы читаете название компании и информацию об их деятельности и местоположении. Следует за основной навигацией. Отличный способ выделить бренд перед тем, как отправлять людей к навигации. Красивый и эффективный проект, вдохновляющий на использование данного примера.
Модульный и сеточный способы
Далее нам представлены решения дизайна сайта, основанные на модульной или сеточной структурах. В этих разновидностях дизайна каждый модуль подстраивается под размер экрана. Эта не совсем новая методика, но быстро меняющийся веб-дизайн сделал ее еще более полезной. Этот штрих в адаптируемом проекте можно создать при помощи таких плагинов, как Masonry.
В этом примере данная идея представлена в лучшем виде. Дизайн очень гибкий. С изменениями размера экрана меняется размер каждого модуля. Равномерное разделение пространства упрощает адаптацию. Дополнительная похвала создателям за введение элемента, разрывающего неподвижные барьеры между модулями (можно увидеть на экранах побольше).
Этот пример является более интенсивной версией данного метода. Это делает приемлемым модульный подход, что позволяет перемещать содержание(контент) по мере необходимости. Но в данном примере присутствует важный элемент дизайна, который отсутствует в предыдущем. Размер модулей изменяется, чтобы отразить порядок важности и место в иерархии. Риск модульного подхода в том, что он делает все разделы одинаковыми по размеру, что не позволяет выделить какой-либо из них. Напротив, этот пример четко указывает на важность первоначальных элементов.
Заполнение неразделенного экрана
Примеры, приведенные ниже, являются примерами сайтов, созданных с использованием подхода, при котором дизайн адаптирован на заполнение неразделенного экрана. Это разновидность быстроменяющегося дизайна, который адаптируется под размер экрана. Но в этом примере дизайн адаптирован таким образом, чтобы полностью заполнить экран, что не производит линий прокрутки меню. Отсутствие данной линии означает сосредоточение содержания(контента), и то, что иерархия контента четко организована. Я считаю, что фокус и простота этих сайтов привносят определенное новшество.
Вывод
В статье была проанализирована каждая из вышеупомянутых тенденций по отдельности, т.к они представляют собой «строительные блоки», основы моделирования. И эти блоки можно собрать разными способами и в разном порядке. Следует отметить, что многие из образцов, представленные здесь, могут быть отнесены ко многим категориям, которые мы обсудили. Разнообразие тенденций современного интернета, и возможность их использования делают его актуальным рабочим инструментом.
Как вы считаете, это все основные тенденции?
Автор – Patrick Mcneil
Перевод – Команда Лопарт (Владислав Мамонов)