Дизайн диктатура
937 subscribers
69 photos
27 videos
30 links
Автор - Маргарита Романова. По вопросам - @berchikk

Только авторский контент про дизайн, инструменты дизайнера, карьеру и IT.

Про менторство у меня - https://mromanova.webflow.io/mentorship/?utm_source=google&utm_medium=email&utm_term=UIztVL
Download Telegram
Меня 3 человека многие спрашивали «Рита, а как выглядит дизайнерская дипломная работа в университете? Там ведь ГОСТы и всё такое. Министерство образования врят ли просто так учёную степень за картинки брендинга выдаст наверное?». Это хороший вопрос, расскажу как в НИУ ВШЭ решили эту проблему. Мне кажется тема интересная, тем более, что я всё таки зверь редкий — дизайнер с дизайнерской магистратурой.

Работа над дипломом ведётся в несколько этапов. Есть, собственно, сама дипломная работа, и в контексте моей специальности «Арт-дирекшен» это был какой-то брендинг, где всё как обычно: картинки, видосики, презентация. А есть госушная часть под названием визуальное исследование, которая существует как доказательство проведённого научного исследования и как физический артефакт работы студента. Точно такой же по статусу как сшитый диплом, который мы носим на защиту. ВИ - это такая исследовательская работа по истории разных визуальных образов, которые сопровождают тему диплома студента. Например, в моём случае тема диплома — «Ребрендинг национального музея ковра в Баку», а тема визуального исследования — «Культура ковров Азербайджана сквозь историю». И ты прям реально собираешь материалы, читаешь старые книги по теме и по итогу пишешь какие-то свои выводы. Ну то есть всё почти что как с обычным дипломом. Но так как это всё таки диплом дизайнера, будет странно, что целый модуль студент будет заниматься написанием текста, поэтому в вышке из этого сделали дисциплину по вёрстке своей собственной книги, которую ты потом печатаешь и сдаёшь в архив. И oh boy, как же с этим нужно было париться.

Покажу пару скринов из своего исследования, но это очень среднечковая работа. Примеров получше уйма в канале Унежить душу, можете их найти по поисковому запросу «визуальное исследование». Это чаще всего именно работы из вышки.
❤‍🔥113
Я это всё писала, чтобы поделиться классным ВИ на тему мифологии Коми. Душа радуется каждый раз, когда вижу хорошие примеры дизайна из родного региона. Массово скупаю всё, что делают в Душа республики.
2
Мифология Республики Коми

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

Книга состоит из трех глав:
1. Мифы и легенды народа Коми
2. Шаманизм
3. Праздники, обряды и традиции

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

Такие table book мы берем!
🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Возвращаясь к вопросу об интересных продуктах с уникальным функционалом. Позвали меня как-то в ковидном 2020-м году делать с нуля платформу для загрузки и анализа логов самолёта для частных пилотов. Какой же классный был опыт погружения в новую предметную область. И что самое офигенное - это продукт, который решает абсолютно валидную и понятную проблему своих юзеров, с классным виженом создателя. Пилоты хотят понимать как они летают, как расходуют топливо, где не справились с манёвром и тд. Вся эта информация достаётся из логов, где есть абсолютно всё, а продукт эти данные интерпретирует и предоставляет в доступном и понятном для юзера виде. Радостно видеть, что сегодня у ребят всё хорошо и пилоты очень позитивно отзываются о продукте.

На сайте есть live demo реальных полётов, которые можно потыкать и посмотреть возможности продукта, вот такой например.
1🔥18
This media is not supported in your browser
VIEW IN TELEGRAM
У меня начинается новый сезон преподавания в вышке и в этот раз решила сделать процесс обучения студентов чуть удобнее:

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

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

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

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

Посмотрим какой уровень проектов получу от ребят в этом модуле. Прошлый раз приятно удивил, может даже покажу как-нибудь КАК МНЕ РАЗРЕШАТ
🔥193❤‍🔥1👍1
Старпёры-дизайнеры, вы не готовы к тому, какую эстетику сегодняшние студенты зумеры будут двигать в массы через пару лет.

Если что это скрин рефов моей 19 летней студентки, которая делает дизайн своего сайта брендингового агенства.
🔥17😁6🌚63😱1
Я тоже всё пытаюсь концептить в этой эстетике старого веба/брутализма, но не хватает мне пока смелости выкинуть весь многолетний дизайнеский контекст и просто какой-то рок-н-ролл как молодёжь захерачить
15
Forwarded from duo sapiens* (Евгений Р.)
на ¡portfolio hero 7! изменения! но приятные

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

рассказывать будут наши менторы:

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

🙆 таня богомолова — продуктовый дизайнер в альфа-банк, наставник в bbe



если вы ещё не участвуете в ¡portfolio hero 7! — сейчас последняя возможность присоединиться. 22 и 23 декабря будем разбирать последние кейсы, вы можете прислать свой до 21 декабря

