Dmitriytishanskiy.ru

Онлайн уроки
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Первым 20 участникам курса — скидка 30%

  • Длительность 8 месяцев
  • Онлайн в удобное время
  • Обучение на практике
  • Доступ к курсу навсегда

Курс идеально подойдёт

Новичкам в UX

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

Практикующим UI/UX-дизайнерам

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

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

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

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

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

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

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

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

Проверка предположений: быстрое коридорное тестирование, сетевое и на реальных пользователях.

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

Грамотная и уверенная подача идеи или готового продукта — необходимое условие успеха.

Адаптивный дизайн

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

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

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

Профессиональный софт

Инструменты, без которых невозможен мобильный дизайн — Sketch, Figma, Zeplin.

Записаться на курс скидка 30% первым 20

Программа курса

Программа курса содержит 2 основных блокa.

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

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

Получите полную программу и индивидуальную консультацию

Преподаватели

  • Павел Горшков дизайн-директор Redmadrobot
  • Ольга Сартакова дизайнер Redmadrobot
  • Иван Богачев дизайнер Redmadrobot

Как проходит обучение

Вы выполняете домашние задания и открываете доступ к новому уникальному контенту по теме. Достаточно выделить 3–5 часов в неделю.

Читать еще:  Полиглот немецкий 16 урок

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

В курсе — полезные видеоуроки.

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

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

Общаетесь с наставником

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

Защищаете дипломный проект

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

Резюме после прохождения

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

Ожидаемая зарплата от 70 000

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

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

Zeplin Инструмент совместной работы дизайнеров и frontend-разработчиков.

Ключевые навыки:

  • Умение работать с гайдлайнами для iOS и Android
  • Анализ путей взаимодействия пользователя.
  • Создание и тестирование прототипов
  • Создание интерактивных мобильных прототипов
  • Взаимодействие с разработчиками
  • Анимация мобильных интерфейсов
  • Основы работы с профессиональными инструментами
  • Дизайн мобильных интерфейсов

Диплом Skillbox

Подтверждает успешное прохождение курса «Дизайн мобильных приложений с нуля до PRO»

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

Стоимость обучения

Скидка 30% первым 20

Стоимость обучения 80 000

4 667 Рассрочка без первого взноса

56 000 Для первых 20 студентов

Запишитесь на курс

Дата начала: 12 апреля

Осталось: 15 мест

Часто задаваемые вопросы

Я никогда не занимался дизайном. У меня получится?

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

Можно ли пропускать модули?

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

Я смогу общаться с преподавателями?

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

Записаться на курс или получить консультацию

г. Москва, метро Октябрьская,
Ленинский проспект, дом 6, строение 20

Дизайн приложений

В создании мобильного софта главную роль исполняет дизайн приложения. Он фундамент приложения. И он же первый, кто цепляет внимание пользователя. Чтобы удержать внимание пользователя нужно продумать: внешний дизайн, структуру, удобство пользовательского интерфейса (конкретно UX и UI) и другие детали. Теперь подробнее.

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

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

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

Этапы дизайна приложения

Процесс создания мобильного приложения разделяется на этапы. Это помогает помнить о каждом шаге в разработке софта.

Весь процесс работы над приложением состоит из следующих этапов:

  1. Определение цели, погружение в идею, определение целевой аудитории;
  2. Отрисовка прототипов, подготовка набросков того, как будут выглядеть экраны;
  3. Проектирование User Flow (переход пользователя от одного сценария действий с интерфейсом к следующему);
  4. Отрисовка эскизов для wireframes (структурирование цифрового проекта);
  5. Подбор подходящей цветовой гаммы;
  6. Подготовка дизайн-макета приложения;
  7. Тестирование на этапе макета;
  8. Подготовка макета к разработке;
  9. Проверка верстки, программирования.

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

Принципы дизайна в разработке приложений

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

Первое впечатление и обучение пользователя

Onboarding (произносится «онбординг») — это механизм искусственного создания первых впечатлений о приложении у пользователя.

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

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

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

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

Детали в дизайне приложения

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

