Я хочу рассказать, как создать идеальное дизайнерское портфолио. Последние пять лет я постоянно нанимаю на работу дизайнеров и проектировщиков интерфейса — по этой причине к моим словам стоит прислушаться (а не потому что я сам дизайнер). Я считаю, что нет ничего более эффективного для отбора дизайнеров, чем портфолио. Опытный арт-директор узнает из портфолио о потенциальном работнике в тысячу раз больше, чем из резюме.
Портфолио должно быть
С дизайнером без портфолио разговаривать не о чем. Это касается и всяких новомодных UX-специалистов. Работал — значит есть, что показать. Ты же не менеджер, результат работы которого не могут разглядеть даже его начальники :) Любой дизайнер создает что-то визуальное и точка. А то, что это потом испохабили нерадивые программисты и неряшливые заказчики — это часть профессии и за отмазку не катит.
Всякие договоры о конфиденциальности тоже лишь отмазка — убери упоминания о бренде, подставь неконфиденциальные данные и смело выкладывай. Если ты не дизайнер, а «скорее по юзабилити» — выкладывай Wireframes плюс конечный результат с пометкой, что дизайнил не ты.
Основные моменты
Используйте веб. На портфолио должна быть ссылка, которая сразу открывается. Плохо присылать архивы, которые нужно распаковывать, а потом, путаясь в папках, просматривать.
Помните о доступности. Каждая работа должна иметь свой собственный URL. Я часто хочу отправить коллегам ссылку на какую-то работу, но не могу этого сделать из-за какой-нибудь новомодной jQuery галереи с инновационной анимацией.
Не мельчите. Не надо сильно уменьшать картинки — сейчас у всех большие мониторы. Желательно, чтобы экранная графика была доступна в оригинальном размере.
Сделайте прокрутку. Очень круто, когда работы можно смотреть одна за одной. И обязательно нужно понимать, что ты уже посмотрел, а что еще нет (оказывается посещенные ссылки умеют менять цвет).
Начинайте с сильных работ. Портфолио — это как музыкальный альбом, первой должна идти песня-блокбастер.
Не выпендривайтесь. Не нужно поражать невероятными спецэффектами или креативным дизайном. Портфолио — место для показа работ, на них все внимание. Уберите все лишнее, что не относится к делу.
Много работ не нужно
Отдельно хотел сказать про количество работ. Много работ — это плохо. Чтобы понять квалификацию человека, достаточно увидеть 3–5 лучших работ. У большинства дизайнеров есть работы из разных областей (интерфейсы, сайты, графика и т.д.); в итоге идеальное портфолио — это 7–15 работ. На каждую работу достаточно одной, самое большее трех картинок, не нужно показывать все нарисованные экраны :)
Опытные дизайнеры не утруждают себя расчисткой Авгиевых конюшен, и в результате прекрасные алмазы теряются в куче проходного шлака. Молодежь пытается показать все, что есть, — поверьте, лучше не надо.
Делать ли свой сайт
Стоит ли делать свой сайт или можно обойтись готовыми сервисами? Если у вас мало времени, а портфолио вам особо не нужно — выложите избранные работы в какой-нибудь Дропбокс. Если же вы серьезно относитесь к самопиару, то без личного сайта не обойтись. На нем вы можете показать все, чему научились, ваше внимание к мелочам, сдержанность и стиль.
По традиции закончу словами самого успешного арт-директора в истории — царя Соломона:
Видел ли ты человека проворного в своем деле? Он будет стоять перед царями, он не будет стоять перед простыми. (Притчи 22:29)
Герой Мэтта Дэймона из кинофильма «Умница Уилл Хантинг» говорит богатенькому студенту, которого только что победил в ученом споре: «ты выкинул 150 тысяч на образование, которое мог бы получить за полтора доллара в публичной библиотеке». Сегодня эти слова стали по-настоящими актуальными — информация по большинству областей знаний доступна бесплатно, но квалифицированных специалистов больше не становится.
В школе я часто пытался скопировать игру любимых рок гитаристов. Часами я «снимал соляк» — получалось довольно скверно. Сейчас обучающее видео, как играть любой из этих треков, можно найти на Ютубе. Знание, бывшее уделом избранных, доступно бесплатно и в очень понятной форме. Да что там гитара — американский школьник в рамках дипломной работы скаута создал в родительском гараже ядерный реактор в котором пошла настоящая реакция (хорошо хоть не цепная).
Что уж говорить про знания из айтишной области! Они имеются в открытом доступе на любой вкус. Почему же тогда к нам в офис Digital Design регулярно звонят люди и просят научить их проектировать интерфейсы в нашей UX-школе, сетуюя, что кроме нас этому нигде не учат и огорчаются, когда я объясняю, что у нас не платные курсы, а оригинальный метод стажировки студентов? Ведь все знания, что мы даем, доступны в интернете. Даже платные профессональные конференции выкладывают видео докладов в открытый доступ. Кроме «полутора долларов» на интернет-траффик ничего не нужно!
Сохраняй фокус, отказывайся отлишнего
Поколениями люди в СССР привыкали собирать вещи. Я помню как в мое советское детство мы бережно хранили маленькое бесплатное мыло из заграничного отеля — казалось оно было такое красивое, что жалко руки мыть. Сейчас же многие семьи сталкиваются с необходимость регулярно выбрасывать вещи из дому. Даже удивительно, как можно выбросить несколько мешков абсолютно ненужных вещей, когда ты же сам их недавно купил.
Таже ситуация со знаниями — приходится отказываться от множества ненужных знаний, чтобы сосредоточиться на важных. Посчитайте, сколько интересных ссылок вы залайкали сегодня в Фэйсбуке, а сколько мимишных котят Вконтакте? Или может быть вы интеллектуал и обсуждали преимущества Android перед iPhone в Гугл+? А сколько часов в неделю вы смотрите телевизор? (Только новости и спорт, конечно же:)
Тратя время на интересную, но неважную информацию, невозможно стать высококлассным специалистом ни в одной области — на это не хватит времени. Поэтому нужно учиться говорить «нет», нужно перестать захламлять свой мозг одноразовой информацией, которая мило выглядит.
На днях мы в офисе открыли библиотеку для UX-дизайнеров. Оказалось, в мире существует огромное количество обалденных книг, которые прочесть хочется, но времени абсолютно нет, потому что нужно сидеть и писать в этот глупый блог.
Закончу словами самого мудрого, знающего и успешного человека за всю историю земли — царя Соломона:
...составлять много книг — конца не будет, и много читать — утомительно для тела. (Екклесиаст 12:12)
Текст окружает нас всюду. Он информирует нас, предостерегает от ошибок, даже угрожает. Текст — основное средство взаимодействия с пользователем, как в реальном, так и в виртуальном мире. И как любой интерфейс созданный человеком, текст часто бывает плохим.
Вот, к примеру, такой шедевр я обнаружил в админке моего интернет-провайдера:
Я много раз перечитывал это сообщение, я делал это внимательно (ведь речь идет о моих деньгах), но смысл каждый раз ускользал от меня.
Или вот еще пример, буквально на днях обнаружил в гостинице во время командировки:
Я снова и снова перечитывал послание, и каждый раз чувство полного понимания сменялось фрустрацией — я так и не разобрался, если положить этот листочек на кровать, белье сменят или «неправильно поймут».
Каждый из нас может привести множество подобных примеров. Так что давайте поговорим о том, как подобного избежать в интерфейсах, которые создаете вы.
УВЛ
Артём Горбунов изобрел универсальный метод улучшения интерфейсов под названием УВЛ (убери все лишнее). Он прекрасно работает с интерфейсными текстами. Давайте рассмотри его на двух показанных выше примерах.
В случае с моим провайдером текста не должно быть вовсе — мне безразлично как там что работает с погашениями, важно лишь видеть сколько и когда нужно заплатить, чтобы не отключили интернет (а это показывается цифрами, а не буквами).
В случае с гостиницей нужно написать так: Если вы хотите поменять постельное белье, положите этот листок на кровать. Внимательный читатель возразит, что я опустил тему про охрану окружающей среды. Я отвечу по-одесски: «я вас умоляю, какая окружающая среда в этом городе».
Баскетбол на месте
Когда я учился в средней школе, на уроках физкультуры мы иногда играли в баскетбол. Никто играть не умел и главной ошибкой было то, что каждый, получив мяч, никому не отдавал пас. Тренер показал нам метод, который я запомнил на всю жизнь. Он заставил нас играть в баскетбол, где запрещено вести мяч (ударять его об пол), единственный способ играть — часто делать пас и постоянно открываться партнерам.
Я предлагаю использовать этот метод тем, кому необходимо научиться писать хорошие интерфейсные тексты. Попробуйте сделать интерфейс полностью понятным, совсем не используя текст.
Конечно, часто подобное невозможно, но ведь и в баскетбол не играют без ведения меча, это лишь тренировка. Добейтесь максимума без текста и лишь потом добавляйте пояснения. Помните, интуитивно понятный интерфейс — это тот, который не нужно читать.
Если же вы хотите проверить на понятность уже созданный веб-интерфейс, пропустите его через Гугл переводчик и получите страницы скажем на португальском языке. После этого отправляйтесь проводить юзабилити-тестирование.
Бревно в своем глазу
Ну и конечно же, все вышесказанное можно отнести к этой статье. Ее можно сильно сократить, не потеряв сути. Например так:
Не пишите поясняющие тексты в интерфейсе, а если это невозможно, пишите их коротко и однозначно.
Нас окружает множество интерфейсов. И не только в компьютере и телефоне, но и в лифте, транспорте и даже под магнитиком, что прилеплен к холодильнику. Многие эти интерфейсы плохие, так уж повелось. Но на то мы и называемся UX-специалистами, чтобы улучшать мир вокруг себя. Начнем, естественно, с холодильника.
У нас с женой есть двое детей, 8 лет дочке и 3 года сыну. Оба они плохо кушают. Поэтому мы разработали «адресную федеральную программу» — за каждый быстро и полностью съеденный завтрак (обед или ужин) ребенок получает звездочку. 20 звездочек — приз. Для дочки — поход в кино, для младшего — пироженое и машинка в подарок.
Холодильник был выбран главным государственным порталом и подрядчик в лице моей жены разработал вот такой интерфейс:
Конечно, я покритиковал его за большое количество оформительской графики и избыточную когнитивную нагрузку на пользователя. Но проект нужно было стартовать, и мы запустились с этой версией.
Наблюдение за пользователями показало, что дочка хорошо понимает интерфейс. Будучи школьницей, она знает что такое дни недели и легко может посчитать, сколько же осталось до желанного приза.
Однако сын плохо воспринимал этот интерфейс. И это сказалось на результате — когда дочка уже пошла в обещанное кино, он набрал лишь чуть более половины звездочек. Потребовался срочный редизайн и за дело взялся профессионал.
Я удалил ненужную оформительскую графику, убрал дни недели (потому что не важно, когда заработана звездочка, важно сколько осталось до необходимых двадцати). Также я показал призы очень наглядно и предоставил сыну возможность самому рисовать (закрашевать) звездочки. Вот что получилось:
Результат не заставил себя ждать. Сын, даже не умея считать, знал, сколько осталось звездочек до получения наглядно показанных призов. Он с удовольствием закрашивал оставшиеся звездочки и быстро добрал недостающие очки.
Как ни странно, эффект сохраняется и после окончания проекта. Наш трех летний сын наконец-то есть только сам — он просто не дает нам его кормить, потому что где-то в его прошивке навсегда отпечаталось, что с ложечки кормят только лузеров.
А какой интерфейс в своей жизни улучшил ты на этой неделе?
Недавно, в одном бизнес-центре, где я часто бываю, появлися новый медицинский центр. Проходя мимо, я поймал себя на мысли, что он мне нравится и я ему, пожалуй, доверяю и готов при необходимости воспользоваться услугами их врачей. Я спросил себя: «почему»? Я ведь видел только вывеску, и да, она показалась мне довольно профессионально выполненной. «Виновата профессиональная дизайнерская деформация», — решил я. Но потом я подумал, что хорошая вывеска о многом говорит.
Мир вокруг нас полон ужасного дизайна — аляповатых вывесок, «цыганских» интерьеров, вырвиглазовых сайтов. Откуда это все берется? Логично предположить, что дело в плохих дизайнерах. Отчасти это верно, но лишь отчасти.
Дизайнерская среда полна анекдотов про безумных заказчиков (или начальников), которые садятся рядом и начинают играть в дизайнера, двигать картинки, просить добавить цветов и сделать «меньше пустоты». В результате выходит... ну, выходит то, что обычно выходит. Дизайнеры смеются над такими заказчиками, но им это нужно, чтобы не сойти с ума. На самом деле таких заказчиков можно понять.
Вот к примеру некий сферическо-вакуумный директор. Он делает сайт (вывеску, буклет) для своего ДЕТИЩА. Это его бизнес, он и только он знает, что его «ребеночку» нужно. Поэтому он и обязан взять все в свои руки, в том числе и дизайн. В лучшем случае он навязывает дизайнеру свою волю, а в худшем — делает работу самостоятельно. Однако, он не дизайнер и результат выходит плохой. Почти всегда. Но беда не ходит одна. Подобная практика скорее всего распространяется и на все остальные сферы деятельности компании. Вероятно, повар в кафе у такого директора будет плохо готовить, а уборщица плохо мыть полы.
Это называется неумение делегировать полномочия. Хорошего руководителя от плохого отличают следующие вещи:
навык делегировать полномочия,
умение доверять профессионалам в сфере их деятельности,
способность не относиться к сотрудникам, как детям-дебилам,
дар контролировать ситуацию, не занимаясь при этом микроменеджментом.
Именно поэтому, если владелец увиденного мною медицинского центра смог доверить дизайнеру создать вывеску (не такую уж красивую, к слову, просто аккуратную, без аляповатости), то уж точно он смог доверить все врачебные дела кому-то компетентному в медицине.
Конечно, нужно относиться к данному правилу с осторожностью (и не пытаться повторить это дома), но все же правило часто работает: видишь хороший сайт или вывеску — значить фирма хорошая. В данном случае не работает поговорка «встречают по одежке, провожают по уму», потому что хорошая одежка очень часто является признаком наличия ума, а не просто красивым фасадом.
Я считаю, что Adobe Fireworks самая недооцененная программа для прототипирования интерфейсов. В некоторых подразделениях нашей компании именно Fireworks является основным инструментом для юзабилити специалистов. При этом мы почти не используем анимационные возможности программы. В этой статье я хочу рассказать, почему мы считаем эту программу лучшей именно для рисования интерфейса.
Wireframes или чистовой дизайн
Многие юзабелисты принимают за аксиому идею, что интерфейс сначала нужно реализовать в виде wireframes, отладить, согласовать, а уже потом «раскрашивать». Некоторые считают, что дизайном должен заниматься другой человек (я проектирую, а красоту наводит дизайнер). На первый взгляд это абсолютно верный подход, позволяющий экономить время, фокусироваться на логике взаимодействия, разделить обязанности и т.д.
Однако разбиение проектирования графического интерфейса на два этапа имеет и свои минусы. Часто цвет, нестандартный размер, графические приемы оформления — все это не просто добавляет «симпатичности» серым квадратикам, но и полностью меняет восприятие интерфейса пользователем. Именно поэтому я всегда недолюбливал wireframes и старался делать интерфейс сразу «на чистовую». Стоит оговориться, что мы в Digital Design в основном проектируем утилитарные системы, где какой-то особой «красоты» не требуется, так зачем рисовать серые прямоугольнички, если без проблем можно сразу нарисовать «закругленные и градиентные».
Вот пример интерфейса, который я недавно проектировал и одновременно работал над графическим оформлением:
А вот интерфейс от Ивана Филиппенко, еще одного любителя Fireworks:
Мы не потратили времени больше, чем если бы проектировали эти интерфейсы в InDesign, Visio или Axure, а выглядят экраны гораздо приятнее, чем в перечисленных программах. А т.к. для подобных профессиональных систем более гламурное оформление и не требуется, мы упразднили один этап, без ухудшения качества. Да, в Фотошопе тоже можно подобное нарисовать, но времени это займет больше.
Photoshop или Fireworks
Я много лет работал в Photoshop и считаю, что этот замечательный инструмент породил миф о том, что чистовой дизайн корректировать сложно и нужно отложить это на самый конец проектирования. Я раньше сам яростно отстаивал достоинства Фотошопа и отрицал его недостатки: ничего, что много слоев, я знаю волшебные клавиши ctrl и shift, я умею работать в Шопе быстро. Но в конце концов мы признали преимущество Fireworks и дружно перешли на него.
Вот несколько причин, почему Fireworks лучше подходит для визуализации интерфейсов:
в одном файле хранятся все страницы (Pages) интерфейса, а Master Page позволяет не хардкодить повторяющиеся элементы;
при этом размеры холста могут быть различными для каждой страницы;
каждая страница имеет множество состояний (States), поэтому если мне нужно показать всплывающее окно на странице или разворачивание пункта, не приходится постоянно включать/выключать слои;
слои не плодятся как кролики, ими при желании можно вообще не пользоваться (хватает Pages+States), но если и пользуешься, то не обалдевая от их количества, а используя возможности их шаринга между разными страницами;
имеется библиотека символов и можно создавать свои символы с определенными свойствами, в том числе и переменными, это позволяет гибко и быстро менять повторяющиеся элементы интерфейса, типа кнопок, иконок и т.п.;
старые добрые стили (Styles) и фильтры (Filters) дополняют гибкости и позволяют не забывать полезные фотошоповские привычки;
прекрасная работа с объектами, как в векторном редакторе (просто выделил рамкой и сгруппировал или просто передвинул, никаких удержаний горячих клавиш) и при этом адекватная работа с растром как по отображению, так и по редактированию;
про анимацию, нарезку и экспорт я не говорю, потому что это само-собой подразумевается.
Если кому-то будет полезно, я покажу какое расположение панелей в Fireworks я использую. Как видите, основные панели это Pages, States, Layers, а также библиотеки символов и свойства выделенного символа (картинка кликабельна):
А если все же не на чистовую?
Создавать сначала упрощенную визуализацию все же бывает полезно. У нас есть подразделение, которое занимается приложениями для iPad, на этой платформе как-то принято делать все гламурно и красиво. Ну, знаете, стеклянная буква на гранитном основании, по которой катится капля росы :) Рисовать такое сразу — это действительно вредно, отвлекаешься сам и отвлекаешь заказчика (да и не все умеют рисовать росу на стекле).
Но и тут Fireworks очень помогает. Помещаешь все повторяющиеся элементы или в Master Page или в библиотеку символов и думаешь только о логике и расположении. А когда нужно наложить текстуры, достаточно лишь поменять символы из библиотеки. Вот пример одного планшетного прототипа (автор Ольга Соколова):
Кстати, мы часто продаем кастомизации нашего планшетного продукта. Как правило заказчики просят поменять цвет, текстуру и здесь грамотно разработанный макет очень помогает.
Ложка дегтя
Безусловно Adobe Fireworks не завоевал заслуженной популярности не только из-за конкуренции Фотошопа. Неродной для Адоба интерфейс полумутировавший из Макромедии не добавляет ему поклонников. Но главная проблема программы — низкая стабильность. Впрочем, это проблема скорее платформы Виндоуз, на Маке программа работает довольно хорошо (хотя и не идеально). Ну про ресурсо потребление я думаю упоминать не стоит, все же это дизайнерский инструмент.
P.S. Уже упомянутый Иван Филиппенко утверждает, что если поставить значения для антиалиасинга текста «4 time, 190, 10», то он станет «как в браузере» и решится извечная проблема веб-дизайнеров. Впрочем, я попробовал и особого улучшения не заметил, хотя сам факт настроек радует, возможно кто-то из читателей предложит лучшие настройки.
