Как сделать дизайн приложения
Я начала изучать графический дизайн, когда мне было 13 лет. Я научилась проектировать веб-сайты по онлайн-курсам и целыми днями игрался с Photoshop и Affinity Designer. Этот опыт научил меня мыслить, как дизайнер.
Я занимаюсь проектированием и разработкой приложений уже почти год. Я приняла участие в программе Массачусетского технологического института, где я работала в команде по разработке приложения Universeaty. Два месяца назад я начала работать над новым приложением Crypto Price Tracker, которое вышло недавно, 28 января.
В этой статье я поделюсь поэтапным процессом проектирования, которому я следую при работе над приложениями. Это должно помочь тем, кто хочет научиться или улучшить свои навыки цифрового дизайна. Дизайн – это не только то, как использовать программное обеспечение для проектирования, и эта статья не научит вас, как его использовать. Есть сотни качественных обучающих программ в Интернете. Дизайн также касается понимания сути вашего продукта, его функциональности, а также проектирования, не забывая о конечных пользователях. Вот чему вас научит эта статья.
Процесс проектирования:
- Создайте юзерфлоу для каждого экрана.
- Создайте / нарисуйте прототипы.
- Выберите шаблоны дизайна и цветовые палитры.
- Создайте дизайн.
- Создайте анимированный прототип приложения и попросите людей проверить его и оставить отзыв.
- Сделайте финальную ретушь макетов, чтобы все финальные экраны были готовы к разработке.
Юзерфлоу
Первый шаг – выяснить, какие функции вы хотите видеть в своем приложении. После того, как у вас появились идеи, создайте юзерфлоу. Это блок-схема работы вашего приложения.
Обычно юзерфлоу состоит из трех типов фигур.
- Прямоугольники используются для представления экранов.
- Ромбы используются для условий (например, нажатие кнопки входа в систему, свайп влево, увеличение).
- Стрелки соединяют экраны и условия вместе.
Юзерфлоу очень полезны, потому что они дают хорошее логическое представление о том, как приложение будет функционировать.
Вот диаграмма юзерфлоу, которую я нарисовала, когда начала работать над дизайном моего приложения.
Юзерфлоу для основного интерфейса.
Прототипы
После того, как вы завершили делать юзерфлоу для каждого экрана, вы начнете работать с протопипами всех экранов. Прототипы – это, по сути, низко детализированные наброски ваше приложение. По сути, эскиз или схема того, где будут располагаться изображения, ярлыки, кнопки и прочее. Грубый эскиз того, как ваше приложение будет работать.
Я использую печатные шаблоны из UI Stencils для рисования каркасов. Это экономит время и дает хорошую рабочую область для рисования и заметок.
Вот пример прототипа.
Прототип интерфейса мобильного приложения
После создания прототипов вы можете использовать приложение под названием Pop и сделать снимок всех своих рисунков с помощью приложения и получить кликабельный прототип, связав все экраны с помощью кнопок.
Наброски дизайна и цветовые палитры
Это моя любимая часть. Это похоже на разглядывание витрин. Множество паттернов дизайна и цветовых палитр на выбор. Я выберу те, которые мне нравятся, и буду экспериментировать с ними.
Лучшие платформы для поиска паттернов – это Mobile Patterns и Pttrns. И чтобы найти хорошие цветовые палитры, посетите сайт Color Hunt.
Дизайн
Наконец вы переходите к использованию программного обеспечения для создания дизайна. Это похоже на то, что вы вошли в свое приложение в будущем, и сделали несколько скриншотов. Это должно выглядеть реалистично и в значительной степени похоже на реальную вещь.
Существуют программные средства разработки и инструменты для создания дизайна. Я использую Affinity Designer. Наиболее часто используемым инструментом для дизайна iOS является Sketch.
Вот пример некоторых ранних дизайнов моего приложения.
Перенесение рисунка в пиксели!
Я больше экспериментировала с различными цветовыми палитрами.
Я поделилась первоначальными макетами с друзьями, чтобы получить их отзывы. Кажется, многим понравилась схема с золотым градиентом и черным.
Будьте готовы получить отзывы и поэкспериментировать с новыми предложениями! Вы получите удивительные отзывы от своих пользователей, когда разговариваете с ними, а не когда лихорадочно просматриваете Dribbble или Behance.
Поэтому я переработала макет и удалила фоновые графики, потому что их генерация была технически трудоемким процессом, и они снижали читабельность. Что в итоге вышло:
Золотой градиент с черным на удивление хорошо выглядит!
Я была довольна цветовой схемой, значками на панели вкладок и общей компоновкой. Я пошла дальше и разработала остальные экраны, следуя тем же принципам дизайна. Это был долгий, но безумно увлекательный процесс!
Когда все мои экраны были готовы, я собрала прототип в Adobe XD и попросила нескольких друзей поэкспериментировать и дать свой отзыв.
После последних штрихов именно так выглядит финальная версия моего дизайна.
Финальная версия дизайна
После того, как все экраны были завершены, я импортировала их в Xcode и начала разработку приложения.
Вот и все! Я надеюсь, что эта статья поможет вам начать работу над дизайном приложения или поможет стать лучшим дизайнером. И если вам нравится мое приложение, вы можете скачать его здесь.
Я заканчиваю статью одной из моих любимых цитат о дизайне
«Дизайн – это не только, как предмет выглядит и ощущается. Дизайн – это то, как он работает»
– Стив Джобс
Привет! После предыдущих моих постов мне часто писали ребята, которые начинают изучать тему UI/UX. Это так классно, спасибо вам! И в этой статье я делюсь принципами, которые будут интересны и полезны новичку.
Начинать знакомство с приложением через onboarding — хорошо. Для чего это нужно? Когда пользователь скачивает приложение, он «примерно» представляет себе функционал. При старте удобно показать основные функции приложения, чтобы пользователь не путался и начал им пользоваться.
Ещё они нужны, когда выходит классное обновление в приложении, и грех его не выделить.
Яндекс.Транспорт рассказывает о новых фишках.
Среднее количество слайдов 3-4, больше читать неинтересно.
iOS , Android , Windows — у каждой оси есть своя «модель поведения», т.е. все пользовательские сценарии зачастую отличаются друг от друга, и чтобы лучше понимать логику каждой платформы, необходимо смотреть гайды и приложения на устройствах.
Например, в iOS основное меню находится снизу в Tab bar, а в Android –– это боковое меню.
Пример отображения экрана на iOS и Android.
Итак, прежде чем делать приложение одной компании, стоит посмотреть, как оно реализовано у других.
9-ая операционная система поддерживается не на всех устройствах, т.е. рисуя макеты для iPhone 6, используя шрифт SF, необходимо понимать, что у некоторых пользователей будет старая добрая гельветика. (Это нестрашно, разве что, может помешать в максимальном значении символов в одной строке)
В принципе, разница не раздражает, а кому-то и совсем не видна.
Использовать прилипающую кнопку в дизайне не стоит. Это связано с тем, что она хорошо смотрится на продуманном (прорисованном) макете, но на других экранах перекрывает большую часть вместе с клавиатурой. Тут есть два выхода:
— продумать решение для всех разрешений, нарисовать и передать разработчику все спецификации;
— использовать другую кнопку.
Один экран на разных разрешениях.
Красота в деталях. Особенно приятно, когда в приложении продуманы все мелочи: что делать, если контента пока нет? Не загрузился? Загрузилась часть? Отвалился интернет? Всё это необходимо отрисовать и отдать разработчику, иначе он всё сделает за вас.
Удобно выработать эти принципы для себя, вынести их на отдельный файл и при случае всегда отдавать разработчику.
Шрифт (android)
Недавно я столкнулась с тем, что в Аndroid каждая компания задает свой шрифт, т.е. может получиться такая ситуация, что в модели нет шрифта roboto. Или пользователь установил свой шрифт в смартфоне (рукописный или др.). Что делать в этом случае? Идеальная картина на nexus, это слишком маленький процент, чтобы ориентироваться только на него.
Разработчики зашивают функцию «использовать дефолтный шрифт», и я с этим согласна. Если же загрузить шрифт в библиотеку приложения, вы лишаете пользователя привычного для него экрана, и я не думаю, что пользователь обрадуется.
А ещё можно встретить вот такие баги.
Здесь ситуация ещё интереснее, чем в iOS. Размеров смартфонов даже в одной ветке (XH, например) много, и сделать на всех устройствах идеально невозможно. Но может помочь выработка принципа отображения элементов. Как вариант, выяснить для себя, что отображение функций на экране девайса 2:1 и передать эту информацию разработчику.
Тут стоит не забывать проработать момент с клавиатурой и набором текста.
Пожалуйста, любите детали!
Вы знали, что клавиатуру в iOS по-хорошему сворачивать нельзя, если она появляется по умолчанию, а в Android можно? И тогда остается пустое, незаполненное пространство.
Привет. Я изучаю графический дизайн с 13 лет. Опыт в веб-дизайне я по крупицам собирала из онлайн-курсов, а еще целыми днями играла с Photoshop и Affinity Designer. Вот, собственно, кратко о моих первых шагах в прокачке дизайна.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
В проектировании и разработке приложений я уже год. И уже успела поработать над мобильным приложением Universeaty. А два месяца назад начала работать над новым приложением Crypto Price Tracker, которое выложили 28 января в App Store.
В этой статье я поделюсь с вами этапами процесса проектирования, который использую каждый раз при работе над приложениями. Мне кажется, мой подход поможет новичкам, и тем, кто хочет прокачаться в дизайне.
Не секрет, что дизайн — это не только работа в графических редакторах или инструментах для проектирования, поэтому в этой статье не будет туториалов по софту. На эту тему уже есть сотни качественных обучающих роликов. Дизайн — это про понимание сути вашего продукта, его функциональности, а также про проектирование полезных продуктов для людей.
Вот мой чек-лист по дизайну приложений:
- Спроектируйте user-flow для каждого экрана;
- Нарисуйте эскизы экранов (wireframes);
- Выберите подходящие паттерны и цветовые палитры;
- Создайте прототипы и сделайте дизайн (mock-ups);
- Соберите интерактивный прототип приложения и попросите людей оценить его и оставить отзыв;
- Сделайте финальную ретушь прототипа, отполируйте все экраны, чтобы все они были готовы к разработке.
Первым делом нужно выяснить, какие функции нужны в приложении. Как только вы определились, создайте user-flow — блок-схему работы вашего приложения.
Обычно user-flow состоит из трех типов фигур:
- Прямоугольники — используются для представления экранов;
- Ромбы — используются для условий (например, нажатие кнопки входа в систему, свайп влево, увеличение);
- Стрелки — соединяют экраны и условия вместе.
User-flow очень полезны, потому что они дают логическое представление о том, как приложение должно работать и решать задачу.
Вот диаграмма user-flow, которую я нарисовала, когда начала работать над дизайном моего приложения.
User-flow для основного интерфейса.
После того, как вы завершили проектировать user-flow для всех сценариев, вы начинаете работать с эскизами всех экранов. Wireframes — это, по сути, быстрые наброски вашего приложение. Эскиз, схема того, где будут располагаться изображения, ярлыки, кнопки и прочее. Это грубый эскиз того, как ваше приложение должно работать.
Я использую печатные шаблоны из UI Stencils для рисования эскизов. Это экономит время и к тому же, там есть пространство для заметок.
Вот пример прототипа.
Прототип интерфейса мобильного приложения.
После создания Wireframes вы можете использовать приложение под названием Pop, сделать снимок всех своих рисунков и получить кликабельный прототип, соединив все экраны с помощью кнопок.
Это моя любимая часть. Это похоже на разглядывание витрины в магазине. Множество паттернов и цветовых палитр на выбор. Я выбираю те, которые мне нравятся, и экспериментирую с ними.
Кстати, лучшие платформы для поиска паттернов — это Mobile Patterns и Pttrns. Чтобы найти хорошие цветовые палитры, попробуйте зайти на Color Hunt.
Наконец мы добрались до софта. То, что получится в итоге — это как если бы мы вошли в свое будущее приложение и сделали серию скриншотов, пока шли до цели, экран за экраном. Все должно быть по-настоящему, приложение уже должно быть как живое.
Хорошо что есть софт, который позволяет делать так, как надо. Я использую Affinity Designer. А на iOS мой основной инструмент — Sketch.
Вот так выглядят мои первые дизайны.
Перенесение рисунка в пиксели!
Я больше экспериментировала с различными цветовыми палитрами.
Я поделилась первыми макетами с друзьями, и собрала с них отзывы. Кажется, многим понравилась схема с золотым градиентом и черным.
Подготовьтесь получить отзывы и поэкспериментировать с новыми предложениями! Вы почерпнете невероятно много идей, просто поговорив с ними, намного больше чем просто скролля Dribbble или Behance.
После интервью я переработала дизайн и удалила фоновую графику, потому что такое оказалось сложно запрограммировать, а еще они снижали читабельность. Вот что в итоге вышло:
Золотой градиент с черным на удивление хорошо выглядит!
Я довольна цветовой схемой, значками на панели вкладок и общей компоновкой. Следующим шагом я задизайнила остальные экраны, по тем же гайдлайнам. Это заняло время, но было безумно увлекательно!
Когда все мои экраны были готовы, я сделала прототип в Adobe XD и попросила нескольких друзей поэкспериментировать и оставить отзыв.
После последних штрихов получилось финальная версия дизайна.
Финальная версия дизайна
После того, как все экраны были завершены, я импортнула их в Xcode и начала разработку приложения.
Вот и все! Надеюсь, что эта статья поможет вам начать работу над дизайном приложения или поможет стать лучшим дизайнером. Кстати, если вам приглянулось мое приложение, вы можете скачать его здесь.
Напоследок добавлю мою любимую цитату.
«Дизайн — это не только, то как что-то выглядит и ощущается. Дизайн — это то, как оно работает»
(с) Стив Джобс
Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Небольшая коллекция полезных инструментов для дизайнера, разрабатывающего мобильные приложения от издания Mashable:
1. Proto
Платформа доя прототипирования мобильных приложений. Создание интерактивных прототипов и симуляция основных пользовательских действий с поддержкой основных браузеров. Есть редактор, панель создания прототипа и плеер для просмотра интерактивного прототипа в работе.
Готовый прототип можно тестировать на реальном мобильном стройстве или в браузере.
2. Moqups
Инструмент для создания мокапов на HTML5 с простым интерфейсом и набором форм, кнопок, полей, контейнеров и основных элементов интерфейса.
Содержит шаблоны для прототипирования приложений под iPhone и iPad.
3. UXPin
Инструмент быстрого создания прототипов на основе простой разметки с нуля. Есть возможность контроля итераций, редактирования и совместного комментирования проекта несколькими дизайнерами и разработчиками в режиме реального времени.
4. Balsamiq
Один из самых популярных инструментов прототипирования мобильных интерфейсов и приложений. В комплекте — десятки и сотни иконок и элементов интерфейса. Есть шаблоны под несколько основных смартфонов и мобильных операционных систем.
5. Justinmind
Платформа для дизайна и прототипирования мобильных приложений для iPhone, Android-смартфонов и iPad. Поддерживает работу с виджетами.
6. Fluid
Баузерное приложение на HTML5 для создания интерактивных прототипов мобильных приложений под Android, iOS и Windows 8. Поддерживает редактирование перетаскиванием, анимацию и библиотеку из 1700+ готовых элементов интерфейса. Есть возможность экспорта дизайнерских прототипов в различные типы документов и изображений.
7. Axure
Генератор интерактивных прототипов с возможность быстрого визуального редактирования и скачиваемыми библиотеками для виджетов с поддержкой фреймов для iOS, Retina-экранов, библиотеками для iPhone, iPad и Android.
8. Mockflow
Быстрый инструмент фрейминга приложений и библиотека элементов для прототипирования с поддержкой разработки дизайна приложений для iPhone, Android, iPad и Windows Phone.
9. Protoshare
Мощная платформа-конструктор с поддержкой 2D- и 3D-анимации готовых прототипов. Прототипы дизайнерских решений можно экспортировать и устанавливать на iPhone, iPad или Android-смартфон для дальнейшего тестирования.
10. Wireframe
Простой инструмент для фрейминга и прототипирования с поддержкой быстрого рисования за пару кликов. Предлагает два базовых поля для разработки шаблона или прототипа: вид в окне браузера и вид на экране смартфона. Поддерживает разработку концепции дизайна для горизонтальной и вертикальной ориентации экрана мобильных устройств (смартфоны и планшеты).
11. Wireframe Sketcher
Инструмент для дизайнеров, создающий быстрые скетчи для прототипирования приложений с поддержкой работы в качестве вспомогательного решения для Eclipse IDE. Есть плагины и наборы элементов интерфейса для основных мобильных ОС.
12. Omnigraffle
Инструмент создания интерфейсов и диаграмм для приложений под iPhone.
13. Pidoco
Веб-приложение для прототипирования с поддержкой кликабельных элементов интерфейса и модулем для тестирования прототипов. Есть симуляторы для iPhone и iPad.
14. Flair Builder
Плоские прототипы интерфейса на основе виджетов и дополнительной библиотеки элементов. НА выходе получаете полнофункциональный HTML-прототип будущего приложения с эффектами и внутренней структурой. Готовый прототип можно экспортировать для тестирования на реальных устройствах под iOS и Android.
15. iPhone Mockup
Инструмент создания простых мокапов для iPhone, годится для начинающего дизайнера, занимающегося прототипами.
16. HotGloo
Мощная библиотека элементов внутри веб-приложения для прототипирования, есть поддержка CSS3-эффектов. Поддерживает совместную работу над одним проектом и комментирование в реальном времени.
17. Invision
Прототипирование на основе как готовых, так и создаваемых дизайнером элементов. Есть возможность экспортирования набросков в различные форматы изображений.
18. Mokk.me
Быстрый конструктор прототипов с функциональностью drag-and-drop и редактированием виджетов. Результат можно тестировать на iOS- и Android-устройствах.
19. iPlotz
20. Pencil Project
Завершает подборку open-source инструмент разработки диаграмм и прототипов интерфейса с поддержкой встроенной библиотеки форм и элементов и возможностью создавать визуальные блок-схемы для дизайнеров мобильных приложений.
Читайте также: