Смартфоны всегда под рукой и позволяют оперативно решать любые вопросы: созвониться, найти нужный материал в интернете, отправить фото и так далее. В современном мире большая часть пользователей сайта или сервиса осуществляет первое знакомство с ним именно с мобильного устройства. Поэтому так важно уделить достаточно внимания созданию мобильной версии вашего продукта.
Разработка мобильного дизайна осуществляется по следующим принципам:
- Дизайн-проект для мобильных устройств разрабатывается с учётом характеристик мобильного устройства: размеров его экрана, а также встроенных опций и функционала.
- Дизайн-проект должен также создаваться с учётом того, что он будет использоваться людьми, т.е. быть удобным и функциональным, а также соответствующим устоявшимся привычкам пользователей.
Когда UX/UI-дизайнер работает над проектами для мобильных устройств
Создание приложений
Приложения — это программы, предназначенные для смартфонов, которые мы используем ежедневно: фоторедакторы, социальные сети, интернет-магазины и так далее.
ПЕРЕДЕЛКА! Как сделать 3D дизайн-проект квартиры без знаний программ?
Создание адаптивной версии сайта
Адаптивный дизайн подразумевает создание универсальной версии сайта, которая будет подстраиваться под разрешения различных устройств.
Создание мобильной версии
Мобильная версия — это отдельная версия сайта, которая специально разработана для людей, пользующихся смартфоном. Система определяет, с какого именно устройства была открыта веб-страница и запускает переадресацию на десктопную или мобильную версию сайта.
Разберем каждый случай подробнее.
Создание приложений
В дизайне мобильного приложения можно выделить 2 основных этапа: UX и UI дизайн. Работа над UX заключается в проектировании, создании удобного пользовательского опыта при взаимодействии с приложением. UI-дизайнер — работа над внешним видом приложения. На этом этапе также важно думать о пользователе, но уже с точки зрения шрифтов, цветовой палитры и форм элементов.
Этапы создания мобильного приложения.
Процесс разработки дизайна мобильного приложения с нуля
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Делюсь опытом в дизайне на офлайн- и онлайн-платформах с 2017 года: Институт программных систем, godesign.school, онлайн-платформа breezzly.ru и пишу микролекции о дизайне на Яндекс.Кью (226 ответов).
Сен 21, 2018 · 5 мин читать
Привет. Я изучаю графический дизайн с 13 лет. Опыт в веб-дизайне я по крупицам собирала из онлайн-курсов, а еще целыми днями играла с Photoshop и Affinity Designer. Вот, собственно, кратко о моих первых шагах в прокачке дизайна.
Как придумать дизайн интерьера с помощью бесплатных сервисов? Умный поиск, подбор цвета и мебели.
В проектировании и разработке приложений я уже год. И уже успела поработать над мобильным приложением Universeaty. А два месяца назад начала работать над новым приложением Crypto Price Tracker, которое выложили 28 января в App Store.
В этой статье я поделюсь с вами этапами процесса проектирования, который использую каждый раз при работе над приложениями. Мне кажется, мой подход поможет новичкам, и тем, кто хочет прокачаться в дизайне.
Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)?
Не секрет, что дизайн — это не только работа в графических редакторах или инструментах для проектирования, поэтому в этой статье не будет туториалов по софту. На эту тему уже есть сотни качественных обучающих роликов. Дизайн – это про понимание сути вашего продукта, его функциональности, а также про проектирование полезных продуктов для людей.
Вот мой чек-лист по дизайну приложений:
- Спроектируйте user-flow для каждого экрана;
- Нарисуйте эскизы экранов (wireframes);
- Выберите подходящие паттерны и цветовые палитры;
- Создайте прототипы и сделайте дизайн (mock-ups);
- Соберите интерактивный прототип приложения и попросите людей оценить его и оставить отзыв;
- Сделайте финальную ретушь прототипа, отполируйте все экраны, чтобы все они были готовы к разработке.
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 и попросила нескольких друзей поэкспериментировать и оставить отзыв.
После последних штрихов получилось финальная версия дизайна.
Финальная версия дизайна
После того, как все экраны были завершены, я импортнула их в Xcode и начала разработку приложения.
Вот и все! Надеюсь, что эта статья поможет вам начать работу над дизайном приложения или поможет стать лучшим дизайнером. Кстати, если вам приглянулось мое приложение, вы можете скачать его здесь.
Напоследок добавлю мою любимую цитату.
«Дизайн — это не только, то как что-то выглядит и ощущается. Дизайн — это то, как оно работает»
(с) Стив Джобс
Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Источник: ux-journal.ru
10 универсальных правил для дизайна мобильных приложений
Благодаря мобильным приложениям офис, развлекательный центр, библиотека и супермаркет помещаются в кармане. Как выполнить дизайн приложения так, чтобы он радовал пользователя каждый день, рассказала преподаватель GeekBrains Алевтина Шаталова.
Следуйте гайдлайнам
Жизнь дизайнера мобильных приложений значительно проще, чем у коллег-«графиков». Все благодаря Apple и Google, которые выпустили набор рекомендаций Human Interface Guidelines и Material Design. Изучаем, руководствуемся!
Выражайте эмоции
Дизайн – это визуальная коммуникация, где диалог поддерживают графические объекты. Есть элементы, которые помогут передать настроение:
- Текст – эпитеты, метафоры, ирония работают на выразительность.
- Шрифт – у каждой гарнитуры свой характер. Используйте его, чтобы создать атмосферу.
- Композиция – противостояние, динамику, статику, гармонию и целую палитру ощущений можно передать, по-разному сочетая объекты.
- Цвет – практика показывает, что именно цвет – самый быстрый способ донести эмоцию, а цветовая кодировка запоминается пользователям лучше всего;
- Фото – правильно подобранные фотографии станут ключом к целевой аудитории, заинтересуют пользователей и зададут эмоциональный тон.
Помогайте в решении задач
В отличие от искусства, дизайн существует в контексте задачи. У него две цели – одна ставится бизнесом, а другая – пользователем. Человек открывает приложение, чтобы решить свою проблему или найти ответ на вопрос. Помогите ему сделать это быстро и легко.
Используйте разумную навигацию
Мир ускоряется, и гаджетами мы пользуемся на ходу. Нужна простая и интуитивно понятная навигация. Для этого все методы хороши: можно использовать двойное описание (иконка + текст) в навигации, А/Б-тесты, пользовательский опыт платформ iOS и Android.
Рассказывайте о преимуществах
Пользователь может заранее не знать о том, насколько ваше приложение способно облегчить ему жизнь. Об этом стоит рассказать с помощью welcome-скринов.
Помните об особенностях мобильных платформ
Палец – не курсор, поэтому отказываемся от десктопных вариантов мелких объектов. Можно заменить их достойной альтернативой – прокруткой с помощью жеста swype.
Презентуйте работу
Правильная подача – половина дела. И дизайнер должен использовать в презентации лучшие средства визуального языка.
Анимируйте правильно
Целесообразная анимация для каждого объекта, как и грамотная постановка хореографии всех графических элементов в приложении – «знак качества» в дизайне.
Будьте внимательны к деталям
Минимализм, свойственный современному дизайну, коварен: он обнажает недостаток опыта у исполнителя. Поэтому каждая деталь требует особого внимания. Чтобы найти случайные, не органичные решения, посмотрите на каждый объект и задайте себе вопрос: «Почему он именно такой?» Если не найдется ответа по поводу формы, цвета, фактуры или положения – это случайный элемент, от которого нужно отказаться или лучше продумать его внешний вид.
Знайте и применяйте правила
Это история о том, что в жизни школьная модель не работает – за неправильные решения двоек не ставят. Поэтому приложения с плохим дизайном зачастую загружаются на сервер и начинают свою нелегкую, «косую» жизнь. Не хороните знания – применяйте их на практике!
Источник: gb.ru