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

10.07.202214.07.2022 admin 0 Comments

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

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

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

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

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

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

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

Android против iOS

Сегодня у нас дуополия (от латинского «два» и греческого «продаю». Ситуация, при которой есть только два продавца определённого товара, ведущие независимую друг от друга политику. — Ред.). Две главные мобильные операционки — 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, а раньше пользовались только устройствами на Android, очень вам советую походить с айфоном. Вы переключитесь, познакомитесь с яблочным интерфейсом и лучше поймёте его пользователей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

Вы научитесь создавать интерфейсы для мобильных платформ и эффектно презентовать свои работы. Сможете начать карьеру дизайнера в IT-компании или зарабатывать на фрилансе.

Программа записана совместно с агентством Redmadrobot

Redmadrobot агентство № 1 в разработке мобильных приложений.

Среди их клиентов «Сбербанк», «Яндекс», «Азбука вкуса», «Победа», Mail.Ru и другие крупные компании. Проекты «роботов» получили награды European Design Awards, Tagline Awards и «Рейтинга рунета».

На рынке не хватает специалистов

сейчас ищут дизайнера мобильных приложений

зарплата начинающего специалиста

Кому подойдёт этот курс

Новичкам в UX

Научитесь делать прототипы и мобильные интерфейсы с помощью Figma и Sketch. Создадите дизайн приложения, опубликуете портфолио на Behance и сможете претендовать на позицию junior-дизайнера в IT-компании.

UX/UI-дизайнерам

Изучите опыт ведущей дизайн-студии Redmadrobot и реальные кейсы. Сможете делать более крутые интерфейсы, дополнять их анимацией и претендовать на позицию middle-дизайнера в IT-компании или перейти на фриланс.

Графическим и веб-дизайнерам

Узнаете специфику дизайна для iOS и Android и научитесь создавать мобильные интерфейсы по правилам юзабилити. Сможете сменить направление и больше зарабатывать в IT-компании или на фрилансе.

Чему вы научитесь

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

С нуля освоите Figma, Sketch и Zeplin — главные инструменты дизайнера мобильных приложений. Сможете создавать интерфейсы любой сложности для iOS и Android.

Проектировать приложения

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

Тестировать гипотезы

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

Адаптировать дизайн

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

Анимировать интерфейсы

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

Презентовать проекты

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

О Skillbox

Как пользоваться платформой

Изучаете тему

В курсе — практические видеоуроки.

Выполняете задания

В том темпе, в котором вам удобно.

Работаете с преподавателем

Закрепляете знания и исправляете ошибки.

Защищаете дипломную работу

И дополняете ею своё портфолио.

Программа

Вас ждут онлайн-лекции и практические задания на основе реальных кейсов.

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

Введение

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

Первый дизайн-макет

Изучите интерфейс и возможности Sketch и Figma. Сможете работать с палитрой и слоями, создавать иконки и настраивать текстовые блоки.

Специфика мобильных платформ

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

Подготовка к проектированию

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

Поиск вдохновения

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

Введение в проектирование

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

Создание карты вайрфреймов

Узнаете, как показывать концепцию дизайна интерфейсов и приложений с помощью карт вайрфреймов.

Визуальная концепция

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

Проверка идеи

Узнаете, как собрать интерактивный прототип в Figma, и научитесь тестировать свои дизайн-идеи.

Презентация проекта

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

Идеальный макет

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

Адаптация под разные платформы

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

Масштабирование и подготовка дизайн-материалов

Узнаете, как передать дизайн-макет разработчикам без ошибок.

Создание кейсов на Behance

Узнаете требования к хорошим кейсам и научитесь создавать их на популярной платформе.

Анимация интерфейсов

Поймёте роль анимации в интерфейсе и научитесь создавать интерактивные прототипы в Principle.

Бонус-модуль. Истории успеха

Посмотрите интервью сотрудников компании Redmadrobot.

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

Введение

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

Старт проекта

Вторичные исследования

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

Первичное исследование

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

Анализ результатов

Познакомитесь с методикой персон, которая помогает лучше узнавать пользователей. Научитесь описывать клиентский опыт в формате Customer Journey Map и создавать востребованные продукты, используя методологию Jobs To Be Done.

Проектирование клиентского опыта и дизайн продукта

Научитесь описывать концепцию и управлять продуктом: оценивать фичи, вести бэклог и определять MVP. Сможете тестировать продуктовые идеи с помощью сторибордов и лендингов.

Проектирование экранов. UX-копирайтинг

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

UX-тестирование

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

Концептуальность и мудборд

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

Сетка и композиция

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

Типографика

Поймёте, как правильно оформлять тексты для интерфейсов — подбирать шрифты, размеры и цвета.

Цвет и визуализация данных

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

Иконки и иллюстрации в мобильных приложениях

Узнаете, как генерировать идеи иллюстраций, и научитесь рисовать иконки, картинки и персонажей для интерфейсов.

Селф арт-дирекшен

Разберётесь, как оценивать потенциал своих идей и работ, если нет опытного наставника.

Подготовка визуальной концепции

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

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

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

Интерфейсная анимация и motion-дизайн в мобильных приложениях

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

Запуск продукта

Узнаете, как подготовить приложение к публикации в сторах.

Развитие продукта

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

Дипломный проект

Дизайн мобильного приложения

Вы с нуля создадите дизайн приложения — от прототипа и концепта до готового интерфейса.

Получить презентацию курса и консультацию специалиста

Похоже произошла ошибка. Попробуйте отправить снова или перезагрузите страницу.

Источник

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

Вы научитесь создавать приложения под iOS и Android, разрабатывать прототипы и проектировать мобильные интерфейсы. Получите новую профессию и проекты в портфолио.

Программа записана совместно с агентством Redmadrobot

Redmadrobot агентство № 1 в разработке мобильных приложений.

Освойте профессию в перспективной индустрии

скачиваний мобильных приложений было в России в 2020 году

за год потратили в приложениях российские пользователи