Русский
Русский
English
Статистика
Реклама

Дизайн

Как Тильда убивает рынок веб-фриланса

29.06.2020 12:20:00 | Автор: admin

TLDR: Тильда это рак, поглощающий здоровый рунет (и в гораздо меньших масштабах весь остальной интернет). Тильда забирает работу у разработчиков и дизайнеров и даёт её людям, которые справляются гораздо хуже. Она поспособствовала появлению целого пласта специалистов, которые ни черта не умеют кроме визуальной верстки, но позиционируют и продают себя как крутых дизайнеров/разработчиков. Она генерирует более тяжелые страницы, чем чертов вордпресс!

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

Это зло


Я прозрел, когда пришел в большой проект на Тильде. К тому моменту я успел запустить на ней несколько сайтов разной сложности и был в целом доволен платформой, той легкостью, которую она давала. В проекте почти не нужна был динамика, но была тонна статики, которую мне предстояло организовать и причесать под единый стиль. Сайтом до этого занимался человек, максимально далёкий от дизайна и вёрстки, и в первый же день я сразу всё понял и про человека, и про Тильду, и про грёбаный ужас, который получается когда эти двое встречаются. У сайта был поддомен, на котором шли вообще все продажи, то есть все деньги на сайте крутились на этом поддомене. Знаете, сколько весила его главная страница? СЕМЬДЕСЯТ ВОСЕМЬ МЕГАБАЙТ. Она грузилась ВЕЧНОСТЬ. Что-то купить на сайте можно было только через неё.

Что там так много весило? Картиночки. Вся страница состояла из десятков полноэкранных блоков, на каждом из которых было 3-5 картинок и гифок, в том числе очень тяжеловесных. Некоторые картинки занимали область порядка 300*200 пикселей, но загружались в разрешении 3000*2000. Некоторые гифки весили по 5-10 мегабайт. Это был настоящий Содом, и самое грустное в том, что мне не дали его полностью переписать, только сжать картинки и выкинуть часть бесполезных, уродских гифок.

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

А всё почему?


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

Честно говоря, я вообще плохо представляю аудиторию WYSIWYG-редакторов сайтов. До Тильды большинство из них работало через задницу и что-то вменяемое делали только на таком же условно-бесплатном Wix, который обладает всеми теми же недостатками. Так вот, кому нужны визуальные редакторы? Малому бизнесу, который не может отвалить денег за хороший проект? Всяким авторам персональных страничек? Неважно, кто и с какой целью приходит, итог всегда один: сайтом так или иначе занимается один человек, и внешний вид сайта напрямую зависит от его дизайнерских навыков, как правило скудных. А вот функционал вообще от него не зависит и по сути определяется левой пяткой разработчика редактора. Для мелкой статики типа портфолио или странички автосервиса с контактами и формой это не страшно, но стоит немного подрасти и вы попадаете в ад.

Тильда это не Вордпресс


Тильду любят сравнивать с Wordpress. Она изначально выглядит выигрышнее, с её кастомизацией любых элементов, цветов фонов и возможностью в один клик редактировать текст в любом месте страницы. Но с точки зрения динамического функционала WP гораздо, гораздо лучше. Он весь пронизан огромным количеством плагинов для самых разных задумок, и всегда можно дописать новый. Например, интернет-магазины на WP в основном работают на WooCommerce, для которого есть куча тем, плагинов, кастомизации. В Тильде же полноценный интернет-магазин построить практически невозможно, несмотря на заявленный функционал. Есть корзина, есть карточки товаров, можно что-то несложное продавать (курсы, например). На всём остальном Тильда тупо ломается: нету кастомизации корзины, нету хуков вообще, нету даже полноценной базы данных, работающей из коробки! Как следствие, нет фильтрации и сортировки и много чего еще. Если же в Тильде вам чего-то не хватает, есть два пути либо попытаться заколхозить решение через HTML-вставки (соответственно, стили и скрипты подключаются через них же), либо писать в техподдержку и просить допилить.

Кстати, о техподдержке. С ней всё просто:

  1. Она всегда перегружена.
  2. Ей на тебя плевать, если ты не проплатил бизнес-аккаунт.


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

Zero blocks


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


Даже в оформлении плейсхолдера решили не запариваться с адаптивной версткой. И так сойдёт!

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

Mobile friendly


Ещё из хронических болезней Тильды нельзя сделать кастомные меню и навбары, просто нет такого функционала. А готовые очень часто плохо переверстываются на мобильных экранах, заставляя прибегать к особо циничному костылингу одной менюшке устанавливается область отображения от 1200px ширины и больше, другой 1199 и меньше. Всё бы ничего, по сути обычное разделение по @media-запросу, но из-за невозможности адекватно настроить размеры мобильных шрифтов и отступов постепенно половина сайта переезжает на такие дублирующиеся блоки, каждый из которых надо редактирвоать отдельно и следить чтобы ничего не поехало. Отдельный кайф доставляет последовательное отображение этих блоков на странице редактирования, что увеличивает её в полтора-два раза.

Альтернативы


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

Отличный вариант для размещения статики вроде блога использование Static Site Generator (SSG) в связке с GitHub Pages. Статей и туториалов много, вот например.

С JAMstack также тесно связаны headless (или API-driven) CMS. Они дают больше гибкости, приближаясь по функционалу к традиционным CMS (вот актуальное сравнение с WP), но сохраняют легковесность и безопасность. Подходят для всего, от блога до интернет-магазина, но как правило требуют приличного количества разработки.

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

Для быстрого запуска интернет-магазинов есть специализированные движки вроде OpenCart (сайт, статья) или Shop-Script (сайт, статья). Они лучше всего подходят для управления системой и интеграций со сторонними сервисами и бэкендами.

Мораль


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

  • Тильда зло.
  • WYSIWIG-редакторы сайтов зло.
  • Дизайнеры визуальной вёрстки зло.
  • Фриланс добро.
  • Разделение обязанностей обязательно.




Подробнее..

Стримы июля почему токсичные люди самые эффективные, ловушка стабильности, HighLoad на PHP и найм на работу

01.07.2020 12:12:44 | Автор: admin


Привет, Хабр!

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

  • Профессию монетизатора кто эти бездушные люди, которые втыкают внутренние покупки в игры? Со Славой Дреером, монетизатором с 7-летним стажем и продюсером игровых проектов
  • Что делать, если хочется создавать life-changing проекты, а приходится зарабатывать деньги, с продуктовым лидом Arrival Александром Ловягином
  • Как нанять 57 синьоров за 43 дня и быстро их включать в проекты, с заместителем CTO в Delivery Club Андреем Евсюковым
  • Как стать мощным PHP-разработчиком с Александром Высоцким, Senior Backend Developer в Badoo

Напоминаем о формате:


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

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




Почему у монетизаторов нет души, а токсичные члены команды самые эффективные


Слава монетизатор, гейм-дизайнер и продюсер игр с 12-летним стажем. Работал в игровых подразделениях веб-мани, mail.ru, Фотостраны и принимал участие в более, чем 50 других проектов.

7 июля, в 20:00

Какой полезной информацией владеет Слава:
  • Все о профессии монетизатора: кто эти люди, которые раскидывают по игре платные плюшки и как это делать правильно.
  • Откуда берутся большие пласты игр, в которые люди с интересом играют, но игра при этом не зарабатывает? Что делает монетизатор с такими играми?
  • В каких случаях нужны монетизаторы в проекте?
  • 4 архетипа пользователей: хардкорный игрок, школьник, домохозяйка и офсиный сотрудник, который просто играет чтобы отдохнуть. 4 жизни, которые проживает монетизатор с каждой игрой.
  • Неграмотный сбор аналитики в играх: как нельзя делать, если не хотите остаться с популярной игрой на нулях.
  • Математика стоимости товаров в играх: как рассчитать стоимость каждой плюшки и создать их такими, чтобы их покупали.
  • Почему нельзя делать справедливые игры, где у всех равные возможности?
  • Как считать баланс игр: баланс и псевдобаланс, 2 типа псевдобаланса PVE и PVP, почему надо считать сложный баланс и как это делать.
  • Самый главный человек в игровой команде игровой программист. Почему?
  • Может ли специалист высокого уровня существовать за пределами больших компаний? Как это сделать?
  • Существуют ли на самом деле люди, которые в одиночку создали игры мирового уровня?
  • Можно ли создать игру почти бесплатно?
  • Кто такой хороший менеджер, как им стать и как набрать крутую команду?
  • Два самых главных качества менеджера?
  • Что делать, если проработал в индустрии 8 лет, но особых достижений нет какие выводы о себе делать и как анализировать свою работу? Стоит ли этим заниматься дальше? Нужны ли компаниям такие люди?
  • Почему мода выгонять из команды токсичных людей плохая практика? Почему эти люди одни из самых ценных в команде? Являются ли они проблемой, стоит ли их избегать? Существуют ли они вообще?
  • Какие книги и какие лекции надо почитать прежде чем делать свою игру?








Что делать, если хочется заниматься крутыми проектами, а приходится зарабатывать деньги



Александр Ловягин сейчас Senior Product Designer в Arrival Mobility и работает над производством электротранспорта: автомобилей, автобусов, вэнов нового типа.

Они экологичные, красивые, удобные никаких газов, много света внутри, прозрачные потолки. Есть приложение для автобусов, чтобы видеть сколько людей едет: можно подождать и сесть туда, где меньше людей. Этот транспорт недорогой в производстве UPS London уже закупила мини-вэны от Arrival для доставки грузов, потому что они стоят не дороже, чем на топливе.

Саша продуктовый дизайнер, а не инженер, но тем не менее готов обсудить, как находить интересную работу в IT на уровне крутых продуктов: он прошел путь от проектирования простых лендингов до UX-автопрома и преподавателя Британской высшей школы дизайна.

14 июля, в 20:00

О чем расскажет Саша кроме ответов на вопросы:
  • Автомобили как девайс: как создавать авто, где максимально много света внутри, прозрачный потолок и крутой экспириенс.
  • Как проектировать продукты будущего, которые доступны в реальности и оправданы финансово.
  • Как сохранить свежесть восприятия уходить от устоявшихся паттернов в восприятии людей и перепридумать автобиль заново.
  • Как сделать продукт будущего за те деньги, когда это можно купить сейчас.
  • Поработать с сфере автомобилей заветная мечта продакт-дизайнера. Она реально меняет социальный уклад жизни, экологию, это самые инновации и то, что меняет жизнь людей. Это переводит мир в новую реальность как искать и апллаиться в такие проекты?
  • Почему самый благоприятный период для перемен в транспорте это сейчас.
  • Как разрабатываются интерфейсы внутри автомобиля.
  • Как дизайнеры идут на компромиссы и делают лучше бизнесу, но хуже жизнь людей и их пользовательский опыт.
  • В какую сторону двигаться и расти продакт-дизайнеру.
  • В каких компаниях лучше получать опыт продакт-дизайнеру, чтобы дальше работать в лайф-чейниджинг проектах.
  • Взаимодействие digital-дизайнеров в команде: опыт в Revolut и в Arrival.
  • Как эффективно строить работу продакт-дизайнеру с инженерами и обратно.
  • Советы новичкам в продакт-дизайне: где учиться, как составлять портфолио, куда отправлять резюме.








Как нанять 57 синьоров за 43 дня и быстро включить их в процесс разработки


Андрей занимается созданием инжереной культуры в Delivery Club: найм, формирование команд, создание процессов разработки. До этого разрабатывал на PHP и на go.

21 июля в 20:00

О чем Андрей может интересно рассказать:
  • Как закрыть 50 позиций Senior разработчиков за 43 дня.
  • Как добиться низкого turnover rate с октября 2018 года эта метрика в DC составляет меньше 10%; средним показателем по индустрии считается 12-15%.
  • Как построен процесс онбординга в Delivery Club: как быстро адаптироваться, включаться в работу и деплоить фичи в прод уже через две недели.
  • Что такое кейс-собеседование и почему к нему невозможно подготовиться обычной зубрежкой.
  • Продуктовая трансформация и построение процесса разработки: как масштабировать команду с 35 человек до 150.
  • Как работает фреймворк GIST для верификации продуктовых гипотез, почему команда выбрала его и как он влияет на работу инженеров.
  • Как руководителю инженеров тесно и продуктивно работать с продуктовым отделом и почему это важно для бизнеса.
  • Как выявить мотивацию сотрудника на собеседовании, которая совпадает с культурой вашей компании, и каких разработчиков ищет Delivery Club.
  • Как выглядит фреймворк найма в Delivery Club Tech: последовательность этапов, кейс-интервью, подходы, способы ускорения найма.








