Задания по дизайну. Каким должно быть тестовое задание

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

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

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

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

Остановимся подробнее на каждой проблеме и попробуем их решить.

1. Чрезмерно оптимистичная оценка сроков выполнения

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

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

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

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

2. Неверная трактовка полученного задания

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

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

3. Сухая подача материалов без графического оформления

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

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

Огромное количество готовых мокапов содержится на сайтах с freebie ресурсами наподобие freebiesbug.com . Многие дизайнеры все ещё не знают, что в Adobe Photoshop CC уже есть огромное количество бесплатных материалов, заготовок и мокапов, большинство из которых сложно найти даже на внешних ресурсах. Доступ к ним можно получить, просто кликнув на значок Adobe CreativeCloud на панели задач и выбрав вкладку «Assets». Далее можно получить доступ к большому количеству ресурсов, выбрав нужную категорию, среди которых мокапы реальных объектов, заготовки интерфейсов для прототипирования, огромный набор векторных форм, иконок, паттернов и кистей.

4. Отсутствие смыслового сопровождения

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

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

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

5. Проблема в работе со шрифтами

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

Решение : На сегодняшней день доступно огромное количество бесплатных, абсолютно легальных кириллических шрифтов. Такие сайты как, например, webfont.ru содержат внушительный архив шрифтов на любой вкус. Более того, сейчас возможно даже не отвлекаться от текущего макета, над которым работает дизайнер. Typekit , который появился в Adobe Creative Cloud, позволяет «примерять» еще не установленные шрифты из большой библиотеки прямо в реальном времени. Можно сразу посмотреть, как шрифт будет смотреться в рамках конкретного макета.

Мария Митрофанова, представитель Adobe

Со своей стороны отметим такую проблему: купив однажды привычную версию, например, Illustrator CS6, многие дизайнеры не спешат её улучшать до полного плана Creative Cloud и думают, что этого окажется достаточно. Но при этом они пропускают множество новых возможностей, которые появляются в обновлениях программ или заложены в самом пакете Creative Cloud. Как показало недавнее исследование компании Adobe, сегодня всё яснее виден тренд мультизадачности в работе графических специалистов, и глупо было бы игнорировать остальной инструментарий Adobe, желая при этом оставаться конкурентоспособным работником.

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

Глава разработки UX в ChooseEnergy.com Майкл Оуэнс обсудил с лучшими дизайнерами мира, как выбрать из всех кандидатов на должность дизайнера самого-самого. Мы публикуем ключевые аспекты дискуссии.

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

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

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

Мы с Джонатаном, моим другом, входим в компанию любителей димсама (китайские легкие закуски), которой управляет Джон Маэда из KPCB. Со временем наши воскресные встречи лидеров дизайнерских коллективов начали переезжать из китайских ресторанов в Slack. Конечно, виртуальный разговор личной встречи не заменит, зато так можно вовлечь в обсуждение гораздо больше специалистов. Раз в неделю мы проводим дискуссии, посвященные карьере в дизайне. Каждую такую встречу ведет новая пара профессионалов. Месяц назад это были мы с Джонатаном Либерманом, главным дизайнером Operator.com, - нам стало интересно обсудить методику найма специалистов в нашей области.

Критерии найма

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

Для всех - навыки общения

Мы раз за разом возвращались к умению выступать, демонстрировать свои достижения, но директор по дизайну в MyFitnessPal Дейв Янг напомнил, что «презентационные навыки важны, но иногда могут ввести в заблуждение».

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

Мнение Эрики Холл, основателя студии дизайна Mule Design:

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

Реплика Питера Чоу, вице-президента Inkling.com:

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

Для всех - умение решать проблемы

Эти навыки упоминались еще чаще. Джеффри Вин, сейчас отвечающий за разработку продуктов Adobe, однажды написал, что «хороший дизайн - это решение проблем». Большинство руководителей дизайнерских команд это вполне осознают, что и показали ответы участников.

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

«Я готов дать вам одну из двух сверхспособностей. Она останется с вами до конца жизни, и больше ни у кого в мире ее не будет. Умение летать или невидимость - что выберете?»

Для всех - энтузиазм

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

Джонатан Либерман:

«Я не хочу нанимать человека, который пришел за зарплатой. Мне бы хотелось, чтобы кандидату было интересно решать проблемы, над которыми мы работаем. Если энтузиазма нет, человек не станет выкладываться по полной. И это плохо повлияет на всю команду».

