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

Я начала изучать графический дизайн, когда мне было 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 и начала разработку приложения.

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

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

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

ux.pub

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

Благодаря развитию мобильных приложений – от Uber до Vine – мы постепенно начинаем понимать, как тренды в дизайне программ обретали форму в течение половины десятилетия. Многие факторы влияют на то, как в определенный отрезок времени выглядят мобильные приложения: от таких социальных трендов, как «экономика взаимопомощи», до изменений в технологиях – в этом году, например, мы видим огромные экраны телефонов в сочетании с крошечными носимыми аксессуарами.

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

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

1. Большие экраны телефонов

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

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

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

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

2. Свайп – новое нажатие

Когда появились первые мобильные приложения, адаптированные под тачскрины, дизайнерам и разработчикам пришлось столкнуться с реальностью программирования для объекта, значительно отличающегося от предыдущих видов. Зумирование в первом iPhone образца 2007 года было для нас необычной новинкой, но дизайн приложения, в котором пользователю приходится зумировать страницу, чтобы иметь возможность прочитать контент, нельзя назвать удачным. Вместе с тем, кому из нас не довелось столкнуться с «противной» крошечной кнопкой, которая слишком мала, чтобы без проблем нажать ее (если только вы не обладатель редкой комбинации миниатюрных рук и отточенной моторики пианиста).

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

Конечно, наиболее очевидным примером применения свайпов в приложениях является Tinder, который упростил невероятно сложную природу знакомств до двух простых действий: пролистывания вправо и влево. За меньшее время, которое бы у вас занял просмотр какого-нибудь трейлера, вы можете отправить сигнал целой армии потенциальных кавалеров (или дам сердца) – одним только пролистывающим движением большого пальца на экране мобильного устройства. Кажется, что идеи Tinder его не подводят, о чем свидетельствуют более миллиарда пользователей приложения.

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

Крохотные дисплеи умных часов являются противоположностью огромных экранов фаблетов. Аналитическая фирма International Data Corporation предсказывает, что вендоры за этот год обеспечат поставки 45,7 млн носимых устройств, в том числе и носимых на запястье гаджетов (они составляют наибольший процент от общего числа, их количество равно 40 млн), а также предметов одежды и очков.

Те устройства, которые изначально разрабатывались как гаджеты для фитнеса, теперь захватывают все большие рыночные территории с релизами Apple Watch и Android Wear. Носимые устройства – это больше не разрекламированные шагомеры с механизмами, следящими за пульсом и сном. Они и вправду стали надежными умными гаджетами, способными рассказать пользователю, как долго продлится поездка на работу, показать прогноз погоды на завтра или напомнить закипятить чайник к приходу тетушки. Как это влияет на работу дизайнеров мобильных приложений?

Мы все еще находимся на ранних стадиях развития этого растущего тренда, хотя Apple и Android уже предлагают ассортимент решений для носимых устройств. Как создатели похожих на часы устройств, оба бренда подчеркивают важность того, чтобы информация на них легко воспринималась с одного только беглого взгляда. В отличие от программ для телефонов и планшетов, на которые по ожиданиям разработчиков пользователи смотрят продолжительное время, приложения для носимых устройств должны иметь такой дизайн, который обеспечивал бы быстрое восприятие пользователем достаточного количества контента. Информация должна усваиваться с одного лишь взгляда, даже краешком глаза. А это означает, что шрифт, цветовой контраст и сопутствующие факторы (где находится пользователь? какие данные ему необходимы прямо сейчас?) особенно важны при дизайне и разработке приложений для носимых устройств.

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

4. Многослойные макеты

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

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

Принципы Google Material Design

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

5. Больше движения

Ваш смартфон обладает большей производительностью, чем оборудование, благодаря которому НАСА удалось отправить первого человека на луну, равно как и суперкомпьютер Deep Blue, который в 1997 году обыграл Гарри Каспарова в шахматы. И мобильные устройства становятся все умнее и умнее. И не только мобильные устройства становятся более мощными, но с приходом трех типов 4G (каждый пытается пересилить другого в мощности и скорости) на замену 3G, у вас появляется больше свободы для того, чтобы анимировать дизайн вашего мобильного приложения.

TimeLine Page, автор Сергей Валюх

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

6. Простые мягкие цветовые гаммы

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

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

7. На сцену выходит текстовое оформление