Как создаются Highload проекты на PHP



Александр Высоцкий ведущий PHP-разработчик в лондонском офисе Badoo, работает в команде антиспама.

28 июля, в 20:00

Саша ответит на ваши вопросы, а также расскажет:
  • Как PHP позволяет быстро разрабатывать масштабируемый проект и почему он подходит для решения именно их задач.
  • Почему Badoo использует не микросервисы, а монолит.
  • Как релизиться два раза в день, когда у тебя два продукта на нескольких платформах и сотни версий клиента.
  • О специфике работы инженера в антиспам-команде: ML, очень много данных и создание инструментов для других команд.
  • PHP и MySQL: что делать для оптимизации производительности бэкенда.
  • Как перевезти в Лондон жену, чтобы она поступила в университет, а не скучала дома. Налоги, местная медицина, жилье на двоих.
  • Что помогало ему каждый раз адаптироваться на новом месте.
  • Как инженеры Badoo движут русскоговорящее PHP-сообщество: конференции, митапы, блог и неформальные сходки разработчиков.




Не забудьте включить уведомления


Если вы ненавидите пуш-уведомления, вы можете подписаться только на пуши конкретного аккаунта.

Это делается очень просто


Будет ли запись?


Если вы не успеваете послушать эфир онлайн, вы все равно можете задать вопрос и услышать на него ответ в записи.

Чтобы не забыть посмотреть запись, вы можете также включить уведомление о новых постах: как только вы выложим запись в IGTV, вам придет уведомление.

До встречи в эфире!

Подробнее..

Перевод Обзор технологий скроллинга

04.07.2020 16:09:21 | Автор: admin
Анимации, имеющие отношение к скроллингу веб-страниц, существуют уже многие годы. В последнее время подобные анимации стали распространённее. Возможно, дело тут отчасти в том, что устройства, используемые для работы в интернете, стали мощнее. Эти устройства способны нормально обрабатывать и выводить больше визуальных эффектов, чем раньше.



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

Технологии для реализации специфических механизмов скроллинга


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

CSS-свойство position: sticky


Если вам нужно, чтобы некий элемент не прокручивался бы вместе с остальным содержимым страницы, то при стилизации этого элемента достаточно применить свойство position: sticky. Это простой и понятный приём, его поддержка встроена в современные браузеры. Но для того, чтобы это работало бы в IE и в некоторых мобильных браузерах, понадобится полифилл. Если вам интересна эта тема взгляните на данный материал.


Синий элемент упирается в верхнюю часть контейнера и не прокручивается вместе с остальными элементами

Вот демонстрация такого скроллинга.

Эффект параллакса


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


Эффект параллакса: элементы движутся с разной скоростью.

Вот демонстрация эффекта параллакса.

Прокрутка с привязкой к определённым точкам


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


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

Вот демонстрация работы скроллинга с точками привязки.

Плавная прокрутка


Плавный скроллинг поддерживается средствами браузера при прокрутке страницы до определённого раздела с использованием метода window.scrollTo() в JavaScript, или даже с применением CSS-свойства scroll-behavior. В настоящее время для реализации плавного скроллинга со сглаживанием движений колеса мыши требуются специальные JavaScript-библиотеки. Но при применении таких библиотек нужно обеспечить их нормальное взаимодействие с другими технологиями скроллинга. Кроме того, использование плавного скроллинга это далеко не всегда хорошая идея.

Технологии скроллинга общего назначения


В настоящее время нет способа, применяя лишь CSS, запускать какие-либо анимации скроллинга общего назначения, основываясь на позиции прокрутки (хотя имеется предложение, в соответствии с которым в отдалённом будущем в нашем распоряжении могут появиться некие анимации, основанные на технологиях скроллинга общего назначения). В результате, если вы хотите анимировать элементы при скроллинге, вам нужно, как минимум, использовать некоторый объём JavaScript-кода для достижения требуемого эффекта. Существуют два метода применения JavaScript для анимирования элементов при скроллинге. Первый заключается в использовании API Intersection Observer, второй в обработке события scroll.

Использование API Intersection Observer


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

Использование события scroll


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

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

Инструменты для создания механизмов скроллинга общего назначения


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

ScrollMagic


Библиотека ScrollMagic даёт нам сравнительно простой API, позволяющий создавать различные эффекты при скроллинге. Эта библиотека может работать совместно с различными библиотеками для анимации, наподобие GSAP и Velocity.js. Правда, в последние несколько лет эта библиотека недостаточно хорошо поддерживается. Это привело к тому, что была создана библиотека ScrollScene.

ScrollScene


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

ScrollTrigger


Библиотека ScrollTrigger это официальный GreenSock-плагин для GSAP. Эта библиотека отличается большим набором возможностей, её API кажется мне самым простым из API существующих библиотек для скроллинга. Используя эту библиотеку, вы полностью контролируете то, где именно начинается и заканчивается анимация скроллинга, вы можете анимировать при прокрутке всё что угодно (WebGL, canvas, SVG, DOM), можете закреплять элементы на время выполнения анимации. Этим возможности данной библиотеки не ограничиваются. Кроме того, эту библиотеку поддерживает GreenSock, получить помощь по её использованию можно на форумах GreenSock.

Библиотека, достойная упоминания: Locomotive Scroll


Библиотека Locomotive Scroll не стремится к реализации столь же широкого набора возможностей, как другие библиотеки, о которых мы говорили. Её основная цель реализация плавной прокрутки. Используя её, кроме того, можно анимировать некоторые свойства DOM-объектов, используя атрибуты data-*, или пользоваться обработчиком onscroll для анимирования объектов других видов.

Сравнение технологий и инструментов


Вот сравнение технологий скроллинга.

API Intersection Observer Плавная прокрутка Точки привязки в CSS CSS-эффект параллакса CSS-свойство position: sticky
Закрепление элементов - - - - +
Эффект параллакса - - - + -
Управление динамикой анимации - - -
Использование контрольных точек - + - -
Динамическая пакетная обработка элементов + - - - -
Поддержка эффектов горизонтального скроллинга + + + + +
Подходит для продакшна (хорошая браузерная поддержка) +
Полная свобода в анимировании - - - - -
Поддержка разработчиком n/a n/a n/a n/a n/a
Работа с DOM, Canvas, WebGl, SVG + - - - -
Поддержка изменения размеров элементов + + + + +
Ограничивает анимацию только релевантным разделом + + + - +
Различает направления скроллинга - - - -
Технология, встроенная в браузер + + + + +

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

ScrollTrigger Locomotive Scroll ScrollScene ScrollMagic
Закрепление элементов + + +
Эффект параллакса + + + +
Управление динамикой анимации +
Использование контрольных точек +
Динамическая пакетная обработка элементов + - + -
Поддержка эффектов горизонтального скроллинга + + + +
Подходит для продакшна (хорошая браузерная поддержка) + + +
Полная свобода в анимировании + + +
Поддержка разработчиком + + + -
Работает с DOM, Canvas, WebGl, SVG + + +
Поддержка изменения размеров элементов + + +
Ограничивает анимацию только релевантным разделом + -
Различает направления скроллинга + + +
Технология, встроенная в браузер - - - -

Итоги


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

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

Какие технологии вы используете при настройке скроллинга в своих проектах?

Подробнее..

Разговоры в пижамах. Онлайн-встреча с Виталием Фридманом 19 июня

17.06.2020 20:12:14 | Автор: admin


Надоел зум и скучные митинги? Мы хотим разнообразить твою жизнь, приглашая в Wrike TechClub ярких, интересных и вдохновляющих людей из IT и не только. А ты садись поудобнее, расслабься, налей себе чего-нибудь и оставь тягостные мысли на завтра. Марафон из бесконечных дел подождет, присоединяйся к нашему Пижаматону 19 июня в 7 вечера (по Москве).

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

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

Первый эпизод вышел неделю назад с Максимом Сальниковым, DevRel из Microsoft. Краткое содержание выпуска:

Что такое работа мечты?
Как делать маркетинг для тех, кто ненавидит маркетинг?
Как объяснить бабушке, что такое PWA (не клей)
Что нужно для того, чтобы организовать запоминающуюся конференцию
Итсория релокации Макса в Норвегию
Разрушаем мифы о Норвегии


А 19 июня к нам в гости придет Виталий Фридман (Smashing Mag, Smashing Conf)



Виталий родился в Минске, Беларусь и изучал информатику и математику в Германии, где он обнаружил интерес к типографике, журнализму и веб-дизайну. Проработав с разными агентствами и клиентами 6 лет, Виталий создал Smashing Magazine, популярный онлайн-журнал о дизайне и веб-программировании.

Виталий Фридман любит красивый контент и не любит легко сдаваться. Когда он не пишет и не выступает на конференциях, он, скорее всего, проводит семинары по интерфейсам / UX и вебинары. Он любит решать сложные UX, front-end задачи и проблемы с производительностью.

Бесплатная регистрация на встречу: wriketeam.timepad.ru/event/1320725
Больше информации о Pyjamathon: wrikepyjamathon.com
Подробнее..

Перевод Чему я научился за (почти) 30 дней Codevemberа 30 скетчей на p5.js

15.06.2020 20:17:21 | Автор: admin
image

Что такое #codevember и зачем он нужен? В последние пару лет каждый ноябрь я натыкался в соцсетях на интересные произведения искусства, созданные ИИ, отмеченные этим хэштегом. Согласно информации с codevember.xyz:

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

В этом году я решил попробовать поучаствовать и в ноябре изучить Processing (p5.js) и побаловаться созданием графики, которая создана не для какой-то определённой задачи.



Подготовительной работой лучше заниматься в фоновом режиме



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

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

image

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

Темп важен



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

image
image
image
image
Использование текучих форм как инструмента для рисования

Легко впишется в твой день, но не в каждый


Я был довольно-таки постоянным, но несколько дней я пропустил и наверстал на следующий день, сделав два скетча. Был и день, который я не наверстал. Имея семью и работу с полным рабочим днём, втиснуть новую привычку, которая может занять до 30 минут, не всегда возможно.
image
image
Цвет волны на картине Хокусая отбирается и перерисовывается в виде рисунка брызгами и проецируется в случайные 3D плитки, отсортированные по осветлённости

Ежедневные скетчи не лучший способ изучения нового языка


Учитывая мои ограничения по времени и способности вникнуть, большая часть обучения языку Processing прошла в спешке. Я много изучал примеры, чтобы разобраться в возможностях p5.js и часто брал и адаптировал чужой код, чтобы заставить всё работать. Всё это работало, но у меня не было особо времени выучить всё до автоматизма.

image
Перисто

Я отдаю предпочтение одной цветовой гамме


Что мне нравилось в работе с цветами в p5, так это цветовое пространство HSB (тон насыщенность яркость). Оно куда более интуитивно понятно, чем RGB (кто-то вообще задумывается о том, сколько красного, зелёного и синего в цвете?) или HEX. Несмотря на доступ к новым методам кодирования цветов, меня постоянно тянуло назад к моим обычным цветовым привычкам. Не то что бы это было плохо, просто вещь, которую я для себя осознал.

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

(И теперь я понимаю, что годами упускал из виду цветовые режимы HSB/HSL в d3.js)

Комплексные системы золотая середина


Несколько дней спустя я нашёл онлайн курс, который называется Generative Art and Computational Creativity from Philippe Pasquier, который до сих пор прохожу. История ИИ искусства куда глубже и шире, чем я мог себе представить, и есть формализованная систематика, что хорошо. Эта диаграмма форм поведения ИИ систем как раз донесла до меня, что я искал и почему мне порой нужно столько времени, чтобы решить, что скетч готов.

image

Фиксированные системы (fixed) формируют единственный статический вывод; периодические системы (periodic) колеблются между двумя или более состояниями; хаотичные системы (chaotic) не формируют никакого предсказуемого образа (я думаю, не считая вещей, типа странных аттракторов), но комплексные системы (complex) дают нам структуру и стабильность периодических систем и координированную рандомность хаотичных систем.

image

Неправильное использование тоже стратегия



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

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

image
David Hockney, The Scrabble Game, 1983

Я прорываюсь к координированному разрушению красивой математики



Совершенные формы хороши, но оторваны от жизни. Интрига кроется в изъянах: что пошло не так с этим прекрасным планом действий?

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

