Веб — дизайн достаточно сильно изменился за последние 10 лет, и в то же время изменений нет. Если мы вернёмся в прошлое на десятилетие назад, то увидим, что в веб был очень общий макет шаблона, который использовали на массе сайтов. Это шапка сайта левая колонки и футер, всё. В то же время мы могли наблюдать колоссальный рост Macromedia Flash, которая со временем всё же уступила более простым технологиям. Flash была популярна, потому что давала возможность сделать не стандатные макеты, и сайты получались более интересными.
Всё что будет представлено ниже, можно смело назвать необычными сайтами, эта тенденция точно будет популярна в 2015 году. Почему необычные? Потому что эти сайты не следуют строгому шаблону, а имеют свою уникальную структуру.
То, что Вы здесь увидите это смесь необычных тенденций и компоновок, которые должны вдохновить Вас. Ну а сейчас давайте подробнее.
1. Разделённый экран
В данной категории находятся сайты, на которых экран разделён на две части, использую вертикальную линия посреди всего сайта. Есть множество причин почему дизайнеры так делает, но давайте взглянем на две основные.
Первое, это прямое обозначения того, что два элемента на сайте одинаково важны, и дизайнер таким образом выделят их. Как по мне это очень удачное решения, так как чётко видно, что сайт состоит из двух частей и посетителю это очень хорошо видно. Такой подход позволяет быстро обратить на себя внимание обеих сторон, и позволяет пользователю быстро выбрать между ними.
Вторая причина это передача посетителям важной двойственности. Сайт который находится ниже, отчётливо подчёркивает это. Этот сайт хочет передать, что основные сильные стороны их компании лежат на их талантливых сотрудниках. Разделение экрана это отличный способ передать подобное.
eightandfour.com
А теперь давайте взглянем и на другие вдохновляющие примеры подобных сайтов:
carelpiethein.com/en
www.deweyspizza.com
fian.my.id/marka
pomopizzeria.com
2. Нет хрома.
Одним из основных элементов используемых в веб — дизайне, содержит элементы: линии, границы, видимые блоки и все те элементы, которые разделяют содержимое друг от друга. Давайте рассмотрим совершенно противоположный вариант, в котором все элемент расставлены аккуратно друг от друга, и совершенно ничем не разделяются.
Это совершенно минималистический подход, но и в нём есть очень интересные варианты, которые стоит посмотреть.
www.br-time.jp
В данном примере, вообще не существует стандартной разметки, и тех линий разделения, которые мы привыкли видеть. Иерархия содержания данного макета осуществляется слева на право, таким образом делая его интуитивно понятным.
foreword.io
Тут мы видим чёткое и понятно содержание, к которому нас хочет привлечь дизайнер. Тем самым тут подаётся нам самая важная информация, название фирмы, и то чем она занимается. Всё самое главное, и то что именно нужно, очень удачный подход. Ну и конечно же в видимое поле попадает навигация, с помощью которой Вы можете напрямую связаться с фирмой. Очень удобно.
www.harvardartmuseums.org
www.voiceshavepower.com
drurybuildings.com
3. Сетка как основа.
Так же у нас есть макеты, которые использую сеточную или решёточную конструкцию. Такой способ даёт хорошую возможность продемонстрировать как можно больше контента в зависимости от размера экрана. Это не совсем новый подход, но адаптивный дизайн делает его ещё более полезным.
www.teambadcompanyrowing.com
Этот пример прекрасно демонстрирует эту конструкцию. Дизайн полностью адаптивный. Как только разрешение экрана меняется, блоки сразу же адаптируются. Такой способ так же позволяет на много легче адаптировать дизайн под любой размер экрана.
madagascar.dreamworks.com
Этот пример довольно необычен и более сложен. Тут используются разного размера блоки, но их так же легко адаптировать. Тут так же есть один важный элемент, которого так не хватает в прошлом примере, при уменьшении экрана, самые важные по значению блоки появляются первыми, это очень важно понимать.
plfixtures.info
guide.residence-mixte.com
tevko.github.io/practice
4. На весь экран
Наконец то, у нас есть сайты, которые растягиваются на всю ширину экрана. Вся прелесть такой конструкции в том, что она с лёгкостью адаптируется под любой размер экрана. Еще подобные сайты адаптируются таким образом, чтобы не появлялась полоса прокрутки. Это означает, что информация на таких сайтах должна быть чётко сосредоточена на чём либо.
hatchcollective.co.uk
www.shamballajewels.com
www.erikfischer.com
twinpics.itrocksstudio.com
nikolaylechev.com
Вывод.
Исходя из выше приведённых примеров, реальность такова, что практически все сайты состоят из блоков, которые разнообразно расположены. Всё же со временем дизайнеры становятся более смелыми и делают совершенно необычные сайты, которые в следствии становятся шедеврами
.