<?xml version="1.0" encoding="utf-8" ?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:tt="http://teletype.in/" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/"><title>Denis Vo</title><subtitle>Senior UX/UI, Lead in future</subtitle><author><name>Denis Vo</name></author><id>https://teletype.in/atom/denvo</id><link rel="self" type="application/atom+xml" href="https://teletype.in/atom/denvo?offset=0"></link><link rel="alternate" type="text/html" href="https://teletype.in/@denvo?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=denvo"></link><link rel="next" type="application/rss+xml" href="https://teletype.in/atom/denvo?offset=10"></link><link rel="search" type="application/opensearchdescription+xml" title="Teletype" href="https://teletype.in/opensearch.xml"></link><updated>2026-04-11T03:45:14.533Z</updated><entry><id>denvo:gp</id><link rel="alternate" type="text/html" href="https://teletype.in/@denvo/gp?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=denvo"></link><title>Токененизация и документация UI</title><published>2025-06-25T05:58:54.349Z</published><updated>2025-08-08T05:44:32.119Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img4.teletype.in/files/b1/98/b1987f6b-e8b9-4eb8-b3fd-68856a57511e.png"></media:thumbnail><category term="portfolio" label="Портфолио"></category><tt:hashtag>дизайнер</tt:hashtag><tt:hashtag>uxuidesign</tt:hashtag><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/04/f1/04f145e9-8b61-48bd-adfa-7dddc56de280.png&quot;&gt;Меня часто спрашивают: «покажи компоненты» или что-то не дочитывают или не понимают в моих кейсах. Покажу наглядный пример уровня структуры и порядка.</summary><content type="html">
  &lt;p id=&quot;uTzi&quot;&gt;Меня часто спрашивают: «покажи компоненты» или что-то не дочитывают или не понимают в моих кейсах. Покажу наглядный пример уровня структуры и порядка.&lt;/p&gt;
  &lt;blockquote id=&quot;tNmQ&quot;&gt;Не важно какой сервис я сделал — секрет. Скажу только, что это веб сервис по страхованию здоровья и жизни. Не важно каким вышел сам дизайн (он под nda)&lt;/blockquote&gt;
  &lt;p id=&quot;cRAO&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;RBxF&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/04/f1/04f145e9-8b61-48bd-adfa-7dddc56de280.png&quot; width=&quot;1680&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;XgJh&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;eilc&quot;&gt;Компоненты&lt;/h2&gt;
  &lt;p id=&quot;JdOe&quot;&gt;Раскладываю все как у взрослых дизайн-систем с wrappers и тп. как у ростелеком.&lt;/p&gt;
  &lt;figure id=&quot;m8IA&quot; class=&quot;m_column&quot;&gt;
    &lt;iframe src=&quot;https://player.vimeo.com/video/1046207595/?autoplay=false&amp;loop=false&amp;muted=false&amp;title=true&quot;&gt;&lt;/iframe&gt;
  &lt;/figure&gt;
  &lt;h2 id=&quot;m9Nz&quot;&gt;&lt;/h2&gt;
  &lt;h2 id=&quot;qGa1&quot;&gt;Токены&lt;/h2&gt;
  &lt;p id=&quot;NuU2&quot;&gt;Могу делать самую подробную документацию для разработчиков и все описывать.&lt;/p&gt;
  &lt;figure id=&quot;CaSJ&quot; class=&quot;m_column&quot;&gt;
    &lt;iframe src=&quot;https://player.vimeo.com/video/1046202854/?autoplay=false&amp;loop=false&amp;muted=false&amp;title=true&quot;&gt;&lt;/iframe&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;7XMX&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;WwY5&quot;&gt;Тулзы сеньора&lt;/h2&gt;
  &lt;p id=&quot;yuLB&quot;&gt;Я знаю что есть плагины для палитр, но этот тул использовали дизайнеры Яндекс при построении палитр своей дизайн-системы. Так что шарю и слежу за топами.&lt;/p&gt;
  &lt;figure id=&quot;UqeE&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/04/a5/04a5e0d3-fd76-449f-8278-b1e2d05603b0.png&quot; width=&quot;2880&quot; /&gt;
  &lt;/figure&gt;
  &lt;tt-tags id=&quot;4qA1&quot;&gt;
    &lt;tt-tag name=&quot;дизайнер&quot;&gt;#дизайнер&lt;/tt-tag&gt;
    &lt;tt-tag name=&quot;uxuidesign&quot;&gt;#uxuidesign&lt;/tt-tag&gt;
  &lt;/tt-tags&gt;