image

Забавно наблюдать за тем, как эти скетчи рисуют сами себя.

Посмотреть всю коллекцию можно на гитхабе.

Если вы хотите попробовать еще что-то или начать с более простых проектов:

Подробнее..

Перевод Красивая и подробная геологическая карта Марса, сделанная на Python, GDAL

14.06.2020 18:20:27 | Автор: admin
image

На этой неделе творческое переосмысление геологической (или все же ареологической?) карты Марса на основе карты, сделанной USCS. Использовалась те же геологические данные, что и для оригинальной, но было добавлено больше топонимов и подписей, проведен редизайн визуального стиля, а термины из легенды карты упрощены для общего понимания.



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

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

image
Некоторые из особо-примечательных геологических объектов на Марсе. 1: Гора Олимп, самый большой вулкан в Солнечной системе. 2: Долины Маринер, система глубоких каньонов длиной более 4000 км. 3: Равнина Эллада, самый большой видимый ударный кратер в Солнечной системе. 4: Марс геологически разделен на Северную низменность (бледно-зеленую) и Южную горную местность (коричневая). Ударные кратеры, образованные падающими астероидами и кометами (неоново-желтые), разбросаны по всей планете.

image
Для карты использовались следующие отдельные слои. 1-3: Геологические элементы, геологические контакты и геологические особенности из набора данных USGS. 4-5: уровень наклона и из двух источников USGS. 6: Номенклатура от IAU (Международный Астрономический Союз). 7-8: линии сетки и 3D-эффект, разработанный в Photoshop.

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

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

image
1: Равнопромежуточная. 2: Экерт IV. 3-5: Ортографические проекции с центром на разных долготах и широтах


Рассказ о реализации



В данном проекте использовались открытые данные USGS, IAU и NASA.
Стек технологий: Python 3.7.1, GDAL 2.4.1, Illustrator CC 2019 и Photoshop CC 2019 (можно заменить на бесплатные Gimp и Inkscape, например).
Также нужно установить пакеты: matplotlib numpy, pandas, cartopy, jupyter.


Сбор и обработка данных



Создание модели рельефа (DEM)



Модель рельефа это данные, содержащие информацию о высоте различных точек на планете. В проекте использовались данные, полученные из Геологической Службы США. Каждый пиксель в файле GeoTIFF это 16-битное число, которое описывает высоту точки.

Примечание: многие программы не могут нормально прочитать этот файл, так что то, что он выглядит странно в формате предпросмотра или в других неспециализированных программах это нормально. В рамках проекта работа с ними шла через GDAL (англ. Geospatial Data Abstraction Library библиотека абстракции гео-пространственных данных).

Создание проекций карты



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

Изменяем проекцию в DEM-файле: в исходном файле использовалась равнопромежуточная проекция, поэтому нужно ввести следующий код в командную строку, чтобы осуществить перевод. Код использует оригинальный файл intif и создает новый outtif, в формате eck4 (Эккерт IV) проекции.

gdalwarp -t_srs "+proj=eck4" ./path_to_intif.tif ./path_to_outtif.tif


Потом уменьшаем разрешение DEM, просто сокращая размер каждого пикселя до 1500x1500 метров, используя метод average. Это позволит сократить время обработки, да и уменьшение разрешения в этот момент сделать проще, чем потом.

gdalwarp -tr 1500 1500 -r average ./path_to_intif.tif ./path_to_outtif.tif


Отмывка и карта склонов



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

Карта после отмывки показывает тени из воображаемого источника света, свет падает на карту сверху. Он воображаемый, потому что в реальном мире так не бывает одиночный источник света создаст тени под разными углами в разных частях шара. Встроенная функция hillshade в GDAL устанавливает угол падения света одинаковый для всей карты. Для данного проекта z, вертикальное увеличение, поставили равным 20. Это увеличивает каждое значение высоты в 20 раз, чтобы сделать рельеф более контрастным и обеспечить отображение теней.

gdaldem hillshade -z 20 ./path_to_intif.tif ./path_to_hillshade.tif


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

gdaldem slope ./path_to_intif.tif ./path_to_slope.tif

image

Ортографические проекции



В дополнение к карте в проекции Эккерт IV также сделаны четыре карты полушарий Марса. Проекция Эккерт IV плохо подходит для отображения Северного и Южного полюсов, поэтому эти две врезки очень полезны для их понимания. Для получения отмывки и карты склонов повторяем код с небольшими изменениями ortho вместо eck4 и обозначаем центр долготы и широты для каждой карты (North:+lat_0=90 +lon_0=90, South :+lat_0=-90 +lon_0=90, East:+lat_0=0 +lon_0=90, West:+lat_0=0 +lon_0=270).

gdalwarp -t_srs "+proj=ortho +lat_0=90 +lon_0=0" ./path_to_intif.tif ./path_to_outtif.tif
gdalwarp -tr 1500 1500 -r average ./path_to_intif.tif ./path_to_outtif.tif
gdaldem hillshade -z 20 ./path_to_intif.tif ./path_to_hillshade.tif
gdaldem slope ./path_to_intif.tif ./path_to_slope.tif

image

Легенда карты


Международный Астрономический Союз отвечает за присвоение имен внеземным объектам. Можно просто скачать файл в формате CSV, содержащий все объекты для каждой планеты прямо с их сайта. Для этого надо использовать функцию Advanced Search (расширенного поиска), чтобы скачать All Feature Types (все типы объектов) для вашей планеты Target (Mars), но только с Approval Status of Adopted by IAU одобренные МАС. В разделе Columns to Include section (столбцы для включения) выберите Feature ID, Feature Name, Clean Feature Name, Target, Diameter, Center Lat/Lon, Feature Type и Feature Type Code. Также можно включить Origin (происхождение), если хотите добавить в проект дополнительную информацию об объектах, такую как, например, в честь кого он был назван.

Геологические структуры и элементы


Геологическая карта показывает различные типы пород и другие особенности, такие как линии разломов и русла рек. У USGS есть красивая геологическая карта Марса, которую мы и используем в качестве исходной. Для работы с этими данными загрузите архив базы данных (790 МБ) с USGS Geologic Map. В следующем разделе, посвященному дизайну карты в Python, объясняется, как получить доступ и отобразить каждый тип данных в этой базе данных.

Дизайн карты в Python



Мы создаем шесть чертежей (plots) с геологическими элементами, структурами, особенностями, двумя видами текстовых подписей и сеткой. Часто стоит разделять данные для обработки, чтобы легко применять при необходимости эффекты из Photoshop или Illustrator. В matplotlib использовался gridspec, чтобы настроить все элементы так, чтобы каждый subplot занимал конкретное место в пределах декоративной рамки.

image

Геологические элементы это различные виды рельефа, составляющие поверхность планеты. Разные скальные элементы обычно представлены разными цветами. Набор данных USGS помечает каждую породу 23 буквенным кодом, обозначающим тип элемента. Назначаем цвет каждому буквенному коду, составив таблицу пар код-цвет в Mars_geologic_units.csv. Мы обращаемся к этому файлу при построении каждого элемента в cartopy и matplotlib. Сохранение графических параметров в отдельном файле облегчает использование различных цветовых схем и обособляет дизайн от кода.

image

Геологические контакты это границы между геологическими породами. Некоторые геологические границы являются приблизительными или скрыты под пылью. Как и для геологических пород, используем файл конфигурации Mars_geologic_boundaries.csv, чтобы отобразить каждый тип геологического контакта в другом цвете. На окончательной карте настраиваем отображение некоторых геологических контактов в виде пунктирных линий, просто открыв PDF в Illustrator и выбрав все объекты одного цвета (Select -> Same -> Stroke color).

image

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

image

Условные обозначения



Для карты использовалось два набора данных для меток. Первый это официальный от IAU. Размеры меток создаются в соответствии с размером объекта, хотя все равно финальную настройку размеров необходимо делать в Illustarator.

image

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

image

Места высадки: чтобы отобразить места высадки марсоходов и других космических аппаратов, использовалось улучшенное цифровое изображение от NASA в качестве фона. Чтобы показывать все 4 полушария планеты, пришлось поменять проекцию landing_sites.ipynb.

Сохранение результатов из Matplotlib



Обычно результаты сохраняются в формате pdf, чтобы провести финальные правки текста и форм в Illustrator. Вот пара стандартных команд, которые облегчают последующую редактуруt:

import matplotlibimport matplotlib.pyplot as pltimport matplotlib.backends.backend_pdf as pdf# Выгружает текст в редактируемом формате, а не в формате формы:matplotlib.rcParams['pdf.fonttype'] = 42# Сохраняет вертикальное положение для картинокmatplotlib.rcParams['image.composite_image'] = False# Удаляет границы и тики из subplotax.axis('off')# Убирает padding и margins отовсюдуplt.margins(0,0)plt.subplots_adjust(top=1, bottom=0, right=1, left=0, hspace=0, wspace=0)plt.gca().xaxis.set_major_locator(plt.NullLocator())plt.gca().yaxis.set_major_locator(plt.NullLocator())#Сохраняет в pdfpp = pdf.PdfPages('./savename.pdf', keep_empty=False)pp.savefig(fig)pp.close()# если не нужно сохранять в векторах# можно делать сразу в PNG и правит сразу в Photoshop:plt.savefig('./savename.png', format='png', dpi=600, pad_inches=0, transparent=True)


После сохранения PDF его нужно отредактировать так, чтобы каждый объект можно было редактировать независимо. В Illustrator выберите все в файле и идите в Object --> Clipping Mask --> Release. В этот момент стоит также удалить бэкграунд и границы, если вы их делали раньше.

Дизайн в Illustrator и Photoshop



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

Создание теней под текстом в Photoshop


Для создания этого эффекта нужно скопировать слой с подписями и зайти в Filter --> Blur Gallery --> Field Blur. Для теней хорошо создавать два слоя с blur на 20% прозрачности один с Blur равным 4px, а другой 10px.

Цвета и шрифты


Чтобы карты выглядела продумано, для карты выбирались цвета из заранее продуманной палитры на 70 цветов. Два шрифта (Redflowers and Moon).
image
image

Разработка цветовой схемы


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

Декоративные иллюстрации


В проекте хотелось комбинировать большие датасеты и ручные элементы в стиле художников William Morris или Alphonse Mucha. Для этого перед разработкой была собрана большая коллекция картин для вдохновения.

image

На старте хотелось попробовать разные вариации рамок для карты. Была создана коллекция из 18 разных паттернов.

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

Итоговый результат:
image

Ссылка на github: github.com/eleanorlutz/mars_geology_atlas_of_space

Реферальные ссылки:
Astronomy. Andrew Fraknoi, David Morrison, Sidney C. Wolff et al. OpenStax 2016.
Gazetteer of Planetary Nomenclature. International Astronomical Union (IAU) Working Group for Planetary System Nomenclature (WGPSN) 2019.
Planetary Symbology Mapping Guidelines. Federal Geographic Data Committee.
Mars HRSC MOLA Blended DEM Global 200m v2. NASA PDS and Derived Products Annex. USGS Astrogeology Science Center 2018.
Geologic Map of Mars SIM 3292. Kenneth L. Tanaka, James A. Skinner, Jr., James M. Dohm, Rossman P. Irwin, III, Eric J. Kolb, Corey M. Fortezzo, Thomas Platz, Gregory G. Michael, and Trent M. Hare. USGS 2014.
Viking Global Color Mosaic 925m v1. NASA PDS, 2019
Missions to Mars. The Planetary Society.
Fonts: Moon by Jack Harvatt and RedFlower by Type & Studio.
Advice: Thank you to Henrik Hargitai, Oliver Fraser, Thomas Mohren, Chris Liu, Chloe Pursey, and Leah Willey for their helpful advice in making this map.
Подробнее..

Как мы пересмотрели стандартный подход к тендерам и получили 300 дизайн-проектов интерфейса medtech-сервиса по 3000 руб

23.06.2020 20:12:31 | Автор: admin
Мы в Globosphere Russia работаем над тремя медтех проектами. Один из них MY DATA. Это электронная медицинская карта нового поколения на основе big data. Сервис будет собирать информацию о здоровье человека из разных источников, анализировать данные, находить корреляции и приводить информацию к единому формату, выдвигая гипотезы о состоянии здоровья.

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

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

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



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


image

Когда мы размышляли, как поступить с поиском исполнителя. Поняли, что стандартные методы нам не подходят. Вот почему:

