Что делает fullstack-дизайнер: ключевые навыки20.12.2017 14:36

Алёна Игнатьева, редактор-фрилансер, специально для блога Нетологии написала колонку о том, кто такой fullstack-дизайнер.

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

Кто такой fullstack-дизайнер

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

«Понятие fullstack-дизайнера описывает специалиста, который знаком со всеми ключевыми этапами работы над продуктом и имеет релевантные навыки для его запуска. Одно из важных качеств такого дизайнера — способность оптимизировать и выстраивать процесс проектирования с минимальными ресурсозатратами для разработки на других этапах и качественного запуска. В этом ему помогают знания и навыки в исследовании проблемы, оценке трудозатрат, проектировании, тестировании и разработке. Если вы способны самостоятельно спроектировать, разработать и запустить сервис — круто, вы единорог. Это безусловно пригодится на фрилансе или стартапах. Но быть fullstack-дизайнером в большой компании не подразумевает выполнение обязанностей всех остальных членов команды на проекте или умение в продакшн-код. Большинству компаний требуются легко масштабируемые и заменяемые человеческие ресурсы. Поэтому навыки в разработке пригодятся именно для оптимизации процессов и максимального понимания принципов запуска проектов. В любом случае, если вы обладаете подобными навыками или хотя бы частью, процесс будет прозрачнее, а качество на выходе выше», — Роман Рогачев, арт-директор сервиса путешествий OneTwoTrip.

«Дизайн и разработка — два разных навыка, задействующие разные участки головного мозга. Правое полушарие отвечает за визуализацию и творческий подход, левое — за структуру и организованность. Дизайнеры, в основном, — люди с развитым правым полушарием, программисты — с левым. Именно поэтому людей, которые могут работать fullstack, очень мало» — Эдвард Чан, веб-дизайнер. Источник — 1stwebdesigner.

«Будучи fullstack-дизайнером, вы имеете возможность понимать каждую часть процесса разработки продукта, это позволяет создавать дизайн, который не только улучшает продукт, но и повышает эффективность вашей команды. Fullstack-дизайнер — как многопрофильный полиглот, который может говорить на родном языке с каждым членом команды», — Кори Ли, продуктовый дизайнер. Источник — Startups & Venture Capital.

«Работа с разработчиками, с точки зрения реализации дизайна, всегда была большой болью, но в последнее время в мире веб-дизайна происходит превращение термина Веб-дизайнер в термин Fullstack-дизайнер. Это означает, что дизайнер больше не просто доставляет исходные файлы, но понимает мир интернета на технических уровнях и сам воплощает проект в рабочий прототип», — Эден Видал, дизайнер. Источник — Medium.

Источник — Medium.

Fullstack-дизайнер vs обычный дизайнер

Как выглядит классический процесс работы веб-дизайнера?

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

Самая большая разница между «обычным» и fullstack-дизайнером — способность сосредоточиться на полной картине. Fullstack-дизайнеры могут изменять набор своих навыков в зависимости от проекта. Например, в одном случае может понадобиться знания UI-дизайна и процессов разработки, а в другом — разработка UX-потоков. Как правило, в арсенале fullstack-дизайнеров есть все эти навыки, и они могут выбирать нужные в зависимости от проекта. Это делает процесс более плавным, позволяет создать максимально качественный продукт, экономя при этом время и деньги.

Какими навыками должен обладать fullstack-дизайнер

Базовые навыки

Дизайн-мышление. Первый навык, который должен изучить fullstack-дизайнер. Нужно определить свою аудиторию, создать набор междисциплинарных инструментов, которые понадобятся в разработке и продвижении продукта.
Lean. Fullstack-дизайнер должен быстро обучаться и понимать, будет ли работать продукт, еще до того, когда потрачены деньги и время. Ему нужно быть достаточно смелым, чтобы пробовать вещи, с которыми не сталкивался, при этом не теряя фокуса в том, что ему хорошо известно.
Понимание клиентов. Способность понимать своих клиентов помогает построить идеальный продукт и правильно его продавать. Fullstack-дизайнер должен знать, что зажигает его клиента.
Agile. Fullstack-дизайнер должен знать, как движется прогресс в разработке каждого продукта. Важно, используя подходящие инструменты и опираясь на желания клиентов, следить за прогрессом в разработке каждого продукта.

Технические навыки

