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

Приоритетом дизайнеров должно быть решение проблем. Это то, чем мы занимаемся большую часть времени.

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

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

____

ЧТО МЫ ПОЛУЧИЛИ

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

1 — Знакомы и просты для пользователя при навигации (если сделаны верно).

2 — Макетирование (относительно) быстрое и простое.

3 — Мощная стандартизация техник построения сайтов (конвейер заменил ремесло).

4 — Быстрые макеты ведут к уменьшению затрат (что может оказаться выгодным заказчику).

5 — Строгие сеточные макеты предоставили себя адаптивному дизайну (даже мельчайший макеточный тренд возник из этой потребности).

01-awwwards-opt

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

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

____

ЧТО МЫ ПОТЕРЯЛИ

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

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

____

ПОЧЕМУ САЙТЫ ВЫГЛЯДЯТ ОДИНАКОВО

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

____

МАКЕТ

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

02-layout-opt

Пять типичных веб-макетов.

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

____

АДАПТИВНЫЙ ВЕБ-ДИЗАЙН

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

____

ФРЕЙМВОРКИ

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

____

ИНСТРУМЕНТЫ И ПРОЦЕССЫ ПРОТОТИПИРОВАНИЯ

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

03-prototyping-tools-opt

Многие инструменты прототипирования поощряют распространение привычных сеточных макетов.

____

БЕСПЛАТНЫЕ ФОТО И ГРАФИКА ВЫСОКОГО КАЧЕСТВА

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

04-free-stockphotos-opt

Две бесплатные стоковые фотографии.

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

05-stockphoto-examples-opt

The Village StyleJiggliestCollege Essay Guy, Get Busy Make Money

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

____

ТРЕНДЫ ДИЗАЙНА

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

____

ТЫ И Я

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

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

____

КАК РАЗРУШИТЬ СТАТУС-КВО

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

____

ДЕЛАЙТЕ СТРАННЫЕ МАКЕТЫ

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

____

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

06-phases-magazine-opt

Phases Magazine использует не шаблонную сетку.

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

07-phases-magazine-opt

Макет на сайте Phases Magazine ломается на маленьких экранах.

____

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

08-curious-space-opt

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

09-curious-space-opt

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

10-curious-space-opt

Ховер выводит контент на передний план.

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

11-curious-space-opt

По скроллу буквы логотипа встают на своё место.

____

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

12-le-temps-dun-trajet-opt

Макет главной страницы Le Temps d’un trajet.

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

____

НЕ КВАДРАТНИЧАЙТЕ

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

____

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

12b-build-by-buffalo-opt

Но они понимают, где лучше применить другие решения для удобства пользователей.

13-build-by-bufallo-opt

Макет переходит на прямоугольники на узких экранах.

____

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

14-anakin-opt

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

15-anakin-opt

Портфолио Anakin Design Studio.

____

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

16-interesting-shapes-opt

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

____

БУДЬТЕ ОРГАНИЧНЫ

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

17-organic-sites-opt

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

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

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

18-for-better-coffee-opt

Кофейное зерно падает в кофемолку при скролле страницы.

19-for-better-coffee-opt

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

____

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

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

20-happy-fun-corp-opt

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

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

____

ВКЛЮЧАЙТЕ РАЗНООБРАЗИЕ

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

____

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

21-vasilis-van-gemert-opt

Три разные цветовые схемы на сайте Vasilis van Gemert.

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

22-vasilis-van-gemert-opt

Подстраницы тоже меняют цветовые схемы.

____

СОЗДАЙТЕ УНИКАЛЬНУЮ ВИЗУАЛЬНУЮ ТЕМУ

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

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

23-dconstruct-opt

Часть ретрофутуристичного дизайна сайта dConstruct 2015.

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

24-dconstruct-opt

Деталь дизайна dConstruct.

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

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

25-dconstruct-opt

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

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

26-dconstruct-opt

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

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

____

ИСПОЛЬЗУЙТЕ СТОКОВЫЕ РЕСУРСЫ ДЛЯ ИСХОДНОГО, А НЕ КОНЕЧНОГО ДИЗАЙНА

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

____

ПОДВОДНЫЙ КАМЕНЬ УНИКАЛЬНЫХ САЙТОВ

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

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

____

ВЕБ-ДИЗАЙН ЖИВЁТ

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

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

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

 

Автор — Joshua Johnson       Перевод — Deadsign

Add a comment

*