Содержание
- Чем занимается дизайнер пользовательского интерфейса?
- Веб и нативные приложения
- Улучшение ваших навыков
Когда я начал свою карьеру, я был веб-дизайнером. Я проработал в веб-дизайне четыре года, начиная с сайтов для малого бизнеса и в конечном итоге перейдя к более крупным клиентам. Я обнаружил, что меня интересовал не графический дизайн и не работа с более крупными брендами. Меня больше интересовали шаблоны нумерации страниц, способ взаимодействия людей с формами и такие вещи, как воспринимаемая производительность, чем визуальный дизайн веб-страницы.
Когда я смотрел научно-фантастические фильмы, я смотрел на интерфейсы. И когда я играл в видеоигры, я наблюдал, как устроено меню. Если какая-либо из этих черт вам знакома, возможно, вы в душе и дизайнер пользовательского интерфейса.
Я уволился с работы в агентстве и основал собственную компанию. На своей странице в LinkedIn я попытался кратко изложить свою новую карьерную цель: создать лучшее программное обеспечение, какое только возможно. Прошло четыре года с тех пор, как я начал работать фрилансером, и мой путь не остановился. Сейчас я помогаю запустить небольшую компанию по разработке пользовательского интерфейса под названием Мононуклеоз. Недавно мы приветствовали нашего четвертого члена команды.
В этой статье я хочу описать, каково быть дизайнером пользовательского интерфейса, в том числе, что именно влечет за собой эта работа, где найти лучшие учебные ресурсы и как улучшить свое ремесло.
Чем занимается дизайнер пользовательского интерфейса?
Я считаю, что обычно вы можете разделить работу дизайнера пользовательского интерфейса на четыре категории. Вы общаетесь с клиентом, исследуете, проектируете и создаете прототипы, а также общаетесь с разработчиками. Давайте рассмотрим каждый из этих этапов более подробно.
Общение с клиентом
Общение с клиентами - это понимание проблемы клиента. Цель состоит в том, чтобы разобраться с бизнесом вашего клиента, поэтому начало проекта обычно требует много разговоров. Это нормально - не знать слишком много о сфере деятельности вашего клиента, когда вы только начинаете - вы можете взглянуть на его бизнес по-новому, пока вы представляете возможные дизайнерские решения.
Чтобы быть хорошим дизайнером пользовательского интерфейса, вы должны в конечном итоге уметь думать вместе с бизнесом вашего клиента. Например, ваш клиент может работать в авиации. Работа на них в конечном итоге сделает вас достаточно осведомленными в этой отрасли. Итак, совет для вашего собственного счастья состоит в том, чтобы мудро выбирать отрасли, в которых вы работаете, чтобы не стать экспертом в том, что вас не волнует или не интересует.
Во время проекта общение не прекращается. Как дизайнер, вы будете постоянно представлять свои работы. В нашей компании мы - удаленная команда, поэтому у нас не так много личных встреч. Вместо этого мы активно используем совместное использование экрана посредством видеоконференцсвязи. Коммуникационные инструменты, такие как Skype и Slack, используются каждый день.
Полезно сочетать синхронные и асинхронные методы связи. Звонок - это здорово, если вам нужно быстро получить много информации, но вы должны быть рядом в одно и то же время. Мы думаем о Slack как о нашем «виртуальном кулере для воды» и используем Basecamp для управления сложными дизайнерскими проектами. Когда мы проектируем прототипы с использованием HTML и CSS, мы используем GitHub Issues для непосредственного обсуждения кода.
Исследовать
Помимо общения с клиентами, вы будете проводить много исследований. Сюда могут входить полевые исследования, семинары с клиентом, анализ конкуренции или определение стратегии - по сути, практически все, что поможет вам понять текущую проблему.
Исследования - это то, что влияет на ваш выбор дизайна. Это статья, которую вы когда-то читали, или та новинка, которую только что выпустила Apple. Когда пришло время объяснить, почему вы выбрали тот или иной дизайн, ваше исследование поддержит вас.
Исследования могут быть очень обширными. Я часто тестирую новые устройства в исследовательских целях или регистрируюсь в новом веб-приложении, чтобы изучить его пользовательский интерфейс.
Дизайн и прототипирование
Как дизайнер, вы, вероятно, будете проводить большую часть своего времени, занимаясь дизайном и созданием прототипов. Проект дизайна пользовательского интерфейса может продвигаться вперед по-разному: от набросков до детального дизайна и кодирования.
Используемый вами метод во многом зависит от типа проекта. Что ты проектируешь? Это веб-сайт или вы бы предпочли называть это приложением? Использует ли он родную технологию? Это редизайн или вы начинаете с нуля?
В нашей компании нет фиксированного процесса, но большинство проектов следуют одному и тому же приблизительному порядку: они начинаются с эскизов и каркасов, переходят к детальному визуальному дизайну и интерактивному дизайну и заканчиваются прототипом.
Как дизайнеры, мы много времени думаем о наших инструментах. Хотя отличные инструменты важны, они не самое главное. Умение использовать Adobe Creative Suite и такие приложения, как Sketch, равносильно умению рисовать карандашом или кистью. Вам все еще нужно сделать картину.
При этом здоровый интерес к инструментам - это хорошо. Мне нравится пробовать новые инструменты, которые помогают мне работать более продуктивно. Мой любимый инструмент для редактирования векторных изображений - Illustrator, но сейчас большая часть моей работы над визуальным дизайном выполняется в Sketch. Другие члены команды перешли на более новые инструменты, такие как Affinity Designer.
Инструменты - это очень личный выбор. Пока мы можем легко работать вместе, каждый волен выбирать самостоятельно. Чтобы упростить обсуждение наших проектов с клиентами, мы создаем прототипы с помощью InVision. Однако для более продвинутого прототипирования мы используем HTML и CSS. Все, что вам нужно, зависит от работы, которую вы хотите с ним делать.
Связь с разработчиками
Часто забываемая часть работы UI-дизайнера - это общение с разработчиками. В наши дни вы не можете просто отправить свои проекты разработчикам в надежде, что они будут реализованы правильно. Лучшие дизайнеры знают, что задача не в создании дизайна, а в том, чтобы донести его до всех заинтересованных сторон, которые должны дать свое одобрение, но и разработчиков, которые должны его реализовать.
Сообщение о дизайне может иметь разные формы: подробные спецификации, предоставление ресурсов, совместное рассмотрение дизайна. То, что имеет смысл доставлять в каждом экземпляре, во многом зависит от того, является ли проект собственным или веб-приложением.
Традиционный подход заключается в размещении ресурсов рядом с дизайном экрана. Экраны экрана можно использовать, чтобы увидеть, как будет выглядеть дизайн в целом, в то время как ресурсы представляют собой готовые к использованию файлы PNG и SVG с иконками, поэтому разработчикам не нужно иметь дело с графическим редактором.
В нашей компании мы сторонники большего. Мы используем руководства по стилю компонентов, чтобы поддерживать последовательность в наших проектах. Когда мы имеем дело с веб-проектом, мы предоставляем подробные наборы HTML и CSS, задокументированные по частям, готовые к реализации. Я считаю, что наличие дизайнерского чутья на каждом этапе разработки программного обеспечения - единственный способ достичь моей цели по созданию программного обеспечения мирового класса.
Веб и нативные приложения
Когда вы разрабатываете собственное приложение для платформы (например, iOS или Android), вы, как правило, придерживаетесь определенных правил. Когда вы создаете дизайн для Интернета, руководств не так уж и много. Как правило, у вашего клиента есть набор графических руководств для своего бренда, которые определяют, как все должно выглядеть.
Однако эти правила, как правило, ориентированы на маркетинговые веб-сайты, и их содержание не всегда приводит к правильным решениям в отношении пользовательского интерфейса. Шрифты, как правило, выбираются из маркетинговых соображений, а не из соображений удобочитаемости. Цвета могут быть смелыми и яркими, что работает в рекламной кампании, но не в приложении, которое вы используете изо дня в день. Эти руководства необходимо интерпретировать.
Есть несколько рекомендаций по пользовательскому интерфейсу для Интернета. Вы можете утверждать, что Интернет - это плавильный котел разных стилей. Если вы делаете что-то, что больше похоже на приложение, чем на веб-сайт, вам нужно знать о широко используемых фреймворках, таких как Bootstrap и ZURB Foundation. Фреймворк начинает определять, как все должно выглядеть, потому что вы не хотите изобретать велосипед. И это, наверное, хорошо.
В нашей компании мы любим использовать Bootstrap. Он предоставляет разумные размеры по умолчанию для общих элементов пользовательского интерфейса, таких как кнопки, таблицы данных и модальные окна.
В веб-дизайне вас больше ограничивают технические возможности Интернета. Раньше было сложно реализовать на веб-сайте простые визуальные эффекты, такие как закругленные углы. Эти дни давно прошли - теперь вы можете свободно рисовать пользовательские интерфейсы с большим количеством теней, переходов, анимации и даже 3D.
Как дизайнеру, гораздо реалистичнее контролировать процесс и дизайн в браузере. Я не видел, чтобы многие дизайнеры пользовательского интерфейса брали на себя программирование пользовательского интерфейса нативного приложения, но дизайнер, выполняющий HTML и CSS веб-приложения, является обычным явлением. Если вы можете кодировать свои собственные проекты, вы будете иметь преимущество перед своими коллегами, не занимающимися программированием, и для меня это единственный способ по-настоящему понять, как работает Интернет.
Веб-ограничения
Вскоре вы обнаружите, что не все полезные приемы, которые вы изучаете, поддерживаются в каждом браузере, и это реальность разработки для Интернета. Хорошо следовать хорошо известным принципам, таким как прогрессивное улучшение, когда вы загружаете улучшенный контент, когда это возможно, но также думайте о том, как контент ухудшается.
В последнее время стало популярным «резка горчицы». При поддержке веб-команды BBC это предполагает различение «хороших» и «плохих» браузеров и предоставление ограниченного опыта «плохим» браузерам. Однако на самом деле это работает только для информационных сайтов.
Когда дело доходит до приложений, похожих на приложения, многие люди ограничивают поддержку только несколькими ведущими браузерами, чтобы упростить разработку. К сожалению, это возвращает нас к ситуации 1996 года, когда вам нужен определенный браузер для просмотра контента.
Улучшение ваших навыков
Итак, как вам быть в курсе быстро меняющейся веб-индустрии и улучшить свои навыки? Давайте рассмотрим несколько различных методов повышения ваших навыков ...
Знание платформы
Важная часть арсенала дизайнера - знание платформы. Вы должны знать о различных операционных системах и о том, как люди их используют. Как дизайнеры, мы склонны использовать Mac, но при этом легко забыть, что большинство людей используют боксы Windows для выполнения своей работы.
Я чувствую, что вы можете по-настоящему понять что-то, только если воспользуетесь этим сами. Я предпочитаю использовать свой Mac для проектирования, но трачу много времени на то, чтобы догнать эволюцию различных других платформ. У меня на Mac установлено несколько копий Windows в виде виртуальных машин. Я был занят тестированием новых сборок Windows 10 с помощью программы предварительной оценки Microsoft, чтобы проверить различные изменения в пользовательском интерфейсе.
Я также регулярно покупаю новое оборудование, чтобы проверить, как оно работает. Я купил Apple Watch, чтобы протестировать платформу. Затем я продал его, потому что чувствовал, что это не так много помогает мне в жизни.
Кроме того, Интернет можно рассматривать как отдельную операционную систему. Он постоянно развивается, и каждую неделю к каждому браузеру добавляются новые функции. Чрезвычайно полезно знать о технических аспектах браузеров, особенно о возможностях CSS и графики. Вам необходимо знать, что такое SVG и WebGL, и как можно использовать API веб-анимации.
Каждая платформа со временем развивается, и ваша задача как разработчика пользовательского интерфейса - быть в курсе последних событий. В конце концов, все, что вы создаете, не живет изолированно, а является частью более крупной программной экосистемы.
Вернуться к основам
То, с чем мы боремся сегодня, не сильно отличается от того, с чем мы боролись 20 лет назад. В книгах есть масса хороших советов. Для начала попробуйте «Защитный дизайн для Интернета» Джейсона Фрида и Мэтью Линдермана и «Не заставляйте меня думать» Стива Круга.
Если вы не знаете о таких понятиях, как модальность и аффорданс, вам нужно прочитать. Вы должны уметь объяснять, что такое закон Фиттса. Гештальт-закон близости? Это основа дизайна пользовательского интерфейса.
Вдохновляйтесь играми и фильмами
Как UI-дизайнер, я черпаю вдохновение из других источников в своей работе. Я нахожу много вдохновения в играх. Некоторые игры очень сложные, и UI-дизайнерам приходилось решать те же сложные проблемы интерфейса, что и UI-дизайнеры, работающие над бизнес-проектами.
Игры также могут обозначать тенденции. Минимализм в меню Colin McRae Rally напоминает мне направление iOS7. В некотором смысле, модный сейчас дизайн пользовательского интерфейса появлялся в играх много лет назад. Переход от скевоморфизма к простому функциональному интерфейсу и «плоскому дизайну» проявился и в играх. Сравните Oblivion 2006 года со Skyrim 2011 года. Обе игры представляют собой ролевые игры из одной серии, но разница разительная.
Футуристические интерфейсы в фильмах Marvel, таких как «Железный человек», также вдохновляли меня. Это не совсем подходящие примеры, но они заставляют меня больше думать о вычислениях в целом. Хотим ли мы будущего экранов или хотим, чтобы экраны исчезли? Это, наверное, хороший вопрос, чтобы задать его в пабе, полном дизайнеров.
Вы растете как дизайнер благодаря упорному труду, настойчивости, общению со сверстниками и огромному количеству чтения. Около года назад я прочитал в New York Times статью о людях, которым за 80, которые продолжают оттачивать свое мастерство. Я чувствую, что только начинаю. А вы?
