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
Разработчик: 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

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

Новое для дизайнеров в iOS 12

Юрий Ветров в “Дайджесте продуктового дизайна” рассказал о нововведениях в iOS 12.

AppTractor

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

/

Автор:

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

Неплохие обзоры обновления сделали The Verge и Engadget. Какие визуальные и интерфейсные нюансы можно отметить:

  • iOS-приложения можно будет портировать для MacOS. Пока это сделано для некоторых приложений Apple, со следующего года станет доступно сторонним разработчикам. Но это не объединение платформ, о чём мечтают многие.

  • Ещё один стиль кнопок в action sheets:

  • Apple, Adobe и Pixar продвигают единый стандарт файла для описания дополненной реальности.
  • Shortcuts, своя версия IFTTT на базе купленного продукта Workflow — можно создавать собственные операции для Siri, которые затрагивают несколько действий в разных приложениях.
  • Автоподстановка кодов подтверждения, которая поможет мобильным банкам.
  • Умельцы раскопали намёк на тёмную тему. Она появится в новом MacOS, в iOS была в некоторых приложениях (например, будильник).

Короче, для дизайнеров новостей мало, получился скорее релиз про полировку и оптимизацию. Полный список изменений. iOS 12 будет доступна в сентябре, но уже сейчас можно поставить бета-версию.

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

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

Темный или светлый UI? Советы по выбору цветовой схемы для вашего интерфейса

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

AppTractor

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

/

Автор:

Факторы, влияющие на выбор цветовой схемы

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

Читаемость и разборчивость

Эти термины непосредственно связаны с восприятием контента, представленного текстом. Читаемость определяет то, как легко люди могут читать слова, фразы и блоки текста. Разборчивость влияет на то, как быстро и естественно пользователи могут различать буквы в определенном шрифте.

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

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

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

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

Почему это так? Джейсон Харрисон из Sensor Perception and Interaction Research Group (Университет Британской Колумбии) объясняет это явление следующим образом. Люди с астигматизмом (которых, согласно различным статистическим данным, около 50% населения) чувствуют, что сложнее воспринимать белый текст на черном, чем черный текст на белом. Отчасти это связано с уровнем освещенности. С ярким дисплеем (на белом фоне) диафрагма закрывается немного больше, уменьшая эффект «деформированной» линзы. С темным дисплеем (черным фоном) радужная оболочка открывается, чтобы получать больше света, и деформация линзы создает гораздо более нечеткий фокус для глаза. Итак, основываясь на этом исследовании, если интерфейс представляет много текста и требует длительного чтения, то светлый фон более удобен для пользователя.

image

Доступность

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

Ясность

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

image

Отзывчивость

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

Окружение

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

image

Чеклист список для выбора цветовой схемы

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

  1. Определите цель интерфейса. Определив основные точки использования интерфейса и возможности решения проблем пользователя, вы сделаете выбор цветовой схемы более обоснованным. Если пользовательский интерфейс является текстовым (блог, новостная платформа, электронный ридер и т.д.), светлый фон будет более эффективным выбором. Свет делает экран просторным, и становится легче сосредоточиться исключительно на содержании. С другой стороны, если интерфейс вращается вокруг изображений, а не текста, то цветовая схема с темным или ярким фоном может быть хорошим решением, поскольку цвета изображений будут ощущаться глубже.
  2. Проанализируйте свою целевую аудиторию. Определение и анализ целевой аудитории – это главное, что должен сделать дизайнер. Понимание того, кто является вашим потенциальным пользователем и что он хочет получить от сайта или приложения – это прочный фундамент для удобного, полезного и привлекательного интерфейса. Люди среднего возраста и пожилые люди предпочитают интерфейсы со светлой цветовой схемой, поскольку они находят ее более интуитивной и управляемой. Молодые люди часто считают  интерфейсы с темным фоном более оригинальными и стильными, что может быть способом привлечения целевых пользователей. Подростки и дети предпочитают интерфейсы, где используются яркие фоны и забавные детали. Выбор цвета, очевидно, зависит от характера функционирования интерфейса и контента. Но предпочтения целевой аудитории всегда являются хорошим ключом к решениям, ориентированным на пользователя.
  3. Изучите конкурентов. Еще один аспект, который следует иметь в виду, заключается в том, что ваш продукт не плавает в “синем океане”. Наоборот, он будет бороться за внимание пользователя в условиях сильной и динамически меняющейся конкуренции. Выбор цветовой схемы становится способом сделать приложение или веб-сайт отличающимся и привести к столь драгоценному первому взаимодействию со стороны пользователя. Время, затраченное на исследование существующих продуктов в сегменте, сэкономит вам время и силы, которые вы, в противном случае, потратите на редизайн неэффективных решений.
  4. Тестируйте, тестируйте, тестируйте. Описанные выше моменты убеждают в одной ключевой вещи: поскольку цвет относится к факторам, непосредственно влияющим на удобство использования и привлекательность интерфейса, каждое дизайнерское решение должно быть соответствующим образом проверено – в разных разрешениях, на разных экранах и в различных условиях. Тестирование позволит выявить сильные и слабые стороны цветовой схемы до того, как продукт выйдет на рынок, получит внимание  и потеряет шанс произвести первое впечатление.

