Connect with us

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

Дизайн Urban Walks: история прогулок по Нью-Йорку

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

Анна Уханаева

Опубликовано

/

     
     
[pullquote align=right]

0-Dvud5mynOq-CzyS6
Антон Реппонен, дизайнер и со-основатель Anton & Irene, рассказал о том, как он делал лучший путеводитель по Нью-Йорку
[/pullquote]

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

Я дизайнер, одержимый путешествиями, картами и фотографией. Какое клише! Я мечтал о собственном гиде по Нью-Йорку с того момента, как переехал в него семь лет назад. В течение этих лет я совершал многочисленные попытки разработки дизайна на эту тему: однажды журнал .NET попросил меня создать концепцию гида по городу для одной из их статей в 2010 году, а еще я как-то сделал маленький журнал с интересными для фотографии местами Нью-Йорка, где я писал, с каким оборудованием я делал фотографии, в каких условиях и где точно на карте. Но ничто из этого не было существенным.

В прошлом году мой, знавший о моих предыдущих попытках, друг Данил Криворучко пришел ко мне с идеей того, что потом стало Urban Walks, и все, что я мог слышать, было “карты”, “фотографии”, “приложение” и “больше карт”. Я в деле!

В мире нет ни одного города, похожего на Нью-Йорк. Мы хотели сделать Urban Walks приложением, которое позволит его гостям и любопытным местным жителям увидеть Нью-Йорк таким, каким это делаем мы – городом невероятных личностей, исторических драм, захватывающей архитектуры и богатой культуры. Мы собрались маленькой группой людей, чтобы создать интерактивный гид по Нью-Йорку с нуля. Ключевая идея в том, что каждый из участников мог заниматься приложением только по вечерам и на выходных, поскольку у всех нас была полноценная работа.

Теперь вы можете скачать приложение Urban Walk в App Store. А также посетить сайт urban-walks.com.

1

Urban Walks
Urban Walks
Разработчик:
Цена: Free+

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

Карта

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

2

Здесь же мы поспорили о том, кодить ли скины поверх готовых опен-сорс картах или пройти намного более длинную дорогу и нарисовать иллюстрацию карты с нуля, а потом положить ее как один рисунок поверх Open Street Maps. Технически карта должна была быть “реальной”, то есть приложение во время прогулки должно было показывать ваше точное местоположение.

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

Я открыл Photoshop и стал делать карту шаг за шагом:

3

Скриншоты с openstreetmap.com, перенесенные в Photoshop:

4

В качестве наброска я обрисовал землю и работал над Манхэттеном.

5

Это самая трудозатратная часть. Так как наша карта в приложении на самом деле функциональная и показывает точное местоположение; каждая улица должна была быть отдельным местом. Я сделал карту из предыдущего шага немного размытой и часами рисовал на ней улицы с помощью Freeform Pen Tool из Photoshop, используя кисть Wacom. Я знаю, звучит не очень умно, но это было необходимо, чтобы получился нужный стиль. Когда у нас получился правильный набросок, мы шаблонизировали процесс и создали остальные карты намного быстрее, потому что уже знали, как все должно выглядеть.

6

Я хотел оставить все улицы векторными на всякий случай. Экраны стали ретина, файлы увеличились в размере.

7

После того, как я закончил с улицами, я начал работать над маленькими деталями, которые делают карту уникальной и особенной. Я добавил много акварельных текстур, чтобы было похоже, как будто нарисовано на бумаге. “Посадил” деревья в парке, добавил прохаживающихся людей и, конечно, оранжевые дымоходы, неотделимые от Нью-Йорка. А да, я сделал одну совершенно ненужную вещь – нарисовал Бруклинский мост. Без него Нью-Йорк не Нью-Йорк.

Ниже вы можете видеть финальную карту для одной прогулки. Я наложил маршрут, по которому мы хотели вести пользователей, и все точки must see из нашего гида. Хитрая вещь – положить много точек рядом друг с другом, но не слишком близко, чтобы пользователи могли легко на них нажимать.

