Как создавать эмоции: руководство для начинающих

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

Дисклеймер: то, что начиналось как довольно короткий пост, быстро превратилось в более основательную работу, чем изначально планировалось. Убедитесь, что можете потратить не менее 20 минут своего времени, чтобы осилить это. Просто предупреждаю. 

Мы в Dogstudio постоянно думаем о важности эмоций в дизайне, и как они постоянно занимают центральную позицию в нашем мышлении.

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

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

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

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

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

Сила ограничений

Для начала скучная часть: я начал создавать веб-сайты около десяти лет назад, в то время, когда CSS2 только зарождалось, и большинство HTML-сайтов (читайте здесь, а не сумасшедшие флеш-сайты) основывались на одних и тех же шаблонах: огромный заголовок с так называемым «hero image» (это термин, используемый в веб-дизайне для баннера в виде большого изображения или фотографии), две-трети экрана под контент и небольшим количеством информации, и одна треть справа для призывов к действию, новостных блоков и событий. И, наконец, ваш обычный футер с дурацкими авторскими правами и правовой информацией.

Это те дни, когда, решив сделать закругленную кнопку, вам приходилось разбивать кнопку на 6 разных частей (4 угла и 2 повторяющихся элемента). Учитывая, что разработкой занимались не вы, скорее всего это приводило к пощечине с криком «ты смерти моей хочешь???!» при споре с вашим разработчиком.

На фиг, никаких закругленных кнопок

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

Почему?

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

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

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

Мы люди, черт возьми!

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

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

Разве это нормально?

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

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

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

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

Итаак… погодите, что?

К чему я это вообще?

Прежде чем мы начнем в этом разбираться, я должен дать слово кое-кому еще, а точнее — Девиду Карсону.

Девид является американским графическим дизайнером, более известным в качестве арт-директора журнала Ray Gun, посвященного рок-тематике. За 12 лет он придумал и развил стиль, основанный на слегка запутанных и беспорядочных типографических композициях в стиле гранж (которые он сам называл «Гранж-типографика»).

В своей широко известной речи на TED он уделяет особое внимание негласным правилам на разных уровнях коммуникации.

Впервые я увидел его примерно 8 лет назад, когда он выступал с речью на «Offset Festival» в Дублине, и помню, мне не понравились его работы, так как они были слишком сумбурными и не соответствовали дизайнерским правилам, которые я пытался тогда найти.

А недавно я пересмотрел его речь на TED, и знаете, что самое интересное? Сейчас она резонирует во мне еще сильнее.

Он говорит о передаче информации прежде, чем наш мозг сознательно обрабатывает полученные данные о том, на что мы смотрим.

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

Напротив какой двери вы бы точно не стали парковаться?

Он также сказал:

«Не принимайте разборчивость и понятность за коммуникацию. Если что-то четко написано, это не значит, что оно несет информацию. Более того, оно может нести неправильную информацию. Итак, что представляет собой сообщение до того, как кто-то натыкается на него в действительности? Мне кажется, этот вопрос мы часто упускаем из виду».

При создании дизайна для какого-то проекта, в первую очередь нужно думать о впечатлении, которое вы оставите у пользователей — и, думаю, вы бы хотели услышать что-то типа «Вааааау!», а не «Фу».

Или другой вариант. Можно спросить у них, помнят ли они еще о том сайте в фиолетовой гамме, с мыльным пузырем посередине, который был полгода назад (*пытаемся незаметно продвинуть собственную шнягу*). Если первое впечатление было скорее позитивное, есть шанс, что они до сих пор будут его помнить.

Майя Энджелоу хорошо перефразировала это, сказав:

«Я осознала, что люди забывают, что ты говоришь и что ты делаешь, но они никогда не забывают, что ты заставил их почувствовать».

Дорога в ад вымощена благими намерениями

Если и существует какое-то дизайнерское движение (и если мы можем его так назвать), которое привело к полному непониманию веб-дизайном человеческой природы, то, я думаю, вы все согласитесь, что это — «плоский дизайн».

Давайте ненадолго заглянем в прошлое: после многих лет скевоморфизма (очередного полуматериального UI), две главных компании — то есть, Microsoft и Apple — решили избавиться от этого безумия и вернуться к кодам попроще.

В iOS 7 разработчики решили вернуться к более плоскому интерфейсу. Основываясь на простых формах, контрасте и цветовой гамме, Джони Айв вывел дизайн iOS из существовавшей ранее «глубины».

А за несколько лет до этого, в 2010, Microsoft разработала нечто под названием Metro UI: систему дизайна, которая уже существовала в последней версии Zune Player и была своеобразной базой вышедшей в 2012 году Windows 8.

Помните?

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

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

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

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

Частично эту тему затрагивает Кейт Майер — одна из UX-экспертов Nielsen Norman Group.

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

