Создаем дизайн для мобильной игры – Общие принципы в создании мобильных приложений для начинающего UX/UI-дизайнера / Блог компании e-Legion / Хабр

Моделирование персонажей и создание графического дизайна для мобильной игры

Недавно увидела свет игрушка в стиле Tower Defense под названием Bug Invasion для Windows Phone. В статье разработчики делятся ключевыми моментами моделирования жучков и разработки дизайна игры.

Для создания игры были использованы два инструмента: Adobe Photoshop CS5 и Autodesk 3D`s Max 2011.

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

Скетч меню выбора башни

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

После создания фона наступил черед элементов игрового экрана. Таких как зона поражения массового оружия, а также кнопки, числа, прицел, иконки и т.д.

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

Потом рисовались элементы GUI: кнопки, менюшки, иконки скилов, табы и фончики:

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

Пример не попадания shapes в пиксель:

А тут мы исправились и попали:

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

Далее делались персонажи игры в Autodesk 3D`s Max. Мы всегда помнили, что персонажи должны гармонично сочетается с фоном игры. Процесс создания персонажа делится на такие этапы: скетчирование, моделирование, текстурирование и анимация, ну и порендерить еще надо.

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

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

Для создания персонажей использовался Autodesk 3D`s Max 2011. Такой способ показался нам оптимальным и более быстрым, нежели рисовать каждый кадр для башен и жуков. Для того, чтобы анимация жука была плавной использовалось 48 кадров. 12 кадров на умирание букашки, 18 для движения, 18 для пожирания посевов. Все кадры собирались посредством Photoshop в один спрайт. Для башен количество кадров больше — 84. 21 кадр на поворот без выстрела, 21 — на начало выстрела башни, 21 — для отображения выстрела во всей красе, 21 — для затухания огня.

Также для каждой башни нужно было создавать частицу, которая использовалась при выстреле. Для рендеринга использовал Mental Ray Render.

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

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

Также важно настроить один раз сцену в 3ds Max с одинаковым освещением (для того, чтобы тени и освещенность наших игровых объектов были одинаковыми), установить камеру в одном положении (чтобы вид на жука или башню был всегда с одной и той же точки)

и что не мало важно — настроить откидывание тени на плоскость, невидимую для рендера, используя материал matte/shadow/reflection.

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

Что получилось в итоге — смотрим в видео:

Получилось хорошо или плохо — судить вам!

Спасибо за внимание!

habr.com

Тренды мобильного UI-дизайна в 2018

Существуют невидимые чернила, — прошептала она и, трижды коснувшись палочкой дневника, произнесла: — Апарекиум!

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

1. Много разных диагоналей, что делать

Если вы веб-дизайнер, но никогда не работали с мобильными приложениями, то скорее всего у вас возникнет вопрос про большое количество экранов мобильных устройств. А еще у них разные пропорции и на разных платформах разные стандарты экранов. О ужас! – скажете вы. Но все достаточно просто. Существуют основные разрешения девайсов под которые нужно рисовать дизайн. На iOS это 375х667, а на Android 360х640. Это основные пропорции, которые используются практически на всех девайсах. В большинстве случаев остальные смартфоны увеличиваются в высоту, а это не доставляет особых проблем, просто у вас будет видно чуть больше контента. В некоторых случаях стоит учитывать смартфоны с меньшим разрешением или другими пропорциями, например iPhone 4. Для него может потребоваться отрисовать отдельные версии экранов, если контент не помещается на экран.

2. Негативные кейсы

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

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

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

3. Активная клавиатура

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

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

4. Карта экранов

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

Карта навигации составляется как на все приложение, так и на отдельные блоки, которые потом будут встраиваться в приложение. Карту можно составить и на этапе проектирования/прототипирования приложения, когда уже будет понятна основная логика работы приложения. Но по своему опыту для выстраивания логики приложения и составляется карта переходов. Она позволяет выявить недостающие экраны, о которых вы могли забыть.

Карту переходов можно составлять в таких программах: Realtimeboard, Axure, Figma, Sketch. Но для меня самым удобным вариантом оказался Overflow.

5. Текст в контейнере

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

6. Нет указания типа навигации

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

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

7. Удобный экспорт

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

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

8. Не всегда то, что нарисовано легко реализуемо

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

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

9. 50 оттенков серого

Если у вас большой макет сайта или приложения и цвет используется 2-3 раза на разных элементах, то уверенно создавайте стиль. Стили ускорят не только вашу работу и не дадут применить к элементу похожий, но не идентичный цвет. Но и разработчику будет потом намного проще, т.к. стили можно выгрузить в Zeplin. Главное не забывать о том, что при индивидуальном изменении элемента с привязанным стилем есть возможность того, что вы случайно можете изменить стиль. Лучше заранее отвязать от стиля элемент и редактировать его под свои нужды.

10. Кратности в макетах

Говорить на тему сеток можно бесконечно. Но в данном контексте хочется рассказать о личном опыте построения интерфейса. Недавно читал пост в facebook и там разгорелась очень интересная дискуссия. Кто-то настаивал на том, что все интерфейсы должны быть построены по определенному формату, т.е. никакой индивидуальности. И тут же спрашивают о том, что делать если экран имеет нечетные параметры? Например iPhone 8 имеет разрешение 375х667, что же делать в таком случае? Если отталкиваться от построения на четных количествах столбцов, то здесь едет вся логика. Google же предлагает использовать сетку основанную на 8 единицах.

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

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

11. Нестандартный кернинг

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

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

Есть очень интересная игра, в которой вы можете потренироваться: https://type.method.ac

12. Своевременная актуализация

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

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

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

Из этого всего следует то, что нужно стараться помнить о том, что дизайн должен быть отрисован под несколько платформ. Завести такое правило в компании или у себя в голове. Даже если менеджер не поставил задачу, а в компании действует правило: “если нет задачи в таск трекере, то и нет ее результата”, то можно перенести дизайн на другие платформы и спокойно ждать пока разработчику он понадобится. И еще вдобавок можно тонко намекнуть, кто не поставил задачу 🙂

13. Тени картинками

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

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

Хотелось донести до вас, что упрощая работу себе, вы упрощаете ее и другим. Старайтесь делать все максимально четко и понятно. Объясняйте магглам простые дизайнерские истины, ведь они не волшебники.

Вкусного вам дизайна!

apptractor.ru

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

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

Моделирование персонажей и создание графического дизайна для мобильной игры

Недавно увидела свет игрушка в стиле Tower Defense под названием Bug Invasion для Windows Phone. В статье разработчики делятся ключевыми моментами моделирования жучков и разработки дизайна игры.

Для создания игры были использованы два инструмента: Adobe Photoshop CS5 и Autodesk 3D`s Max 2011.

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