HTML и CSS. Адаптация PSD в HTML и CSS не является очевидным в эпоху гибкого дизайна. Когда дизайнеры могут разрабатывать свои собственные сайты и, следовательно, отвечают за всю работу, сайт выигрывает от единства дизайна, а дизайнер может моментально реагировать на запросы клиента о каких-либо изменениях.
Веб-дизайн. Это вполне очевидно, что fullstack-дизайнер должен разбираться в веб-дизайне. Нужно уметь создавать дизайн-макет, строить визуальную иерархию и расставлять акценты.
Вёрстка адаптивного макета.Современный веб-сервис чаще используется на мобильных устройствах, поэтому интерфейс должен быть не просто удобным — он должен быть удобным на каждом устройстве. Недостаточно уметь делать макеты под разные устройства, также нужно учиться воплощать их в коде.

Soft skills

Сильные коммуникативные навыки. Fullstack-дизайнеры не прячутся за экранами компьютеров, а активно общаются с заказчиками, разработчиками, маркетологами. Также это распространяется и на письменную коммуникацию, включающую в себя емейлы, отчеты, посты в социальных сетях.
Time management. Многие заказчики, вероятно, сталкивались с чересчур капризными исполнителями, которые могут месяцами работать над проектом. Умение правильно распределять время — одно из ключевых для fullstack-специалиста.
Навык решения проблем. Если вы дизайнер, то решаете проблемы ежедневно. В этом заключается суть хорошего дизайна. Любой дизайн — это визуальное решение, которое позволяет человеку взаимодействовать с продуктом, например, с устройством или сайтом. А если вы fullstack-дизайнер, то помимо решения задач дизайна, вы должны уметь решать проблемы, возникающие на всех этапах разработки.

Основные инструменты fullstack-дизайнера

Инструменты, которыми пользуются fullstack-дизайнеры, сильно варьируются в зависимости от индивидуальных предпочтений. Самые популярные из них:

Инструменты для проектирования

Sketch. Артборды, однобуквенные иконки, настраиваемая сетка, простота в экспорте — всё это позволило Sketch завоевывать множество поклонников.
Adobe Xd. Инструмент проектирования интерфейсов от Adobe, серьёзный конкурент Sketch. Подходит для Mac и PC.

Инструменты для визуального дизайна

Adobe Photoshop и Illustrator. Отлично подходят для создания иллюстраций и различных манипуляций с визуальными материалами.
Kraken. Оптимизатор изображений. Уменьшает размер больших файлов, не влияя на качество.
Kuler. Позволяет создавать цветовые схемы с помощью цветового круга, а также просматривать готовые комбинации из сообщества Kuler.
Canva. Бесплатный веб-инструмент, который позволяет создавать дизайн как для веб, так и для печати.
Google Fonts. Позволяет выбирать шрифт в любом месте и использовать его в своих проектах. Стоит отметить, что все шрифты бесплатные.

Библиотеки готовых элементов

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

Инструменты прототипирования

Ручка и бумага. Даже в эру компьютеров многие дизайнеры до сих пор используют ручку и бумагу, для того, чтобы набросать предварительный дизайн.
Moquaps. Инструмент предназначен в основном для вайрфрейминга. Moqups предлагает множество веб-компонентов, которые можно добавлять на канву или с легкостью редактировать.
InVison. Платформа работает с внешними графическими файлами, которые можно подгружать в систему, или связывать с прототипом для автоматизированного обновления графических элементов без постоянной загрузки новых версий.
Marvel. Веб-инструмент для прототипирования. Позволяет работать с простейшим дизайном интерфейса, создавать интерактивные прототипы, а также позволяет комментировать макеты в реальном времени всем участникам проекта. Платформа поддерживает разные форматы, в том числе оригиналы Sketch и Photoshop.
Axure. Помимо создания динамических прототипов, с помощью Axure можно создавать интерактивные вайрфреймы, увеличить сложность и детализацию макета. Также можно протестировать прототип приложения на смартфоне с помощью встроенной функции шеринга.
Origami. Бесплатный инструмент, позволяющий создавать интерактивные прототипы. Можно запускать на айфоне или айпаде, взаимодействовать с ними, и экспортировать код, пригодный для использования разработчиками. Добавлять связи между слоями в прототипе и графическом редакторе (Sketch или Photoshop), после чего любые изменения обновляются в рабочем файле Origami.

Инструменты для управления временем

Pomodoro.cc. Таймер по методике Pomodoro, разбивающий работу на отрезки по 25 минут. Нужно всего лишь завести будильник. Когда наступит время перерыва, таймер издаст сигнал.
Toggl. Тайм-трекер для точного учета времени, уходящего на определенные задачи. В бесплатной версии можно добавлять команду до 5 человек.

Инструменты для планирования задач

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

Инструменты для командной работы

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

Вывод

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

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

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

Читать ещё: «Чек-лист: какой вы дизайнер?»

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Полный текст статьи читайте на Нетология