«Бывает очень сложно, когда кажется, что есть ссылка, а на самом деле ее нет. И приходится искать другой способ…», — сказал один пользователь. Майер сравнивает такой образ поведения с жизнью крыс в лабораторных условиях…

Конечно, всегда существуют исключения и талантливые дизайнеры, которые выкладываются на полную и выводят свои творения на новый уровень.

Навстречу взаимопониманию

Приготовьтесь…

Дизайн — это органический процесс. Он далек от цифр, правил, и помимо обеспечения надежности и легкости использования нашему проекту…в нём есть немного магии.

Эту ситуацию узнает любой дизайнер.

Вы начинаете работать над проектом, и вскоре понимаете, что не можете определиться с дальнейшими действиями.

 Тогда вы начинаете менять местами элементы, активировать слои, дезактивировать их, менять цвета, композицию и так далее, но все равно что-то не то. И затем, наконец, наступает тот самый «Агааа!» момент. Все становится довольно легким и простым, и вскоре вы начинаете понимать, как нужно действовать, и претворять ваши задумки в реальность.

Помните это чувство, когда вы делаете все правильно и понимаете, что движетесь в верном направлении? Оно так же неуловимо, как и приятно.

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

Глобальное заблуждение касаемо процесса дизайна — это его линейная прогрессия.

Это то, как ваша мама и ваши клиенты представляют себе рабочий процесс.

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

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

Вот так на самом деле выглядит прогрессия дизайна.

Ошибка новичков

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

Что плохого?

Я совершенно не понимал, что делаю.

Меня просили создавать дизайн вебсайтов, что я и делал, но не имея никакого представления о пользовательском интерфейсе или юзабилити.

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

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

Почему?

Из-за полного отсутствия контекста.

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

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

Если спросить дизайнеров об их сильных и слабых сторонах, 90% вам ответят примерно так: «Вы знаете, я перфекционист…»

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

Как любой органический процесс, хороший дизайн требует времени и усилий.

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

Борьба с творческим спадом

*Фоновая музыка* Здравствуйте, сегодня мы хотели бы немного поговорить о том, что такое творческий спад. Вам знакомо чувство, когда вы смотрите на пустой холст и не имеете понятия о том, с чего начать?

О, еще как знакомо!

Технически, все люди разные, но есть также определенная группа людей, которая, по-моему, встречается достаточно часто: «напуганный перфекционист».

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

Знаете, такие люди, которые думают, что если они сделают что-то не так (а как это «не так»?), кто-нибудь обязательно выскочит рядом, укажет пальцем на их работу и разразиться смехом. Которые думают, что смогут нарисовать идеальную окружность на бумаге, не потренировавшись несколько сотен раз.

Если вы относитесь к такому типу людей — не паникуйте… расслабьтесь… я раньше тоже думал как вы.

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

Помните ту самую «префронтальную» часть вашего мозга?

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

Хорошо, но что именно мне делать?

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

Но что мешает вам начать?

Приговор, вынесенный самому себе.

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

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

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

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

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

Что в этом лучше всего?

Вам не надо ДУМАТЬ или пытаться сделать все правильно: вы скорее всего сможете это ПОЧУВСТВОВАТЬ, и это еще одна причина, почему дизайн является органическим процессом, который в каком-то смысле связан с вашей сущностью. 

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

Затем случилась жизнь

Теперь о скучном!

*Голосом Майкла Кейна* Вслед за тем, как я бросил университет после первого же курса обучения на факультете компьютерных технологий и наконец, спустя 6 лет интенсивного изучения математики в школе, осознал, что терпеть ее не могу, я начал всерьез задумываться о том, чем же хочу действительно заниматься по жизни.

Я всегда много рисовал на уроках, рисовал и в свободное время, строил деревянные домики, провел половину детства за конструктором, но я никогда не думал, что на самом деле смогу зарабатывать своим творчеством.

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

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

После университета я пошел в школу компьютерной графики, чтобы научиться 3D дизайну и спецэффектам. Во время учебы я понял, что терпеть не могу веб-дизайн и разработку, но я также начал проявлять особый интерес к цифровой живописи в свободное от уроков время.

Да, похоже, у меня не было нормальной жизни. И да, мне это нравилось.

Photoshop 7, небольшой планшет A5 Wacom — и я начал изучать свет, текстуры, композицию, и т.д. Я провел несчетное количество времени за чтением статей о различных техниках, собрал сотни иллюстраций, справок, элементов, которыми мог позже воспользоваться. Цифровая живопись в конечном итоге стала темой моей 150страничной диссертации по обучению ее основ (только на французском, к сожалению… но зато бесплатно).

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

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

Кстати, вот ссылка на потрясающие работы Арне Никласа Дженссона