Скетч меню выбора башни

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

После создания фона наступил черед элементов игрового экрана. Таких как зона поражения массового оружия, а также кнопки, числа, прицел, иконки и т.д.

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

Потом рисовались элементы GUI: кнопки, менюшки, иконки скилов, табы и фончики:

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

Пример не попадания shapes в пиксель:

А тут мы исправились и попали:

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

Далее делались персонажи игры в Autodesk 3D`s Max. Мы всегда помнили, что персонажи должны гармонично сочетается с фоном игры. Процесс создания персонажа делится на такие этапы: скетчирование, моделирование, текстурирование и анимация, ну и порендерить еще надо.

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

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

Для создания персонажей использовался Autodesk 3D`s Max 2011. Такой способ показался нам оптимальным и более быстрым, нежели рисовать каждый кадр для башен и жуков. Для того, чтобы анимация жука была плавной использовалось 48 кадров. 12 кадров на умирание букашки, 18 для движения, 18 для пожирания посевов. Все кадры собирались посредством Photoshop в один спрайт. Для башен количество кадров больше — 84. 21 кадр на поворот без выстрела, 21 — на начало выстрела башни, 21 — для отображения выстрела во всей красе, 21 — для затухания огня.

Также для каждой башни нужно было создавать частицу, которая использовалась при выстреле. Для рендеринга использовал Mental Ray Render.

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

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

Также важно настроить один раз сцену в 3ds Max с одинаковым освещением (для того, чтобы тени и освещенность наших игровых объектов были одинаковыми), установить камеру в одном положении (чтобы вид на жука или башню был всегда с одной и той же точки)

и что не мало важно — настроить откидывание тени на плоскость, невидимую для рендера, используя материал matte/shadow/reflection.

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

Что получилось в итоге — смотрим в видео:

Получилось хорошо или плохо — судить вам!

Спасибо за внимание!

Автор: sashaeve

www.pvsm.ru

Создание мобильной игры

Создание мобильной игры в Kinesko

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

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

Разработка мобильной игры в Kinesko это:

Опытные разработчики

Разумная цена

Ориентация на ЦА

 

Цена мобильной игры зависит от:

• уровня нынешней проработки;
• объемов работы;
• срока исполнения заказ
• масштабов продвижения проекта.

Этапы создания мобильной игры на заказ

1. Подготовительный этап.

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

2. Этап реализации.

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

3. Запуск.

