Меткадизайн

Global Service Design Jam. Киев-стайл

“Ну, как там на темной стороне силы?”.   Лиза, мой босс

Утром в понедельник я был готов ответить на этот вопрос. После всего безумия выходных я уже знал, что такое Темная сторона. UX Design. Персонажи, прототипы, customer journey, исследования и другие заумные словечки, о которых я читал в заумных книгах и заумных статьях на Медиуме. В глаза, естественно, их я не видел. Когда-то мне казалось, что UI-дизайнеру все это веселое мракобесие не нужно. Мне казалось, что пиксели — наше все. Если знать, как их нормально отполировать в модном редакторе, а потом приправить гайдлайнами, то можно смело фигачить нормальный дизайн. А лучше бы не казалось.

1371821

Небольшое лирическое отступление.

Как показывает мой опыт, UI-дизайнеру, прежде чем приступать к рисованию, следует убрать любые проявления художника и превратиться в прожженного технаря. Необходимость полного погружения в понятие UX даже не обсуждается. Нужно не просто понимать, что и как двигать для получения эффекта «красивенько», но и как эту магию будет воспринимать конечный пользователь. Мы ведь живем в эпоху Human Centered Design, а это значит, что красивые картинки без необходимого психологического бекграунда остаются на Dribbble. Красивые картинки — суть жалкое оформительство и украшательство. Недаром же Стив Джобс говорил, что

Design is not just what it looks like and feels like. Design is how it works.

Поэтому мы молча открываем книги, подкасты, статьи и прочие материалы по User Psychology, UX, HCD, прототипированию и наслаждаемся первыми ощущениями от прикосновения тьмы. Самое хорошее, что вы сможете сделать в итоге — добавить приставку UX к своему тайтлу. Мне кажется, UI/UX Designer звучит неплохо. Особенно, если это реальные знания и опыт, а не просто модное словечко.


Я, будучи UI Designer, но при это желая получить практические и теоретические знания по UX, хотел сделать это максимально быстро. И чтобы не сильно сложно. Вселенная, как это обычно бывает, подкинула мне неплохой вариант.

В ленте Фейсбука всплыло мероприятие с громких названием Global Service Jam. Оно проходило на выходных, стоило копейки и было лайкнуто многими моими друзьями-дизайнерами. После нескольких дней сомнений и хождения вокруг да около, я пошел на страницу регистрации.

10917373_324963587714504_6575325252592055844_n

 

About

Первая сессия GSJ прошла в 2011 году в Сан Франциско. Основная идея — за 48 часов улучшить мир. Слоган — делай, а не говори.

734413_487820101284213_218150505_n

The first Global Service Jam took place in March 2011, where more than 1200 participants in more than 50 cities created around 200 unique service designs around the Theme «(Super)HEROES».

Чтобы понять, что происходит на Джеме, вот вам несколько видео:

[aesop_video align=»center» src=»vimeo» id=»87258330″ loop=»on» autoplay=»on» controls=»on» viewstart=»on» viewend=»on»] [aesop_video align=»center» src=»vimeo» id=»117427063″ loop=»on» autoplay=»on» controls=»on» viewstart=»on» viewend=»on»]

Вам нужно родить продукт, причем вписать его в тему конкретного джема. Путь от идеи к прототипу, а затем и готовому продукту вам предстоит пройти за два дня. Это чертовски круто!

 

Пятница

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

[aesop_gallery id=»7095″]

Суббота

Я приехал в 10, чтобы получить дозу кофе, блинчиков и полезной информации от спикеров. Ими оказались Yuryy Granovsky, UX специалист в Usabilitylab (и по совместительству ментор в нашей команде), Pavlo Grozian, Product Designer из MacPaw и Vladimir Smirnov, Digital Creative Head в Aimbulance. Темы докладов были весьма интересными. Например, я узнал, каким образом изменялся дизайн бутылочки для кормления младенцев, как проводить исследования, что не все решения одинаково удачные, как строить монструозные mind maps, что клей «Момент» уже не тот, что некоторые топ-менеджеры из некоторых world-wide компаний спят в хостелах.