8

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

Иллюстрации

Я не думал сначала, что это будет головной болью. Каждый тур состоит из примерно 20-30 точек. Некоторые из них привлекают внимание. Скажите “NY Stock Exchange” (Нью-Йоркская биржа) – люди знают ее, это завлекалка и маст-си, если вы турист. Так что мы решили выделить 10 таких точек на карте, сделав для них маленькие картинки, чтобы карта выглядела более живой и интересной.

9

Стиль довольно простой – просто эскиз здания. Нужно выбрать стиль, помня о том, как много вы хотите рисовать. Технически каждая иллюстрация может быть и сложнее, но тогда это займет часы рисования каждой. Я использовал 2 разных ширины линий, чтобы добавить немного объема: толще для контура и тоньше для внутренних линий и маленьких деталей. В теории каждый рисунок занимает 5-8 минут. Находите онлайн фото, загружаете в Photoshop с прозрачностью и рисуете кистью Wacom. Все звучит просто и прямолинейно.

10

Больше всего времени заняли поиски. Кое-что, что я вообще не учел. Чтобы нарисовать аккуратно что-то, что нужно, нужна была фотография под прямым углом. Я думал, что просто загуглю “Woolworth Building” и получу, что нужно. Если бы! Вместо этого мне попадались миллионы туристических фотографий с земли с ужасной перспективой. Такие фотографии не дают никакого представления о пропорциях здания и на каком уровне каждая точка находится от земли.

11

В среднем занимало около 20-30 минут, чтобы найти фотографию под прямым углом или технический рисунок фасада (как на рисунке выше). Для некоторых зданий, чтобы найти что-то приемлемое для использования, мне пришлось искать час. Для некоторых из них это оказалось невозможным, например, для музея MoMa – ключевой точки. После двух часов попыток найти нужную ссылку, я просто сделал скрин улицы из Google Street View и переделал все этажи выше первого  с учетом угла зрения.

В конце концов, у меня было 36 иллюстраций для первых 4 туров на стадии запуска. Если сложить их вместе, получится обалденный постер Нью-Йорка.

12

Дизайн приложения

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

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

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

13

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

14

Вот небольшое видео о том, как работает домашний экран.

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

15

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

При разработке интерактивных элементов очень важно думать об анимации и переходах. Переходы необходимы для того, чтобы пользователи понимали, откуда и куда они попали. Мы нашли классный переход: тап на марку на Home Screen приводит на Tour Details так, что это не кажется отдельной новой страницей.

Последнее – страница с Туром. Мы решили сделать два режима: Map, когда большую часть экрана занимает карта, а все точки расположены ниже в виде маленьких карточек; и Card, когда каждая точка открывается в виде карточки поверх карты.

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

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

16

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

Фотографии

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

Здесь два основных препятствия. В идеале, я хотел, чтобы на снимках не было людей вообще. Нью-Йорк без людей? Удачи! Только Уиллу Смиту в “Я – легенда” это под силу. Второе – фотографии небоскребов (или высоких зданий вообще). Вы не можете сделать фотографию с уровня земли, иначе получится обычная фотография туриста, который смотрит снизу.

17

Чтобы решить первую проблему, мне приходилось вставать в 4 утра, ехать на велосипеде на Манхэттэн к восходу (хорошее освещение) так, чтобы успеть до того, когда люди начнут идти на работу. В выходные немного полегче. У меня был всего час после рассвета до того, как в кадр начинали попадать люди и машины.

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

Фотографирование такого типа всегда заставляет меня чувствовать себя неловко, потому что все, что я вижу в видоискателе – это 20 минут работы инструментом Штамп в Photoshop, чтобы эта девушка исчезла.

18

К несчастью, вторую проблему, высокие здания, не решить в Photoshop. Все лето я пытался попасть на разные крыши, расспрашивая друзей и друзей друзей, нет ли у них доступа к нужной точке. Иногда получалось добиться нужного с помощью телеобъектива (в моем случае – Canon 70–200mm f/2.8, иногда с двукратным конвертером до 400mm).