Задавайте шрифт правильно. Некоторые компании применяют для каждого мобильного приложения разные шрифты. Для пользователя это не всегда удобно. К примеру, в его смартфоне может не оказаться задуманного вами шрифта. Как приложение будет работать в этом случае? Идеально использовать функцию «использовать дефолтный шрифт» (по умолчанию).

Количество действий / переходов в приложении

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

Разница между UX и UI дизайном приложений

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

UX-дизайн (User eXperience, в переводе с англ. «пользовательский опыт») — это привлекательность и эффективность привлечения пользователей к выполнению целевого действия через графические элементы. Суда входит разработка: цветовой гаммы, шрифтов изображений и паттернов.

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

UI-дизайн (User Interface, в переводе с англ. «пользовательский интерфейс») — это удобство, интуитивно понятный дизайн для использования. Оценивается по опыту взаимодействия пользователя с дизайном на этапе тестирования.

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

На заметку: По нашему опыту, 90% пользователей прекращают использовать приложение еще на этапе знакомства, если один из пунктов (UX и UI) не доработан.

Структура экранов мобильного приложения

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

Главные экраны и меню

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

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

Читать еще:  Уроки по скретч

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

Экран входа и профиль

Если ваше мобильное приложение предполагает создание учетной записи, то вам нужно учитывать следующее:

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

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

Экран электронной коммерции, каталог

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

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

Контрольный экран

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

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

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

Социальный экран

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

Контакты

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

На заметку: Для упрощения поиска нужного контакта можно установить маленькую иконку рядом с контактом.

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

Процесс разработки дизайна мобильного приложения с нуля

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

Привет. Я изучаю графический дизайн с 13 лет. Опыт в веб-дизайне я по крупицам собирала из онлайн-курсов, а еще целыми днями играла с Photoshop и Affinity Designer. Вот, собственно, кратко о моих первых шагах в прокачке дизайна.

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Ищите системное погружение в тему? Загляните в блог для дизайнеров.

В проектировании и разработке приложений я уже год. И уже успела поработать над мобильным приложением Universeaty. А два месяца назад начала работать над новым приложением Crypto Price Tracker, которое выложили 28 января в App Store.

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

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

Вот мой чек-лист по дизайну приложений:

  1. Спроектируйте user-flow для каждого экрана;
  2. Нарисуйте эскизы экранов (wireframes);
  3. Выберите подходящие паттерны и цветовые палитры;
  4. Создайте прототипы и сделайте дизайн (mock-ups);
  5. Соберите интерактивный прототип приложения и попросите людей оценить его и оставить отзыв;
  6. Сделайте финальную ретушь прототипа, отполируйте все экраны, чтобы все они были готовы к разработке.

User-Flow

Первым делом нужно выяснить, какие функции нужны в приложении. Как только вы определились, создайте user-flow — блок-схему работы вашего приложения.

Обычно user-flow состоит из трех типов фигур:

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

User-flow очень полезны, потому что они дают логическое представление о том, как приложение должно работать и решать задачу.

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

User-flow для основного интерфейса.

Эскизы экранов (Wireframes)

После того, как вы завершили проектировать user-flow для всех сценариев, вы начинаете работать с эскизами всех экранов. Wireframes — это, по сути, быстрые наброски вашего приложение. Эскиз, схема того, где будут располагаться изображения, ярлыки, кнопки и прочее. Это грубый эскиз того, как ваше приложение должно работать.

Я использую печатные шаблоны из UI Stencils для рисования эскизов. Это экономит время и к тому же, там есть пространство для заметок.

Вот пример прототипа.

Прототип интерфейса мобильного приложения.

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

Паттерны и цветовые палитры

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

Кстати, лучшие платформы для поиска паттернов — это Mobile Patterns и Pttrns. Чтобы найти хорошие цветовые палитры, попробуйте зайти на Color Hunt.

Прототипы и дизайн

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

Хорошо что есть софт, который позволяет делать так, как надо. Я использую Affinity Designer. А на iOS мой основной инструмент — Sketch.

Вот так выглядят мои первые дизайны.

Перенесение рисунка в пиксели!

Я больше экспериментировала с различными цветовыми палитрами.

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

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

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

Золотой градиент с черным на удивление хорошо выглядит!

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

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

Читать еще:  Английский язык с нуля 2 урок

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

Финальная версия дизайна

