Дизайнер мобильных приложений

Дизайнер мобильных приложений — это специалист, работающий с платформами Android/iOS и Windows Phone. Он создает тех. задание для программистов, пользовательские сценарии, описывает логику разрабатываемого продукта. Профессия подходит тем, кого интересует рисование и информатика (см. выбор профессии по интересу к школьным предметам).

Особенности профессии

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

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

Специфика профессии

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

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

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

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

Плюсы и минусы профессии

Плюсы:

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

Минусы:

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

Личные качества специалиста

Знание английского или другого иностранного языка.
Понимание правил и законов маркетинга.
Высокие аналитические способности.
Знание языков программирования.
Умение работать с людьми.
Склонность к точным наукам и художественный вкус.
Высокая внимательность и ответственность.
Неконфликтность.
Пунктуальность и ответственность.

Обучение на Дизайнера мобильных приложений

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

10 универсальных правил для дизайна мобильных приложений

Следуйте гайдлайнам

Жизнь дизайнера мобильных приложений значительно проще, чем у коллег-«графиков». Все благодаря Apple и Google, которые выпустили набор рекомендаций Human Interface Guidelines и Material Design. Изучаем, руководствуемся!

Выражайте эмоции

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

Текст – эпитеты, метафоры, ирония работают на выразительность.
Шрифт – у каждой гарнитуры свой характер. Используйте его, чтобы создать атмосферу.
Композиция – противостояние, динамику, статику, гармонию и целую палитру ощущений можно передать, по-разному сочетая объекты.
Цвет – практика показывает, что именно цвет – самый быстрый способ донести эмоцию, а цветовая кодировка запоминается пользователям лучше всего;
Фото – правильно подобранные фотографии станут ключом к целевой аудитории, заинтересуют пользователей и зададут эмоциональный тон.

Помогайте в решении задач

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

Используйте разумную навигацию

Мир ускоряется, и гаджетами мы пользуемся на ходу. Нужна простая и интуитивно понятная навигация. Для этого все методы хороши: можно использовать двойное описание (иконка + текст) в навигации, А/Б-тесты, пользовательский опыт платформ iOS и Android.

Рассказывайте о преимуществах

Пользователь может заранее не знать о том, насколько ваше приложение способно облегчить ему жизнь. Об этом стоит рассказать с помощью welcome-скринов.

Помните об особенностях мобильных платформ

Палец – не курсор, поэтому отказываемся от десктопных вариантов мелких объектов. Можно заменить их достойной альтернативой – прокруткой с помощью жеста swype.

Презентуйте работу

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

Анимируйте правильно

Целесообразная анимация для каждого объекта, как и грамотная постановка хореографии всех графических элементов в приложении – «знак качества» в дизайне.

Будьте внимательны к деталям

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

Знайте и применяйте правила

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

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

Следуйте гайдлайнам

Выражайте эмоции

Текст – эпитеты, метафоры, ирония работают на выразительность.
Шрифт – у каждой гарнитуры свой характер. Используйте его, чтобы создать атмосферу.
Композиция – противостояние, динамику, статику, гармонию и целую палитру ощущений можно передать, по-разному сочетая объекты.
Цвет – практика показывает, что именно цвет – самый быстрый способ донести эмоцию, а цветовая кодировка запоминается пользователям лучше всего;
Фото – правильно подобранные фотографии станут ключом к целевой аудитории, заинтересуют пользователей и зададут эмоциональный тон.

Читать еще: Дизайнер по одежде

Помогайте в решении задач

Используйте разумную навигацию

Рассказывайте о преимуществах

Помните об особенностях мобильных платформ

Презентуйте работу

Анимируйте правильно

Будьте внимательны к деталям

Знайте и применяйте правила

Введение в дизайн мобильных приложений

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

Качпер Рудуха
(Kacper Ruducha)

Графический дизайнер из Варшавы. Рисовал с детства, но не понимал, что делать со своими рисунками, — пока не пришёл в графдизайн. Мечтает о своей дизайн-студии. Ведёт блог на Medium.

Перевожу, пишу, редактирую. Люблю живую речь.
Уважаю букву Ё.
Формализм мастдай.

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

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

Andro >Сегодня у нас дуополия (от латинского «два» и греческого «продаю». Ситуация, при которой есть только два продавца определённого товара, ведущие независимую друг от друга политику. — Ред.). Две главные мобильные операционки — Android от Google и iOS от Apple. По данным StatCounter Global Stats, на март 2019 года их доли на рынке составляют 75,33% и 22,4% соответственно:

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

О чём нужно помнить дизайнерам мобильных приложений — неважно, работаете вы с Android или же с iOS?

Опирайтесь на соглашения платформы

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

Для Android написан Google Material Design, а для iOS — Human Interface Guidelines. Непременно добавьте эти странички в закладки, вы будете часто возвращаться к ним при работе. Проштудируйте их, познакомьтесь с образцами нейминга, дизайна и юзабилити. Не забывайте, что документы эти регулярно обновляются, поэтому пересматривайте их время от времени, чтобы быть в курсе изменений.

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

Если вы хотите разрабатывать для iOS, а раньше пользовались только устройствами на Andro >

Проектирование и инструментарий

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