регистрация и подробности !ph7! — в боте @portfolioherobot
Please open Telegram to view this post
VIEW IN TELEGRAM
10🔥2
Дизайн диктатура
И что же я сделала? Давно мною желанный плагин для фигмы, только для дизайнеров Дзена. Плагин берёт реальные контентные карточки с холодной ленты пользователя с прода и подставляет их в инстансы компонентов. Это очень важно для нас, как для дизайнеров, так…
Media is too big
VIEW IN TELEGRAM
Конец декабря и январские каникулы я решила потратить на то, чтобы довайбкодить все основные хотелки по нашему внутреннему плагину «Базовичок», который вставляет в макеты фигмы реальный контент из Дзена.

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

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

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

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

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

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

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

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

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

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

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

А вы что вайбкодите? Показывайте, рассказывайте)
🔥133
Success story про дизайнерский вайбкодинг

Делали мы недавно задачу по AI дайджесту на главной для ПРО пользователей. Хотелось сделать «магическую» анимацию генерации дайджеста, тем более, что генерируется он достаточно медленно и было бы банально оставить обычный крутящийся лоадер. Мне пришла идея с «рассыпающимися» звездочками, реализацию которой я нашла потом на ютубе в видеоуроке по афтеру. Всего час работы и получилось в AE сделать достаточно прикольную анимашку, которую потенциально можно потом выгрузить в лотти, но, увы, для оптимизации загрузки страницы, в вебе мы не используем никакие сторонние библиотеки для анимаций. А это значит нужна чистая JS анимация, которую разработчику будет скорее всего лень делать и все участники процесса аккуратненько сольются, как это обычно бывает. Тут то на помощь мне и пришёл вайбкодинг. Пару часов и получилось сделать ровно то, что я задумывала, а также заложить разные настройки кастомизации такой штуки. По итогу анимацию действительно затащили и сегодня её уже можно наблюдать в проде если вы юзер подписки. Правда разрабу пришлось таки переписать говнокод, полученный от меня, но тем не менее он переиспользовал формулы и логику того, что я наделала самостоятельно. А это как раз самое важное, потому что я сама придумала приколюху, сама сделала и остаётся только вопрос нормальной интеграции в кодовую базу без рисерча возможностей реализации на стороне разработки.

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

Сделай fullscreen HTML + Canvas (JS), который рисует halftone-сетку из маленьких SVG-звёздочек “Stella” (Path2D из stellaPath, viewBox 28×28). Центр волн (cx, cy) задаётся мышью/тачем (по умолчанию центр экрана).

Ключевое требование: звёздочки НЕ должны меняться “рандомно”. Их размер должен меняться строго по кольцам на воде:
- В момент, когда фронт кольца проходит через точку — звёздочка максимального размера.
- Когда кольцо уходит — звёздочка плавно уменьшается до минимального размера.

Алгоритм:
1) Сетка: шаг gridSize. В каждой клетке рисуй 1 звёздочку по центру (x, y).
2) Для каждой звёздочки считай расстояние до центра в ПИКСЕЛЯХ:
r = sqrt((x - cx)^2 + (y - cy)^2)
(так круги будут кругами; при необходимости нормализуй через min(width, height)).
3) Фронт основного кольца:
R(t) = v * t (v зависит от speed)
4) “Насколько точка близко к кольцу”:
d = abs(r - R(t))
A = exp(-(d^2)/(2*sigma^2)) (sigma = ringWidth, ширина кольца)
5) Масштаб звезды:
scale = minScale + (maxScale - minScale) * A
Это гарантирует: на кольце scale≈maxScale, вне кольца scale→minScale.
6) Несколько колец:
Для k=0..ringCount-1 используй Rk(t)=R(t) - k*ringSpacing.
Для итоговой амплитуды бери max(Ak) (или sum с clamp 0..1).

Рендер звезды:
- Используй stellaPath (SVG path из Stella Invert.svg) как Path2D.
- Без stroke, только fill (patternColor).
- Трансформации:
ctx.save();
ctx.translate(x, y);
ctx.scale((stellaBaseSize/28) * scale, (stellaBaseSize/28) * scale);
ctx.translate(-14, -14);
ctx.fill(path);
ctx.restore();

Canvas качество:
- High-DPI: canvas.width = innerWidth*dpr, canvas.height = innerHeight*dpr, ctx.scale(dpr,dpr)
- imageSmoothingEnabled = true, imageSmoothingQuality = 'high'

Контролы (минимум):
speed, gridSize, stellaBaseSize, minScale, maxScale, ringWidth(sigma), ringSpacing, ringCount,
backgroundColor + patternColor (HEX ввод допускается без “#”).
Сохранение параметров в URL (querystring) и восстановление из URL.

Важно:
- Никакого Math.random и шумов.
- Размер в точке зависит только от r и t (через близость к фронту колец).
- Кольца должны выглядеть как идеальные круги, а не овалы.
18💅3🤬1