Знание работы света и умение дорисовывать пропущенные элементы может резко повысить ваши дизайнерские навыки. Как бонус, процесс работы над одним из заголовков для обновленной версии www.msichicago.org (Музей науки и промышленности в Чикаго).

Простой механизм 

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

Так что же вам делать?

Начните с деления ваших фигур на блоки. Вы сможете увидеть изображение целиком и быстро набросать все элементы.

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

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

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

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

Так, вы, надеюсь, понимаете, к чему это я о слоях говорю?

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

А теперь вопрос: где, черт возьми, связь между этим и дизайном веб-сайта?

Придаем движение

Вот вы открыли Sketch, Photoshop, Figma, Gimp, Paint — в общем, что бы вы ни открыли — и теперь смотрите на чистый лист.

Первым вашим шагом будет, скорее всего, деление вашего дизайна на блоки.

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

Заметили, что я сказал именно про маркер, а не про ручку, например?

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

Основной смысл состоит здесь в структуре, а не в дизайне.

Легко и довольно просто, однако на данной стадии этого недостаточно

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

Итак, работаем по тому же принципу. Начинаем с добавления контента, заголовков, блоков текста (ну и «lorem ipsum», если ваш клиент любезно не предоставил контент заранее (а мы все знаем, что это — плохой знак, но все же…)), плейсхолдеров для изображений, подбора шрифтов и т.д.

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

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

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

Это лишь немногие из шаблонных итераций, которые мы использовали в работе над музеем науки и промышленности в Чикаго. Сначала выстраиваем страницу, а затем дорабатываем каждый слой.

На самом деле, в этом и состоит весь смысл работы: проработка элемента поможет вашему мозгу установить связи либо с теми вещами, которые вы планируете сделать, либо с теми, которые вы уже сделали и теперь собираетесь отредактировать.

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

Рабочий процесс, выстроенный таким образом — от самого нижнего слоя (основы) до верхнего слоя (мелких деталей) — позволит добиться связности и постоянства среди элементов дизайна. Даже если ваши рабочие слои не особо однородны на уровне деталей, не стоит винить себя за это: примите тот факт, что ничего не совершенно, и, так или иначе, может быть проработано позже.

В принципе, в веб-дизайне все то же самое, но…

Синдром Pinterest

Как и у большинства дизайнеров, у вас, скорее всего, есть аккаунт на Pinterest со всякими разными штуками. И помимо разнообразных иллюстраций, рецептов, тату, одежды и всего остального, там еще есть секция веб-дизайна. 

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

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

Когда же вы ищете вдохновения на Pinterest, скорее всего, вы увидите страницу целиком, от верхнего до нижнего колонтитула.

Миллионы прокрученных пикселей 

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

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

Для нас важность композиции стала целым прорывом. Что это точно так же, как если бы вы рисовали картину. 

Композиция вашего изображения

Даже если изначальный вариант вашего вайрфрейма выглядит довольно простенько, симметрично и донельзя прямолинейно, это не означает, что необходимо придерживаться того же «коробочного» формата при создании полноценного дизайна.

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

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

Просветы помогут контенту веб-сайта дышать. Вам будет казаться, что путь от шапки до самого конца страницы был проторен специально для вас. И вы еще раз убедитесь, что так гораздо лучше и комфортнее.

Быстрое объяснение нашего процесса обновления сайта для Музея 

Контрпример имеет совсем другие секции, определенные границами закрытых блоков. В этом нет ничего вредного, однако мы всё же это озвучиваем.

Вы, наверное, заметили этот забавный момент. Насколько все те термины, что мы используем, близки к природе: органичность, поток, дыхание… 

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

Альтернативные точки зрения

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

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

Один из способов избавление от этого — просто перевернуть картину горизонтально. Вы сразу заметите все недочеты, например, что левый глаз, который, казалось, нарисован просто идеально, на самом деле смещен куда-то вбок.

Все, что вам было нужно чтобы увидеть недочеты — это свежий взгляд на собственную работу, которую вы уже буквально выучили наизусть.

Я бы не сказал, что это имеет большое значение при работе над дизайном, скажем, банковского веб-сайта, но все же интересный факт: если вы сначала увеличите (до 100%), а потом уменьшите масштаб (чтобы по высоте весь ваш сайт помещался на экране), это позволит вам по-новому взглянуть на вашу работу. Так вы сможете выявить все потенциальные проблемы с прокруткой, цветовым балансом или даже композицией.

Постоянная смена масштаба помогает выжать из вашего дизайна больше. Вы сможете увидеть картину как в целом, так и в «разобранном» виде, подетально, что в итоге поможет добиться того самого свежего взгляда. В качестве примера — дизайн, который мы делали для фестиваля KIKK 2016.

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

Это только начало

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

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

Хотите что-то изменить?

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