Для всех - ответственность

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

Линдси Миндлер:

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

Боб Бэксли:

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

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

Дизайнер из Apple Джонни Манзари:

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

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

Для менеджеров - руководство

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

Глава разработки UX в Google Стефан Клоцек:

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

Методы оценки

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

Оценка портфолио

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

Стефан Клоцек:

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

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

Эрика Холл:

«Когда речь идет о создании интерактивных продуктов и сервисов, обычное портфолио почти бессмысленно. Это все равно что давать „Оскар“ за отдельные кадры из фильма».

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

Панельное интервью

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

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

Джонатан Либерман:

«Я собираю один и тот же состав панели для каждой открытой вакансии. Мне нужно, чтобы все, кто оценивает кандидата, вели себя обдуманно и согласованно. Для дизайнеров, которые не участвуют в панели (а наша команда разрослась до 10 человек), есть „скамейка запасных“ - они ведут кандидата на обед. Таким образом они тоже встречаются с ним и ощущают себя частью процесса, хоть и не присутствуют непосредственно на интервью».

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

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

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

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

• Карьерные перспективы

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

Боб Бэксли:

«Давайте представим, что через три года мы снова в этой комнате, и вы говорите, что уходите. Вы увольняетесь, приходите домой и пишете список из 3−5 пунктов, чтобы описать свой опыт на этой работе для профиля в LinkedIn - что вы сделали и чему научились. Что это будет за список?»

Дэйв Янг:

«Что бы вы хотели видеть в профиле своего фитнес-трекера через два года?»

Джонатан Либерман:

«Какие три главных урока вы вынесете из работы в компании X?»

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

Боб Бэксли:

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

• Дизайнерское мышление

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

Питер Чоу:

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

Глава разработки UX CloudPhysics Удай Гаджендар:

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

Тестовые задания

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

Дейв Янг:

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

Джонатан Либерман:

«Это хороший материал, на котором не только интервьюер может оценить кандидата, но и кандидат - команду, в которой ему предстоит работать».

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

Стефан Клоцек:

«Талантливого специалиста с хорошим портфолио при текущем состоянии рынка может отпугнуть необходимость делать тестовое задание».

Эрика Холл:

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

Майк Дэвидсон:

«Один человек рассказал мне, как получил автоматическую рассылку с формулировкой „Пожалуйста, выполните наше тестовое задание. Если результат нас удовлетворит, мы рассмотрим ваше портфолио“. Это звучит обидно. А еще бывает, что вас просят поработать над собственным продуктом компании. В общем, тесты не обязательны, но если они нужны для выбора кандидата, отдайте предпочтение тем, что не относятся к вашему продукту. Впрочем, мы в Twitter их не используем».

- Нужно ли давать тестовое задание?

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

Дизайнер в BetterWorks Рэндалл Хом:

«Это такой способ спросить: „Вы очень хотите здесь работать?“»

Дизайнер Fitbit Аналия Ибаргоен:

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

- Каким должно быть тестовое задание?

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

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

Удай Гаджендар:

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

Джонатан Либерман:

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

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

Линдси Миндлер:

«Мы даем кандидату доску, маркер и проблему, которая не имеет отношения к нашим задачам и при этом имеет более одного решения».

Боб Бэксли:

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

Джонни Манзари:

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

- Что проверяет тестовое задание?

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

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

- Каковы должны быть критерии оценки?

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

Питер Чоу:

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

Джонатан Либерман:

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

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

Я сделал свой первый сайт как школьный проект, когда мне было 14. Задача звучала просто: создать сайт, с текстом, картинками и таблицами.

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

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

Со временем я стал все больше уделять внимания дизайну. Прокачивал оба навыка: программирование и дизайн. За это время я проникся дизайном и понял, что превосходный дизайн – это не обязательно что-то с большим количеством лайков на Dribbble. Действительно хороший дизайн незаметен. У вещи с хорошим дизайном идеальный баланс между «Даже твоя бабушка может» и «Кайф, как же круто». А еще, хороший дизайн это важное преимущество. Он как нитрооксид в гонке, он – ваш секретный ингредиент.

И дело не в таланте

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