11046517_868179803225253_9098211609018442871_n
Pavlo Grozian рассказывает о том, как…

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

Промежуточные результаты ниже:

[aesop_gallery id=»7106″]

А еще я никогда не видел СТОЛЬКО Лего. Его было не просто много, конструктор был повсюду!

Лего!

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

Воскресенье

День треша и угара. Активное прототипирование, наброски сценария презентации, рисование раскадровок, съемка презентации.

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

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

[aesop_gallery id=»7111″]

Потом была общая презентация. Команды показывали свои проекты, все опять веселились, но когда к экрану вышли мы, то стало ясно, что до этого проекты были по-настоящему серьезными. Во время нашего рассказа у меня от смеха уже выступили слезы. Спасибо Роману Котляру за отличные presentation skills!

Итоги

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

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

И да пребудет с вами Сила!

Evernote в жизни дизайнера

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

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

Панацея?

Как я уже сказал, у каждого продукта есть свои сильные и слабые стороны. Кофеварка не сделает уборку в доме, микроволновка не охладит пиво, а утюг точно не сделает минет ужин. Поэтому заранее запасаться ожиданиями и требовать от приложения/сервиса чего-то космического не стоит. Но с Evernote получается именно так: после того, как потенциальный пользователь читает статью очередного «гуру» о безграничных возможностях программы появляются безграничные ожидания. В том числе и такое — «Evernote сделает мою жизнь на порядок лучше». Да, сделает. Но для старта нужно понять, что вы от него хотите. И только после этого начинать пользоваться и выстраивать свою систему. Замечу, что в большинстве случаев Evernote действительно подходит для создания надежной системы управления своим временем и создания, хранения и обработки информации, но для этого нужно определиться с целями и методикой (например GTD или Agile Results). Эти шаги необходимы для того, чтобы приложение не превратилась в свалку сотен бесполезных заметок.

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

screenshot

Теперь по порядку.

screenshot

Как вы видите, я использую четыре связки блокнотов:

  1. Areas & ProjectsЗдесь хранятся блокноты с материалами по фитнесу, английскому, мой общий блокнот, который я расшарил с женой, архив и все черновики блога, рабочие заметки, статьи по music production и разнообразные идеи.
  2. InspirationКак я уже говорил, для хранения референсов я пытался использовать разные места, но в итоге вернулся к Evernote и простой структуре из нескольких блокнотов и тегов. С блокнотами все очевидно и понятно. Теги можно присваивать любые и сколько угодно.
  3. StorageБлокноты для списков, закладок и полезных статей на разные темы.
  4. UXDХранилище статей и курсов по UX, iOs, Android дизайну а так же исходников и ресурсов для работы.

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

ScreenClip

^Все гениальное просто^

Почему я не сохраняю статьи напрямую в Evernote? Да потому что читать их там не очень удобно. В первую очередь это касается мобильных приложений. Нет возможности изменить фон или размер шрифта, нет функции запоминания позиции в чтении — это два критичных для меня недостатка. Более подробно о взаимодействии Pocket и Evernote можно почитать в этом материале. Советую так же посмотреть на рецепты в IFTTT.

Evernote для дизайнера

Все это очень хорошо, скажите вы, но где же про дизайн? В связке блокнотов UXD и Inspiration, отвечу я. Как я уже упоминал выше, именно там хранится все, что имеет отношение к дизайну. Статьи, скриншоты, примеры работ, wireframes, favorites с Dribbble и Behance. Прелесть премиум-плана заключается в том, что вы не думаете об оставшемся месте, а просто сохраняете все, что  понравилось. Встроенные инструменты позволяют это делать максимально просто:

Image22

После того, как вы сохранили изображение, можно сделать аннотацию:
Image11

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

Image333

Как видите, Evernote можно использовать для полноценного взаимодействия в командах. А общие блокноты, напоминания и чат дают возможности для управления проектами. Естественно, рассматривать его как полноценную альтернативу таким системам, как Basecamp и, простигосподи, Jira, я не бы не стал, но как базу знаний и платформу для коммуникации в небольших командах использовать вполне возможно, если ваша Security Policy это позволяет.