</content></entry><entry><id>denvo:kv</id><link rel="alternate" type="text/html" href="https://teletype.in/@denvo/kv?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=denvo"></link><title>Визуальная коммуникация в B2C и методы ее создания и применения в продуктовом дизайне — research</title><published>2025-06-22T12:22:02.080Z</published><updated>2025-08-08T08:57:27.843Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img3.teletype.in/files/a9/4c/a94cf3c3-6498-4185-aa22-bf13b97c80ff.png"></media:thumbnail><category term="issledovanie" label="Исследование"></category><summary type="html">&lt;img src=&quot;https://img3.teletype.in/files/ac/b2/acb297ab-e59f-4e4b-b2d1-dd6fcd543315.jpeg&quot;&gt;Визуальную digital коммуникацию можно разделить на две категории</summary><content type="html">
  &lt;blockquote id=&quot;ZV2v&quot;&gt;20 лет назад коммуникация в дизайне была через фото, позже — иллюстрации сделанные из фото+ретуши (техдиз). 10 лет назад были 2D иллюстрации, 5 лет назад дизайнеры стали применять 3D, а сегодня приходит нейрография — ИИ инструменты, которые удешевляют и ускоряют процесс создания визуалов.&lt;/blockquote&gt;
  &lt;p id=&quot;VWJO&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;gObs&quot;&gt;Статья включает&lt;/p&gt;
  &lt;ul id=&quot;tGHR&quot;&gt;
    &lt;li id=&quot;goOp&quot;&gt;Исследование трендов&lt;/li&gt;
    &lt;li id=&quot;tp69&quot;&gt;Примеры 3D-визуалов и почему это не может ИИ&lt;/li&gt;
    &lt;li id=&quot;C3Kp&quot;&gt;Исследование возможностей ИИ как инструмента&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;8Nso&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;Dr8o&quot;&gt;Дизайн без актуальной визуальной коммуникации не конкурентен, крупный бизнес это знает и постоянно завышает планку с уровнем нормы пользователей. Если не соответствуете, то вы проиграете.&lt;/h3&gt;
  &lt;blockquote id=&quot;EhgM&quot;&gt;Уберите из дизайна 3d-иллюстрации, увидите просто прямоугольники с текстом. Обычный ux/ui дизайнер не умеет и не должен обогащать компоненты визуалом, поскольку это не его специализация.&lt;/blockquote&gt;
  &lt;p id=&quot;JULW&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;fPzc&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/ac/b2/acb297ab-e59f-4e4b-b2d1-dd6fcd543315.jpeg&quot; width=&quot;1920&quot; /&gt;
    &lt;figcaption&gt;Rostelecom, Reg.ru&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;F9YW&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;G9ha&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/df/64/df64dd3d-665d-451b-9de5-3879dc177d19.jpeg&quot; width=&quot;1920&quot; /&gt;
    &lt;figcaption&gt;Dombank&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;e44E&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;Hp3y&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/86/bf/86bf5b63-bba8-4df1-9484-ff4666a81983.jpeg&quot; width=&quot;1920&quot; /&gt;
    &lt;figcaption&gt;Alfabank, Yandex&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;FmYK&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;TZok&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/e8/c3/e8c3e2b2-7e22-4fe0-afd9-d945066bd6cd.jpeg&quot; width=&quot;1920&quot; /&gt;
    &lt;figcaption&gt;Humbleteam — визуалы делались долго и дорого (этого не может ИИ нейрография)&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;NJzK&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;qO3M&quot;&gt;Пример hi-end визуальной коммуникации после ребрендинга МТС. &lt;/p&gt;
  &lt;figure id=&quot;iVT1&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/88/28/88286b00-a673-43d6-9aeb-eb26fc1ada27.jpeg&quot; width=&quot;1920&quot; /&gt;
    &lt;figcaption&gt;МТС, иллюстратор &lt;a href=&quot;https://www.behance.net/albertoolenin&quot; target=&quot;_blank&quot;&gt;Albert Olenin&lt;/a&gt; (инструменты: Cinema 4D + Octane/Redshift)&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;98hp&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;mcoQ&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/3a/65/3a65fca1-8b8b-4cde-af19-811c7728b389.png&quot; width=&quot;2524&quot; /&gt;
    &lt;figcaption&gt;Пример процесса работы работы 3D-иллюстратора (workflow описан в чипсах)&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;obMY&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;NHn6&quot;&gt;Качество детализации, которое пока не может сделать ИИ&lt;/p&gt;
  &lt;figure id=&quot;KFJF&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/12/30/1230a7fb-2e6d-4b27-b4e1-d35ae209235a.jpeg&quot; width=&quot;1920&quot; /&gt;
    &lt;figcaption&gt;Nic.ru и reg.ru&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;wuOr&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;fYjR&quot;&gt;Возможности ИИ нейрографии для улучшения или создания визуальной коммуникации&lt;/h2&gt;
  &lt;p id=&quot;UhOG&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;VrOF&quot;&gt;Генерация&lt;/h3&gt;
  &lt;p id=&quot;LdRX&quot;&gt;Можно сгенерировать любой элемент иллюстрации или визуал целиком, если он семантически простой (состоит не более чем из 2 элементов).&lt;/p&gt;
  &lt;figure id=&quot;tTsq&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/a6/ed/a6ed8cb8-c52f-4012-b320-85eb2d39e0e7.png&quot; width=&quot;1024&quot; /&gt;
    &lt;figcaption&gt;chatGPT&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;jyfA&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;zXMy&quot;&gt;Улучшение&lt;/h3&gt;
  &lt;p id=&quot;9Dv2&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;e3ZM&quot;&gt;После генерации изображение можно улучшить или детализировать&lt;/p&gt;
  &lt;figure id=&quot;XWae&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/90/8d/908dbf57-4860-49f9-a75c-80b458305c25.jpeg&quot; width=&quot;1920&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;5knd&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/15/13/151304f2-390c-405b-b96c-a4d72cc9946c.jpeg&quot; width=&quot;1920&quot; /&gt;
    &lt;figcaption&gt;Улучшение качества старых визуалов (прим. domrfbank.ru)&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;pUKY&quot;&gt;Создавать можно уникальные svg иконки, 3d-объекты на основе текста (например цифры для FinTech), стилизованные и фото-реалистичные иллюстрации (FoodTech).&lt;/p&gt;
  &lt;figure id=&quot;1P6T&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/de/3d/de3d841e-ca63-4490-a8f5-b2ff52000200.jpeg&quot; width=&quot;1920&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;hZfM&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;XhrC&quot;&gt;Я обладаю экспертизой и насмотренностью, поэтому отдавать задачи дизайнерам и контролировать качество визуальной коммуникации, а также делать их сам если у вас маленькая команда до момента ее расширения и найма коммуникационных дизайнеров. Артдирекшн гарантирую.&lt;/p&gt;
  &lt;p id=&quot;UTOU&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;LZfR&quot;&gt;Ссылки&lt;/h2&gt;
  &lt;p id=&quot;GVHq&quot;&gt;&lt;/p&gt;
  &lt;ul id=&quot;ePNW&quot;&gt;
    &lt;li id=&quot;AOcd&quot;&gt;&lt;a href=&quot;https://yandex.ru/yaintern/&quot; target=&quot;_blank&quot;&gt;yandex.ru/yaintern&lt;/a&gt; — графика в стиле pixel art&lt;/li&gt;
    &lt;li id=&quot;wXse&quot;&gt;&lt;a href=&quot;https://sbermobile.ru/&quot; target=&quot;_blank&quot;&gt;sbermobile.ru&lt;/a&gt; — очевидное применение ИИ&lt;/li&gt;
    &lt;li id=&quot;MlN6&quot;&gt;&lt;a href=&quot;https://yandex.ru/youngcon&quot; target=&quot;_blank&quot;&gt;yandex.ru/youngcon&lt;/a&gt; — ИИ Deep Fake и Lora для людей-супергероев&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;tFiU&quot;&gt;&lt;/p&gt;
  &lt;ul id=&quot;Og2H&quot;&gt;
    &lt;li id=&quot;UU71&quot;&gt;&lt;a href=&quot;https://www.behance.net/albertoolenin&quot; target=&quot;_blank&quot;&gt;Альберт Оленин&lt;/a&gt; — МТС&lt;/li&gt;
    &lt;li id=&quot;YYxW&quot;&gt;&lt;a href=&quot;https://www.behance.net/eremeevd&quot; target=&quot;_blank&quot;&gt;Дмитрий Еремеев&lt;/a&gt; — ТБанк&lt;/li&gt;
    &lt;li id=&quot;QZjj&quot;&gt;&lt;a href=&quot;https://www.behance.net/gallery/205173155/Ozon-Bank-sommunications?tracking_source=search_projects%7Cozon+3d&amp;l=3&quot; target=&quot;_blank&quot;&gt;Екатерина Тарасенко&lt;/a&gt; — Ozon&lt;/li&gt;
    &lt;li id=&quot;htF3&quot;&gt;&lt;a href=&quot;https://www.behance.net/sevsilver&quot; target=&quot;_blank&quot;&gt;Никита Шульгович&lt;/a&gt; — Ozon&lt;/li&gt;
    &lt;li id=&quot;rq0d&quot;&gt;&lt;a href=&quot;https://www.behance.net/gallery/146686773/Tinkoff-3D-visual-case?tracking_source=search_projects%7Ctinkoff+3d&amp;l=1&quot; target=&quot;_blank&quot;&gt;Pragmatica&lt;/a&gt; — топовый уровень коммуникации&lt;/li&gt;
    &lt;li id=&quot;KZyN&quot;&gt;&lt;a href=&quot;https://www.behance.net/gallery/158852593/Ozon-Bank-Brand-Architecture?tracking_source=search_projects%7Cozon+3d&amp;l=1&quot; target=&quot;_blank&quot;&gt;Команда 2&lt;/a&gt; — Ozon&lt;/li&gt;
    &lt;li id=&quot;eF4g&quot;&gt;&lt;a href=&quot;https://www.behance.net/gallery/159054855/VTB-3D-Visual-Case?tracking_source=project_owner_other_projects&quot; target=&quot;_blank&quot;&gt;Команда 3&lt;/a&gt; — ВТБ&lt;/li&gt;
  &lt;/ul&gt;