Исправить это помогли ролики одного паренька на YouTube. По его видеоурокам я повторил все по шагам и создал классный домик. А спустя несколько недель практики я выработал свой стиль и уже мог творить свободно. И даже выиграл строительный конкурс.

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

Выбор правильного инструмента для работы

Запрограммировать в Notepad можно такое же крутое приложение, как и в продвинутой IDE… но это может занять очень много времени. А время – самый ценный ресурс. Аналог блокнота в дизайне – MS Paint, но профессиональные дизайнеры выбирают что покруче.

Самые популярные инструменты дизайна для веб

• Sketch , только для Mac, заточен на дизайн интерфейсов. $ 99 / год;
• Adobe XD , кросс-платформенный инструмент. Его сообщество поменьше, за то с ним легко начать;
• Adobe Photoshop , в дизайне швейцарский нож, подходит для любых задач. $9.99 / mo.

У каждого инструмента свои плюсы и минусы. Мне нравится Adobe XD. Он кроссплатформенный, не привязан к Mac OS. Люблю такое. Для новичков он, как мне кажется, самое то.

Настраиваем мышление

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

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

Осваиваем инструменты

Разработчики применяют HTML-элементы, такие как div, span и input, чтобы показать на экране элементы дизайна. А с помощью инструментов дизайна, вы можете придумать, как именно все должно выглядеть и работать.

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

Rectangle tool (Прямоугольник)

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

Text tool (Метка)

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

Первый режим однострочный текстовый контейнер, который регулирует его размер на основе размера текста. Это похоже на < span>, за исключением того, что он не будет переноситься, если вы не сделаете разрыв строки. Преимущество этого режима в том, что он автоматически регулирует размер текстового поля (text box size) исходя из межстрочного интервала (line height) и размера шрифта (font size).

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

Text tool (Абзац)

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

С определенной шириной или

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

Чтобы создать абзац (paragraph), щелкните на Text tool, выберите точку на полотне, кликните и ведите в сторону, зажав кнопку мыши. Движение такое же, как при выделении текста. Это удобный режим для создания абзацев текста.

Select tool (Выбор)

Переместить, изменить размер, сделать копию (Move, resize, duplicate). В общем, полезный инструмент. А эти розовые линии показывают расстояние до окружающих элементов. А синие линии помогают правильно выровнять элементы.

Line tool (Линия)

Линия хороша как разделитель. Но прямоугольник высотой 1px легко ее может заменить. Так как же как и div, который может быть чем угодно 🙂

Layout

В веб-разработке макет чаще всего воспринимается как header, menu, content, and footer. Хотя Layout – это про то, как организованы все элементы на экране. Элементы бывают простые и составные. Примером составного проекта может быть «карточка проекта», как на примере ниже.

Цвет

Чтобы найти идеальный цвет для вашего следующего проекта, изучите психологию восприятия цвета (colorpsychology.org). А для поиска идеальных сочетаний вы можете попробовать сервис Paletton . В нем можно подобрать гармоничную палитру и даже посмотреть ее в работе на сайте. Когда-то этот ресурс помог мне познакомиться с теорией цвета и это ускорило подбор цветовой палитры для моего ресурса: https://sidemail.io/

Используйте оттенки основных цветов и цветов текста для создания визуальной иерархии. При использовании цветного фона попробуйте использовать более темные или светлые оттенки для текста.

Типографика

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

Мне нравится следующая фишка. Элементы навигации я делаю ПРОПИСНЫМИ и увеличиваю в них межбуквенные расстояния (letter spacing). Для навигации работает хорошо, но в тексте лучше не переборщить с этим.

Создание главной страницы сайта (или лендинга)

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

После того, как я решил, что я хочу сказать, я иду за вдохновением. На land-book.com его очень много. Еще я черпаю вдохновение на interfaces.pro . И пока в голове не щелкнет «все хватит» я смотрю и изучаю.

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

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

Подытожим

• Уникальный шрифт имеет огромное значение для передачи характера продукта;
• Уникальная графика очень важна для передачи образа продукта;
• С помощью оттенков можно выстроить хорошую иерархию;
• Не создавайте слишком широкие абзацы текста, делайте их не больше 60-72 символов;
• Воздух и негативное пространство – это блага ;
• Рассказывайте о преимуществах для пользователей, а не о функциях;
• Черпайте вдохновение в безмерном мире вокруг.

Проектируем веб-приложение

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

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

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

Контейнер фиксированной ширины (Fixed container)

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

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