В довесок к очевидным сценариям добавлю и не совсем очевидные. Например, использование блокнотов Moleskine и Post-it. Для быстрых заметок или скетчей бумага, как по мне, пока что подходит лучше всего. Тем более, с помощью камеры в смартфоне все очень быстро можно превратить в цифру. Естественно, нельзя забывать о существовании Penultimate, приложения для iPad, которое должно заменить вам бумажный блокнот. Но я так и не стал активным его пользователем.

IMG_0285(2)

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

IMG_0284

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

О Post-it лучше посмотреть видео ниже, потому что я практически не использую это замечательное изобретение:

 

Penultimate подходит тем, кто не любит таскать блокнот, но любит таскать iPad. В этом приложении есть встроенный магазин подложек, но если у вас есть премиум-аккаунт Evernote все они доступны бесплатно. Есть один момент — чтобы полноценно использовать это приложение вам потребуется только один предмет — стилус. Честно говоря, писать или рисовать пальцами не очень удобно. Хотя, вполне возможно, это касается только меня.

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

Альтернативные варианты.

Pinterest

Image

Web — free
iPhone+iPad (universal app) — free
Android — free

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

Я пытался использовать Pinterest для хранения референсов, но каждый раз во мне нарастало какое-то непонятное раздражение и в итоге аккаунт удалялся, а все референсы перемещались в папку Dropbox или в Evernote. Почему так — я не могу объяснить. Скорее всего, социальность и возможность следить за сотнями людей со всеми их досками меня очень утомляла. Но это все субъективизм. Стоит посмотреть вот на этих парней, чтобы понять один простой факт — Pinterest можно использовать, как хранилище референсов вполне успешно. Неплохие расширения для браузеров, красивые, функциональные и бесплатные клиенты для iOs и Android (https://about.pinterest.com/en/goodies), существование API и кнопки Pin It на множестве сайтов, в том числе Dribbble и Behance делают Pinterest очень привлекательным. Но есть и подводные камни. По сути, вы сохраняете  только закладку и превью оригинального изображения. Если удаляется оригинал, то вам остается только превью. Кроме того, существующие policy ограничивает возможности хранение изображений в категории NSFW. Это значит, что фотографии ню долго хранить не выйдет — в лучшем случае доску с таким контентом сотрут, в худшем — сотрут ваш аккаунт. Но если сиськи вы не собираетесь коллекционировать, тогда все ок.


 

Ember (в 2017 его уже нет)

Image

screenshot

Разработка ребят из компании Realmac Software. Именно они сделали планировщик Clear, который был очень громко разрекламирован во всех околомаковских изданиях. Так же в их обойме RapidWeaver, конструктор сайтов.

Нужно начать со стоимости продукта. Чтобы иметь возможность собирать и каталогизировать разнообразные красивости, а именно скриншоты, фотографии и прочие изображения, вам придется выложить $50 за версию для Mac Os и $5 за универсальное приложение для iPhone и iPad. Не дешево, учитывая многочисленные проблемы с синхронизацией (исходя из комментариев в App Store) и несоответствие функционала десктопной и мобильной версии Ember. Но в целом могу сказать, что если использовать только приложении для десктопа, то лучшего варианта не найти. Возможности каталогизации действительно впечатляют а функции добавления аннотаций к изображениям очень радует. Так что если у вас есть лишние 50 баксов и вы хотите каталогизировать коллекцию референсов и всех няшных картнок из интернетов, то Ember подходит на 100%.


Pixa

Image

Mac — $25

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


 

Sparkbox

Image

Mac — $20
iPhone — $5

sparkbox_banner

Практически та же история, что и с Pixa. Попробовал, не понравилось, удалил. Но здесь есть мобильное приложение и аннотации.


Microsoft OneNote

Image

Web — free
Mac — free

iPhone, iPad — free
Windows+Windows Phone — free
Android — free

Image

Насколько это приложение крутое в мире Windows, на столько же оно убогое на Mac и iOs. Я несколько раз пробовал пользоваться OneNote. Один раз я даже перенес все заметки из Evernote туда. Но сразу же столкнулся с проблемами. В ту пору — отсутствие нормальной сихронизации; сейчас — странности в сценариях использования. Например, клиппер в браузере сохраняет скриншот веб-страницы вместо текста. Но это все мелочи по сравнению со скоростью работы мобильных приложений, особенно огорчает скорость загрузки заметки. Хотя, если вы приверженец платформы PC, то OneNote мне кажется разумным выбором.

Мысли напоследок

Как мне кажется, все подобные решения для создания, хранения и организации страдают одной общей болезнью — недостатком свободы. Так, только OneNote приближается к самому крутому инструменту — бумаге. По внутренней логике OneNote тоже показывает лучшие результаты. Но бумага все равно дает максимальный уровень свободы именно на этапе создания контента. Вы можете взять лист А1 и сделать все, что пожелаете с ним. Evernote же больше напоминает некое подобие пишущей машинки с функцией вставки изображений, чекбоксов и гиперссылок. Конечно, можно говорить, что это совершенно разные парадигмы использования, но от этого не становится легче. В идеале хотелось бы получить что-то такое:

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

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

Несовершенство

Бывало ли у вас так, что на протяжении какого-то времени вам не давала покоя некая мысль. К примеру, о несовершенстве существующих решений в подаче содержимого («контента») в интернетах. Мой блог яркий пример подобного несовершенства. Вы видите голый текст, иногда разбавленный графикой и прочими медиа-элементами, а записи расположены в совершенно диком порядке. Я вообще не понимаю, как вы меня умудряетесь читать!

Мысль привела меня к статье на Хабрахабр о CMS будущего, где автор говорил о вещах, что совсем недавно обсуждались моими ментальными тараканами на внеочередном съезде. Я не хочу здесь пересказывать смысл статьи. Если вы интересуетесь дизайном или просто испытываете зуд, связанный с получением новых знаний, то непременно пойдете и сами все разберете.

Я увидел редактор, который упоминается в статье и который используют ребята из Look At Me, ранее и сама идея модульности (которая, я уверен, пришла из графического дизайна) меня очень сильно зацепила. Ведь это именно то, чего мне не хватает в блоге! Признаюсь, что я давненько думаю о тотальном редизайне Журнала. Нужно двигаться вперед, а существующий формат не позволяет делать те вещи, которые я хочу делать. Конечно же, можно выбрать легкий путь и писать на площадке Medium, где все настолько прекрасно, что даже сомневаешься в реальности происходящего. Но мне хочется владеть всеми моими буквами в полной мере авторитарно.

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

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

Wacom в жизни дизайнера

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

Я, как и десятки тысяч дизайнеров всех мастей по всему миру, активно использую планшет в своей дизайнерской жизни. У меня есть маленький старичок-bamboo и трудяга intuos 5. До этого был intuos 3 вроде как. Но это не главное.

В какой-то момент я отключил от рабочего PC мышку и очень долго ее не подключал. А потом дома появился MacBook с его волшебным тачпадом я и вовсе забыл о мыши. Но буквально некоторое время назад я озадачился удобством работы на макбуке, когда забыл взять с собой планшет. Тут и пришла на помощь мышь, самая простая, дешевая и примитивно-проводная. Но белая. И я подумал, когда закрыл ФШ, что неплохо все получилось! Кроме того, я сделал один вывод, который еще пару лет назад показался бы мне полнейшей ересью — жизнь дизайнера без планшета возможна!

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

И тут кроется огромная тайна. Фактически, Святой Грааль и золото Третьего рейха. С мышью (тачпадом) многие перестают ощущать себя дизайнерами. Вот черт! Это же как у художника отобрать кисть! Но, ребятушки, спешу напомнить, что мы не художники, а такие же ремесленники, как токари и фрезеровщики. Хотя мы знаем такие страшные слова, как «кегль» и «целевая аудитория». Если же вы так хотите почувствовать себя художником — возьмите свой любимый молескин (или любой другой кусок бумаги), ручку или карандаш и попробуйте нарисовать что-то. Что угодно. Набросайте эскиз, сетку, мокап. Получилось? А теперь попробуйте исходя из этого эскиза сделать готовый макет без использования планшета. Так вы вновь стали дизайнером. Все просто.

Я пришел к выводу, что если вы не занимаетесь серьезной ретушью фотографий и профессиональной иллюстрацией, если вам не нужно рисовать сложные тени, рефлексы и прочую техдизайнерскую порнографию, то вполне можно сэкономить 300 евро и поработать с мышью или тачпадом. Для 90% дизайнеров планшет сродни латексным чулкам на смазливой барышне — фетиш! Как молескин, айфон и копик. Хотя, вот насчет чулков я чего-то сомневаюсь.

iOs 7. Роботы атакуют!

Я держался до последнего. С моим умом, который обожает эксперименты, это было чертовски трудно. Но буквально 6 дней назад я сдался. Сдался, чтобы установить творение гения дизайна, гуру ux/ui, алюминиевого чародея, Сэра Джонатана Айва. Я обновился до iOS7 beta 3. И покуда все озлобленные на нулевой размер пишут гневные обзоры семерки, я напишу просто: мне понравилось. Мне не понравилось. Вот так парадоксально можно описать впечатления от прожитых 5 дней с инновационной системой на борту iPhone 4S и iPad 2.

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

Screenshot_071513_124301_PM

 

Мне не понравился интерфейс. Вернее то, как в Купертино поняли концепцию плоского дизайна. Конечно же, я не имею абсолютно никакого права критиковать тех богов дизайна, что уничтожали скевоморфизм в семерке, но я скажу только одно: это пиздец, ребята! Простите, но вся эта фигня — эти плоские контролы, эти вырвиглазные чистые цвета, эта кричащая плоскость — вот это все создано скорее для роботов. Мне впервые за все время использования продуктов apple захотелось плеваться от того, что я увидел. И я плевался . От идиотских иконок, которые я не представляю в бизнес-окружении. Дядечки в деловых костюмах и веселенькая иконка сафари или почты. От чистых цветов и кислотных градиентов. От кучи анимации, которая скорее не к месту. От того, что в камере убрали эффект затвора. Как я теперь узнаю, что вообще камера сработала? Джони, что это за херня?

Screenshot_071513_124411_PM

Бета. Везде армия сектантов кричит о том, что это все только бета. Дескать, осенью все будет не так. Естественно, кислота должна наконец-то отпустить команду дизайнеров Apple. Но мне с трудом верится, что интерфейс кардинальным образом изменится. Пофиксят баги, допилят функционал, подправят немного интерфейс. Но все останется так, как есть сейчас. Потому что это Apple. А значит, вы, ребятки, будете пользоваться тем, что вам впарят умные товарищи из Купертино. И даже я буду вынужден обновиться до семерки, когда разработчики приложений внезапно прекратят поддержку шестой версии iOS.

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

Screenshot_071513_124658_PM

Flat design?

Так сложилось, что кроме всего прочего я работаю дизайнером. Чтобы быть хорошим дизайнером нужно не только постоянно учиться, но и следить за мировыми трендами и веяними. Для этого лично я отслеживаю разные блоги, читаю тематические журналы и книги, смотрю красивые видео и наблюдаю за окружающим миром. Мои предпочтения в дизайне — минимализм (как ни странно), упор на типографику, работа с сетками и очень дотошный подбор цветовых палитр. Все, как в швейцарском дизайне. С учетом того, что это снова в тренде, моей радости нет предела. А последнее событие планетарного масштаба — презентация Apple на конференции WWDC — еще раз показало всем дизайнерам и армии сочувствующих направление движения. Это так называемый плоский дизайн. О нем я и хочу поговорить сегодня. Ведь это странное и такое противоречивое явление, которое будоражит умы всех, кто так или иначе имеет отношение к миру дизайна, особенно дизайна интерфейсов (UI).

Для начала, нужно вспомнить, с какой радости дизайнеры начали избавляться от рюшечек в виде теней, 3D-эффектов и градиентов в интерфейсах. Переломный момент произошел когда Microsoft представила нам свой новый визуальный язык — Metro, который начал использоваться в Windows Phone, а позже — в Windows 8.

Start screen

Я не отслеживал на тот момент изменения в поведении дизайнеров (к примеру на Dribbble), но мне кажется, что у всех должна была случится истерика. Microsoft, которая никогда особо не заморачивалась с дизайном, внезапно выдала отличный пример инструментария визуальной коммуникации, фактически возродив традиции швейцарского дизайна. Конечно же, споры по поводу «фасада» Windows 8 до сих пор не утихают, но я считаю такой дизайн удачным. Почему? Потому что все эти плиточки и крупные шрифты значительно упрощают восприятие информации. Кроме того, предназначены они в первую очередь для планшетов. Именно планшеты задают ритм сообществу разработчиков и дизайнеров, занимая целую нишу относительно инновационных продуктов и предлагая кучу новых сценариев взаимодействия с пользователем. Именно благодаря смартфонам с touch screen, а потом и планшетам, плоский дизайн стал набирать такую популярность. Популярность, которая основывается на противопоставлении со скевоморфизмом.

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

radio

Но я все равно не представляю их в интерфейсе iPhone или iPad. Это уже перебор, ребятки! Такой дизайн хорошо сделать для себя любимого, чтобы прочувствовать свой уровень владения фотошопом; такая иллюстрация будет хорошо выглядеть в веб-дизайне, как header. Но микроскопическая иконка — зачем? А теперь подумайте, как будет выглядеть экран устройства с небольшим разрешением (я не беру во внимание retina-дисплеи) и десятком таких «красивеньких» иконок.

По причине излишней «правдоподобности» интерфейса я перестал пользоваться отличным органайзером — 2Do app. Я очень долго себя уговаривал, но все же отдал предпочтение Wunderlist. Чтобы не быть голословным, сравните мобильные версии двух приложений:

w2

Меня жутко бесит иррациональное использование пространства, перенасыщение текстурами и тяжелыми визуальными элементами в 2Do. Хотя и Wunderlist не блещет идеальным дизайном, но с ним работать на порядок приятней. Почему разработчики 2Do не сделают редизайн с учетом последних трендов, разгрузив интерфейс и избавив пользователя от мук работы с чем-то, отдаленно напоминающем блокнот? Тут-то и кроется основная ловушка скевоморфизма: подмена понятий. Если мне захочется поработать с блокнотом, я возьму настоящий бумажный блокнот, ручку и руками буду писать или рисовать. Все, точка! Это касается всего — и текстур дерева, кожи, бумаги; и использования 3D и теней. Мне нужен простой, понятный, лаконичный и работающий интерфейс. А не солянка из свистоперделок.

Apple решила выбросить на помойку бочку с этой солянкой и родила то ли сына, то ли дочь — iOS 7.

iPhone5

Когда я смотрел презентацию, то не мог поверить своим глазам. Я вообще не мог поверить, что великий Джонатан Айв смог сделать ЭТО. Ведь ЭТО напоминает скорее работу человека, который только что освоил фотошоп. ЭТО напоминает мне самолет, который сделали бы посудомойщицы, если бы их попросили сделать самолет. ЭТО напоминает мне книгу, написанную в пьяном угаре. ЭТО напоминает все, что угодно, но только не мать его Apple! И это не плоский дизайн. Это китч.

Естественно, что можно обратиться к совершенно потрясающему аргументу «сперва добейся«. Дескать, это же делал Сэр Джони Айв, а не хрен моржовый! А значит, априори ЭТО должно нравится всем. Всем, но не мне. Я не вижу ничего, что мне могло бы понравиться. Кислотные цвета, убогие интерфейсные решения, отсутствие целостности и, черт возьми, серьезности. Полярность. У меня (и не только) есть такое ощущение, что была поставлена задача избавиться от проклятого скевоморфизма любой ценой и сделать НЕЧТО совершенно противоположное. Что же, к несчастью, команде Айва это удалось.

А вот как бы мог выглядеть дизайн iOs7:

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

Хороший дизайн — это как можно меньше дизайна.

Ниже те примеры, которые мне очень нравятся и полностью соответствуют моим представлениям о плоском дизайне:

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

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

А что вы думаете о новых трендах в дизайне пользовательского интерфейса в целом и о плоском дизайне в частности?

Полезные ссылки:
Skeuomorphism in User Interface Design, What is It?
Principles of Flat Design
22 Beautiful iOS App Concepts from Dribbble
FLAT UI DESIGN on Pinterest
Flat UI Design gallery
What Is Flat Design?
Apple’s Flat Design Falls Flat on Wall Street

Вдохновение

Если вы работаете в любой креативной сфере, то наверняка сталкивались с мучительным синдромом нехватки вдохновения. Чертовы музы куда-то улетели а без них, как известно, ничего не получается. И вот вы сидите перед монитором/листом бумаги/мольбертом, смотрите туда и не видите ничегошеньки. Что делать? Конечно же, искать вдохновение.

Дизайнерам хорошо — в интернете целая куча ресурсов, а-ля Behance, DeviantArt, Dribbble, Tumblr, Pinterest, где можно найти именно то, что нужно отдельно взятому человеку. Но за всеми вкусняшками, которые можно обнаружить в интернетах, вас ждет хитрая информационная ловушка, которая страшнее отсутствия вдохновения. Имя этой ловушки — информационная перегрузка.

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

Если поциэнт долгое время не обращает внимания на свою новую болезнь, то происходит полное отмирание органа, который отвечает за генерацию своих идей. А именно — своего мозга. Финальная и терминальная стадия болезни — поциэнт превращается в копировальный аппарат. Лечение — отпуск, отключение интернета, конфискация любых электронных устройств, выезд за город, охота на диких динозавров, поиск чаши Грааля, забивание шурупов гвоздодером, чтение порно-романов, знакомство с культурой ситхов, планирование строительства новой египетской пирамиды и прочие креативные методики. Одним словом — нужно максимально отвлечься и перезапустить мозг.

Но как же тренды? Как же новые веяния? Как же эволюция, черт побери? Тут тоже просто — читайте профессиональную литературу, журналы, общайтесь с коллегами по ремеслу. Ходите на семинары, встречи, воркшопы. А если вы не представляете свою жизнь без технологий — выберете 10 ресурсов — самых-самых — и посещайте только их. Все! Не нужно пытаться уследить за всем, что происходит в индустрии — у вас это не получится. Лучше займитесь синтезом своего стиля, который как раз и вырабатывается когда найден идеальный баланс между вашими знаниями/опытом и интеграцией с опытом других собратьев по цеху. Главное — не мыслить шаблонами. Анализируйте, исследуйте, разбирайте на атомы, но не копируйте!

Очень печально видеть копии копий не только у молодых падаванов, которые еще не нащупали свой путь, но и у мастеров. Конечно же, можно всегда в свое оправдание приводить цитату великого Пикассо: [quote style=»1″]Хорошие художники копируют, великие – воруют[/quote]

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

Вернемся же к вдохновению. Где его нужно искать? Опять все просто — нигде! Нигде его не надо искать. Оно не только в нас самих, но и вокруг нас его предостаточно. Нету идей? Выключи компьютер, выйди из дому/офиса, прогуляйся, поговори с друзьями, переключи внимание. Можешь вообще ничего не делать, а просто лечь на травку и смотреть на тучки. В конце концов поспи! Ведь во сне порой приходят самые сумасшедшие идеи. А если ты поклонник восточных методик — медитация лучший твой помощник.

Все еще ищешь вдохновение? А кто-то уже просто поспал и создал гениальную работу.

Интернет для людей

 

Все мы так или иначе используем интернет. Кто-то, возможно, даже ищет полезную информацию. Но, как мне кажется, такой способ использования давно канул в лету. Все чаще во всемирной сети общаются, обмениваются информацией, играют в игры, смотрят видео, занимаются бизнесом. Обмен информацией в современном вебе, конечно же, не возможен без ее многоразового дублирования. В частности, этому способствует та модель веба, которая сложилась на данный момент, а именно — тотальная социализация с миллионами лайков, +1 и ретвитов. Критерии оценки сместились из плоскости полезно/бесполезно в плоскость круто/некруто. В первую очередь, пользователь оценивает социальную ликвидность информации — будет ли она популярна, получит ли большое количество фитбека, как она распространится в интернете, какое влияние окажет. И что немаловажно, современная модель интернета, больше известная как Web 2.0, предлагает огромную скорость распространения информации. Но так ли это полезно?

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

Тут мы подходим к тому, что Web 2.0 не так уж идеален, как идеологически, так и в плане реализации технологий и визуальной составляющей. Почему? Все просто. В интернете все стали авторами и дизайнерами. Любой пользователь может создавать контент. Текст, графику, аудио, видео и дизайн. Разработчики сами вручают готовый инструментарий для создания тем, виджетов и оформления персональных страниц. Чересчур много тех, кто называет себя artist (не могу подобрать нужного слова-аналога в русском языке). То есть, это в целом неплохо, что люди проявляют себя с творческой стороны, но, черт возьми, в результате таких проявлений мы вынуждены превращаться в виртуальных золотоискателей. Среди китча и треша искать действительно ценный контент. К примеру, ЖЖ — морально устаревшая платформа с миллионами пользователей и невероятным количеством материалов,  но чтобы найти там интересных блоггеров нужно пройти 100500 кругов ада и графоманства. И так везде! Те, кто раньше только читал/смотрел, теперь активно пишут/рисуют/снимают. Во многих случаях лучше бы они только читали и смотрели…

Техническая сторона интернета, и особенно та ее часть, которую мы видим — вебсайты, порталы, блоги, магазины и прочее — существенно эволюционировали. Но если рассматривать только контенто-ориентированные ресурсы, скажем, блоги — то сейчас прослеживается интересная тенденция. А именно — минимализм, ренессанс «швейцарского» дизайна и развитие так называемого responsive web design («резиновые» сайты, которые подстраиваются под текущий размер экрана, если вкратце). Все это несет в себе ориентирование на контент, а не красивости. К слову, все понимают, что графические решения напрямую зависят от технологических. Так, развитие HTML5, CSS3, фреймворков и движков, появление web-fonts только подстегивает развитие дизайна. Но здесь мы сталкиваемся с главным противоречием — существующие инструменты дают нам возможность рисовать практически все, что угодно, но действительно ли все это нужно?

Конечно же, дизайн никуда не исчезает, более того — теперь ему по-настоящему уделяют внимание. И, что самое интересно, чем меньше мы видим дизайна, тем он лучше! Но все же использование отзывчивости, как по мне, направлено именно на правильное представление информационной части, то есть контента. А если добавить сюда такие инструменты, как ReadabilityPocketInstapaper, Evernote Clearly, которые отсеивают все, кроме текста/графики, то получается, что надобность в дизайне тех же блогов или информационных ресурсов практически сводится к нолю. Хорошая типографика, правильная палитра и качественный контент — вот и все! Не верите? Прошу пройти на сайт informationarchitects.net, где вы сможете наблюдать все эти качества. А еще можно почитать замечательную заметку Jeffrey Zeldman. Может быть пора пересмотреть подход в дизайне и взаимодействии с пользователем? И делать дизайн не для дизайнеров, которые будут оценивать только графическую составляющую, а для пользователей, которым важен контент.

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

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

Об авторе

Владимир Кондрияненко

Создатель и автор этого блога. Дизайнер интерфейсов, электронный музыкант, минималист.

Популярное

Метки

System