</content></entry><entry><id>denvo:ai_tools</id><link rel="alternate" type="text/html" href="https://teletype.in/@denvo/ai_tools?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=denvo"></link><title>Сервисы работы с генеративными ИИ для использования в workflow* визуальной digital коммуникации — research</title><published>2025-06-20T02:51:25.910Z</published><updated>2025-08-08T09:04:47.772Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img2.teletype.in/files/58/8f/588f17f4-6090-49ea-9e7b-770d14576cdd.png"></media:thumbnail><category term="issledovanie" label="Исследование"></category><summary type="html">&lt;img src=&quot;https://img2.teletype.in/files/98/6c/986cd6ba-d802-4ad7-afd6-6405a41de8fe.png&quot;&gt;* имиджи сами по себе, без интеграции в систему визуальной коммуникации ничего не стоят, это лишь часть рабочего процесса любого дизайн агентства.</summary><content type="html">
  &lt;p id=&quot;pptc&quot;&gt;В статье&lt;/p&gt;
  &lt;ul id=&quot;s1dk&quot;&gt;
    &lt;li id=&quot;NLAc&quot;&gt;Сравнительный анализ (бенчмаркинг) сервисов по работе с нейрографией&lt;/li&gt;
    &lt;li id=&quot;rUlx&quot;&gt;Примеры моей работы в инструментах в подтверждение моих знаний&lt;/li&gt;
    &lt;li id=&quot;qEYZ&quot;&gt;Выводы (какие тулзы наилучшие для тех или иных целей)&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;s2bl&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;dCXD&quot;&gt;Сервисы&lt;/h2&gt;
  &lt;p id=&quot;nVrR&quot;&gt;Все сервисы представляют из себя UI оболочки с интеграцией API нейросетей для каждой из которой есть выбор разных языковых моделей, например: OpenAI, FLUX, Recraft, Stable Diffusion и др.). Важно понимать, что работа нейронок не зависит от оболочки (веб сервиса) с которым работает пользователь и действует независимо, поэтому выбор оболочки это дело вкуса, удобства и цены. Результат генерации от выбранного сервиса не зависит. Оценка цены будет на примере модели FLUX dev.&lt;/p&gt;
  &lt;p id=&quot;xVSW&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;x8mo&quot;&gt;&lt;a href=&quot;https://gptunnel.ru/&quot; target=&quot;_blank&quot;&gt;GPT tunnel&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;DTNC&quot;&gt;Комбайн, где есть все нейронки со всеми нейронками и их языковыми моделями. По галерее видно что сделано для народа, нежели для профессионалов. Цена за ген по FD 5р (1 img). Нет бесплатного периода, баллов для бесплатных генераций. &lt;/p&gt;
  &lt;figure id=&quot;jkmc&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/3d/d2/3dd2c87b-02e8-43d9-86d7-5a0537f9bbcd.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;GVSm&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;uLX4&quot;&gt;&lt;a href=&quot;https://app.leonardo.ai/image-generation&quot; target=&quot;_blank&quot;&gt;Leonardo&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;BhmK&quot;&gt;Любительский сервис: яркий UI, некомфортно работать и мало языковых моделей. Абонентская модель оплаты $30/мес.&lt;/p&gt;
  &lt;figure id=&quot;2xrJ&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/1e/93/1e932ff4-7a45-4973-acf3-818a6cd68ec4.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;d9ye&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;4m7o&quot;&gt;&lt;a href=&quot;https://www.piclumen.com&quot; target=&quot;_blank&quot;&gt;Piclumen&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;iHoY&quot;&gt;Лучше чем Leonardo, но тоже любительский. Есть бесплатные токены для тестов и полезные стили (Lineart — скетч). Генерит хорошо простые имиджи (прим. рыба) и цветочные паттерны. Полезен для быстрых тестов промптов и концепций.&lt;/p&gt;
  &lt;figure id=&quot;Xow8&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/41/90/41907043-66ef-4f25-a389-a3d45f8f9821.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;fAYc&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;PF60&quot;&gt;&lt;a href=&quot;http://krea.ai&quot; target=&quot;_blank&quot;&gt;Krea&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;RP2T&quot;&gt;Полу-проф оболочка, есть собственная языковая модель Krea 1, а также FLUX dev, есть большой выбор стилей и возможность тренировать свои стили при подписке. Есть фича image prompt.&lt;/p&gt;
  &lt;p id=&quot;v0V1&quot;&gt;Средняя стоимость подписки $10-28/мес на 1000-5000 images в яз. модели FLUX.&lt;/p&gt;
  &lt;figure id=&quot;exoT&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/6b/3d/6b3d88c2-bff0-4d0f-9d0c-dd5779869477.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;OiT4&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/4e/53/4e532a40-1c7e-42a1-9164-fc7ebc3f86c3.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;стили&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;oPig&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;rC63&quot;&gt;&lt;a href=&quot;https://fal.ai/dashboard/billing&quot; target=&quot;_blank&quot;&gt;Fal&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;0xif&quot;&gt;Нет бесплатных тестов, галереи и сообщества. Проф-тул, который я не тестировал. Выгоден по цене в масштабе, языковые модели SDXL (Stable Diffusion), Flux, Redux.&lt;/p&gt;
  &lt;figure id=&quot;JUZC&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/ea/0c/ea0cf8d2-ea06-4313-8016-14f7c638641a.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;9Oxx&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/ae/81/ae81f8f3-185b-4f9c-95e8-5eb855fc95bd.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;тарифы&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;VXAq&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;m2wL&quot;&gt;&lt;a href=&quot;https://mistral.ai/&quot; target=&quot;_blank&quot;&gt;Mistral&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;6LXl&quot;&gt;UX/UI chat gpt, удобство сомнительное в потоковой работе, не тестировал глубоко. Возможно имеет плюсы по цене при подписке, но не думаю, что он лучше chat gpt.&lt;/p&gt;
  &lt;figure id=&quot;1eVo&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/ba/14/ba145e2f-3d1d-4333-9644-9d537c0b73d9.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;zIhx&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;uV06&quot;&gt;&lt;a href=&quot;https://chatgpt.com/&quot; target=&quot;_blank&quot;&gt;Chatgpt&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;acx7&quot;&gt;Наиболее удобный тул для тестирования всего: prompt из images, image to image и поисковых концепций т.к. есть бесплатные токены, с ним можно сразу поговорить. Например дать на анализ изображение, спросить в каком где был сделан image и уточнить детали. Возможно улучшить любой существующий image и удалять фон. &lt;/p&gt;
  &lt;figure id=&quot;AQlk&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/ca/c3/cac39aac-cc90-4534-9fa8-f23d3dda3292.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс + image to image regenaration improvement feature&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;FCYY&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/20/7e/207e8a72-6228-4df1-bb19-8ac057f8dbbd.png&quot; width=&quot;2880&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;E6Rq&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;EhZB&quot;&gt;&lt;a href=&quot;https://replicate.com&quot; target=&quot;_blank&quot;&gt;Replicate&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;eeOo&quot;&gt;Продвинутый, профессиональный инструмент с авторизацией через GitHub. Самый большой выбор языковых моделей и стилей из всего вышеперечисленного.&lt;/p&gt;
  &lt;figure id=&quot;wUqZ&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/c7/f0/c7f0a9d4-afb4-4146-89c0-7d6c3febd2ac.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;tYPZ&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;fOwx&quot;&gt;&lt;a href=&quot;https://www.recraft.ai/&quot; target=&quot;_blank&quot;&gt;Recraft&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;XqUc&quot;&gt;Наиболее популярный и удобный инструмент для дизайнеров UI и коммуникаций. VPN dependent. Есть бесплатные токены, судя по отзывам самый удобный сервис.&lt;/p&gt;
  &lt;p id=&quot;imOA&quot;&gt;Плюсы&lt;/p&gt;
  &lt;ul id=&quot;8l24&quot;&gt;
    &lt;li id=&quot;D9Vf&quot;&gt;UI близкий к Figma, есть фреймы и группы (аналог sections), удобный workflow&lt;/li&gt;
    &lt;li id=&quot;xssT&quot;&gt;Есть много стилей, особенно удобен при генерации «векторных иллюстраций»&lt;/li&gt;
    &lt;li id=&quot;1mTj&quot;&gt;Умеет векторные иконки и иллюстрации в любом стиле c экспортом svg, lottie&lt;/li&gt;
    &lt;li id=&quot;y5ir&quot;&gt;Есть prompt to vector, image to vector, vector to image и тд. — любые операции&lt;/li&gt;
    &lt;li id=&quot;x5l6&quot;&gt;Есть функция генерации заднего фона для прозрачных png images&lt;/li&gt;
  &lt;/ul&gt;
  &lt;figure id=&quot;Xd2F&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/3f/42/3f4200c4-0194-4121-9462-1f13aa87ff0d.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс и пример генераций&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;gXn4&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/9e/1d/9e1de472-61f8-4f8b-90bc-0df1f021adc6.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс и пример генераций&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;HipY&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;Mi5V&quot;&gt;&lt;a href=&quot;https://www.pixelcut.ai/&quot; target=&quot;_blank&quot;&gt;Pixelcut&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;ImN2&quot;&gt;Отлично удаляет фон, апскейлит и редактирует изображения (условно бесплатный) High-end upsacaler-ом считается &lt;a href=&quot;https://topazlabs.com/&quot; target=&quot;_blank&quot;&gt;Topazlabs&lt;/a&gt;, не тестировал, но экспертам доверяю.&lt;/p&gt;
  &lt;figure id=&quot;LmJs&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/a1/73/a1738a1e-ab61-4054-b4cf-67f67733b4a9.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;ewYY&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;6J7n&quot;&gt;&lt;a href=&quot;http://florafauna.ai&quot; target=&quot;_blank&quot;&gt;Flora&lt;/a&gt;&lt;/h3&gt;
  &lt;p id=&quot;2dGh&quot;&gt;High-end инструмент с безграничным функционалом, благодаря системе нодов. UI самый комфортный, благодаря нодам и темной теме. Есть все языковые модели и стили. Контроль на каждом этапе — максимальная гибкость и масштабируемость.&lt;/p&gt;
  &lt;figure id=&quot;odbO&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/98/6c/986cd6ba-d802-4ad7-afd6-6405a41de8fe.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;интерфейс и тест генераций и манипуляций&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;zRYU&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/ad/d9/add94c31-73bb-498a-bf62-f23cf62a1647.png&quot; width=&quot;2880&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;EcP6&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/d7/d4/d7d47b74-8296-4927-926c-711546696d97.png&quot; width=&quot;2880&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;wpWf&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;Rr7Z&quot;&gt;Прочие&lt;/h3&gt;
  &lt;p id=&quot;qWXv&quot;&gt;Более продвинутые: &lt;a href=&quot;https://www.comfy.org/&quot; target=&quot;_blank&quot;&gt;comfy&lt;/a&gt;, &lt;a href=&quot;https://www.depthify.ai&quot; target=&quot;_blank&quot;&gt;depthify&lt;/a&gt;&lt;/p&gt;
  &lt;p id=&quot;WndP&quot;&gt;Их я не тестировал, тк это требует в первом случае своей графической карты RTX, сложной установки python и вроде работает только с Win (примеры галереи &lt;a href=&quot;https://www.comfy.org/gallery&quot; target=&quot;_blank&quot;&gt;comfy&lt;/a&gt;) во втором случае нужен процессор Apple Silicon и плагин, подключаемый к Figma.&lt;/p&gt;
  &lt;figure id=&quot;iNcg&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/e9/5c/e95ced82-aa5d-4fa3-9fa9-8805b8a42076.png&quot; width=&quot;2880&quot; /&gt;
    &lt;figcaption&gt;примеры изображений через API и Figma плагин Depthify&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;eUGU&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;RfNu&quot;&gt;Выводы&lt;/h3&gt;
  &lt;p id=&quot;Xyj5&quot;&gt;Выделю топ 3 сервисов, с чем можно быстро и удобно делать изображения&lt;/p&gt;
  &lt;ul id=&quot;SFhq&quot;&gt;
    &lt;li id=&quot;DgPX&quot;&gt;chatgpt — незаменим для быстрых тестов и рутины&lt;/li&gt;
    &lt;li id=&quot;MAHs&quot;&gt;recraft — стандартынй инструмент для дизайнеров (для базовых задач)&lt;/li&gt;
    &lt;li id=&quot;Kuxv&quot;&gt;flora — лучший сервис для тестов, экспериментов, сложных и составных изображений и развития экспертизы до pro уровня.&lt;/li&gt;
  &lt;/ul&gt;

</content></entry><entry><id>denvo:rustiming</id><link rel="alternate" type="text/html" href="https://teletype.in/@denvo/rustiming?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=denvo"></link><title>Программа управления матчем в континентальной хоккейной лиге</title><published>2025-05-26T19:31:54.992Z</published><updated>2025-06-23T20:01:40.204Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img3.teletype.in/files/e9/67/e9674a87-b228-4f69-94a5-d32379b89c6a.png"></media:thumbnail><category term="portfolio" label="Портфолио"></category><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/0b/3a/0b3ace9d-aa81-437b-b84a-23e69316789a.png&quot;&gt;Чемпионат КХЛ 3х3 — новый турнир в системе Лиги, который создан чтобы разнообразить игру, добавить зрелищности, скорости и голов. В лиге восемь команд в двух дивизионах:</summary><content type="html">
  &lt;p id=&quot;23m5&quot;&gt;Чемпионат &lt;a href=&quot;https://3x3.khl.ru/&quot; target=&quot;_blank&quot;&gt;КХЛ 3х3&lt;/a&gt; — новый турнир в системе Лиги. В лиге 8 команд в двух дивизионах: Fonbet и Winline. Пользователь программы — инспектор матча.&lt;/p&gt;
  &lt;p id=&quot;uoBw&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;wZEM&quot; class=&quot;m_retina&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/76/f2/76f298a8-9f16-4855-af17-52c536e94090.jpeg&quot; width=&quot;810&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;9ATo&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;p2sn&quot;&gt;Бизнес ценность&lt;/h2&gt;
  &lt;p id=&quot;0SGX&quot;&gt;Сделать удобный дизайн интерфейса программы с ограничением экрана 1280x720.    Отдать в разработку и провести дизайн-ревью и юзабилити-тесты.&lt;/p&gt;
  &lt;p id=&quot;NKM3&quot;&gt;Я сделал данный UX/UI всего за 1 месяц, тем самым, с учетом срока на разработку (2 месяца) компанией rustiming.com было заработано 20 млн руб.&lt;/p&gt;
  &lt;p id=&quot;qajv&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;0Ktb&quot; class=&quot;m_retina&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/0b/3a/0b3ace9d-aa81-437b-b84a-23e69316789a.png&quot; width=&quot;1400&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;IlWw&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;gWCU&quot;&gt;Что сделал&lt;/h2&gt;
  &lt;ul id=&quot;Pzp3&quot;&gt;
    &lt;li id=&quot;LI9d&quot;&gt;Интервью с пользователями (инспекторы)&lt;/li&gt;
    &lt;li id=&quot;hlCA&quot;&gt;Расписал срок дизайн-процесса, сообщив команде&lt;/li&gt;
    &lt;li id=&quot;JvpE&quot;&gt;Собрал JTBD, CJM  &lt;/li&gt;
    &lt;li id=&quot;L41V&quot;&gt;Вывел правила построения согласно CustDev&lt;/li&gt;
    &lt;li id=&quot;RIqL&quot;&gt;Userflow и Wireframe, а после Wireflow&lt;/li&gt;
    &lt;li id=&quot;d7jf&quot;&gt;Генерировал гипотезы и показывал варианты решений на демо&lt;/li&gt;
    &lt;li id=&quot;GdIK&quot;&gt;Глубинные интервью с пользователями на предмет петли улучшений&lt;/li&gt;
    &lt;li id=&quot;xCR4&quot;&gt;Подготовил дизайн и компоненты, а после проводил дизайн-ревью&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;9R1C&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;vHWB&quot;&gt;Решение&lt;/h2&gt;
  &lt;p id=&quot;PiaQ&quot;&gt;Покажу только простой UX сценарий, остальное под NDA&lt;/p&gt;
  &lt;p id=&quot;Xj1l&quot;&gt;Перед началом матча кнопки в состоянии disabled, кроме «Start» — начало матча. Два таймера показывают время периода и время матча. Это привычно инспектору.&lt;/p&gt;
  &lt;figure id=&quot;Emu3&quot; class=&quot;m_column&quot; data-caption-align=&quot;center&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/21/6a/216a8aeb-bd74-429a-aa4f-5cb249529620.png&quot; width=&quot;2560&quot; /&gt;
    &lt;figcaption&gt;В каждой команде 4 играющих и 4 запасных игрока, их можно менять&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;FXqb&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;wFZT&quot;&gt;После старта матча кнопки становятся активными, а некоторые цвето-кодированы.&lt;/p&gt;
  &lt;figure id=&quot;bCTf&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/39/3c/393cfa0b-d4e0-427e-a6d8-f6ab9f741d7d.png&quot; width=&quot;2560&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;XYb2&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;cPwJ&quot;&gt;При тапе на игрока, кнопки личных событий становятся active а другие disabled, пользователь может выбрать тип события, которое совершил игрок (вброс, аут, содействие, буллит промах, буллит гол, фол, дисквалификация и пр.) Нажав на простое событие, например «Goal» в ленте событий будет зафиксирован гол.&lt;/p&gt;
  &lt;figure id=&quot;AbfS&quot; class=&quot;m_column&quot; data-caption-align=&quot;center&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/aa/5f/aa5fd2ce-5476-4b15-9b91-164b12c0ca5b.png&quot; width=&quot;2560&quot; /&gt;
    &lt;figcaption&gt;Пользователю удобнее, если кнопка выбранного игрока будет контрастна остальным&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;i1HA&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;A3Fc&quot;&gt;Событие «Goal» зафиксировано, что отображается на табло счета и в ленте личных событий (время, номер игрока, команда игрока, событие). В компоненте «игрок» в правом-верхнем углу появляется индикатор количества голов за матч.&lt;/p&gt;
  &lt;figure id=&quot;2Qzl&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/2c/e3/2ce3f629-7aac-40a6-9ad9-395825f35b2f.png&quot; width=&quot;2560&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;Ei1W&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;6oGb&quot;&gt;Игрок номер 60 нарушил правила, тап компонента игрока и выбор категории фола «Big foul». Появляется организм drawer с выбором типа фола, а кнопка «Big foul» в состоянии pressed до тех пор пока пользователь не выбрал тип фола из вариантов.&lt;/p&gt;
  &lt;figure id=&quot;VZLW&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/46/b6/46b62129-1f48-4640-b5ab-0702e58c5190.png&quot; width=&quot;2560&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;Otqo&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;hKZT&quot;&gt;При тапе на тип фола категории «Big foul» кнопка становится белой для лучшей индикации триггера нажатия и понимания пользователем, что он зафиксировал. Типы фола расположены в той последовательности, которая удобна инспектору согласно статистически проверенным данным по частоте типа фола.&lt;/p&gt;
  &lt;figure id=&quot;YKT6&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/be/65/be654c3d-254f-480d-bb40-c7084f4c4e93.png&quot; width=&quot;2560&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;kKMn&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;7QYF&quot;&gt;Событие «Big foul» зафиксировано в ленте событий&lt;/p&gt;
  &lt;figure id=&quot;Ab74&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/bf/1a/bf1a04ec-1d15-4a6f-9c67-a407f85be4a3.png&quot; width=&quot;2560&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;N2N8&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;nfmx&quot;&gt;Прошло время, обоими командами заброшено 5 шайб и сделано 5 фолов. &lt;/p&gt;
  &lt;figure id=&quot;Rqt8&quot; class=&quot;m_retina&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/a3/32/a332c893-d97e-47de-bf30-96c7ac614a16.png&quot; width=&quot;1280&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;XMAz&quot;&gt;&lt;/h3&gt;
  &lt;h2 id=&quot;xuuQ&quot;&gt;Сеньор level hard skills&lt;/h2&gt;
  &lt;p id=&quot;1H7v&quot;&gt;Немного хард-скиллов в Figma. Узнать о проекте больше можно на тех. интервью.&lt;/p&gt;
  &lt;figure id=&quot;8vPr&quot; class=&quot;m_retina&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/b1/28/b128312e-59e6-484b-b019-3c7ee8ada513.png&quot; width=&quot;1400&quot; /&gt;
    &lt;figcaption&gt;Переменные&lt;/figcaption&gt;
  &lt;/figure&gt;

</content></entry><entry><id>denvo:sa</id><link rel="alternate" type="text/html" href="https://teletype.in/@denvo/sa?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=denvo"></link><title>Редизайн сервиса виртуальных номеров в аренду</title><published>2025-05-25T18:26:24.347Z</published><updated>2025-08-11T09:33:43.163Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img3.teletype.in/files/a1/fd/a1fd9ee9-633f-4d26-ad6b-6d01e8ba2d97.png"></media:thumbnail><category term="portfolio" label="Портфолио"></category><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/c0/7c/c07c248f-d375-4e73-9449-509c554677a3.png&quot;&gt;Сервис сдает в аренду 10К виртуальных номеров ежемесячно 220К пользователям из 16 стран. Дизайн сайта устарел и стал проигрывать новым конкурентам бизнеса.</summary><content type="html">
  &lt;p id=&quot;qW5n&quot;&gt;Сервис сдает в аренду виртуальные номера 220К пользователям из 16 стран для возможности регистрации в любых сервисах. Прошлый дизайн &lt;a href=&quot;http://sms-verification-number.com&quot; target=&quot;_blank&quot;&gt;устарел&lt;/a&gt; и просел по KPI ввиду большого числа новых конкурентов на рынке.&lt;/p&gt;
  &lt;p id=&quot;yPLy&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;20Kw&quot;&gt;Задача&lt;/h3&gt;
  &lt;p id=&quot;1jbJ&quot;&gt;Сделать новый дизайн главной посадочной страницы (Landing) и личного кабинета. Улучшить UX механику выбора сервиса и страны, а также UX пополнения баланса. Выделиться среди конкурентов через премиум стиль и темную UI тему. Улучшить пользовательский опыт, Look and Feel, что со временем приведет к росту KPI/DEU.&lt;/p&gt;
  &lt;p id=&quot;wo0u&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;9nHw&quot; class=&quot;m_retina&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/c0/7c/c07c248f-d375-4e73-9449-509c554677a3.png&quot; width=&quot;1440&quot; /&gt;
    &lt;figcaption&gt;Hero экран (продумана каждая мелочь и ничего лишнего на экране нет)&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;21P9&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;5hcf&quot;&gt;Сделал&lt;/h3&gt;
  &lt;ul id=&quot;nyfN&quot;&gt;
    &lt;li id=&quot;Bq9l&quot;&gt;Юзабилити-тестирование старого UX (протестировал UX сценарии)&lt;/li&gt;
    &lt;li id=&quot;oxfM&quot;&gt;Конкурентный анализ (взял best practices и исследовал UI тренды)&lt;/li&gt;
    &lt;li id=&quot;EwYz&quot;&gt;Проектировал wireframe и wireflow&lt;/li&gt;
    &lt;li id=&quot;H0q3&quot;&gt;Концепция: поисковые решения, подбор цветов, шрифтовой пары, лого&lt;/li&gt;
    &lt;li id=&quot;c7rp&quot;&gt;UX-тексты — улучшил все тексты согласно книге «Пиши, сокращай»&lt;/li&gt;
    &lt;li id=&quot;dKHp&quot;&gt;UI (компоненты и переменные-токены (стили, цвета, отступы и прочее)&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;iDr3&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;jPBV&quot;&gt;Посадочная страница&lt;/h2&gt;
  &lt;p id=&quot;B9ZK&quot;&gt;Быстро рассказывает о сути сервиса, вызывает доверие и показавает механику работы с сервисом. После авторизации/регистрации откроется личный кабинет.&lt;/p&gt;
  &lt;figure id=&quot;Cp8t&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/e4/a8/e4a80c64-28fa-4fcd-b5a9-cef5d1801cab.png&quot; width=&quot;2800&quot; /&gt;
    &lt;figcaption&gt;Посадочная страица сервиса&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;lqud&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;ZteU&quot;&gt;Личный кабинет&lt;/h2&gt;
  &lt;p id=&quot;LdYV&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;ILsd&quot;&gt;В каком бы разделе кабинета пользователь не был, слева всегда будет виджет с выбором сервиса и страны для аренды номера. В данном случае пользователь новый и еще не пополнил баланс, по дефолту это страница topup. Для покупки номера в аренду пользователю нужно 5 кликов (или 7-9 при поиске сервиса или страны из списка). Доступ ко страницам кабинета через dropdown навигацию по нажатию иконки профиля. В этой части сценария пользователь выбирает сервис.&lt;/p&gt;
  &lt;figure id=&quot;mXwu&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/5c/79/5c79ae47-47e8-4796-bc9b-42d9dba21151.png&quot; width=&quot;2800&quot; /&gt;
    &lt;figcaption&gt;Пока сервис не выбран, кнопку «Pay» нельзя нажать. При hover появляется соответствующих курсор (аналог с Dribbble)&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;zYwb&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;1GOW&quot;&gt;Пользователь выбрал сервис (нажатие на кнопку close возвращает его к выбору). Он выбирает страну у мобильных операторов которой будет арендован номер и это влияет на стоимость.&lt;/p&gt;
  &lt;figure id=&quot;R12N&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/bf/cf/bfcfa949-2285-4673-bc61-23262c26f831.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;1cpn&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;sJNl&quot;&gt;Сервис и страна выбраны. Метод оплаты и сумма депозита выбраны по умолчанию первые в списке, чтобы сделать лучшую интуитивность. После нажатия кнопки Pay переход на third party pay, пополнение баланса и покупка временного номера, что будет понятно пользователю после возврата, на странице «арендованные номера» где он может скопировать номер в буфер, вставить его при регистрации, получить смс код и выполнить свое целевое действие — зарегистрироваться где пожелает.&lt;/p&gt;
  &lt;figure id=&quot;wjE0&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/de/16/de16bd63-d93d-49b1-b7be-d7994a551cf5.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;Frkb&quot;&gt;&lt;/h3&gt;
  &lt;p id=&quot;i674&quot;&gt;Другие страницы ЛК показаны не будут, этого достаточно для оценки моего UX/UI.&lt;/p&gt;
  &lt;p id=&quot;I7zv&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;MvyK&quot;&gt;Кухня&lt;/h2&gt;
  &lt;p id=&quot;aqUa&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;eDwK&quot;&gt;Style Guide&lt;/h3&gt;
  &lt;p id=&quot;8mJ8&quot;&gt;Типографика, палитра, иконки и изображения. Использован один брендовый цвет для сохранения простоты и минимализма т.к. проект большего не требовал. White цвет является основным акцентным, его тон подобран чтобы снизить нагрузку на зрение в рамках Accessibility после коридорного тестирования.&lt;/p&gt;
  &lt;figure id=&quot;WKfO&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/3c/c8/3cc82f16-b199-40be-b4fa-4eb15693b33a.png&quot; width=&quot;2800&quot; /&gt;
    &lt;figcaption&gt;Ассеты растровых изображений не показываю, они также сделаны компонентами для удобства работы с адаптивом. Изображения — Key Visuals были сгенерированы в нейросетях.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;GAP0&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;aa2n&quot;&gt;Components&lt;/h3&gt;
  &lt;p id=&quot;bEV3&quot;&gt;Молекулы, организмы и шаблоны (шапка, подвал). Все компоненты кликабельны.&lt;/p&gt;
  &lt;figure id=&quot;3Oal&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/4c/d2/4cd2fcf4-5bfa-48ee-a4ca-1e83e21494a6.png&quot; width=&quot;2800&quot; /&gt;
    &lt;figcaption&gt;Показаны основные компоненты, этого достаточно для портфолийного кейса&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;mpum&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;A8XO&quot;&gt;UI Variables&lt;/h3&gt;
  &lt;p id=&quot;6OLV&quot;&gt;Переменные — мой обязательный инструмент.&lt;/p&gt;
  &lt;figure id=&quot;agdg&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/e7/bc/e7bcb59b-4e24-41eb-b398-dc9a4eee13cc.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;JAHX&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;aXXA&quot;&gt;Какой была первая версия дизайна&lt;/h3&gt;
  &lt;p id=&quot;Oiby&quot;&gt;Светлая тема не выделялась среди конкурентов, была перегрузка изображениями и лишними текстами и инфо-блоками, ее делал Middle дизайнер. Решение не было принято руководством и Senior дизайнером в моем лице.&lt;/p&gt;
  &lt;p id=&quot;OzBr&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;fxQJ&quot; class=&quot;m_column&quot; data-caption-align=&quot;center&quot;&gt;
    &lt;iframe src=&quot;https://player.vimeo.com/video/1074382671/?autoplay=false&amp;loop=false&amp;muted=false&amp;title=true&quot;&gt;&lt;/iframe&gt;
    &lt;figcaption&gt; Версия Middle дизайнера (просто технических навыков недостаточно, чтобы делать эффективный дизайн)&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;rzf7&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;vAyr&quot;&gt;Список конкурентов&lt;/h3&gt;
  &lt;p id=&quot;dKh2&quot;&gt;Чтобы оценить качество моей работы достаточно посмотреть на них:&lt;/p&gt;
  &lt;ul id=&quot;YdeW&quot;&gt;
    &lt;li id=&quot;gpSL&quot;&gt;&lt;a href=&quot;https://sms-activate.io&quot; target=&quot;_blank&quot;&gt;sms-activate.io&lt;/a&gt;&lt;/li&gt;
    &lt;li id=&quot;IeHe&quot;&gt;&lt;a href=&quot;https://quackr.io&quot; target=&quot;_blank&quot;&gt;quackr.io&lt;/a&gt;&lt;/li&gt;
    &lt;li id=&quot;5EA3&quot;&gt;&lt;a href=&quot;https://www.avoxi.com&quot; target=&quot;_blank&quot;&gt;avoxi.com&lt;/a&gt;&lt;/li&gt;
    &lt;li id=&quot;8HMl&quot;&gt;&lt;a href=&quot;https://onlinesim.io&quot; target=&quot;_blank&quot;&gt;onlinesim.io&lt;/a&gt;&lt;/li&gt;
    &lt;li id=&quot;R8j6&quot;&gt;&lt;a href=&quot;https://www.gogetsms.com&quot; target=&quot;_blank&quot;&gt;gogetsms.com&lt;/a&gt;&lt;/li&gt;
    &lt;li id=&quot;Eb0w&quot;&gt;&lt;a href=&quot;https://esimplus.me&quot; target=&quot;_blank&quot;&gt;esimplus.me&lt;/a&gt;&lt;/li&gt;
    &lt;li id=&quot;yhOQ&quot;&gt;&lt;a href=&quot;https://sms.online&quot; target=&quot;_blank&quot;&gt;sms.online&lt;/a&gt; — единственный достойный конкурент по дизайну&lt;/li&gt;
  &lt;/ul&gt;

</content></entry><entry><id>denvo:alpds</id><link rel="alternate" type="text/html" href="https://teletype.in/@denvo/alpds?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=denvo"></link><title>Мини дизайн-система для java dev с темизацией</title><published>2025-05-23T12:21:49.110Z</published><updated>2025-06-24T05:26:28.817Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img4.teletype.in/files/3e/d3/3ed39b25-d942-4360-99c1-451769cc8f56.png"></media:thumbnail><category term="portfolio" label="Портфолио"></category><summary type="html">&lt;img src=&quot;https://img1.teletype.in/files/0f/3f/0f3f40bf-ffd0-49a1-b671-249c938dfe30.png&quot;&gt;Прокачал навык создания дизайн-системы на part-time в сотрудничестве с Java-разработчиком, уложился всего в 3 недели. Уточню: я выполнял этот заказ, чтобы не простаивать, пока искал работу в новой команде в статусе безработного.</summary><content type="html">
  &lt;p id=&quot;9qgg&quot;&gt;Прокачал навык создания дизайн-системы на part-time в сотрудничестве с Java-разработчиком, уложился всего в 3 недели. Уточню: я выполнял этот заказ, чтобы не простаивать, пока искал работу в новой команде в статусе безработного. &lt;/p&gt;
  &lt;blockquote id=&quot;vexC&quot;&gt;Это не привилегированная работа в Ростелеком, Газпром на позиции senior/lead, а вынужденная мера чтобы иметь заработок и отсутствие других возможностей заработать в этот временной период. Ответы на вопросы: Кому делал систему? — юрлицо, он же предприниматель и java-разработчик из россии которому надо иметь свою дизайн-систему, чтобы разрабатывать свои стартапы или продавать систему как продукт. Почему она такая визуально? — на личный вкус заказчика. Почему сделана на половину? — просто не сошлись по деньгам и требованиям.&lt;/blockquote&gt;
  &lt;p id=&quot;HTC0&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;vhwe&quot; class=&quot;m_retina&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/0f/3f/0f3f40bf-ffd0-49a1-b671-249c938dfe30.png&quot; width=&quot;1400&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;HsB0&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;lyHV&quot;&gt;Задача&lt;/h3&gt;
  &lt;p id=&quot;39FF&quot;&gt;Построить систему согласно требованиям: поэтапность работы согласно тех. заданию, создание палитры и переменных с определенной структурой данных и неймингом через аббревиатурный метод (слои, группы, коллекции, переменные). Работать в общем аккаунте Figma Pro и утверждать все с заказчиком на митах.&lt;/p&gt;
  &lt;p id=&quot;0aTX&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;7h5P&quot;&gt;Что делал&lt;/h3&gt;
  &lt;ul id=&quot;IRXN&quot;&gt;
    &lt;li id=&quot;YCrv&quot;&gt;Анализ требований технического задания и расчет сроков каждого этапа&lt;/li&gt;
    &lt;li id=&quot;EDIj&quot;&gt;Исследование актуальных дизайн-систем и методологии их построения&lt;/li&gt;
    &lt;li id=&quot;j2sX&quot;&gt;Создание палитр цветов в colorbox по методологии специалистов Яндекс, создание примитивных и функциональных коллекций переменных&lt;/li&gt;
    &lt;li id=&quot;myJO&quot;&gt;Создание переменных, групп (токенов) для всех атомов дизайн-системы&lt;/li&gt;
    &lt;li id=&quot;8EIJ&quot;&gt;Темизация (создания светлой и dark палитр и их привязка к переменным)&lt;/li&gt;
    &lt;li id=&quot;oNvV&quot;&gt;Создание текстовых стилей, переменных системы отступов и радиусов&lt;/li&gt;
    &lt;li id=&quot;cWHo&quot;&gt;Создание компонентов в трех разных размерностях и их колористика с учетом темизации и нюансов отличий светлого UI от темного&lt;/li&gt;
    &lt;li id=&quot;mqUX&quot;&gt;Структуризация всего файла «до безупречности» (это касается названий слоев, фреймов, таблиц и верстки каждого элемента на autolayouts &lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;ZhrN&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;TOuo&quot;&gt;Решение&lt;/h3&gt;
  &lt;p id=&quot;QMUh&quot;&gt;Выполнен должный объем работы в срок по всем требованиям java-разработчика. Вопросы: почему много цветов в палитре, почему компонентов и т.п. закрываются на техническом интервью. Все расскажу и покажу более детально с аргументами.&lt;/p&gt;
  &lt;p id=&quot;RLlE&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;Vmlv&quot; class=&quot;m_column&quot;&gt;
    &lt;iframe src=&quot;https://player.vimeo.com/video/1087021992/?autoplay=false&amp;loop=false&amp;muted=false&amp;title=true&quot;&gt;&lt;/iframe&gt;
    &lt;figcaption&gt;Демонстрация переключения тем&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;5qLV&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;kh6L&quot;&gt;Процесс&lt;/h2&gt;
  &lt;p id=&quot;82fi&quot;&gt;Расписывать все не буду. Работа была разделена на этапы, каждый этап проходил стадии правок и согласований с вербальным общением в телеграм и совместным доступом к Figma проекту. То, что сделано согласовано и утверждено заказчиком.&lt;/p&gt;
  &lt;p id=&quot;3GlE&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;AQYw&quot;&gt;Палитра прпмитивов&lt;/h3&gt;
  &lt;blockquote id=&quot;OMH9&quot;&gt;Я против неадекватного кол-ва оттенков, достаточно не более 10, но разработчик настоял, что ему «может не хватить» — оставим это на его совести и невежестве. Дизайн система должна быть удобна прежде всего дизайнеру, это инструмент и если он неудобен в использовании, это сказывается на эффективности, скорости.&lt;/blockquote&gt;
  &lt;p id=&quot;9UvR&quot;&gt;Палитры составлялись в ручную без использования плагинов (они не потянут эту задачу) в инструменте &lt;a href=&quot;http://colorbox.io&quot; target=&quot;_blank&quot;&gt;colorbox.io&lt;/a&gt; по определенным алгоритмам, а не как попало. Помимо имени и HEX кода цвета имеют RGBA данные цветовой модели. &lt;/p&gt;
  &lt;figure id=&quot;Xzfh&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/ef/35/ef35b565-944d-43bf-8d9e-c0d8ff70d3d2.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;wExg&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;2Hsl&quot;&gt;Атомы и стили&lt;/h3&gt;
  &lt;p id=&quot;dyB6&quot;&gt;Значений может быть больше, в данном случае разработчику было достаточно.&lt;/p&gt;
  &lt;figure id=&quot;hU0q&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/68/f3/68f3ec1f-bc18-4b14-9d37-993add8ea277.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;h3 id=&quot;uyAz&quot;&gt;&lt;/h3&gt;
  &lt;h3 id=&quot;Vtnf&quot;&gt;Организация слоев и нейминг&lt;/h3&gt;
  &lt;p id=&quot;1F4B&quot;&gt;Нет, просто вариативных компонентов недостаточно, разработчику нужно, чтобы все объекты в компоненте находились в последовательности как слои от левого-верхнего к правому нижнему углу в компоненте (сверху-вниз, как слои). Сделать это несложно, или через плагин или «ручками» через shift+arrow up/down хоткеи.&lt;/p&gt;
  &lt;figure id=&quot;E75W&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/7e/d6/7ed63c03-63e8-4c9d-bb68-0489bb7b73ad.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;ViRi&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;gKpo&quot;&gt;Компонент: Button, ButtonIcon&lt;/h3&gt;
  &lt;p id=&quot;zo4S&quot;&gt;Разделение на 3 вариативных компонента по размерностям было удобно разработчику, аналогично с разделением обычных кнопок и кнопок Icon.&lt;/p&gt;
  &lt;blockquote id=&quot;SK7k&quot;&gt;Тенденция, которую я наблюдаю у американский коллег в том, что совмещают кнопки и кнопки-иконки в едином компоненте (прим. Align UI). Разделение же большого компонента на мелкие практикуют в дизайн-системе Ozon согласно статье на habr Виктора Теплова «Автостопом по дизайн системе». Я работаю исходя из погружения в задачи и требований, ситуации. Умею по-разному.&lt;/blockquote&gt;
  &lt;figure id=&quot;g3qu&quot; class=&quot;m_retina&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/56/a8/56a870d0-f41c-46e7-8ccd-8998ec535614.png&quot; width=&quot;1400&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;Zgn3&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;7eWW&quot;&gt;Компоненты: Checkbox, Radio, Toggle&lt;/h3&gt;
  &lt;p id=&quot;3eXt&quot;&gt;Спрашивать по визуальной составляющей с разработчика, это его личный выбор.&lt;/p&gt;
  &lt;blockquote id=&quot;nphC&quot;&gt;Не будет лишним сказать, что разработчик влезал в figma и переназначал цвета? Пост оплата дело такое: «не нравится — иди гуляй, я хочу так, как мне видится». Я старался следить за коэффициентом контрастности, по мере возможного.&lt;/blockquote&gt;
  &lt;figure id=&quot;xQ2I&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/02/33/0233e691-22cf-44d3-90b2-32914119f827.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;Lsoa&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;coWE&quot;&gt;Компонент: поле ввода&lt;/h3&gt;
  &lt;blockquote id=&quot;uEMp&quot;&gt;Не спрашивай, почему так... Да слишком много цветов, да кроваво, это одна из причин почему я перестал работать с этим человеком, основную покажу ниже.&lt;/blockquote&gt;
  &lt;figure id=&quot;J5nH&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/79/48/7948b4aa-524f-4b55-9c36-676c4f93db4c.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;g6Gx&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;e1wK&quot;&gt;Переменные (визуально в таблице)&lt;/h3&gt;
  &lt;p id=&quot;fbBY&quot;&gt;Не забываем, что цвета в светлой и темной темах разные (не просто инверсия черного в белый а подбор оттенка с соблюдением contrast ratio и виде в целом, перемножаем и получаем более 1000 переменных с которыми не удобно работать.&lt;/p&gt;
  &lt;blockquote id=&quot;u6un&quot;&gt;Дурацкие аббревиатуры сведут любого сениор дизайнера с ума, кажущиеся на вид простыми они существенно мешают скорости работы при назначении цвета, как и выстроенная структура системы в целом. Я помучался за опыт и портфолио. Денежная сумма, выделенная разработчиком на проект составляла в общем 70К рублей из которых я заработал лишь часть, согласно сданным этапам работ. Мне совершенно плевать было на деньги, в условиях где меня не берут на работу там, где я достоин быть.&lt;/blockquote&gt;
  &lt;figure id=&quot;KTsb&quot; class=&quot;m_column&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/9d/6d/9d6dd53a-172e-488b-8f67-e2a013b22290.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;8naK&quot;&gt;Также были тесты поверхностей (surface) но перегружать вас не вижу смысла, есть файлик (дубликат уже без переменных, все они тянутся из оригинального)&lt;/p&gt;
  &lt;p id=&quot;SLjv&quot;&gt;&lt;a href=&quot;https://www.figma.com/design/AN8aTT42zeaPwEXFsxiMqZ/4---ALP?node-id=1-462&amp;t=deXoQoEGKghVGt0l-4&quot; target=&quot;_blank&quot;&gt;Темная тема&lt;/a&gt;, &lt;a href=&quot;https://www.figma.com/design/AN8aTT42zeaPwEXFsxiMqZ/4---ALP?node-id=3-9294&amp;t=deXoQoEGKghVGt0l-4&quot; target=&quot;_blank&quot;&gt;светлая тема&lt;/a&gt; как дубликат, если нет возможности переключить в режиме просмотра&lt;/p&gt;
  &lt;p id=&quot;bKF0&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;dpqC&quot;&gt;Опыт получен и навык закреплен, знания освежены и углублены, как минимум я знаю как делать не надо и знаю, как делают топы. &lt;/h3&gt;
  &lt;p id=&quot;JZAs&quot;&gt;Работать дизайнером дизайн-системы не стремлюсь, приглашают тех, кто работал в крупных компаниях и более крутой результат имеет (еще бы, и не за три недели). &lt;/p&gt;
  &lt;blockquote id=&quot;XNJg&quot;&gt;В сервисе и развитии дизайн-системы может работать любой middle и даже junior дизайнер. Однако собрать дизайн-систему с нуля может только Senior дизайнер и то не один. Считаю, что данный опыт меня поднял до Middle+ хоть и не в команде.&lt;/blockquote&gt;

</content></entry><entry><id>denvo:booking</id><link rel="alternate" type="text/html" href="https://teletype.in/@denvo/booking?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=denvo"></link><title>Концепция редизайна booking.com</title><published>2025-05-22T16:58:59.203Z</published><updated>2025-06-24T05:27:06.299Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img2.teletype.in/files/db/5d/db5dbe80-678b-4207-8f9f-6326e15196b5.png"></media:thumbnail><category term="portfolio" label="Портфолио"></category><summary type="html">&lt;img src=&quot;https://img2.teletype.in/files/14/a2/14a2c9f6-0937-4b5f-b59a-250fde3a0b14.jpeg&quot;&gt;Этот кейс имеет предысторию, у кого мало времени или не интересно, прокрутите в самый низ до изображений и видео.</summary><content type="html">
  &lt;p id=&quot;OUBk&quot;&gt;В 2022 г. я имел опыт работы в двух продуктах, оба — мобильные приложения, где не было потребности проектировать UX с нуля. Тут я придумывал UX с нуля. &lt;/p&gt;
  &lt;p id=&quot;X0Wk&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;i4HO&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/14/a2/14a2c9f6-0937-4b5f-b59a-250fde3a0b14.jpeg&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;YN9l&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;JhbK&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;lTJH&quot;&gt;Задача&lt;/h2&gt;
  &lt;p id=&quot;b8PS&quot;&gt;Собрать сложный интерфейс с нуля, который продемонстрирует мою крутость. Похуй, что это не реальный проект, сделайте также по уровню сложности дома, потом поговорим. (на самом деле это давн не сложно, но тогда было сложно...)&lt;/p&gt;
  &lt;p id=&quot;nOgj&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;jnMl&quot;&gt;Решение&lt;/h2&gt;
  &lt;p id=&quot;Sjvd&quot;&gt;Первое, что пришло в голову, взять за основу пользовательский опыт сайта booking.com которым ранее пользовался и концептуально изменить дизайн взаимодействия так, чтобы проверить, что придумаю не имея ограничений. &lt;/p&gt;
  &lt;p id=&quot;UZ94&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;chHk&quot;&gt;Что сделал&lt;/h2&gt;
  &lt;ul id=&quot;xpsi&quot;&gt;
    &lt;li id=&quot;gwDY&quot;&gt;Юзабилити-тестирование сайта booking.com на боли, барьеры и точки сопротивления (поиск отеля, сравнения отелей, выбор отеля и номера)&lt;/li&gt;
    &lt;li id=&quot;q8dQ&quot;&gt;Вторичное исследование: desk, competitive, trend иных букинг платформ&lt;/li&gt;
    &lt;li id=&quot;9tSu&quot;&gt;wireframes и wireflow mvp&lt;/li&gt;
    &lt;li id=&quot;USpK&quot;&gt;Юзабилити тест интерфейса через кликабельный прототип wireflow&lt;/li&gt;
    &lt;li id=&quot;niPE&quot;&gt;Создал атомарную систему&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id=&quot;JeSL&quot;&gt;
    &lt;li id=&quot;RRG4&quot;&gt;Петли улучшений на этапе финализации дизайна&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;JbHl&quot;&gt;&lt;/p&gt;
  &lt;blockquote id=&quot;V6HE&quot;&gt;Кратко: я наивно думал, что делаю UI для планшетного приложения, не понимая ничего в особенностях разработки, ограничениях и правилах. Гайдлайны только читал, но опыта применения на практике не имел (iPadOS гайдлайн пригодилися только в выборе типографической системы, размерах всех кнопок и именовании компонентов, но по факту я сделал не нативный «франкинштейн» с иконками из библиотеки Material Symbols. Как говорится, ежик плакал но кушал кактус. Это показывает каким глупым, невежественным и далеким от разработчиков я был. Студенту простительно, я только учился и нарабатывал опыт на своих граблях, кроме того меня никто не учил, я не мог просто пойти к ментор и все узнать за неимением средств на образование в тот период.&lt;/blockquote&gt;
  &lt;p id=&quot;OboQ&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;uNnv&quot; class=&quot;m_column&quot;&gt;
    &lt;iframe src=&quot;https://player.vimeo.com/video/1007147869/?autoplay=false&amp;loop=false&amp;muted=false&amp;title=true&quot;&gt;&lt;/iframe&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;Sd56&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;NwgF&quot;&gt;Атомы&lt;/h2&gt;
  &lt;p id=&quot;Pum8&quot;&gt;Иерархия и типографическая система соответствует Human Interface Guidelines, однако и тут бардак, ставил интерлиньяж кратный 4dp для работы в grid system после мастер-класса Дениса Ланина про интерлиньяж, не понимая что делаю.&lt;/p&gt;
  &lt;figure id=&quot;u8sL&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/0a/52/0a5216e2-a5e5-4441-9ef0-9a63522c89e5.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;Wg81&quot;&gt;Про цвета показать нечего: нейтральная палитра серого, парочка бренд-цветов booking.com выполняющих роль акцентных для минимального сходства, однако целью сделать интерфейс похожим на сайт не ставил или не мог понять, как их использовать если честно. В целом, палитра booking объективно устаревшая и лично мне не понятна. Я их выбрал, чтобы взять оттуда контент, не более того.&lt;/p&gt;
  &lt;p id=&quot;nke1&quot;&gt;Отступы и радиусы стандартные для 4dp grid system, добавлены в переменные.&lt;/p&gt;
  &lt;p id=&quot;0J4A&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;TYZV&quot;&gt;Молекулы и организмы&lt;/h2&gt;
  &lt;p id=&quot;M0R3&quot;&gt;Элементы разложены по секциям для удобства, если присутствует организм, сбоку от него или под ним всегда есть молекула с неймингом Elements / Имя.&lt;/p&gt;
  &lt;p id=&quot;qowK&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;7pSK&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/d3/41/d341d5b3-aea4-41b0-8e8f-8a6b096a3d0a.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;h2 id=&quot;xGUW&quot;&gt;&lt;/h2&gt;
  &lt;h2 id=&quot;8tCt&quot;&gt;Применение атомарного дизайна на примерах&lt;/h2&gt;
  &lt;p id=&quot;bpy7&quot;&gt;Это краткое разъяснение, погрузиться еще глубже вы можете на тех. интервью&lt;/p&gt;
  &lt;p id=&quot;M36e&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;kPBk&quot; class=&quot;m_original&quot; data-caption-align=&quot;center&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/6f/3c/6f3c0b3e-a8ab-4dc6-b604-da2855a7d035.jpeg&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;UBZ2&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/12/2f/122f156d-61bb-432d-bd02-df4665628119.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;fqRy&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/b2/8c/b28c8844-87aa-4d7e-a5bb-0195e565d3d5.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;OVy5&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/36/ef/36ef6a16-c38a-4d4f-a217-7ac85f0fe1ee.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;Oaqg&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/d4/16/d416d773-48ff-4fdc-b8bc-8e6401402af2.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;82qZ&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/60/b1/60b10f3d-de43-415a-911d-cd0e3e0b89fd.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;

</content></entry><entry><id>denvo:app</id><link rel="alternate" type="text/html" href="https://teletype.in/@denvo/app?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=denvo"></link><title>Обновление дизайна мобильного приложения для студентов</title><published>2025-05-21T08:28:50.324Z</published><updated>2025-06-25T06:24:57.667Z</updated><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img3.teletype.in/files/a9/ac/a9ac668e-88a9-42fc-bb34-922a5e98a3c1.png"></media:thumbnail><category term="portfolio" label="Портфолио"></category><tt:hashtag>дизайнер</tt:hashtag><summary type="html">&lt;img src=&quot;https://img3.teletype.in/files/a3/e5/a3e5a2c5-453c-4e93-a92c-f6f0db05b8b9.png&quot;&gt;Платформа с MAU ≈500K имеет приложение в AppStore (ссылка) и RuStore.</summary><content type="html">
  &lt;p id=&quot;dT2b&quot;&gt;&lt;a href=&quot;http://avtor24.ru&quot; target=&quot;_blank&quot;&gt;Платформа&lt;/a&gt; с MAU ≈500K объединяет студентов и исполнителей учебных работ, что приносит бизнесу прибыль уже 15 лет (на комиссии со сделок — микро-рекрутинг). Пока CEO покупает мерседесы, &lt;a href=&quot;https://apps.apple.com/ru/app/%D0%B0%D0%B2%D1%82%D0%BE%D1%8024-%D1%8D%D0%BA%D1%81%D0%BF%D0%B5%D1%80%D1%82-%D0%B2-%D1%83%D1%87%D0%B5%D0%B1%D0%B5/id1545908685&quot; target=&quot;_blank&quot;&gt;приложение&lt;/a&gt; выглядит так. Смотрите и ужасайтесь. Вот такой уровень дизайна там.&lt;/p&gt;
  &lt;p id=&quot;q6VF&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;G3U3&quot;&gt;Кейс можно рассмотреть в двух сценариях&lt;/h3&gt;
  &lt;ul id=&quot;bC9D&quot;&gt;
    &lt;li id=&quot;IZsD&quot;&gt;Работал в компании 6 мес и улучшил дизайн старого аппа таким образом, что увеличилось количество скачиваний и DAU на 500%. Все гордые и успешные.&lt;/li&gt;
    &lt;li id=&quot;8z3l&quot;&gt;Работал в компании 6 мес и уволили, потому что не понимали мой потенциал, используя лишь как руки пожеланий PM, но после, уже дома я сделал дизайн.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;Bg37&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;gZyp&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/a3/e5/a3e5a2c5-453c-4e93-a92c-f6f0db05b8b9.png&quot; width=&quot;2800&quot; /&gt;
    &lt;figcaption&gt;Некоторые экраны нового дизйна, над которым я работал 2 месяца из дома&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;3Yqg&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;Uk97&quot;&gt;Задача&lt;/h2&gt;
  &lt;p id=&quot;puK4&quot;&gt;Сделать адекватный дизайн, чтобы привлечь внимание топ-компаний: Альфабанк, Т-банк, Билайн, а не рефлексировать, как про-бал 6 мес в компании и был уволен. Задача была выполнена и меня серьезно рассматривали все из перечисленных в послековидное время, когда на рынке еще не было 10К «девчонок» после курсов.&lt;/p&gt;
  &lt;p id=&quot;JNQF&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;8xRa&quot;&gt;Сделал&lt;/h2&gt;
  &lt;p id=&quot;YaJw&quot;&gt;Не буду перечислять всю х-ню (Discovery, CJM, JTBD, Task/User/Wire-flow, UI kit) ведь тебе п-хуй и сегодня это умеют все, окончившие курсы Яндекс.Практикум. Надо будет, покажу на тех интервью.&lt;/p&gt;
  &lt;p id=&quot;6LVy&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;KToE&quot;&gt;Глубинное интервью&lt;/h2&gt;
  &lt;p id=&quot;jYBb&quot;&gt;Гипотетически провел интервью с 5 респондентами и понял что дизайн ху-вый. Можно было выявить это еще на этапе wireframes, но так выходит объективнее. &lt;/p&gt;
  &lt;p id=&quot;FUi7&quot;&gt;&lt;/p&gt;
  &lt;figure id=&quot;5MaG&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img3.teletype.in/files/ab/2c/ab2c5672-771e-4300-b4cf-07fdf0a15bf2.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;yqHn&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img1.teletype.in/files/45/77/45770374-3821-40e6-a1e5-cc85bafcf3d5.png&quot; width=&quot;2800&quot; /&gt;
    &lt;figcaption&gt;Ukfd&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure id=&quot;7Nao&quot; class=&quot;m_original&quot;&gt;
    &lt;img src=&quot;https://img4.teletype.in/files/ff/fc/fffc715c-57d6-4271-8ca6-6fa989ef116a.png&quot; width=&quot;2800&quot; /&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;1R5B&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;SOe1&quot;&gt;Инсайт&lt;/h2&gt;
  &lt;p id=&quot;qB8h&quot;&gt;Делать дизайн в темной теме и работать в design-centered компаниях по CustDev. Юзеры знаю как лучше и удобнее, а PM просто отрабатывает ипотеку и нехуй его слушать. Он мониторит метрики и пусть себе мониторит, это талантов не требует. &lt;/p&gt;
  &lt;figure id=&quot;cdvx&quot; class=&quot;m_original&quot; data-caption-align=&quot;center&quot;&gt;
    &lt;img src=&quot;https://img2.teletype.in/files/94/7f/947fd35b-d3e4-4d01-944b-d9a25edd21f7.png&quot; width=&quot;2800&quot; /&gt;
    &lt;figcaption&gt;Сравнительный А/Б тест новго UI на одном элементе приложения (когда-нибудь будет кейс на D-profile)&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p id=&quot;oS49&quot;&gt;&lt;/p&gt;
  &lt;h2 id=&quot;VYDz&quot;&gt;Постскриптум&lt;/h2&gt;
  &lt;p id=&quot;NEWV&quot;&gt;Компании я благодарен, поскольку смог пойти учиться на права и работал в офисе с холодильником, вином и тимбилдингами (настольный теннис и баскетбол в зале). Однако обучение в автошколе пришлось бросить ввиду увольнения и сокращения мобильной команды в целом. Но лучше я пойду дальше, чем буду делать д-рьмо в комфортных условиях, а что не делается, то к лучшему.&lt;/p&gt;
  &lt;p id=&quot;T7mA&quot;&gt;&lt;/p&gt;
  &lt;tt-tags id=&quot;jetV&quot;&gt;
    &lt;tt-tag name=&quot;дизайнер&quot;&gt;#дизайнер&lt;/tt-tag&gt;
  &lt;/tt-tags&gt;

</content></entry></feed>