После того, как все экраны были завершены, я импортнула их в Xcode и начала разработку приложения.

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

Напоследок добавлю мою любимую цитату.

«Дизайн — это не только, то как что-то выглядит и ощущается. Дизайн — это то, как оно работает»

(с) Стив Джобс

Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Мобильное приложение «Заметки о психике» | Mental Notes

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

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

Процесс создания дизайна мобильного приложения с нуля

Я начала изучать графический дизайн, когда мне было 13 лет. Я научилась проектировать веб-сайты по онлайн-курсам и целыми днями игрался с Photoshop и Affinity Designer. Этот опыт научил меня мыслить, как дизайнер.

Я занимаюсь проектированием и разработкой приложений уже почти год. Я приняла участие в программе Массачусетского технологического института, где я работала в команде по разработке приложения Universeaty. Два месяца назад я начала работать над новым приложением Crypto Price Tracker, которое вышло недавно, 28 января.

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

Процесс проектирования:

  1. Создайте юзерфлоу для каждого экрана.
  2. Создайте / нарисуйте прототипы.
  3. Выберите шаблоны дизайна и цветовые палитры.
  4. Создайте дизайн.
  5. Создайте анимированный прототип приложения и попросите людей проверить его и оставить отзыв.
  6. Сделайте финальную ретушь макетов, чтобы все финальные экраны были готовы к разработке.

Юзерфлоу

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

Обычно юзерфлоу состоит из трех типов фигур.

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

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

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

Юзерфлоу для основного интерфейса.

Прототипы

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

Я использую печатные шаблоны из UI Stencils для рисования каркасов. Это экономит время и дает хорошую рабочую область для рисования и заметок.

Вот пример прототипа.

Прототип интерфейса мобильного приложения

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

Наброски дизайна и цветовые палитры

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

Лучшие платформы для поиска паттернов – это Mobile Patterns и Pttrns. И чтобы найти хорошие цветовые палитры, посетите сайт Color Hunt.

Дизайн

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

Существуют программные средства разработки и инструменты для создания дизайна. Я использую Affinity Designer. Наиболее часто используемым инструментом для дизайна iOS является Sketch.

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

Перенесение рисунка в пиксели!

Я больше экспериментировала с различными цветовыми палитрами.

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

Будьте готовы получить отзывы и поэкспериментировать с новыми предложениями! Вы получите удивительные отзывы от своих пользователей, когда разговариваете с ними, а не когда лихорадочно просматриваете Dribbble или Behance.

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

Золотой градиент с черным на удивление хорошо выглядит!

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

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

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

Финальная версия дизайна

После того, как все экраны были завершены, я импортировала их в Xcode и начала разработку приложения.

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

Я заканчиваю статью одной из моих любимых цитат о дизайне

«Дизайн – это не только, как предмет выглядит и ощущается. Дизайн – это то, как он работает»
– Стив Джобс

Свежие вакансии

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Николай Геллар

Переводчик, историк, меломан. Люблю кофе, книги и классический рок. Авторские права на переведенные материалы, размещаемые на сайте, принадлежат их авторам.

Определитесь, пожалуйста, с Вашей принадлежностью к тому или иному полу. Вы то “…начала изучать…”, то “…игрался с Photoshop…”. И тег “Перевод” желательно бы оставить под статьей.
А так, спасибо большое. Хороший пример этапов работы, тем более если учесть, что автору 16 лет.

Это перевод со статьи на английском, ссылка в шапке

Первая колонка – ок. Вторая, в силу повтора символа доллара и разной длины значения – стоило бы выровнять влево для US/Europe рынка, для азиатского региона уже другое решение придется искать.
Далее, выбор биржи является превалирующим аспектом, выбор валюты – вторичным, это необходимо показать.
И наконец, блок навигации – как вариант сделать центральной кнопкой, подчеркнет эксчейндж…
PS. Цветовая палитра мало ассоциируется с блокчейном, выгоднее было бы черный / белый фон. На черном золотистыми токены, на белом обычным черным текстом писать. Причем, стиль записи $ xxxx и xxxx € может быть различным, поэтому знак валюты как то иначе использовать. В идеале вообще не повторять… На троечку решение в целом.

Ссылка на основную публикацию
Adblock
detector