Агентствам нужно четкое ТЗ, у нас его не было и пока не может быть.

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

Аутсорс это всегда риски.

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

Найм приносит мало идей.

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

Тендеры отсеивают многих.

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

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

Но мы прикинули рентабельность, взвесили все за и против. Выходило, что на предыдущие варианты мы потратим аналогичное количество времени и ресурсов, но при этом получим меньше идей, чем если проведем конкурс. Так мы решились запустить конкурс для UX/UI на создание электронной медицинской карты нового поколения Future Health Design 2020.

Механика конкурса


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

Условия

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

Призовой фонд

Чтобы сделать конкурс максимально привлекательным, мы объявили общий призовой фонд в 2 600 000 рублей. Из него 600 000 рублей распределяются между 1, 2 и 3 местом. А победителю гарантируется контракт на сумму не менее 2 000 000 рублей.

ТЗ

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

  • Интерфейс врача
  • Интерфейс пациента
  • Анализ данных
  • Хранилище информации
  • Взаимодействие с клиниками и врачами
  • Телемедицина
  • Лекарства


Необязательные блоки для конкурсной работы:

  • Расписание
  • Визуализация человеческого тела


На втором этапе мы отбирали ТОП-15 самых перспективных работ и отправляли исполнителям детальные комментарии для доработки.

Система оценивания

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

Мы поступили следующим образом: первые этапы отбора проходили внутри компании. Силами своей команды мы отобрали из 300 проектов сначала ТОП-15, а потом ТОП-10 финалистов. А вот уже победителей из ТОПА-10 выбирало внешнее жюри, в которое мы пригласили основателей известных российских medtech-проектов (Best Doctor, Третье мнение, Doc+, Мобильные Медицинские Технологии, Кнопка жизни), фарм-проектов (Pharma.Global), экспертов в сфере дизайна (специалисты Skillbox, Дизайн государственных систем).

image

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

image

Продвижение

Мы использовали два основных направления в продвижении:

  • таргетинговая реклама
  • pr-инструменты


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

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

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

С рекламных источников мы получили 53% заявок, с pr-активнсотей 47%.

Этапы

1 этап: 1 28 апреля прием заявок на участие, выполнение ТЗ 1. Отбираем ТОП-15 работ.

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

2 этап: 1 25 мая выполнение ТЗ 2. Отбираем ТОП-10.

На этом этапе мы отправляли ТЗ с уже конкретизированными рекомендациями по доработке проектов тем, кто прошел в ТОП-15. После новой итерации правок отобрали ТОП-10 финалистов.

3 этап: 25 31 мая голосование членов Жюри из разных областей. Выбор ТОП-3.

Определение 1, 2 и 3 места путем общего голосования жюри.

Что мы получили?


Нам прислали около 2300 заявок дизайнеры из 15 стран, из которых мы получили 320 дизайн-проектов конверсия из заявки в конкурсную работу почти 14 %.

Работы оценивались по 10-бальной шкале. Из 320 дизайн-проектов, больше всего работ набрали по 4-5 баллов 33%. А самые высокие баллы получили 9%.

Вот так выглядит полная картина оценки качества работ:
плохо. Баллы: 1-4: 82 работы
средне. Баллы 5-6: 104 работы
хорошо. Баллы 7-8: 74 работы
отлично. Баллы: 9-10: 30 работ


Когда мы планировали конкурс, мы рассчитывали на 1000 заявок и около 150 работ. Исходя из текущей конверсии, выходит, что на 1000 заявок в конкурс со сложным проектом реально получить около 6-7% работ. Мы же перевыполнили KPI в два раза!

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

1 место Нестерова Мария

image
Пример экрана интерфейса из конкурсной работы

2 место Сидорец Кирилл

image
Пример экрана интерфейса из конкурсной работы

3 место агентство Nimax

image
Пример одного экрана интерфейса из конкурсной работы

Со всеми работами финалистов можно познакомиться на сайте конкурса.

Что можно улучшить?


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

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

Хотя бы за 1 день до окончания: 11%
Последний день: 89%
Последний час: 62%


А по результатам опроса почему на первом этапе дизайнеры не стали принимать участие большинство ответили, что не хватило бы времени сделать хорошую работу 42%.

Давать больше обратной связи участникам

Мы поняли, что идея с онлайн-разбором работ в прямом эфире была хорошей. Наша задумка была в том, чтобы сделать предфинальный этап максимально публичным. Посадить всех 15 членов жюри на разбор 10 больших проектов было бы слишком долго и непродуктивно, поэтому мы решили сфокусироваться на экспертизе UX/UI специалистов.

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

Перевод Как заставить генеративные изображения выглядеть естественно при помощи математических алгоритмов

16.06.2020 18:07:02 | Автор: admin
image

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

Этот пост не о языке и не о фреймворке. Мы будем говорить только о технике.

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



Ведущий принцип: моделируйте свои работы на основе реальности



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

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

Линии


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

1. Выбрать начальную точку
2. Выбрать конечную точку
3. Провести черту между точками

В результате получается что-то такое:

image

По-моему, слишком идеально!

Случайный наклон



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

image

Волнообразное колебание



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

Например, это можно сделать так:

1. Выбрать N точек между конечными точками отрезка, чтоб создать новую линию.
2. Сместить каждую точку.
3. Смягчить линию и нарисовать её.

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

image

Влияние соседних точек



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

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

image

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

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

Текстурирование линий



Теперь наша линия выглдяит достаточно естественно. Но мы всё ещё рисуем идеально точной ручкой, когда мы вызываем функцию stroke(). В реальном мире, когда мы используем различные инструменты для рисования, у них есть различия в текстуре. Один из способов внести эти различия использовать технику песчаных сплайнов, популяризованную Андерсом Хоффом (a.k.a inconvergent). Идея проста:

1. Совсем чуть-чуть скорректируйте каждую точку линии, используя нормальное распределение.
2. Сгенерируйте ещё несколько точек, между каждой соседней парой точек, и нарисуйте их в виде крошечных точечек.
3. Повторите несколько раз.

Если ваши точки супер маленькие, то получится такая текстура:

image

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

image
Сон о пустыне (2018) Текстурированные линии основа многих моих работ.

Формы



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

Мы можем просто нарисовать квадрат.

image

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

image

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

image

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

image

Ничего из этого не ново. Мы здесь, по сути, говорим только о замкнутых отрезках, поскольку мы просто сглаживаем углы. А что насчёт заполнения пространства? Мы можем использовать функцию fill(), но это немного скучно.

image

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

image

* Примечание: можно это сделать, поделив квадрат на 2 треугольника и сгенерировав точку в каждом при помощи равномерного распределения.

Хотя выглядит это немного неаккуратно, поскольку равномерное распределение не настолько интуитивно понятно, как кажется. Для более естественного распределения точек, можем взять значения из одной из моих любимых последовательностей Последовательности Хальтона (2.3)[можно почитать про нее в классной статье].

Последовательность Хальтона (2.3) генерируют точки в промежутке (0, 1) (0, 1) в R2. Чтобы заполнить квадрат точками, сгенерированными в этой последовательности, мы можем:

1. Найти минимальный ограничивающий квадрат, содержащий в себе Прямоугольник.
2. Сгенерировать N точек в (2.3) последовательности Хальтона.
3. Градуировать каждую точку по ширине (или высоте) минимального ограничивающего квадрата.
4. Переместить точку по верхней левой координате квадрата.
5. Отфильтровать все точки, которые не лежат в Квадрате.

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

В общем, (2.3) последовательность Хальтона генерируется просто; прочитайте про псевдокод в википедии (eng). Вот заполнение штрихом на 10000 точек.

image

Поскольку (2.3) последовательность Хальтона генерируется не рандомно, она создаёт одинаково выглядящие текстуры. Пара способов обойти это:

1. Градуирование и (по желанию) лёгкое раскачивание ограничительного квадрата, чтобы сместить центр последовательности.
2. Отбрасывание N точек с начала последовательности.
3. Рандомное отбрасывание малой части точек из последовательности (но осторожно, это создает больше шума).

Конечно, эти подходы можно совмещать. Экспериментируйте!

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

image
Провод Т


Конечно же, это не единственный подход к текстурированию.

Цвет


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

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

