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

На сайте есть live demo реальных полётов, которые можно потыкать и посмотреть возможности продукта, вот такой например.

У меня начинается новый сезон преподавания в вышке и в этот раз решила сделать процесс обучения студентов чуть удобнее:

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

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

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

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

Посмотрим какой уровень проектов получу от ребят в этом модуле. Прошлый раз приятно удивил, может даже покажу как-нибудь КАК МНЕ РАЗРЕШАТ

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

Если что это скрин рефов моей 19 летней студентки, которая делает дизайн своего сайта брендингового агенства.

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

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

Напомню, что умел плагин в прошлый раз:

- через внутреннее API доставать карточки статей и видео
- ручное копирование конкретного текста или картинки по кнопке
- автоматически подставлять все данные из карточек в соответствующий компонент, привязываясь к названиям слоёв

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

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

2. Новости. Так как мы сильно свернули в сторону новостного контента, его сейчас много в ленте и не только. Разрабы дали мне еще две апишки их которых более менее легко удалось вытащить весь текст, но не изображения. Некоторые аватарки изданий и все фото из новостных сюжетов тянутся напрямую с персональных сайтов изданий, где прям урл в формате “rbc.ru/image.jpg”. А плагин фигмы мало того, что требует прямо список разрешенных доменов каждого издания, чтобы брать что-то из контента оттуда, так еще и CORS ограничения запрещают это делать напрямую из плагина. Решением оказался локальный сервер, который работает на устройстве пользователя пока тот работает с плагином и имитирует работу браузера, тем самым позволяя обходить CORS и не требуется каждый сайт издания добавлять в Allowed Domains. Возвращаясь к моим недавним инсайтам из вайбкодинга: для такого плагина нужны специфичные знания веб-разработчика и я бы потратила ни один год, чтобы допереть до этого самостоятельно, начинай я честно с нуля.

3. Реклама. Тут основная сложность была в том, чтобы допереть как работает реклама в Дзене (а оказалось, что и не только в Дзене). Никакого NDA, расскажу как тянется Яндексовая реклама на наши с вами сайты. Находясь на каком-либо сайте, куки и прочие параметры, отправляются в Яндексовое API и оно в ответ отдает сайту индвидуальную рекламную джесонину для каждого пользователя, на каждое рекламное место. Ходить напрямую в Яндекс за этой рекламой я не могу, потому что мне по идее надо регаться у них в системе и просить за показы рекламы деньги, так как в этом весь смысл этого API. Я даже все таки зарегалась и посмотрела, что поставить 0 рублей за показ рекламы нельзя, так как в моих планах не было наёба Яндекса на «псевдопоказы» из плагина. По итогу через тот же локальный сервер, который я использую для новостей, я делаю такие же Request URL, которые собираю в формате HAR файла с Дзена просто пролистывая страницу (в видео как раз это делаю в начале). Собственно, каждый юзер плагина будет аналогичным образом загружать в него свой «рекламный профиль» и получать рекламу под себя. Это не необходимость, а единственное адекватное решение на данный момент. Гипотетически можно и сервак сделать, на который положить несколько HAR файлов наших дизайнеров и в рандомном порядке выкидывать рекламы из них, но мне пока не хочется платить деньги за хостинг собственного сервера. Есть еще проблема с тем, что на моей стороне нет никакого контроля над тем, какая реклама попадётся, то есть в том числе будут дубли.

С типами контента разобрались, а теперь о приятных UX фичах:

1. После вставки контентной карточки в инстанс, автоматически перелистываем на следующую контентную карточку.

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

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

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

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

А вы что вайбкодите? Показывайте, рассказывайте)

Post credit scene

А вот в наших апках разрабы уже хотели лотти. Казалось бы, зайти в файле в афтере, да экспортировать оригинальную анимацию, но нет… По сути, в афтере же чистая математика разных накладывающихся эффектов, а лотти такие штуки просто не видит при экспорте, так как работает с точками и конкретными фигурами. Какое-то время я безуспешно пыталась гуглить и общаться с перплексити о том, как всё таки мои эффекты в AE «распечь», но, к сожалению, варианта кроме как вручную перерисовать все звёздочки я не нашла. Предвкушая очень долгую и очень тупую работу в афтере, решила, что из такого дела нужно сделать таймлапс. Увы, я не самый большой эксперт в AE, так как сижу там дай бог 5% от всего своего дизайнерского времени, может и был вариант попроще.

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

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

2. Скрытие таб-бара до обратного скролла. Так как основное потребление контента всё таки идёт с главной, смысла в таб-баре на первом же экране не было.

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