Кажется, что еще совсем недавно шрифты в мобильных приложениях были представлены только безопасными веб-шрифтами, которые можно было прочесть на экранах с малым разрешением. В течение последних двух лет в iOS и Android происходила оптимизация операционных систем для более динамичных, масштабируемых и читаемых шрифтов. Еще одним побочным эффектом больших экранов и технологических инноваций (спасибо тебе, TypeKit) является использование шрифтов для добавления красоты и выразительности дизайну ваших мобильных приложений. Независимо от того, сопутствует вашему тексту огромное модное изображение на заднем плане или же он окружен негативным пространством, мы можете использовать шрифт для донесения вашей идеи мощным минималистичным способом.

Приложение Wild Canada для iOS, автор Маршалл Лоренцо (Marshall Lorenzo).

8. Встроенное размытие

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

Пользовательский интерфейс (UI) «Погода», автор Натан Смит (Nathan Smith).

В зависимости от выбранного пользователями фонового изображения для мобильных устройств, а также от количества иконок и виджетов отсутствие прозрачности может сделать ваше приложение более трудным для восприятия. Использование эффекта размытия Gaussian blur в дизайне программы сделает ее более понятной и приятной для глаз, сохраняя при этом «звучание» пользовательского интерфейса.

9. Инновации в удобном дизайне мобильных приложений

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

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

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

10. Более мудрое создание прототипов

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

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

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

habr.com

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

1. Pixate

Pixate — платформа для прототипирования приложений, которая обладает большим набором функций. Вы можете создавать слои, добавлять интерактив и анимации и, что самое главное, — посмотреть, как будет выглядеть ваш дизайн в жизни. С помощью плеера Pixate вы сможете полистать готовый прототип и покликать по нему на смартфоне (поддерживаются платформы Android и iOS). Ещё один плюс программы — научиться работать в ней довольно просто. В итоге вы сможете создать дизайн приложения, не написав ни строчки кода.

Pixate →

2. Marvel

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

Marvel →

3. iPhone Mockup

Поможет быстро и просто создать иллюстрацию или скетч мокапа iPhone. Всё, что нужно сделать, — методом drag-and-drop перетащить необходимые элементы интерфейса. Сервис не годится для серьёзной разработки, но если вы хотите быстро зафиксировать свою идею или поделиться с кем-то набросками, iPhone Mockup для этого вполне подойдёт.

iPhone Mockup →

4. Pencil Project

Pencil Project — бесплатный инструмент для прототипирования с открытым исходным кодом. Позволяет создавать макеты веб-страниц и мобильных приложений. Есть встроенные коллекции с популярными формами, блок-схемами и элементами интерфейсов.

Pencil Project →

5. Form

Приложение для создания прототипов и их просмотра на iPhone или iPad через Wi-Fi или USB.

Form →

6. Use Your Iinterface

Огромная коллекция анимированных интерфейсов. Заходим, вдохновляемся интересными решениями и применяем идеи на практике.

Use Your Iinterface →

7. UX Myths

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

UX Myths →

8. Mobile Patterns

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

Mobile Patterns →

9. Good UI

Ещё один полезный ресурс с теорией дизайна интерфейсов (одно «но» — все материалы на английском). Здесь собрано 75 идей по оформлению веб-страниц. Все рекомендации проверены A/B-тестированием.

Good UI →

lifehacker.ru

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

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

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

Готовый прототип можно тестировать на реальном мобильном стройстве или в браузере.

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

Содержит шаблоны для прототипирования приложений под iPhone и iPad.

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

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

Платформа для дизайна и прототипирования мобильных приложений для iPhone, Android-смартфонов и iPad. Поддерживает работу с виджетами.

Баузерное приложение на HTML5 для создания интерактивных прототипов мобильных приложений под Android, iOS и Windows 8. Поддерживает редактирование перетаскиванием, анимацию и библиотеку из 1700+ готовых элементов интерфейса. Есть возможность экспорта дизайнерских прототипов в различные типы документов и изображений.

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

Быстрый инструмент фрейминга приложений и библиотека элементов для прототипирования с поддержкой разработки дизайна приложений для iPhone, Android, iPad и Windows Phone.

Мощная платформа-конструктор с поддержкой 2D- и 3D-анимации готовых прототипов. Прототипы дизайнерских решений можно экспортировать и устанавливать на iPhone, iPad или Android-смартфон для дальнейшего тестирования.

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

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

Инструмент  создания интерфейсов и диаграмм для приложений под iPhone.