image

Компромиссные решения

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

Темный интерфейс, белые вкладки для содержания

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

image

Предоставление пользователю возможности выбора цветовой схемы

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

image

Полезное чтение:

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

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

Креативные прогресс бары, помогающие скрасить ожидание

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

AppTractor

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

/

Автор:

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

 

Забавные экраны ввода пароля

Экраны регистрации пользователей: примеры для вдохновения

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

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

Почему градиенты вернулись в 2018?

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

AppTractor

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

/

Автор:

Градиент – это вспышка ярких цветов для привлечения внимания.

Это утверждение могло быть правдой в 1995 году, когда веб-дизайнеры использовали градиенты для расширения цветовой палитры, добавляя уникальные элементы на свои веб-сайты. Вспомните старые добрые 90-е годы, когда мы даже пользовались «Word-art», чтобы добавить немного профессионализма в наши школьные презентации – а теперь мы называем это плохой идеей! Уф !! Но знаете что? Может быть, мы двигались в правильном направлении.

В настоящее время градиенты используются для создания смелых утверждений и передачи пользовательских эмоций, помогая аудитории понимать продукт или идею. В 2017 году мир был заинтригован переходом одного оттенка в другой, и эта тенденция не прекратиться в ближайшее время, если только кто-то не нарушит эту тенденцию, как это сделал Instagram с их ребрендингом в 2016 году, используя градиенты так и в таком масштабе. Но … мы не можем просто говорить о градиенте и не упомянуть Spotify, который передал двухцветными градиентами эмоции в плейлистах.

Как все началось?

Мы должны вернуться в 2014 год, когда все помешались на плоском дизайне. Google представил свой Material-дизайн, а Windows – Metro. Это выглядело круто и свежо по сравнению с захламеленным скеоморфическим дизайном, который уже выглядел устаревшим в то время. Новые парадигмы отлично подходили для мобильных устройств с низким разрешением, где дизайн выглядел чистым, но, увы, нас ограничивали в использовании различных цветов и с появлением мобильных устройств с более высоким разрешением они уже не оказывают такого же эстетического воздействия.

Можете ли вы назвать более 20 “плоских” цветов?

Готов поспорить, что не можете. Выбор плоских цветов ограничен.

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

Градиенты позволяют дизайнерам создавать что-то выглядящее новым, просто смешивая цвета. Цвет, который не существовал до того, как вы его смешали, цвет, который выглядит уникальным, современным и свежим. Вы видите градиенты повсюду в природе: каждый плод, каждый лист, который вы видите, имеет градиент от светлого цвета к более темному оттенку в тени. Небо всегда имеет градиент от ненасыщенного оттенка до более плотного цвета по мере того, как вы переходите от зенита к горизонту. Градиенты стали очевидным способом выразить эмоции после плоских цветов – начиная с мягких градиентов в 2015 году, давших ощущение глубины, до тотальных экзотических и насыщенных оттенков в 2017 году.

Итак, что за суета о возрождении градиентов в 2018 году?

Градиенты в 2018

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

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

Вот несколько примеров, которые подтверждают это убеждение:

Pantone Color Institute предсказывает глобальные тенденции в цветах и консультирует компании в вопросах создания брендов. Неудивительно, что в  этом году они выбрали загадочные фиолетовые оттенки цветом года.

Ультрафиолет стал цветом 2018 года: что он значит?

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

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

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

Советы по созданию превосходных градиентов

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

Не выбирайте цвета случайно

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

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

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

Представляем трехточечный градиент

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

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

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

С чего начать?

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

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

Вот некоторые из иллюстраций, которые я сделал, вдохновляясь от природы:

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

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

Надеюсь, вам помогут эти ссылки.

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

Реклама

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

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

Вакансии

Популярное

X
X

Спасибо!

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