Озарение, или просто отправная точка. Это может быть идея инновационного продукта (ещё один убийца Facebook!) или просто сбор требований клиента.
Моделирование. На этом этапе пишутся пользовательские сценарии и истории, а затем их представляют в виде блок-схем и рисуют малодетализированные каркасы графического интерфейса (low-f >Макеты (мокапы). Визуальное представление вашего приложения. В начале эры цифрового дизайна правил бал Adobe Photoshop. Но он не был заточен под проектирование интерфейсов и постепенно сдавал позиции. Согласно отчёту Avocode Design Trend, в 2016 году старый добрый PS потерял пальму первенства. Теперь отраслевой стандарт для создания макетов — приложение Sketch. Благодаря своему огромному сообществу он обзавёлся расширениями и плагинами, а также интеграцией с уймой сторонних программ. Sketch — простой, но мощный инструмент.
Прототипирование. С интерактивным прототипом можно взаимодействовать как с интерфейсом уже готового приложения. Его демонстрируют инвесторам, клиентам и разработчикам. Наиболее популярный инструмент — программа InVision. Очень часто её дополняет Craft, это набор плагинов для Sketch и Photoshop. Стоит упомянуть, что и сам Sketch недавно обзавёлся инструментами для создания прототипов.

Анимация и микровзаимодействия 1 . Этот этап иногда пропускают — по крайней мере по трём причинам. Прежде всего, для стандартных компонентов iOS и Andro >Передача разработчикам. Чтобы реализовать проект, нужно как-то переадресовать дизайн разработчикам. Этот процесс и называется передачей (handoff), и для этого тоже есть приложения. Если ваша компания ещё ничего не выбрала, можете поиграть с Avocode, Sympli или Zeplin. Все они позволяют экспортировать ресурсы, проверять свойства дизайна и многое другое. Кроме того, эти приложения часто используются для общения внутри команды.

Читать еще: Дизайнер вузы москвы

Части продукта, выполняющие небольшую конкретную задачу.

Что происходит с инструментами
для UX и UI-дизайна

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

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

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

Особенности мобильного дизайна: помните об ограничениях.

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

Меньший размер дисплея

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

Проектирование для сенсорного экрана

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

Ограничения трафика и производительности

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

…и не забывайте о возможностях

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

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

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

Вклад дизайнера в разработку мобильных приложений

Дизайнер и его роль в разработке мобильных приложений

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

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

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

Как дизайнер может облегчить жизнь разработчику?

Итак, у дизайнера, независимо от его профиля и направленности, существует множество инструментов, с помощью которых он может отрисовать то, что от него требуют. Только вот просто отрисовать экраны мобильного приложения недостаточно. Это не веб-сайт и не веб-приложение. У этой категории цифровых продуктов более строгие правила, которым нужно подчиняться. Под платформы IOS и Android созданы отдельные гайдлайны (см. раздел «Полезные ссылки»).

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

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

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

Дизайнер — часть команды

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

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

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

Как уже было сказано выше, разработчику сейчас приходится столько всего изучать, что времени разбираться в графических редакторах просто нет. Поэтому дизайнер не должен отрисовывать элементы в Photoshop / Illustrator и сдавать макет в *.psd / *.ai файлах. Такие файлы довольно много весят и требуют установки пакета Adobe. Даже если это не играет особой роли, на изучение этих редакторов просто нет времени.

Читать еще: Дизайнер интерьера дистанционное обучение

Разработчик хочет просто выбирать элементы и видеть, как их верстать, а не разбираться в структуре слоев одного огромного файла. Сейчас существует много графических редакторов для отрисовки мобильных приложений: Sketch, Figma и другие. В общем, есть из чего выбрать. От выбранного редактора будет зависеть то, как дизайнер представит кликабельный прототип и “живые экраны” для фронтенда.

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

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

Дизайнер должен знать гайдлайны под разные платформы и их отличия

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

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

Ресурсы

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

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

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

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

ТЗ с описанием работы экранов

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

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

Что делать, если ничего из вышеперечисленного нет, а работать нужно?

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

Проект был связан с арендой недвижимости и разрабатывался под две платформы: IOS и Android. Процесс разработки начинался как любой другой. Позже оказалось, что дизайнер не полностью разбирался в мобильных приложениях. Что такое гайды он не знал. На дизайне присутствовали прозрачные элементы, шрифты использовались только под одну платформу. Колористику можно было описать как использование “50 оттенков серого”.

Мне дали *.psd файл. Вроде бы ничего плохого. Такие файлы сдают многие дизайнеры. Но мне пришлось установить пакет Adobe, чтобы взглянуть на макет. Файл был очень “тяжелым” и открывался минут 10. Не все экраны были отрисованы отдельно на рабочей области. Они находились один поверх другого как слои, и чтобы посмотреть один экран, нужно было отключить все остальные. Так как у меня не было значительного опыта работы с пакетом, я подумал об Avocode как об инструменте для обработки дизайн-материала. Конечно, эта программа не идеальна, но она меня буквально спасла.

Кликабельный прототип мне передали в InVision. Замечу, просто кликабельный прототип без живых экранов.

Выводы:

Что я ожидал получить от дизайнера:

кликабельный прототип и живые экраны (InVision, Zeplin или Figma)
переработанное ТЗ с описанием работы экранов
карту экранов с переходами
пользовательскую историю
нарезанные ресурсы в размерах @1, @2, @3
шрифты

Из всего перечисленного я получил только кликабельный прототип и *psd файл.

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

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

Всем спасибо за внимание и успешных проектов!

0 0 голоса

Рейтинг статьи

Дизайнер мобильных приложений