Подготовку к запуску игры мы начнем еще до ее начала. Реклама в интернете, видеоролики и обзоры – это далеко не пол

kinesko.com

Создаем быстрый прототип мобильного приложения / Хабр

На хабре уже присутствует некоторое количество статей, посвященных процессу прототипирования в разработке программного обеспечения. Есть достаточно фундаментальные статьи с обзорами стандартов и расчетами, есть статьи про прототипирование устройств, есть цикл из двух статей про процесс выбора инструмента для прототипирования. К сожалению, процесс создания прототипов мобильных приложений освещен очень скудно – в виде единственной статьи в 2010 году, и пара слов в статье Разработка мобильных приложений: с чего начать.

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

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

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

В ритме сегодняшней жизни при достаточно высокой цене человеко-часов, очень важно работать быстро и, желательно, без потери качества. Для этого было введено понятие “быстрое прототипирование”. Что поможет нам перейти от простого прототипа к быстрому? Это развивающиеся технологии, наличие огромного количества сервисов и, конечно, собственные мозги.

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

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

Можно рисовать на доске, стене, бумаге. Однако этот способ имеет и ряд недостатков:

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

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

Как ускорить и упростить «бумажное» прототипирование

Скетчпад (SketchPad, Скетчбук, sketchbook)

это блокнот разлинованый макетами телефонов разных платформ. Имеет точечную сетку на «экране».
Вы можете распечатать аналог скетчпада самостоятельно по шаблонам: habrahabr.ru/post/152075

UI – блокнот

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

Лекала.

Удобная, должно быть, вещь, но в России в продаже их найти не удалось.
www.uistencils.com/collections/frontpage/products/iphone-stencil-kit

Штампы

В российских магазинах тоже отсутствуют, но можно заказать у компании по изготовлению печатей, или сделать самому из куска резины, если руки достаточно прямые. К сожалению, чернила – вещь довольно маркая, поэтому лучше все-таки не пытаться экономить и купить или распечатать скетчпад.
www.cultofmac.com/224355/iphone-stamp-for-ui-sketching

На этом с обзором «бумажных» инструментов закончим, и перейдем к самому интересному:

Программные решения для создания быстрых прототипов

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

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

RATCHET
maker.github.io/ratchet
habrahabr.ru/post/157819
Создается прототип, максимально приближенный к реальному приложению. Может загружаться на компьютер или телефон, но без навыков HTML, CSS и JS не обойтись.

Proto.io
proto.io
SaaS решение для прототипирования. Сервис нам очень понравился, но в бесплатный пакет входит очень скудный набор функций, поэтому он фактически бесполезен. За действительно рабочий инструмент придется заплатить не менее 24$.

Codiqa
codiqa.com
Еще одно облачное решение. Та же модель монетизации, как и в proto.io. Кому-то этот сервис может показаться удобнее.

Mockingbird
gomockingbird.com
Ситуация противоположна Invision: имеется конструктор, но демонстрировать не очень удобно. Да и под мобильную разработку подходит плохо.

Lumzy
www.lumzy.com
Прошлый век. Под смартфоны тоже не удастся ничего создать.

iPhone Mockup Web App
iphonemockup.lkmc.ch
Отличительной особенностью является имитация рисунка приложения и самого телефона от руки, но это не оправдывает отсутствия возможности создавать связи между макетами.

Axure RP
www.axure.com
habrahabr.ru/post/101938
Программа достаточно функциональная, считается одним из лидеров на рынке. Подходит для прототипирования сайтов и приложений под iPhone и iPad.

AppGyver
www.appgyver.com
На выбор даются шаблоны Android, iPhone и iPad. Протестировать здесь вы сможете только логику приложения без дизайна, поскольку работа ведется с уже готовыми набросками приложений. В бесплатном статусе вы сможете протестировать сервис с 3 скриншотами. На мобильное устройство можно будет установить приложение, с помощью которого возможно оценить результат работы.

Fluid Ui
www.fluidui.com
Удивительно, но этот сервис обладает всеми необходимыми функциями. Может быть, он не так изящен, как другие, зато позволяет и самостоятельно собрать прототип в конструкторе, и залить уже готовые макеты, проставить связи между страницами приложения, отправить получившийся макет для просмотра друзьям и коллегам и протестировать его на телефоне. Сервис также поддерживает Windows Phone!

MockFlow
www.mockflow.com
Имеет десктопное приложение и онлайн сервис, что, несомненно, является преимуществом, но простой настолько, что даже скучно.

Mockingbot
www.mockingbot.com
Еще один очень неплохой инструмент, содержащий все необходимые функции, но, к сожалению, поддерживает только iPhone.

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