Так что вместо того, что вы видите слева, у меня получалось что-то достойное, как справа:

19

Для обработки всех фотографий я использовал Adobe Lightroom. Я обычно прогоняю через него все фотографии и даю 5 звезд лучшим, 4 – тем, которые “возможно” и 1 звезду – на удаление. Потом быстро делаю коррекцию света, чтобы было одинаково и чисто. Я также большой фанат VSCO для Lightroom, очень советую фотографам!

20

Как вы видите, мы все вложили много усилий в это приложение. Спасибо Данилу Криворучко за то, что всех собрал и верил, что приложение будет закончено, несмотря на все проблемы, с которыми мы столкнулись. Спасибо команде Hyperboloid, которая сделала это технически возможным и реализовала фантастическое приложение! И Ирен из нашей студии Anton&Irene, с которой я работал над этим.

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

21

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

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

Апарекиум: в поисках невидимых особенностей дизайна

Леонид Никулин, арт-директор мобильных приложений AGIMA, написал для нас статью об особенностях прототипирования и создания дизайна мобильных приложений.

AppTractor

Опубликовано

/

Автор:

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

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

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. Тени картинками

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

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

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

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

Комментарии
Продолжить чтение

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

iOS 12 GUI

iOS 12 GUI – набор экранов и компонентов интерфейса для iOS 12.

AppTractor

Опубликовано

/

Автор:

Бесплатно можно скачать для Sketch, Figma и Adobe XD.

Ссылка: https://files.design/templates/ios12gui

Комментарии
Продолжить чтение

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

Будущее UX дизайна: за пределами экрана

Альберт Шум, вице-президент Microsoft по дизайну, рассказывает о будущем осмысленного дизайна в мире многих устройств – в переводе UX.PUB.

AppTractor

Опубликовано

/

Автор:

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

Нарушайте устоявшиеся шаблоны осмысленным дизайном

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

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

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

Создайте стол

Дизайн занял свое место за столом — теперь возьмите его дальше

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

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

Найдите свою модель работы

Статические системы не могут идти в ногу со временем — найдите свои дизайнерские модели

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

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

Выйдите на улицу

Идите и найдите новую точку зрения

Речь идет о поиске реальных потребностей и перспективы за пределами вашего привычного круга вещей. Ярчайшие моменты творчества часто находятся далеко от вашего стола. Идите на улицу и открывайте для себя что-то новое, потому что вдохновение стимулирует инновации.

Партнерство Microsoft на саммите «Дизайн для инклюзивности» этим летом стало вдохновляющим опытом. Там повсюду были любящие свое дело дизайнеры. Еще столько предстоит узнать о том, как индустрия дизайна думает о таких вещах, как разнообразие, инклюзивный подход и доступ к дизайнерскому образованию, и мы только начинаем привлекать больше перспектив и равенства в эту сферу.

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

Работа, которую надо выполнить

Зона дилеммы, в которой мы находимся. Желаемый уровень смысла — это то, куда мы стремимся

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

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

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

Будьте свободным радикалом

Refik Anadol, «Melting Memories» — результат совместного творчества машины и человека

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

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

Комментарии
Продолжить чтение

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

Победители Material Design Awards 2018

Google объявил победителей Material Design Awards 2018.

AppTractor

Опубликовано

/

Автор:

Google подвел итоги ежегодного конкурса  и выбрал лучшие приложения, выполненные по заветам Material Design.

В категории Выражение победило приложение с рецептами KptnCook:

В Инновациях – Lyft:

Лучшим дизайном в Опыте стало приложение Simple Habit Meditation для мобильной медитации:

Ну а лучшей адаптацией стали кроссплатформенные подкасты Anchor:

 

 

Комментарии
Продолжить чтение

Реклама

Наша рассылка

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.