Куда пропала душа веба?

Приоритетом дизайнеров должно быть решение проблем. Это то, чем мы занимаемся большую часть времени. Адаптивный дизайн — фантастическое решение проблемы создания виртуальных опытов взаимодействия, адаптирующихся под разные девайсы. Хотя есть ещё проблемы, которые мы призваны решать. Не последняя из них — представлять контент любого вида интересным и вовлекающим. Страница сплошного текста становится прекрасным постом в блоге, мешанина из несвязанных JPG превращается в профессиональное портфолио.

Тогда возникает вопрос: можем ли преуспеть в решении обеих проблем?

Что мы получили

Нет сомнений, что эстетически веб стал хорошим местом. Простые, привлекательные сайты, построенные на твёрдых макетных сетках, стали стандартом. Эпоха дикого запада в вебе закончилась. Законы и порядок в виде фреймворков и гибких сеток успешно были приняты, и мир наступил по всей земле.

Всё это хорошо. Преимущества простых, привлекательных сайтов понятны и более, чем достаточны:

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

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

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

Что мы потеряли

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

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

Почему сайты выглядят одинаково

Откуда взялось однообразие, которое мы ощущаем, смотря на веб сегодня? Кого винить? И выходит, что не стоит всё примитивно сваливать только на один инструмент или методику. Можно было бы сказать, что проблемам поспособствовал адаптивный веб-дизайн, но он лишь единственный пункт из списка. Вот несколько вероятных подозреваемых.

Макет

Ограниченный выбор идей макетов — одна из наиболее известных и очевидных причин отсутствия вариативности в вебе. Уберите цвета, анимации, паралакс и т.п., и вы увидите, что вебом управляют несколько базовых макетов. Как много сайтов вы можете назвать, которые хоть немного вносят изменения в этих пятьмакетов?

Пять типичных веб-макетов. (Смотреть в большом размере)

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

Адаптивный веб-дизайн

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

Фреймворки

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

Инструменты и процессы прототипирования

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

Многие инструменты прототипирования поощряют распространение привычных сеточных макетов. (Смотреть в большом размере)

Бесплатные фото и графика высокого качества

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

Две бесплатные стоковые фотографии. (Смотреть в большом размере)

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

The Village Style и Jigglist; College Essay Guy и Get Busy Make Money (Смотреть в большом размере)

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

Тренды дизайна

Для некоторых дизайнеров слово «тренд» — ругательство. Хотя не должно им быть. Выберите десятилетие в 20 веке и исследуйте его тренды дизайна. Находки вас удивят. У каждого временного отрезка будет свой особый стиль и индивидуальность, и часто это отражение целого пласта культуры. Даже если вы не можете это разглядеть, тоже самое происходит и в вашей работе. Всё, что вы видите и испытываете, влияет на то, что вы делаете. И веб усиливает этот эффект как никогда ранее. В результате многие дизайнеры получают вдохновение из одинаковых источников и следуют одним и тем же трендам.

Ты и Я

Все инструменты из списка выше невероятно полезны. Эти вещи облегчают нашу работу, открывают дорогу в дизайн и разработку большему количеству людей, снижают затраты клиента. Я не выбирал их произвольно, я сам использую их. Если мы ищем виновника однообразия в веб-дизайне, я первый подниму руку. Я сам виноват. И я пока думаю, что не каждый проект заслуживает уникального дизайна. И снимаю шляпу перед дизайнерами, которые стараются сотворить что-то более интересное.

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

Как разрушить статус-кво

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

Делайте странные макеты

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

Phases Magazine

Phases Magazine — хороший пример сайта с непредсказуемым макетом. Он квадратный, есть сетка — но всё же каким-то образом им удалось создать впечатление, отличное от привычного нам по другим похожим работам (скриншот полностью не передаёт весь смысл, обязательно зайдите на сайт). Если вы посмотрите и подумаете: «Вау, это странно» — отлично! Это то, к чему они и стремятся. Кому-то сайт понравится, кто-то возненавидит его, но мне действительно нравится, что они пробуют что-то новое.

Phases Magazine использует не шаблонную сетку. (Смотреть в большом размере)

К сожалению, в целом впечатление от сайта плохое. Используется ненужный скроллджекинг (scrolljacking — послайдовый скролл), и у на вид адаптивного макета есть всего несколько брейкпойнтов.

Макет на сайте Phases Magazine ломается на маленьких экранах. (Смотреть в большом размере)

Curious Space

На Curious Space похожую идею реализовали лучше.

Макет Curious Space. (Смотреть в большом размере)

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

Curious Space хорошо адаптируется под разные девайсы. (Смотреть в большом размере)

Есть много приятных маленьких дизайнерских приёмов, вы их заметите только при взаимодействии с сайтом. К примеру, изображения выводятся на передний план по ховеру:

Ховер выводит контент на передний план. (Смотреть в большом размере)

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

По скроллу буквы логотипа встают на своё место. (Смотреть в большом размере)

Le Temps D’un Trajet

Ещё интересный пример — Le Temps d’un trajet. Опять же, мы видим нестандартную сетку, но вместо случайности у макета есть замысел и организация.

Макет главной страницы Le Temps d’un trajet. (Смотреть в большом размере)

Каждый блок по своему расположению — статическое изображение, которое по ховеру превращается в видео. Хотя, самая крутая фишка — то, как сетка плавно смещается, чтобы приспособиться к фокусировке на узловых пунктах.

Le Temps D’un Trajet from Smashing Editorial on Vimeo.

Не квадратничайте

Один простой способ придать вашему сайту отличную атмосферу — забыть про мышление «квадратами». Как бы глупо это не звучало, когда ты начинаешь думать разными геометрическими фигурами, результат вашей работы может стать гораздо интересней.