Balsamiq Mockups for Desktop
www.balsamiq.com
Можно создать как простой схематичный прототип, так и очень детальный с точностью до пикселя. Рисованая стилистика делает серьезный инструмент веселой игрушкой.

iMockups for iPad
www.endloop.ca/imockups
Рисовать прототипы прямо на iPad? Легко! Для него самого и iPhone, конечно. Качаем приложение и получаем удовольствие от простоты и неплохого результата.

Interface 2
interface2.lesscode.co.nz
Создание динамических прототипов для iPhone и iPad непосредственно на самих устройствах всего за 10 долларов каждое.
Демонстрация дизайна на устройстве без программирования

Justinmind Prototyper
www.justinmind.com
Инструмент, позволяющий создавать интерактивные прототипы сайтов и приложений для iPhone, Android и iPad. Поддерживает множество возможностей, включая работу с жестами ( в прототипах можно реализовать Drag&Drop и т.д.). К сожалению, бесплатная версия ограничена только перелинковкой между шаблонами и 10 МБ места в облаке. Но есть триал на 30 дней

За подсказку спасибо Glebcha

Mockko
www.mockko.com
Бесплатный on-line инструмент для создания прототипов. Поддерживается перелинковка между экранами, просмотр прототипов на iPhone. Собственно, создавать прототипы можно только для iPhone, сайт работает только в Chrome или Safari. Обещают в будущем поддержку также iPad.

За подсказку спасибо n0_quarter

Microsoft Expression Blend
msdn.microsoft.com/ru-ru/library/windows/apps/jj129478.aspx
Используя Blend + SketchFlow, вы можете создавать интерактивные прототипы приложений под любые платформы.
Подробнее:
Прототипирование в Expression Blend + SketchFlow. Часть 1. Немного истории
Прототипирование в Expression Blend + SketchFlow. Часть 2. Основы

За подсказку спасибо Ivnika

App Cooker
www.appcooker.com
Предлагает создать иконку, простенький прототип приложения и, как киллер-фича, предлагается встроенный инструмент помощи при ценообразовании.

За подсказку спасибо Glebcha

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

Mockabilly
www.mockabilly.com
Уже готовые макеты заливаете на iPhone (поддерживается только эта платформа) и тестируете непосредственно на самом устройстве.

Invision
www.invisionapp.com
Бесплатно доступен только один проект, но если нет необходимости одновременно демонстрировать более одного проекта, то он должен вам понравится, поскольку никаких других ограничений нет. Плата взимается только за увеличение количества проектов.

LiveView
zambetti.com/projects/liveview
Приложение для удаленного просмотра на экране iPhone и iPad прототипа, разработанного и запущенного на Mac.

Вывод

Инструментов для создания прототипирования огромное количество, здесь описаны лишь некоторые из них. Для себя мы остановились на следующем наборе: скетчпад для первоначального прототипирования, и Proto.IO/Fluid UI для создания интерактивных прототипов.

А чем пользуетесь вы?

Большую часть статьи написал мой коллега Александр Кочеванов (aimh), за что ему огромное спасибо

habr.com

Дизайнер интерфейсов (мобильные игры)

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

1. Современные тенденции в digital-дизайне
2. Основы мобильного дизайна
3. Принципы взаимодействия при помощи интерфейса (GUI/UX)
4. Понимание итераций, метрик, конверсии, воронок, KPI, Roadmap, MVP и т.д.
5. Композиция, колористика
6. Понимание usability
7. Гайдлайны мобильных платформ (iOS, Android, Windows Phone)
8. Процесс сопровождения и поддержки цифровых продуктов
9. Техническая сторона мобильной разработки
10. Функционирование медийных каналов распространения коммуникации

1. Создание логики приложения
2. Владение ПО для разработки дизайна цифровых продуктов (Adobe СС, Axure, SketchApp, InVision)
3. Работа с основными составляющими дизайна интерфейса (типографика, макет, цвет, иконки, анимация)
4. Интерактивный дизайн
5. Создание целостного продукта (прототипирование, wireframe, проектирование, тестирование, отрисовка, сопровождение)
6. Продвижение продуктов (промо, лендинги, видео)
7. Технические задания
8. Тестирование продукта

1. Клиентоориентированность, работа с заказчиком
2. Профессиональная коммуникация
3. Тайм-менеджмент, рациональная организация рабочего процесса
4. Независимая работа
5. Работа в команде
6. Многозадачность, умение вести несколько проектов параллельно
7. Внимание к деталям
8. Ответственность за результат
9. Саморазвитие, повышение своего профессионального уровня

britishdesign.ru