Программы для дизайна приложений

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

Небольшая коллекция полезных инструментов для дизайнера, разрабатывающего мобильные приложения от издания 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

Позволяет создавать кликабельные мокапы с возможностью навигации по элементам и структуре прототипа приложения. Есть шаблоны для iPhone/iPad и устройств на основе Android. Готовый прототип можно экспортировать в IPML, JPG, PNG, PDF или HTML, либо отправить ссылкой на веб-страницу другим участникам проекта для обсуждения и совместного тестирования.

20. Pencil Project

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

Проектирование экранов приложения: от планирования до дизайн-макета

Примечание переводчика: сегодня мы публикуем перевод статьи шестнадцатилетней индийской разработчицы Харшиты Арора. Харшита начала изучать графический дизайн с 13 лет. Сейчас она занимается созданием мобильных приложений. В статье Арора делится нюансами разработки дизайна приложений с нуля на примере создания собственного криптовалютного аппа — Crypto Price Tracker.

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

Skillbox рекомендует: Практический двухмесячный курс «UX-дизайн».
Напоминаем: для всех читателей Хабра — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».

В целом работа над дизайном приложения разделяется на следующие шаги:

• создание диаграммы потока задач (user-flow) для каждого экрана;
• создание вайрфреймов;
• выбор цветовой палитры и стиля;
• создание макетов;
• создание интерактивного прототипа приложения, который могут тестировать пользователи;
• наведение лоска на конечный вариант дизайна.

Диаграммы потока задач

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

В ходе работы обычно используется 3 элемента:

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

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

Вайрфреймы

Как только вы закончили с user-flow, пора приниматься за вайрфреймы. Они показывают (с определенным приближением), что будет представлять собой приложение и как оно будет выглядеть. Это черновой эскиз с указанием основных элементов для каждого экрана.

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

Вот пример вайрфрейма.

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

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

Это мой любимый этап. Вы можете выбирать все, что угодно, после чего начинаем эксперименты над отдельными цветовыми решениями. Для меня лучшие репозитории примеров дизайна и палитр — Mobile Patterns и Pttrns, а также Color Hunt.

Макеты

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

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

Вот пример некоторых ранних макетов моего собственного приложения.

Вот работа с цветовой палитрой.

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

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

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

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

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

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

Качпер Рудуха
(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, отправляемых вашим приложением, не снижало общую производительность сервера.

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

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

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

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

Дизайн-хакКарманный дизайнер: 10 мобильных приложений для ремонта

Чтобы подобрать цвет, узнать размеры комнаты или купить диван

Для дизайнера интерьеров стало привычным делом таскать с собой план квартиры, рулетку и незаменимую палитру RAL. Но сейчас делать это необязательно: благодаря разнообразным сервисам и приложениям можно создать чертеж помещения с 3D-моделью, подобрать цвета для будущего интерьера или выбрать новый диван или картину с помощью технологий дополненной реальности (AR). The Village попросил дизайнеров интерьера рассказать о своих любимых приложениях для смартфонов, которые могут использовать и те, кто просто интересуется дизайном или делает ремонт.

Алена Горская

Faradise

подбирать предметы с помощью технологии AR

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

«Колориметр AR»

определять цвета в палитре RGB или Pantone

Приложение будет одинаково полезно как веб-дизайнерам и 3D-визуализаторам, так и тем, кто просто делает ремонт. Благодаря ему можно определить необходимый цвет по изображению или реальному объекту, получить его код в системах RGB, CMYK или HEX, a также подобрать наиболее близкие оттенки по системе кодировки Pantone, которая используется при маркировке лакокрасочных материалов.

CamToPlan

iOS — 379 рублей, Android — 299 рублей

cчитать площадь комнаты и создавать обмерный план

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

Toolbox

делать замеры с помощью рулетки, транспортира или отвеса

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

Planner 5D

условно бесплатно (большинство предметов интерьера разблокируются только при разовой оплате или ежемесячной подписке)

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

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

Анастасия Холопцева

SketchUp Viewer

делать эскизы и разрабатывать дизайн-проекты

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

Adobe Capture CC

подбирать цвета и создавать палитры для интерьера

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

Ольга Воробьева

Houzz

создавать альбомы идей для интерьера и списки покупок

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

HutQA

считать, сколько материалов понадобится для ремонта

Очень удобная и простая в использовании программа-калькулятор для ремонта. С ее помощью легко рассчитать необходимое количество отделочных материалов.

Westwing

создавать подборки вещей для дома и делать покупки

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