Веб-приложение для прототипирования с поддержкой кликабельных элементов интерфейса и модулем для тестирования прототипов. Есть симуляторы для iPhone и iPad.

Плоские прототипы интерфейса на основе виджетов и дополнительной библиотеки элементов. НА выходе получаете полнофункциональный HTML-прототип будущего приложения с эффектами и внутренней структурой. Готовый прототип можно экспортировать для тестирования на реальных устройствах под iOS и Android.

Инструмент создания простых мокапов для iPhone, годится для начинающего дизайнера, занимающегося прототипами.

Мощная библиотека элементов внутри веб-приложения для прототипирования, есть поддержка CSS3-эффектов. Поддерживает совместную работу над одним проектом и комментирование в реальном времени.

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

Быстрый конструктор прототипов с функциональностью drag-and-drop и редактированием виджетов. Результат можно тестировать на iOS- и Android-устройствах.

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

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

spark.ru

Конструкторы приложений — AppTractor

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

	AppGyver [Composer] Метки: Конструктор приложений AppGyver Composer – drag-and-drop HTML5 конструктор, который может…
	Application Craft Метки: Конструктор приложений, Обертка Конструктор и обертка для HTML5-приложений с браузерным IDE, десятками виджетов, встроенным отладчиком и возможностью писать серверный код.
	AppMachine Метки: Конструктор приложений AppMachine – конструктор, позволяющий создавать «родные» приложения для iOS, Android, Windows Phone вообще без знания программирования.
	AppMakr Метки: Конструктор приложений AppMakr – платформа создания приложений на основе HTML5. Основной функционал предлагается бесплатно, за дополнительные функции и кастомизацию уже надо…
	Appropio Метки: Конструктор приложений Appropio – конструктор нативных мобильных приложений для магазинов и бизнеса. Это конструктор мобильных…
	AppsBuilder Метки: Конструктор приложений AppsBuilder – конструктор, в котором вы можете при помощи drag-and-drop инструментов просто и быстро создать свое приложение и опубликовать его…
	AppSpotr Метки: Конструктор приложений AppSpotr – новый бесплатный конструктор мобильных приложений для iPhone, iPad или…
	BusinessApps Метки: Конструктор приложений Конструктор приложений, созданный для небольших компаний. Среди возможностей — геолокация, получение и отправка сообщений, корзина для товаров, звонок…
	Conduit [Mobile] Метки: Конструктор приложений Конструктор приложений, традиционно собирающий приложения из компонентов. Поддерживает несколько десятков предопределенных функций, вроде заказа…
	Dating Framework Метки: Конструктор приложений Dating Framework – готовое решение для запуска дейтинг-платформы, вроде Tinder или Badoo. Это open source платформа (Laravel,…
	ENTiTi Creator Метки: Конструктор приложений ENTiTi Creator – первая платформа, позволяющая создавать интерактивный контент для виртуальной и дополненной реальности без навыков…
	GameSalad Метки: Конструктор приложений GameSalad — специальное приложение, разработанное компанией Gendai Games для создания простых игр для iPhone и iPod Touch. Приложение основано на…
	iBuildApp Метки: Конструктор приложений iBuildApp — это конструктор мобильных приложений. Здесь вообще без навыков программирования можно быстро создать себе мобильное приложение, которые…
	Livecode Метки: Конструктор приложений, Кроссплатформенная разработка LiveCode is the only “live” app creation tool, meaning you can watch as your app comes to life as you work on it. That makes it easy to…
	Microsoft [App Studio] Метки: Конструктор приложений App Studio – простой конструктор приложений для Windows и Windows Phone.
	Mobileroadie Метки: Конструктор приложений Один из старейших на проектов рынке – работает с 2009 году. В основном, MobileRoadie рассчитан на шоу-бизнес – актёров, музыкантов, режиссёров,…
	My Apps Метки: Конструктор приложений My-Apps.com – это конструктор мобильных приложений, позволяющий просто, быстро и доступно создать мобильное приложение для всех наиболее популярных…
	Net2Share Метки: Конструктор приложений Net2Share.com – полностью бесплатный конструктор Android приложений, который позволяет не только создавать приложения, но и зарабатывать на них…
	New Digital Times Метки: Конструктор приложений New Digital Times – это комплексное решение, которое позволяет создавать и оптимизировать интерактивный профессиональный контент для планшетных…
	QnA Maker Метки: бот, Конструктор приложений QnA Maker – новый сервис от Microsoft, который превращает ваш список вопросов и ответов (FAQ) или любой другой структурированный материал в…
	Shoutem Метки: Конструктор приложений Shoutem – конструктор нативных приложений на React Native с массой тем, типов экранов, функций. Поддерживает работу с WordPress,…
	TheAppBuilder Метки: Конструктор приложений Крупнейший в мире конструктор приложений, «сделавший» уже более 300,000 приложений. Делает приложения для мероприятий, мобильные брошюры, работников…
	ViziApps Метки: Конструктор приложений ViziApps – конструктор приложений для компаний. Одна из главных особенностей – поддержка множества разных источников данных (включая…

apptractor.ru

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

Несмотря на огромное количество всевозможных инструментов для дизайна мобильных приложений далеко не каждое обладает всем необходимым функционалом. Кроме того, необходимо понимать, что некоторые инструменты рассчитаны для создания оформления мобильных приложений на платформе Android, а другие для iOS. Начиная создавать дизайн приложения для мобильного устройства необходимо заранее обзавестись всеми необходимыми инструментами.
Для максимально эффективной разработки оформления приложений для смартфонов и планшетов необходимо пользоваться только самым проверенным софтом. По этой причине мы подготовили список самых полезных инструментов для дизайнера мобильных приложений.
1. Генератор интерактивных прототипов Axure:

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

2. Mockflow для фрейминга:

• Включает огромную библиотеку элементов;
• Идеально подходит для платформ Android, iOS и Windows Phone;
• Имеет большое количество элементов для прототипирования.

3. Balsamiq для прототипирования:

• Включает огромное количество графических элементов для создания дизайна приложения для мобильных устройств;
• Обладает множеством стандартизированных шаблонов для самых популярных моделей мобильных устройств;
• Все графические элементы интерфейса как нельзя лучше подойдут для создания дизайна любой сложности.

4. Платформа Proto для создания прототипов:

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

5. Flair Builder – инструмент для создания интерфейса мобильных приложений:

• Включает массу функциональных возможностей для реализации дизайнерских решений;
• При помощи данного инструмента можно создать HTML-прототип практически каждого дизайна;
• Позволяет тестировать прототипы на смартфонах в режиме реального времени.

6. Библиотека HotGloo:

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

7. Редактор Invision для внесения быстрых изменений в дизайн:

• Имеет большое количество шаблонов;
• Поддерживает множество форматов;
• Включает возможность экспорта готовых прототипов.

8. iPlotz для создания мокапов:

• Позволяет внедрять в дизайн приложений для смартфонов и планшетов как существующие, так и вновь созданные шаблоны;
• Подходит для реализации дизайнерских решений на платформе Android;
• Поддерживает множество форматов.

9. Инструмент Wireframe Sketcher:

• Позволяет быстро создавать специальные скетчи;
• Данный дизайнерский пакет позволяет разрабатывать оформления для мобильных устройств на разных платформах;
• Включает в себя массу полезных плагинов.

10. Веб-приложение Pidoco:

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

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

Share this:

lampalampa.net

20 приложений для смартфонов с красивым дизайном

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

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

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

И конечно же выражаю благодарность www.webdesignerdepot.com

Приложение Dribbble для Android

Это приложение популярного сервиса Dribbble. Оно не только по современному красивое но и имеет логическую структуру, которая позволит пользователю с лёгкостью просматривать работы дизайнеров.

Пражский зоопарк

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

UI элементы для приложения — Natalie

Говорят, что это самая сексуальная подборка UI элементов для приложения, которые имеют плавные и округлые формы. Следовательно отсюда и идёт название — Natalie

Будильник

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

Заметки

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

Дизайн Withjack

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

Panvel Ciclos

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

Coffely

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

Приложение Whatsapp

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

Охота на место

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

Плоский дизайн приложения Facebook

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

Bikester

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

Приложение Teamride

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

Web Fest

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

Осознанные сны

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

Ре-дизайн National Geographic

Чудесный дизайн для приложения популярного ресурса National Geographic. Оно точно предоставит Вам незабываемый тур по миру.

Список задач — Taasky

Полезное приложение списка Ваших задач, но по видимому оно на много стильнее и красивее остальных подобных приложений (никого не хочу обидеть). Интерфейс очень минималистичен и конечно же прост в использовании.

Cmplain

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

Мне нужны деньги

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

Погода

Конечно же приложений погоды множество как платных таки бесплатных. Но это совершенно новый уровень с чёткой структурой и не правильной геометрией.

Заключение

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

beloweb.ru