Built By Buffalo

Built By Buffalo использует на макете шестиугольники. (Смотреть в большом размере)

Зацените улей из шестиугольников на сайте Built By Buffalo. Такую галерею изображений, конечно, трудно перенести на мобильники, поэтому они на одном из брейкпойнтов переходят в прямоугольники. Это отличный пример создания чего-то уникального там, где это уместно. Но они понимают, где лучше применить другие решения для удобства пользователей.

Макет переходит на прямоугольники на узких экранах. (Смотреть в большом размере)

Anakin Design Studio

Один из моих любимых сайтов в таком стиле за последнее время — Anakin Design Studio. Красив и непредсказуем не только один макет, фигуры в дизайне тоже сильно далеки от того, что вы ожидаете от большинства сайтов.

Главная страница Anakin Design Studio. (Смотреть в большом размере)

Как вы видите, огромная замаскированная типографика оставляет сильное впечатление. Хотя дальше внизу страницы вы увидите экран с недавними работами. Большинство дизайнеров просто поставили бы здесь прямоугольную сетку с миниатюрами и считали бы дело сделанным, но дизайнеры Anakin поэкспериментировали с формами для создания изюминки. Да, это всё равно прямоугольные картинки, но они использовали белый фон для создания иллюзии различности форм.

Портфолио Anakin Design Studio. (Смотреть в большом размере)

Avex Designs; Mathilde Jacon

Вот ещё несколько сайтов, экспериментирующих с интересными формами.

Avex Designs и Mathilde Jacon используют неординарные формы и создают особое впечатление. (Смотреть в большом размере)

Будьте органичны

Fixate; For Better Coffee

Такие сайты как Fixate и For Better Coffee комбинируют иллюстрации с органическими «переполненными» макетами, которые обеспечивают запоминающийся дизайн.

Fixate и For Better Coffee используют «чрезвычайно» иллюстрированные макеты, чтобы они выделялись. (Смотреть в большом размере)

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

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

Кофейное зерно падает в кофемолку при скролле страницы. (Смотреть в большом размере)

Дальше внизу страницы свежий кофе наливается в чашку. (Смотреть в большом размере)

HappyFunCorp

Раз мы остановились на теме красиво иллюстрированных сайтов, вам стоит тогда зайти на HappyFunCorp.

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

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

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

Включайте разнообразие

У пользователей есть одно основное ожидание — каждый, кто заходит на сайт, получит одно и тоже впечатление. Пользуйтесь возможностью сотворить что-то отличительное, чтобы выбросить подобные ожидания в мусорку. Сайт Vasilis van Gemert не только использует уникальный макет из накладывающихся друг на друга прямоугольников, он также полностью меняет цветовую схему при каждой загрузке страницы.

Три разные цветовые схемы на сайте Vasilis van Gemert. (Смотреть в большом размере)

Эта креативная фишка кроме главной страницы распространяется и на все основные подстраницы.

Подстраницы тоже меняют цветовые схемы. (Смотреть в большом размере)

Создайте уникальную визуальную тему

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

Этот подход нельзя применять на всех сайтах (сайт правительства, к примеру). Но на сайтах мероприятий или страницах небольших компаний он внесёт определённую свежесть. Новый сайт dConstruct 2015 отличный пример моей идеи.

Часть ретрофутуристичного дизайна сайта dConstruct 2015. (Смотреть в большом размере)

Как видите, они пустились в ретрофутуристичную волну, очень напоминающую The Jetsons. В итоге мы имеем сайт, который прост и интересен, а в каждом новом разделе есть интересные фишки.

Деталь дизайна dConstruct. (Смотреть в большом размере)

Есть ещё несколько отличных вещей, о которых стоит упомянуть. Во-первых, особое внимание к заголовкам: ребята взяли Lamplighter Script и Andes — получилось прекрасное ретро.

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

Текст всё равно можно выделить благодаря креативному использованию веб-шрифтов. (Смотреть в большом размере)

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

Для узких экранов, билет переходит из горизонтального вида в вертикальный. (Смотреть в большом размере)

Снимаю шляпу перед Clearleft за эту замечательную работу.

Используйте стоковые ресурсы для исходного, а не конечного дизайна

Я работаю в Creative Market, поэтому я двумя руками за использование стоковых фото, графики, шрифтов и прочего. Качественные стоковые источники могут быть чрезвычайно полезными каждому дизайнеру. Но стоит серьёзно задуматься над тем, как ими пользоваться. Используете ли вы какие-либо интересные векторные работы, набор иконок или полноценную тему для сайта, подумайте и приложите больше усилий, чтобы ваше решение не смотрелось банальным и простым. Подавляющее большинство людей, скачивающих материалы из стока, не позаботится о его адаптации. Немножко поработав в этом направлении, вы окажетесь на шаг впереди остальных.

Подводный камень уникальных сайтов

Поиск по-настоящему удивительных и уникальных сайтов — трудная задача. Я потратил много часов на подготовку к этой статье и по прежнему мне кажется, что показал вам недостаточно. Ещё обнаружился один непреодолимый тренд. Часто есть такое чувство, будто все гонящиеся за оригинальностью дизайнеры делают сайты с хилым UX.

Эксперименты — это здорово, но сайты которые сбивают пользователя с толку своим странным, непредсказуемым и неприятным UX не достигают своей цели. Многие эти сайты делают шаг назад, когда на них есть что-то из эпохи флеша: долгая загрузка страниц, вычурные анимации, прыгающий скролл, сложный сценарий пользования. Есть и золотая середина. Вы можете создавать красивые, уникально выглядящие сайты без попыток изобрести новый «велосипед взаимодействия».

Веб-дизайн живёт

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

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

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