Здесь собраны некоторые уроки по графическому дизайну, которые попали в интернет в этом году. Список разделен на учебные пособия по Illustrator, Photoshop, InDesign и для других программ.

Adobe Illustrator

Учебные материалы для Illustrator. Несмотря на растущую конкуренцию с такими приложениями, как Affinity Designer и Sketch, Adobe Illustrator по-прежнему инструмент - выбор номер один среди графических дизайнеров и студий во всем мире. Вот шесть из лучших учебных пособий/уроков для Illustrator, которые были замечены в этом году.

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

Продуктовый дизайнер рекомендательного сервиса Foursquare Джон Штейнбэк опубликовал в своём блоге на Medium заметку , в которой рассказал, как сотрудники компании развивают свою креативность и какие упражнения они для этого используют.

Редакция сайт публикует список «креативных упражнений», которые рекомендует Штейнбэк.

Каждую пятницу PX-команда (Product Experience - прим. ред. ) сервиса Foursquare собирается вместе и «упражняется в креативности» - выполняет специальные командные задания, которые помогают сотрудникам проявить свою творческую сторону. PX включает в себя специалистов по UX, визуальных дизайнеров, копирайтеров, исследовательские и аналитические отделы компании.

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

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

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

Создайте собственный бутерброд

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

«Слепые» портреты

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

Новый «интерфейс» офисного объекта

Упражнение, о котором издание FastCompany написало отдельный материал . Каждый сотрудник, принимавший участие во встрече, получил снимок какого-либо офисного объекта - например, урны или стола для пинг-понга. От сотрудника требовалось придумать новый «интерфейс» для объекта - продумать, как офисные работники могли бы с ним взаимодействовать.

Так, урна, например, могла бы злиться на сотрудника, когда тот не выбрасывает мусор:

Дизайн циферблата для «умных» часов

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

Манёвр Мэтта

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

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

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

«Загадочное убийство»

Используя карты из настольной игры Cards Against Humanity (на них перечислены различные словосочетания, имена известных людей и прочее), сотрудникам предстояло объяснить, как было совершено «загадочное убийство», и объяснить, виноват ли в нём подозреваемый. От участников требовалось использовать в своём рассказе все выпавшие им слова:

Флипбуки из стикеров

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

Каламбуры из названий фильмов

Каждый сотрудник выбирал известную картину, менял одну букву в её названии - и рисовал сцену из нового фильма. Например, фильм Квентина Тарантино «Бешеные псы» ("Reservoir Dogs") работники превратили в «Бешеные брёвна» ("Reservoir Logs"):

«Один день из жизни»

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

«Эмодзи-песня»

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

«Горный рай»

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

Комиксы с участием стикеров Swarm

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

Soundscapes

Сотрудники должны были разделиться на группы по три человека. Для каждой группы было заготовлено видео с демонстрацией функциональности мобильного приложения Foursquare. От участников требовалось придумать необычное звуковое сопровождение для своей видеозаписи.

«Угадай знаменитость по её предпочтениям»

Для выполнения этого задания каждый сотрудник должен был выбрать какую-то знаменитость или публичную фигуру, а после этого собрать для неё десять «предпочтений», которые доступны пользователям Foursquare.

«Коллекционные карты»

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

Создание собственной рекламы для Foursquare

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

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

Экстремальные UX-кейсы

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

Итеративное преображение предмета

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

Организация коллекции обложек

Каждый сотрудник получил ZIP-архив, в котором содержалось 100 различных обложек музыкальных альбомов и синглов. От участников требовалось классифицировать все обложки таким образом, как им самим хотелось.

Telestration

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

Saudade

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

Редизайн сайта на офисном стикере

Каждый сотрудник представил свой вариант редизайна одной из страниц сайта Foursquare. Единственное установленное для участников ограничение - можно было использовать только один стикер.

Дизайн нового стикера для Swarm

Задание: придумать новый стикер для приложения Swarm и рассказать его предысторию.

«Тачку на прокачку»

Каждому участнику встречи ведущий предложил нарисовать машину своей мечты.

Командная настольная игра

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

«Ваше утро в 2065 году»

Каждый участник должен был нарисовать, каким он видит своё утро через 50 лет. Что будет за окном, что он съест на завтрак, какие новости прочтёт и каким образом.

Дизайн пивного крана

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