Вот мой подход, который я переделал из идеи Джошуа Дэвиса [https://joshuadavis.com/]. Вся суть:

1. В отдельной программе (я, например, использую AutoDesk SketchBook) сконструировать горизонтальную градиентную линию и сохранить в png.
2. Открыть png как пиксели в программе для создания генеративного искусства, и интерполировать между началом и концом градиента, используя функции плавности (функции с диапазоном выхода [0,1])

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

Мы будем использовать вот этот градиент для закрашивания точек в предыдущем примере (только точек в 20 раз больше).

image

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

image

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

Используем шум с пользой



Раз уж мы говорим о функциях плавности, а что там с шумом? Шум Перлина не совсем соответствует подходит для этой функции, так как его значения варьируются от -1 до 1. Но с умным mapping`ом, ограничением посторонних значений, модульной арифметикой с плавающей запятой и/или другими хитростями, конечно, мы можем сузить диапазон до [0,1].

Вот одна из моих серий Modular, в которой я использовал 2D шум как функцию плавности в цвете.

image

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

Если взглянуть внимательно, то можно заметить, что штрихованная структура тоже часть шума.

image

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

Ощутимость



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

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

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

image

В основе Пылевой чаши лежит симуляция рвущейся резинки.

image

Как по мне, эти картины живые. И неудивительно, правда. Они тесно связаны с нашим ведущим принципом:

Моделируйте свои работы на основе реальности

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

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

P. S. Здесь не было никакого кода не просто так. Эти идеи достаточно общие и применимые во многих языках и средах разработки, я не хотел бы никого отталкивать, заставляя перейти на что-то другое.
Подробнее..

Перевод Визуализация генеративных алгоритмов гифа, деревья, повторяющиеся и дифференциальные линии (на Python)

22.06.2020 02:19:54 | Автор: admin
image

ВВЕДЕНИЕ


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

image

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

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



ПРИЗНАНИЕ


Буду честным перед вами, я иногдаберу идею для своей работы из работ других художников. Особенно Джареда Тарбелла и Nervous System. К примеру, алгоритм, который я назвал Орбиталь (изображение ниже) сделан с очень сильной опорой на Happy Place Тарбелла.

image

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

INCONVERGENT (НЕСОСРЕДОТОЧЕННЙ)


Я начал работать с генеративными алгоритмами, когда должен был готовиться к экзаменам в университете. Именно поэтому я купил домен inconvergent.net, насмехаясь над тем, как я уклоняюсь от учёбы. Первое, что я сделал скопировал несколько алгоритмов Тарбелла с помощью Javascript/Canvas. Через некоторое время ко мне начали приходить уже собственные идеи.

image

Первым моим работающим алгоритмом, помимо Orbitals, был Hyphae. Он получился, когда я пытался воссоздать поведение гифы, сделанное Nervous System. На тот момент я не понимал, насколько сложный этот алгоритм на самом деле, и я потратил очень много времени, тщетно пытаясь сделать что-то сносное. Я все же смог сделать его, а еще вы можете прочитать работу Зигграфа (ENG) по этой теме, если интересно. Увлекательное чтиво!

КОД


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

HYPHAE (ГИФА) [GITHUB]


Я начал экспериментировать с системой, где я выращивал связанные друг с другом круги, которые не могли накладываться друг на друга. Работает это так: вы где-нибудь помещаете начальный (круг), и задаёте ему радиус и направление движения. Затем пытаетесь добавить новый узел по периметру первого узла в направлении движения. Важно иметь направление движения, чтобы было немного колебания, и каждый раз угол немного отклонялся. Также обязательно каждый раз при добавление нового делаете радиус новых узлов немного меньше предыдущего.

image

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

image

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

ДЕРЕВЬЯ [GITHUB]


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

image

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

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

image

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

ПОВТОРЯЮЩИЕСЯ ЛИНИИ [GITHUB]


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

Рисовать фигуры на компьютере довольно легко. Линия состоит из ряда вершин (точек) с ребром (сегментом) между ними. Для создания треугольника вам нужно взять три ребра и соединить их тремя вершинами. Чтобы нарисовать круг, нужно сделать то же самое, только нужно достаточно много вершин, чтобы было невозможно увидеть, что это на самомо деле не круг. Если у вас появилсиь сомнения в подходе, то сразу скажу, что есть более сложные и точные способы рисования форм, но этот достаточно прост и точен.

Это значит, что рисовать эти линии так же, как Френсен, можно путём рисования округлых фигур со множеством вершин. Отслеживание формы немного сложнее, но есть несколько способов, которые можно опробовать. Я хотел, чтобы поведение имитировало то, как в реальности рисуется фигура, мало-помалу, при этом продолжая предыдущие линии. Алгоритм, который я придумал работал не совсем так. То есть, он не избегал столкновений, но результаты все равно выглядели очень хорошо.

image

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

ДИФФЕРЕНЦИАЛЬНАЯ ЛИНИЯ [GITHUB]


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

Прежде чем я начал прикидывать способы, я видел только Floraform, созданный Nervous System, но вам стоит увидеть ещё Cellular Forms Энди Ломаса. Другой важный документ, который я обнаружил гораздо позже, находится здесь.

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

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

image

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

image

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

image

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

image

image

А если генеративное искусство и визуализация данных, вас заинтересовали посмотрите другие посты degenerative_art, вот самые популярные на данный момент:

Подробнее..

Выступления и презентации в стиле Apple на примере WWDC20

23.06.2020 22:21:05 | Автор: admin
К нам часто приходят клиенты с запросом Хотим в стиле Apple, и теперь на один такой запрос станет больше он будет касаться презентаций для онлайн-конференций. Сооснователь студии дизайна информации VisualMethod сделала подробный разбор, на каких элементах строился сценарий вводного дня #WWDC20. Разбор состоит из трех блоков: цель, контент и дизайн. Полезен всем, кто делает презентации и выступает публично.

image

Иллюстрация VisualMethod

Меня зовут Виктория. Я сооснователь студии дизайна информации VisualMethod и тренер по публичным выступлениям. Мне всегда интересно смотреть презентации крупных компаний и анализировать их сценарии. 22 июня на #WWDC20 компания #Apple не только представила свои обновленные продукты, но и задала тренд публичных выступлений в новом формате.

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

Разберем презентацию Apple от начала до конца


Подготовка любой презентации или выступления начинается не с запуска программы #PowerPoint и даже не с запуска #KeyNote Она начинается с ответов на вопросы на бумажном или электронном листе. Если говорить языком маркетинга, нужно заполнить план коммуникаций.

image

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

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

1. Цель. Что зритель должен знать, думать или делать после WWDC20?


Здесь все, на первый взгляд, очевидно зритель после презентации должен отдавать предпочтение продукции Apple. Значит ли это просто покупку очередного гаджета? В этом году Apple расширила границы и призвала не просто голосовать рублем в магазине, а пустить себя в жизнь человека на 100%.

image
Интересный жест занять место зрителя

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

Поэтому если сформулировать цель кратко, то она прозвучит примерно: жить с Apple.

2. Аудитория. Кто должен совершить целевое действие после WWDC20?


Хотя всемирная конференция Apple и обозначена как мероприятие для разработчиков, на деле это PR-событие, и вторая (если не первая) его аудитория пресса, блогеры и общественные институты. Именно поэтому CEO компании Tim Cook начал Всемирную конференцию разработчиков с мнения о событиях, которые в настоящее время влияют на мир: движения Black Lives Matter и всемирной эпидемии коронавируса.

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

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

image
Обратите внимание на символы позади Кука все они со смыслом о важных событиях в обществе.

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

Смотрите, два супер-важных повода и два аргумента в пользу Apple. Вот она работа с репутацией. И эта работа нацелена не на разработчиков. Акции Apple также выросли во время основного доклада и закрылись на 2,6% до 358,87 долл. Это является признаком того, что инвесторы были довольны новостями о программном обеспечении и компании.

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

3. Сообщение. Какие аргументы и контент?


Ключевые сообщения для инвесторов и СМИ мы разобрали в блоке выше они про социальную ответственность и экосистемность Apple. Что же компания хотела сообщить разработчикам?

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

Еще для разработчиков были фоновые сообщения об удобстве работы именно в этой экосистеме. Для этого, предполагаю, были собраны самые массовые запросы и детально освещены в обзоре от организации иконок до трансформации надписи стилусом в текст. Ведь разработчики прежде всего люди, поэтому новости об измерениях сна, физической активности через часы, открытие машины с помощью телефона, возможности персонализации и установки фото ребенка на рабочем столе это жизненно и интересно.
Сообщение это не только слова, а еще интонация и внешний вид того, кто говорит. Это тоже часть коммуникационной стратегии и называется Tone of voice (ToV), то, с какой интонацией и в каком стиле говорят спикеры бренда и звучат сообщения от имени компании.

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

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

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

image
Ценности Apple

Финальные наблюдения в этом блоке. У Apple есть прописанные ценности на сайте, в материалах о компании. Ценности нужны в том числе для имиджа, чтобы создавалось цельное представление о компании, но они работают, если подтверждаются примерами. Поэтому в каждом программном выступлении и на мероприятиях представители Apple называют свои ценности и то, как они воплощены в жизнь. Это об универсальном доступе, окружающей среде, конфиденциальности. Заметили, как эти ценности были вшиты в выступления спикеров? Обычно это самая скучная часть, и у Apple этот блок тоже был затянут и спокоен так, что хотелось взять в руки iPhone, но при многократном повторении все же работает прекрасно, создавая нужное впечатление о компании.

4. Канал. Откуда аудитория получит сообщение?


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

Блогеры и авторы статей отметили перемещение камеры из театра в офис, я зафиксировала для себя важный нюанс с представлением продуктов Apple там, где они используются на рабочем месте, в спортивном зале, гараже, квартире. Это погружает в нужную атмосферу. Единственное, что не смогли показать это перемещение по городу, но вместо этого был симпатичный ролик в 3D.

image
Тайная лаборатория Apple тоже была среди локаций

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

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

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

Логика выступлений строго по цели


  1. Сделать заявление компании о важных событиях в мире. Это нужно, чтобы обозначить позицию компании и задать тон.
  2. Подстроиться под аудиторию и привлечь внимание. Презентацию начали с простых изменений, которые интересны всем зрителям. Например, виджетов. Организация приложений была зудящей проблемой, о которой часто писали на форумах. Решение простое, охват аудитории максимальный, тема вызывает доверие и затягивает.
  3. В середине конференции дали новые продукты, которые еще недостаточно популярны это подписки на ТВ и прочие электронно-развлекательные продукты. Тизер Foundation|Apple TV+ разбудил немного заснувшую аудиторию и дал возможность отдохнуть от спикеров.
  4. В конце конференции поставили самые важные анонсы, например, о постепенном отказе использования чипов Intel. Это давняя уловка ставить в конце самое интересное, чтобы удержать внимание зрителей до конца.
  5. Кук отпустил аудиторию чуть раньше, чем закончились 2 часа. Это хороший прием, чтобы оставить ощущение недосказанности и заинтересовать зрителя подумать о том, что он услышал и заставить действовать.

Все вместе было собрано с помощью красивого монтажа.


Тизер Foundation|Apple TV+

О дизайне скажу отдельно


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

image

Текст на слайдах


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

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

image
Текст это отдельный объект на слайде, если спикер зачитывает текст, то его нет в кадре.


Анимация


Это тренд в дизайне презентаций 2020 года, и он останется с нами и дальше. Что отличало анимацию в презентации Apple? Естественность. Текст, иконки, объекты появлялись ровно так, как мы ожидаем этого в жизни, а точнее, как мы привыкли это видеть на своих экранах в приложениях и на сайтах. Возьмите этот пункт во внимания, работая в PowerPoint. Анимация снова в моде, но она должна быть ненавязчивой.

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

Градиент


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

image

Прозрачные плашки


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

image

3D-модели


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

image

5. Активация. Конференция закончилась что дальше делать?


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

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

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

Что было интересно Вам?
Подробнее..

Разговоры в пижамах смотри запись встречи с Виталием Фридманом

30.06.2020 16:15:52 | Автор: admin


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

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

Выпуск, как и весь проект Wrike Pyjama talks, на английском языке.

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

Подробнее..

Из песочницы Прочитай меня, или почему текст не читается до конца

18.06.2020 14:14:33 | Автор: admin

Привет, Хабр! Представляю вашему вниманию перевод статьи "READ ME!".


image


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


image
Нью-йоркское метро, 2019. Фото: Сьюзен Джейн Голдинг, CC 2.0


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


Что еще хуже, люди почти никогда не употребляют digital контент слово в слово: вместо этого они быстро сканируют текст.


Люди сканируют, потому что пытаются получить столько информации, сколько им нужно, отмечает Кейт Моран, старший специалист по пользовательскому опыту в Nielsen Norman Group.

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


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


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


В этом эссе мы предлагаем несколько советов о том, как с этим справиться.




Часть 1


Определить и победить


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

Другими словами, готовность это метрика, которая оценивает легкость и удобство чтения конкретного текста.


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


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


Два других выдающихся подхода появились позже, в середине XX-го века.


Один был основан на скорости восприятия, в то время как другой подчеркивал измерение общей усталости глаз. Они были впервые предложены двумя исследователями, Майлзом Тинкером и Мэтью Лакишем, чьи разные подходы к измерению читабельности даже привели к определенной враждебности друг к другу (вы можете узнать больше из статьи Уильяма Берксона).


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


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


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


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




Часть 2


Как создать на экране особую читаемость?


Контраст


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


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


Если вы установите слишком высокую яркость, в сетчатку будут попадать прямые пучки света, что вызовет усталость, объясняет Ник Шерман, консультант по типографике и основатель типографской компании HEX Projects.

image
Высокая контрастность между текстом и фоном обеспечивает хорошую читаемость.


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


Некоторые отличные инструменты для измерения контрастности текста: Средство проверки контрастности цвета Webaim, Анализатор контрастности Luminosity, Средство проверки контрастности цвета и Визуализатор контрастности цвета.


Разрешение


Вторым фактором помех является разрешение количество точек в данной области, которые могут использоваться для передачи визуальной информации. Разрешение измеряется в точках на дюйм (dpi) или в пикселях на дюйм (ppi), причем эти термины используются взаимозаменяемо. Дисплеи MacBook Retina (высоко оцененные за высокое разрешение) по-прежнему превышают 200 ppi, а офсетная печать 2400 dpi или даже выше.


Большинство шрифтов, которые не были специально разработаны для компьютеров, имеют тенденцию к снижению читабельности при отображении на мониторах. Исторически сложилось так, что два главных гиганта, Apple и Microsoft, предлагали разные решения.


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


image


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


image


Однако изменения в способе отображения шрифтов уменьшили различия между этими подходами.


Часть 3


Эволюция слоев и настройки текста в вебе


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


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

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


Эта проблема в основном решалась с массовым внедрением адаптивного дизайна в 2007 году, а также с выпуском первого iPhone.


image


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

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




Часть 4


Шрифты, которым адресованы особые вопросы


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


В начале 90-х британский шрифтовой дизайнер Мэтью Картер создал ранние шрифты Web 1.0 Georgia (1993) и Verdana (1996). По заказу Microsoft специально для текста на веб-страницах оба шрифта были разработаны в растровых изображениях, чтобы соответствовать пикселям стандартного разрешения экрана в то время, а затем преобразованы в контурные шрифты. Для разборчивости и читабельности на экранах Картер разработал эти шрифты с большей высотой x, открытой апертурой и большим пространством.


image


Спустя десятилетие появился субпиксельный рендеринг, также известный как сглаживание шрифтов, он добавляет красные, зеленые или синие пиксели к буквенным полосам для более четкого чтения даже на экранах с низким разрешением. Происхождение субпиксельного рендеринга остается спорным: Apple, затем IBM и Microsoft запатентовали различные реализации со своими собственными техническими отличиями, но Microsoft первой применила технологию в своих продуктах. Вскоре после этого Microsoft также выпустила коллекцию шрифтов Clear Type, набор шрифтов, предназначенных для демонстрации преимуществ субпиксельного рендеринга. В коллекцию вошли Calibri, Corbel, Cambria, Candara, Consolas, и Constantia.


Другое важное развитие произошло в 2009 году. Small Batch., Inc выпустила Typekit коллекцию веб-шрифтов из разных литейных цехов, использующую функцию @ font-face в CSS, одновременно защищая их от нарушений. @ font-face был доступен с 1998 года, но Typekit был первой коллекцией, которая решила проблему авторского права на шрифты, позволив расцвести новому рынку для пользовательских веб-шрифтов. Сейчас это сложно представить, но до Typekit вся веб-типографика была либо сделана с помощью одного из дюжины или около того веб-безопасных шрифтов, либо визуализирована в графике.


В 2014 году Apple выпустила семейство шрифтов San Francisco, вдохновленное культовым модернистским шрифтом Helvetica. San Francisco включает в себя несколько шрифтов, каждый из которых предназначен для отдельной среды: SF предназначен для macOS, iOS и tvOS, а SF Compact для Apple Watch. Основное различие между ними заключается в том, что буквы в округлой форме, такие как o, e и s, имеют закругленные стороны в San Francisco, тогда как в SF Compact они плоские. Эти плоские стороны позволяют расположить буквы с большим расстоянием между каждым символом, делая текст более разборчивым при небольших размерах (что особенно важно для часов).


image


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


image


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




9 советов по созданию читабельного веб текста


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


1. Всегда начинайте с качественного текста.


Есть несколько правил, которые могут помочь вам улучшить качество текста. Начните создавать свой дизайн только тогда, когда вы знаете, что у вас есть наилучший текст.


2. Думайте о макете.


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


3. Применяйте сетки.


Как печатные публикации, так и веб-макет в основном основаны на столбцах и прямоугольниках. Освойте сетку, дизайнерский инструмент, впервые разработанный Швейцарской школой, чтобы помочь сбалансировать макеты. Структурируйте и делите ваш контент на более мелкие элементы, что облегчит их сканирование.


4. Помните об контрастности.


Помните об инструменте коэффициента контрастности, разработанном Инициативой веб-доступности, и проверьте свои дизайны на уровень контрастности.


5. Выбирайте подходящие шрифты.


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


6. Добавьте тексту навигацию по нему.


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


7. Поиграйте с внешним видом вашего текста.


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


8. Дайте возможность распечатать текст.


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


9. Проанализируйте все.


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




Перевод статьи: Виктор Шишко


Источник

Подробнее..
Категории: Usability , Дизайн , Ux , Design , Text , Fonts

Из песочницы 11 предпосылок того, что ваш сайт убогий

20.06.2020 12:14:32 | Автор: admin
Сейчас каждой уважающей себя компании следует иметь свой сайт. Иногда это сводится к абсурду: сеть из двух-трёх автомоек в пределах одного города покупает домен, находит дизайнеров и программистов и пилит персональный лендинг. На фоне всего этого растет количество псевдо-дизайнеров и псевдо-программистов, которые после первого более-менее красивого проекта бегут на фриланс и создают сайты, выглядящие, мягко говоря, не очень.

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

1. Главная страница намного красивее других


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

Согласитесь, неудобно после открытия минималистичной главной страницы переходить на страницу Примеры работ или О нас с дизайном эпохи динозавров?

2. Стиль сайта не соответствует сфере деятельности компании


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

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

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

3. Неправильные цвета


image

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

4. Много интерактива, всплывающих окон


image

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

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

5. У сайта нет адаптивности или даже отзывчивости


image

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

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

6. Стиль лого не соответствует стилю сайта


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

7. Много или мало разделов


image

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

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

8. Много текста


image

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

9. На главной странице нет ключевого действия


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

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

10. Нельзя связаться


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

11. Изображения с фотобанков


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

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

Автор статьи Арсен Осипян
Подробнее..

Дизайн-концепт мерча для сотрудников

03.07.2020 14:20:11 | Автор: admin


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

Как появилась идея


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


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

Масштаб и детали


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

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

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

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

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


Принт на первых футболках, спереди и на спине. Футболка корпус робота

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

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

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

Айдентика и фирменные элементы


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


Шрифты и цветовая гамма


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

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

Типичная иллюстрация к статье в блог или в соцсети

Все надписи на мерче чёрно-белые и выглядят просто так обычно пишут на технике. Теперь о том, что объединяет разные по формам и материалам предметы.

Этикетка со штрихкодом


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


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

Иконографика


За основу мы взяли иконки-предупреждения на коробках, в которых упакована техника: стекло, опасно и др. Например, на зонте и дождевике есть знак капли, а на зарядке энергии.



Порядковый номер


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

Этикетки для разных предметов. Фирменные элементы: штрихкод, надпись, описание, номер устройства. Для значка исключение: это идентификатор, а не девайс, поэтому вместо номера ID

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


Этикетка с описанием содержимого кружки

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

Что в итоге получилось


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

Дождевик ждали почти 8 месяцев, нужную ткань купили только в Китае и искали производство для пошива изделия.

Футболка, с обновлённой концепцией стиля базовый элемент мерча и гардероба.



Инструкция к роботу:

Зонт.



Свитшот скоро появится в магазине.

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


Бутылка для воды.



Зарядка востребованный товар магазина. Нанесено на пауэрбанки Xiaomi.



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



Поясная сумка.



Значки один из самых легких лотов в производстве. Мы просто их заказали. Чтобы заработать на значок, нужно, например, чтобы твой комментарий опубликовали в СМИ.



Фирменный скотч. Боль нашего менеджера по работе с производством. Если коротко, то скотч почти опоздал к фотосессии мерча.


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


Советы тем, кто думает сделать мерч


  • Подумайте про ваш культурный код: чем вы отличаетесь от других компаний и придумайте историю, объединяющую ваших сотрудников, ценности и мерч. Крепкая коммуникационная идея превращает мерч в нечто большее, чем просто вещи.
  • Выделите критерии качества для предметов. Если вещь вам не нравится, не нужно запускать ее производство, сотрудникам она тоже не понравится. Лучше сделать меньше предметов, но они все должны быть такими классными, чтобы вам самим очень хотелось их приобрести.
  • Договоритесь в команде. Как правило, в компании есть те, кто топит за выделяющееся лого на вещах, но люди не хотят быть рекламными щитами, поэтому надо искать баланс. Мы выбрали путь без очевидного брендинга: кое-где есть аккуратный робот, а где-то только лого.
  • Мерч отдельный проект со сроками, задачами, командой. Без организационной системы всё это несерьезно.
Подробнее..

Книга Продай свое портфолио. То, чему не учат в дизайнерских школах

17.06.2020 12:21:27 | Автор: admin
image От автора бестселлера Сожги свое портфолио! для всех фрилансеров, дизайнеров и компаний, которые устали брать цены с потолка в надежде заработать. Среднестатистический дизайнер размышляет так: Сколько мне взять за работу? Может, ХХХ? Да, вроде нормально. Столько и возьму. Затем он вставляет цифры в простенькое коммерческое предложение и отсылает клиенту, скрестив пальцы и надеясь на согласование. Это касается не только фрилансеров, но и многих компаний. Я был владельцем такой компании пятнадцать лет. Половину этого времени я при помощи шестого чувства выдумывал цены в погоне за тендером. Скорее всего, многие из вас делают так же. Берут цену наугад. Ставят ее в коммерческое предложение. Отправляют клиенту и надеются на лучшее. Все изменится, когда я покажу вам работающий способ ценообразования на творческие услуги, который позволит сделать ваше коммерческое предложение наиболее выигрышным и увеличить прибыль. Майкл Джанда


Психология ценообразования


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

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

Эффект левой цифры vs круглая цена


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

Возможно, большинство потребителей достаточно внимательны, чтобы заметить эту игру ценообразования и увидеть, что 2,99 доллара практически равны 3,00 долларам. Тем не менее я сам ловлю себя на том, что использую эту тактику, когда пополняю свою коллекцию цифровых фильмов в учетной записи Apple. Я говорю жене, что купил фильм за 9,99 доллара (точная цена), вместо того чтобы сказать, что отдал за него 10 долларов (цена, округленная на один цент). Конечно, она понимает смысл этого спектакля, но нам психологически комфортнее слышать/видеть цену в 9,99 доллара.

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

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

Графические дизайнеры продают не яйца, и не думаю, что если стоимость творческих услуг будет пестрить девятками в конце (например, получите свой дизайн логотипа всего за 5999 долларов! Только сегодня!), это что-то сильно изменит.

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

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

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

Правило 01: если проект стоит дороже 100 долларов и дешевле 2000, его цена должна быть кратна 25

Если проект стоит дороже 100 долларов и дешевле 2000 долларов, называйте клиенту ту цену, которая будет кратна 25.

Например, вы хотите назначить цену за дизайн рекламного баннера для одного из ваших клиентов и решили, что это будет стоить от 1500 до 1700 долларов. Руководствуясь моими рекомендациями, вы бы выбрали любую цену, кратную 25, поскольку ценовой диапазон выше 100 и ниже 2000 долларов. Это может быть 1525, 1650, 1675 или любое другое число, кратное 25, в пределах заранее определенного ценового диапазона. (Не следует предлагать не кратные 25 цифры такие как 1599 и 1628.)

image

Правило 02: если проект стоит дороже 2000 долларов и дешевле 10 000, то цена должна быть кратна 50

Давайте рассмотрим следующий пример. Если проект стоит дороже 2000 и дешевле 10 000 долларов, то цена должна быть кратна 50.

Таким образом, если вы решили брать за дизайн буклета в два сгиба от 3000 до 3500 долларов, в качестве окончательной цены можно взять любое число, кратное 50. Например, 3250, 3350, 3400 или любое другое, кратное 50. (Не берите 3399, 3325, 3407 или любое другое число, не кратное 50.)

image

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

Правило 03: если проект стоит дороже 10 000 долларов, то цена должна быть кратна 250

Наконец, если проект стоит дороже 10 000 долларов, то цена должна быть кратна 250. В этом случае, если вы решили, что стоимость проекта находится в промежутке от 22 000 до 25 000 долларов, назовите клиенту сумму, кратную 250. Итоговая цена в размере 22 250, 23 000 или 24 500 отлично подойдет. (Не стоит называть такие цифры, как 23 225, 24 999, 22 777 или 22 889 долларов, потому что они не кратны 250.)

image

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

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

12 Сценариев диапазона ценообразования
Сценарий 01. Отчаянные попытки найти работу


Ситуация:

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

Ценовой диапазон:

Вы определили, что рыночная стоимость этой работы составляет 2000 долларов. Бюджет клиента 1200 долларов, а издержки производства 600 долларов.

image

Рекомендация:

Предлагайте ставку за проект, взяв свои издержки производства в качестве наиболее важной переменной, и добавьте справедливый размер прибыли. В этом случае я бы посоветовал взять за работу 800 долларов. Эта цена включает ваши издержки производства в размере 600 долларов плюс 30 % наценки (600 0,3 = 180, прибавьте сюда издержки производства в размере 600 долларов = 780 долларов, которые мы округлим до 800 долларов).

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

Можно рассмотреть возможность увеличения прибыли, подняв цену до 825, 850 или 900 долларов. Вы можете даже запросить чуть больше, если не считаете, что это поставит под угрозу шанс получить проект, в котором вы отчаянно нуждаетесь.

image

Сценарий 02. Да, по привлекательной цене


Ситуация:

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

Ценовой диапазон:

Вы определили, что рыночная стоимость этой работы составляет 3000 долларов. Бюджет клиента 2500 долларов, а издержки производства 1200 долларов

image

Рекомендация:

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

image

Сценарий 03. По уши в работе


Ситуация:

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

Ценовой диапазон:

Вы определили, что рыночная стоимость этой работы составляет 2500 долларов. Бюджет клиента 1500 долларов, а издержки производства 900.

image

Рекомендация:

Просите за проект сумму, примерно равную рыночной стоимости, и надейтесь на свои способности убедить клиента увеличить бюджет. В этом случае я бы посоветовал просить за проект около 1800 долларов. Цена по-прежнему остается ниже рыночной, поэтому не стоит переживать, а, исходя из сметной стоимости в 900 долларов, наценка на работу оказывается равной 100 %.

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

image

Сценарий 04. Сложный клиент


Ситуация:

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

Ценовой диапазон:

Вы определили, что рыночная стоимость составляет 4000 долларов. Бюджет клиента 3500 долларов, а издержки производства 2500 долларов.

image

Рекомендация:

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

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

image

Сценарий 05. Опыт = деньги


Ситуация:

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

Ценовой диапазон:

Вы знаете, что рыночная стоимость составляет 6000 долларов. Бюджет клиента 4500, а издержки производства 3000 долларов.

image


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

Для Хаброжителей скидка 25% по купону Джанда

По факту оплаты бумажной версии книги на e-mail высылается электронная книга.
Подробнее..

Ретроспектива создания своего мультфильма

20.06.2020 18:10:45 | Автор: admin
Мы живём в удивительное время. То, что раньше было невероятным, сегодня у нас буквально валяется под ногами. В наши дни любой человек может сделать свой собственный мультфильм. Анимационные программы упрощают и ускоряют этот процесс настолько, что даже один человек ну будучи аниматором, может сделать настоящий анимационный фильм.
С удовольствием поделюсь полученным мною опытом. Речь будет идти о 2D-анимации, но многие моменты равно применимы и к 3D. Кому будет интересно ссылка на сам мультфильм в конце поста.

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

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

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

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

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

Ускорение развития навыков. Чередуйте, банально переключайтесь между теорией (20%) и практикой (80%). Не впадайте ни в одну, ни в другую крайность. Понятно, если вы ограничитесь теорией, то вы ничего, никогда и не сделаете. Но часто многие ограничиваются практикой, силовым методом и это тоже снижает скорость развития. Из 5 часов 1 час изучайте, 4 делайте. По-моему опыту это заметно ускоряет.

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

Всегда понимаешь, что сценарий плох. В процессе работы над своим мультом, у вас будут появляться более лучшие идеи, решения. Стоит ли следовать изначально утверждённому плану или на ходу перелепливать пельмени? Мой совет перелепливать, в итоге получится лучше!

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

Зритель видит по-другому. Рассказывать истории очень сложно. Имеет значение всё. Зритель не увидит так как хочешь ты, он увидит так как он видит. И отсюда сразу два урока:
Чётко управлять вниманием, фокусировать на важном (прежде всего движением, в т.ч. камеры, контраст, световой/цветовой, выбивание/отличие из ряда и т.д.).
Обязательно устраивать предпоказы узнаешь как видят твою историю другие люди (зритель не смотрит туда, куда нужно посмотреть, упускает нить повествования, внимание рассеивается, расфокусируется, и т.д.).

Развитие сцены. Сцена должна развиваться. Не выкладывайте зрителю все карты сразу. Сначала покажите лампу, потом, что она может светиться, потом, что можно регулировать яркость свечения, потом, что может мигать одинаковым тактом, потом неравномерным тактом (под музыку), потом, что может светиться разными цветами и т.д. Развивайте сцены.

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

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

Повышение производственной эффективности:
Банальное разбиение на сцены ускоряет работу, через вырезание/перемещение ключей, открытие проекта, пререндеринг).
Чистота структуры (легко и быстро читаемые прежде всего вам названия слоёв, объектов, кистей, темплейтов). Если вы задумались над элементом значит, название для него подобрано неудачное.
Простая система наименования сцен.
Качественное планирование (сценарий, сториборд, аниматик, Списки требуемых фонов, персонажей, пропсов, эффектов и т.д.). По умолчанию получается Анимация в воде слишком гладкая, нет динамики. Планирование в итоге просто сэкономит время, а поднимет анимацию на уровень выше.
Специализация. Делать работу по этапам (только фоны подряд или только риги или только пропсы). Без разницы в какой очерёдности.
Оптимизация количества локаций, фонов, количество персонажей не рисовать ненужное, несущественное, не значимое, не несущее ценной информации.
Стилизация картинки (упрощение) условные блики на стёклах, ограниченная цветовая схема на весь проект и т.д.
Скелетный подход. Накидать сцены в грубую, а потом дополишовывать (в итоге эффективнее, чем вылизывать каждую сцену до идеала).

Рисование фонов. Фоны нужно рисовать с учётом предполагаемого композитинга:
Каждый элемент фона на отдельном слое, чтобы можно было на этапе композитинга передвинуть объекты и использовать эффект параллакса.
Рисовать фоны важно в перспективе (Прямые анфас и профиль не интересные, всегда интересны перекрестки, углы, склоны, подъёмы).
Одинаковости в мире не существует (даже одинаковые элементы должны различаться деталями).
Аккуратно с детализацией (изляшняя проработка фона может отвлечь внимание зрителя с важных событий).

Риггинг. Риги нужно конструировать, учитывая:
Характер, особенности персонажа (какой он, какие движения ему потребуются, в каких ракурсах он нужен в сценах, планируются ли диалоги). Если не спланируете риг заранее, это может значительно затянуть время производства мультфильма.
Персонажа рисовать прежде всего стоит в ракурсе 3/4, спереди. Самый важный ракурс персонажа. Он чаще всего будет использоваться. Если вы планируете делать диалоги, то хорошо разнообразят картину 3/4 сзади собеседников персонажа.
Максимально упрощайте своего персонажа (без лишних деталей, текстур) гораздо ценнее вложить время в качественную анимацию, что в красивые риги с плохими движениями.
Наименование слоёв для быстрого ориентирования (и здесь тоже).
Важность установки осей вращения (Pivot Point) в темплейте.
Требуемый стиль (реалистичность, резиновость), возможности и ограничения техники перекладки.

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

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

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

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

Из песочницы Хочешь, чтобы тебе поставили корректную дизайн-задачу? Помоги продакту ее поставить

20.06.2020 22:18:04 | Автор: admin
Однажды в деревне мой дядя Слава спросил, чем я занимаюсь. Большой, мол, уже, 25 лет. Должен же чем-то заниматься. Я ответил, что работаю в Москве дизайнером мобильных приложений. Он кивнул и помолчал с полминуты. Потом переспросил: Так это значит в телефоне там все рисуешь? Да, говорю, чтобы не распространяться. Он достает из кармана кнопочную Nokia и протягивает ее мне мол, давай, показывай, что ты из этого нарисовал. Вот эту иконку сообщения или ту, с телефонным справочником?

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

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

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

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

Первый этап. Пользователь


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

Спросите у продакта:

  1. Как пользователь решает эту задачу сейчас?
  2. Какой результат для пользователя мы хотим получить?

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

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

Второй этап. Бизнес


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

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

Спросите у продакта:

  1. Давай представим, что все сработало идеально. Чего мы тогда достигли? Как это отразилось на бизнесе?
  2. Сколько это в цифрах?

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

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

Третий этап. Что происходит с продуктом?


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

Но чаще всего ответы ближе, чем кажутся у продакта. Спросите его, и он сам всё расскажет:

  1. Кто наши конкуренты?
  2. Где можно посмотреть продуктовую аналитику? Где можно взять события метрики?
  3. Проводились ли какие-то качественные или количественные исследования? Где их можно посмотреть?

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

Четвертый этап. Сроки


Уточните, сколько времени у вас есть на поиск решения, чтобы спланировать работу.

Спросите у продакта:

  1. Когда хотим в продакшен?
  2. Когда должен быть готов дизайн?
  3. Насколько это жёсткие сроки? Можно ли их двигать?

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

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

Пятый этап. Технические особенности


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

Спросите у продакта:

  1. На какие фронты хотим раскатить фичу? Веб, мобилка, другие фронты?
  2. Есть ли какие-то технические ограничения, о которых мне стоит знать?
  3. Если процесс дорабатывается, то как посмотреть существующий процесс? Есть ли тестовые данные?
  4. Если уже есть бэк, то есть ли документация ответов?
  5. Можем ли мы менять бэк?

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

Контакты


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

Спросите у продакта:

  1. У кого можно узнать специфику продукта? Его продуктовые особенности? Особенности системы?
  2. Как достучаться до этих людей? Почта/телеграм/вотсап?
  3. С кем внутри команды согласовывать драфты дизайна?
  4. Как лучше согласовывать решение? Встреча? Письмо? Другое?

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

Пользователь


  1. Как пользователь решает задачу сейчас?
  2. Какой результат мы хотим получить для пользователя?

Продукт


  1. Чего мы хотим достичь?
  2. Сколько это в цифрах?
  3. Кто наши конкуренты?
  4. Где можно посмотреть продуктовую аналитику? Где можно взять события?
  5. Проводились ли какие то качественные или количественные исследования? Где их можно посмотреть?

Сроки


  1. Когда хотим в прод?
  2. Когда дизайн должен быть готов?
  3. Сроки жёсткие? Есть ли возможность их двигать?

Технические ограничения


  1. На какие фронты хотим раскатить фичу? Веб, мобилка?
  2. Есть ли какие-то технические ограничения, о которых вам стоит знать?
  3. Если процесс дорабатывается, то как посмотреть существующий процесс? Есть ли тестовые данные?
  4. Если уже есть бэк, то есть ли документация ответов?
  5. Можем ли мы менять бэк?

Коммуникация


  1. У кого можно узнать специфику продукта? Его продуктовые особенности? Особенности системы?
  2. Как достучаться до этих людей? Почта/телеграм/вотсап?
  3. С кем внутри команды согласовывать драфты дизайна?
  4. Как лучше согласовывать решение? Встреча? Письмо? Другое?
Подробнее..

Из песочницы Разбор UIUX на примере прототипа в Figma и основные принципы

24.06.2020 16:09:31 | Автор: admin

Кому адресована статья


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

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

Сначала я кратко опишу, что такое прототип и UI/UX дизайн, потом опишу инструменты для их создания, а в конце статьи пошагово разберу небольшой пример создания прототипа в одном из инструментов Figma.

Вместо введения


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

image

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

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

Что такое прототип ИТ продукта? Каким он должен быть?


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

image

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

Основные принципы прототипирования:

  1. Прототип создается только после того как определена целевая аудитория, маркетинговая стратегия, каналы сбыта.
  2. В прототипе должны быть учтены основные пользовательские сценарии. При тестировании хорошей идеей является озвучить задачу и отойти подальше от пользователя. Если у последнего в ходе использования прототипа возникают множественные вопросы, то это означает, что необходимо пересмотреть и переработать сценарии использования.
  3. Прототип является интерактивной моделью, так как он направлен на проверку возможных действия пользователя, а не на согласование картинки.
  4. В основе любого прототипа должна лежать гипотеза, которую необходимо проверить. Необходимо сформулируйте гипотезу так, чтобы на нее можно было четко ответить да или нет и прописать, как именно прототип даст вам ответ на этот вопрос.
  5. При тестировании прототипа необходимо давать минимум информации потенциальному пользователю. Причина проста чем больше он наломает дров, тем лучше для продукта, так надо тестировать, а не валидировать сценарии.
  6. Проверять все, даже если есть уверенность в том или ином функционале будущего продукта.
  7. Дизайн прототипа должен быть максимально лаконичным без отвлекающих внимание пользователя ярких картинок, цветовых акцентов или перечеркнутых квадратов. Конечно, если они не являются частью проверяемой гипотезы. В этом случае, есть риск того, что пользователь зациклится на наполнении визуального интерфейса.
  8. Если есть возможность сделать прототип похожим на реальность, то именно так и стоит сделать.
  9. При тестировании необходимо просить пользователя проговаривать вслух все мысли и действия и вести видеозапись самого процесса тестирования.

image

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

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

Что такое UI/UX?


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

image

Так, что же представляют собой UI и UX дизайн?

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

UX или User Experience переводится как пользовательский опыт. То есть это про то, как работать с интерфейсом, удается ли пользователю достичь цели, легко это или сложно. UX дизайнер перекладывает клиентский опыт на интерфейс, строит и проверяет гипотезы взаимодействия пользователя с системой.

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

image

Связь прототипа и UX/UI дизайна


Является ли прототип информационной системы UX/UI дизайном? На мой взгляд, является.
Является ли UI/UX дизайн прототипом? Да, но только в случае, если бизнес логика наложена на интерфейс пользователя тем или иным способом. Если пользовательский опыт описан где-то на бумажке и его невозможно продемонстрировать клиенту на интерфейсе, то у нас есть отдельно UI и UX дизайны, но прототип отсутствует.

image

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

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

Но, что будет, если убрать экспериментатора и оставить пользователя наедине с листами бумаги? Останется UX/UI дизайн, а прототип работать не будет. А значит, будет невозможно протестировать логику работы системы.

Инструменты для создания динамических прототипов


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

Инструмент


Описание


inVision, Marvel, Flinto
Позволяют указать по клику, на какую область одного макета страницы
нужно отобразить другую.
Prott, POP
Самые простые инструменты для быстрой проверки гипотез. Достаточно нарисовать скетчи карандашом, сфотографировать и указать области, при нажатии на которые необходимо перейти на следующую страницу.
Proto.io, Framer, Origami, Form
На основе макетов страниц позволяют анимировать отдельные объекты (слои) и делать более сложные и интересные переходы.
Axure, Wireframe
При создании прототипа используются простые фигуры и ссылки на макеты, если их много.При создании прототипа используются простые фигуры и ссылки на макеты, если их много.
Webflow, Figma
По факту являются конструкторами сайтов. С их помощью можно создать первую версию продукта. Отлично подходят для прототипирования в случаях, когда вам нужно сильно больше, чем переходы между статичными экранами.
Wix, WordPress, Tilda
Конструкторы сайтов. Удобные инструменты для создания рабочих прототипов людьми, непосредственно взаимодействующими с клиентом, без привлечения профессиональных UX и UI дизайнеров.

Далее в качестве иллюстрации создания прототипа рассмотрим пример создания личной страницы в Figma.

Что такое Figma?


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

Плюсы и минусы Figma


К плюсам работы в Figma можно отнести:

  1. Бесплатна в случае, если над проектом работают не более 2х пользователей.
  2. Создание и отрисовка макета в одной программе
  3. Существует огромное количество уже готовых шаблонов сайтов
  4. Для работы с Figma требуется свежая версия браузера, а десктопная версия не требует мощного и современного компьютера.
  5. Сохранение версий проекта до 30 дней на бесплатной версии

Минусы Figma:

  1. Отсутствие русификации. Работать в Figma приходится на английском языке.
  2. Figma не работает оффлайн, так как требуется синхронизация с облаком.

Пример создания простейшего прототипа в Figma


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

Шаг 1. Регистрация


Не обязательно регистрировать отдельный аккаунт в Figma. Если у Вас есть Google-почта, то можно зайти в сервис с ее помощью. При первичном открытии Figma сразу предложит пройти краткое обучение работы с программой.

Шаг 2. Создание проекта


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

Шаг 3. Создание рабочей области страницы


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

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

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

image

Шаг 4. Добавление картинки


В Figma очень легко добавлять и обрезать картинки под любые формы. Для этого достаточно добавить на рабочую область нужные фигуру и изображение, выделить оба объекта с помощью сочетания клавиш ctrl и нажать сочетание ctrl+alt+M. При этом важно, чтобы картинка была выше фигуры. Выделять фигуры можно как на рабочей области, так и на панели слева, щелкая на их названия.

image

Шаг 5. Добавление текстового поля


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

image

Шаг 6. Создание меню


В данной статье я не преследую научить читателя всем аспектам работы с Figma, поэтому меню у нас будет самое простое двухкнопочное. Кнопки представляют собой прямоугольники, объединенные с текстовым полем. Можно объединить объекты в группу, нажав CTRL+G, а потом отцентрировать текстовое поле по центру будущих кнопок.

Шаг 7. Дублирование основы страницы


В основание страницы входит: рабочая область, меню и текстовое поле. Чтобы создать копию ее копию можно вынести маску изображения вне группы объектов первой страницы. Для этого достаточно левой кнопкой мыши нажать на название маски и перетащить иконку вверх. Затем в перечне объектов выбрать группу объектов, входящих в основание первой страницы, и нажать CTRL+D.

image

Шаг 8. Добавление внешних ссылок


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

image

Шаг 9. Добавление ссылок между страницами


Добавление ссылок на объекты внутри Figma аналогично добавлению ссылок на внешние источники за исключением того, что надо где-то взять ссылку на внутренний объект. Для этого надо кликнуть правой кнопкой мыши по объекту и выбрать в выпадающем меню Copy/Paste и Copy Link.

image

Шаг 10. Демонстрация прототипа


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

image

Результат


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

Видеоуроки по реализации прототипов в FIGMA


В качестве заключения хочу приложить ссылку на видеоуроки, созданные телеграмм-каналом Наука и дизайн. Всего 2,5 часа в 15ти уроках по использованию FIGMA, в которых рассмотрены все основные функции и кнопки.

Еще хороший ресурс с видеоуроками по созданию прототипов в Figma.
Подробнее..

Как мы решаем проблему отсутствия UIUX дизайна в 1С с помощью Java Script и React.js

03.07.2020 02:04:06 | Автор: admin
image

Ранее уже писал о том, что в 1С UI\UX дизайна нет. Эта статья про то, как мы с помощью таких технологий, как Java Script, React.js и Google Firebase решили сделать web-сервис, который позволит с наименьшими трудозатратами, в сравнении с 1С: Конфигуратором и уже тем более 1C:EDT, прорабатывать UI и UX дизайн будущего приложения на 1С, корректировать его на лету и передавать в работу программисту уже согласованный прототип будущего бизнес-приложения.


Для начала, расскажу о наболевшем при реализации проектов на 1С, причем на столько, что бросили 1С и начали развивать web-технологии, но, как ни странно, для исправления ситуации в 1С.

ЧАСТЬ 1 проблематика. Решаемые задачи.
1.Инструменты бизнес-аналитиков, руководителей проектов, менеджеров по продажам.
Не смотря на развитие технических инструментов экосистемы 1С (выше писал про 1C:EDT и т.д.), остается крайне скудным инструментарий для тех специалистов, которые находятся на передовой в проектах разработки и внедрения: бизнес-аналитиков, консультантов, руководителей проектов, именно они, одними из первых встречаются с Заказчиком, собирают требования, интерпретируют услышанное, формализуют в виде ТЗ и иных проектных документов. Более того, столько продвинутых инструментов для формирования ТЗ, прототипирования, дизайна, как у программистов, front-office не имеет. Чтобы показать Клиенту то, что его ожидает в результате проекта (программирования) консультанты рисуют формы в Paint, MS Excel и других, не далеких от удобства инструментах. До сих пор нет и единого мнения, стандарта в инструментах формализации бизнес-процессов, кто-то применяет Business Studio, кто-то Visio, сам вендор 1С: СППР и т.д., не говоря уже про стандартную нотацию (IDF0, ARIS и т.д.).

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

3.Коммуникации и сложность восприятия. Online внедрения 1С.
Классика: Заказчик говорит одно, подразумевает другое, аналитик третье, а программист четвертое. В текущих реалиях на это дополнительно накладываются карантинные ограничения очных встреч, начинаются внедрения по удаленке.

4.UI и UX дизайн, проработка интерфейсов решений на 1С.
Уже не первый год в сообществе 1С произносятся и обсуждаются такие термины, как UI, UX, сейчас мы о них поговорим, а ещё поговорим и про CX.
User Experience (UX) пользовательский опыт. Цель UX-дизайнера сделать так, чтобы пользователь быстро и легко получил от программы то, зачем он её использует.
User Interface (UI) пользовательский интерфейс. Цель UI-дизайнера создать эстетичный дизайн интерфейса продукта.
Наиболее яркий пример UI и UX в быту (это не только ИТ-ые термины :-), когда UI хорошо, а вот UX нет:
image
Исправляем ситуацию и подтягиваем до высокого уровня UX:
image
Грань между UI и UX очень тонкая и порой её сложно отличить, но она есть.
А знаете ли Вы, что UI и UX напрямую влияют на CX?
CX (customer experience) клиентский опыт. Ваш продукт это лицо Вашей компании или личного бренда (репутации). Хорошо спроектированное, продуманное программное решение с красивым дизайном повышает лояльность (NPS) клиентов к Вашему бренду и компании.
В итоге, корреляция этих трех составляющих следующая:
image

5.Кадровый голод.
Так было, так есть и так будет всегда и не только в ИТ индустрии. Победить эту проблему мы не сможем, но минимизировать однозначно. При этом сообщество 1С нуждается не только в программистах, как ещё говорят технарях, но и бизнес-аналитиках, РП-ах, администраторах гуманитариях. Выше я сказал, что в смежных отраслях, таких как разработка сайтов и мобильных приложений есть такие специалисты (профессии), как UI\UX (не редко их совмещают в одном лице) дизайнеры, а в 1С отрасли UI\UX дизайнер это программист. Нужно привлечь в отрасль UI и UX дизайнеров, начать их выращивать, это даст тройной эффект:
1.Высвободит время программистов, переложит часть предварительной работы на дизайнеров.
2. Повысит качество конечного продукта, через более глубокую проработку удобства и эстетики интерфейса.
3. Расширит рынок специалистов, позволит привлечь в отрасль больше гуманитариев (дизайнеров, маркетологов, переводчиков и т.д.).

Итак, коротко перечислим решаемые проблемы:
1. Отсутствие простых и удобных инструментов для бизнес-аналитиков, консультантов, руководителей проектов. Более того, каждый в своей практике встречал таких менеджеров со стороны Заказчика, которые программировать не умели, но объяснить, нарисовать, что именно хотят, более чем могли, был бы адекватный для этого инструмент.
2. Увеличение сроков проекта, бюджета, снижение лояльности в результате многократных итераций сдачи работ, вызванных порой недопониманием, которое может быть снято на ранних стадиях проекта.
3. Коммуникации и сложность восприятия, усиливающиеся удаленной работой и все большего перехода в режим online работы и внедрений проектов на 1СВнешний вид и дизайн есть доклады
4. Удобство и качество интерфейсов, ежедневно повышающиеся требования заказчиков в более глубокой проработке UI\UX дизайна решений. Конкуренция со стороны Web продуктов. Сложности в коммуникациях и понимании друг друга
5. Кадровый голод.

Часть 2 применение web-технологий для популяризации 1С-технологий 1С. Решение обозначенных проблем.
В ходе осмысления и поиска решений обозначенных проблем были сформулированы требования к будущему продукту:
1. Инструмент должен быть простым, интуитивно понятным, позволяющим начинающим бизнес-аналитикам и консультантам в кратчайшие сроки освоить механизм прототипирования решений на 1С.
2. Online, не требующий установки и лицензий 1С предприятия, доступный широкой аудитории.
3. Простота и удобство работы над UI и UX дизайном, которое позволит спроектировать оптимальный интерфейс без привлечения программиста, на этапе сбора требований.
4. Возможность совместной работы исполнителя (бизнес-аналитика) и заказчика в online режиме с целью повышения качества коммуникации и снижения негативных факторов перехода на online режим работы и взаимодействия.
5. Еще по ходу добавилось требование мультиязычного интерфейса и возможность простого, автоматического перевода интерфейс на наиболее востребованные языки.

Обзор технологий

Frontend
В основе лежит Single Page Application подход и фреймворк React.
ru.reactjs.org
Для реализации UI конструктора форм возьмем Material UI.
material-ui.com/ru
Сетка для проектирования форм и реализации колонок будет взята тоже из
Material, но потребует настройки.
material-ui.com/ru/components/grid
Примеры реализации аналогичной идеи Drag&Drop создания макета из
элементов:
github.com/chriskitson/react-drag-drop-layout-builder
github.com/kiho/react-form-builder
github.com/saravananangu/react-drag-drop-form-builde

Backend
На первом этапе достаточно использовать serverless подход и взять Google Firebase за основу.
В дальнейшем начнем разработку собственного backend-приложения на Node.js.

Архитектура:
image

Что получилось в итоге, разберем по порядку функционал:
1. Online сервис, не требующий развертывания платформы, лицензий 1С, доступный всегда и везде.
image
2. Простой и понятный конструктор прототипирования форм 1С.
image
3. Возможность поделиться ссылкой даже с тему, у кого нет аккаунта.
ПРИМЕР

4. Online отображение изменений при редактировании форм: исполнитель вносит корректировки, заказчик по ссылке видит изменения online (страницу браузера обновлять не нужно).
image
5. Создание проектной документации (ТЗ, ТП) становится на много проще, а главное они выглядят более реалистично имеют деловой стиль и стандарт.
6. Приятной неожиданностью стало то, что web-технологии открыли новые возможности, которые не планировались, а именно автоматический online перевод текстов на любой язык.
image

Часть 3 заключение.
Мы надеемся, что 1CMaker позволит решить обозначенные проблемы, снизит порог вхождения в отрасль, позволит привлечь новые кадры и даже создаст новую компетенцию в 1С сообществе UI\UX дизайнер (1С: Дизайнер). Начало положено, но это только начало и мы планируем ещё много вкусного реализовать:
1. Выгрузка формы в XML формате.
2. Адаптировать интерфейс под мобильную платформу.
3. Выгрузка спроектированных форм с описанием в формате MS Word шаблон технического задания.
4. Задач на разработку и оценка трудозатрат.
5. Связи между объектами и т.д. и т.п.

Спасибо, что дочитали до конца, удачных Вам проектов и помните: Красота спасет мир (Ф.М.Достоевский)!
Подробнее..

Категории

Последние комментарии

© 2006-2020, personeltest.ru