UI кит - это то, что гарантирует согласованность в интерфейсе.

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

🟣 Согласованность и системность
Хороший совет, который мне дала моя бабушка 🥰: «Не полагайся на свою память - фиксируй на бумаге». Переношу смысл - прописав (отрисовав) все отступы, размеры, цвета и т.д., вам не придется держать все эти значения в голове. В качестве бонуса вы получите чистый и системный дизайн.

🟣 Разработка
Разработчики скажут вам спасибо, что им не пришлось ломать голову над «почему здесь так? а там по другому?» И главное - они смогут увидеть все состояния и поведение элементов и не будут выдумывать что-то свое, о чем дизайнер не подумал.

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

Какие есть этапы создания кита:

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

2️⃣ Затем цвета, типографика, иконки, сетка и система отступов.

3️⃣ Все слышали про атомарный подход? Если нет - ставьте пальцы вверх, раскроем эту тему в следующей статье. Коротко - дизайн состоит из атомов, молекул, организмов, блоков, страниц. Сейчас затронем первые три.

4️⃣Атомы))
Это кнопки (основные, второстепенные, текстовые, кнопка-иконка) и контролы (чекбоксы, ради баттоны, переключатели, табы, ссылки), а также инпуты и дропдауны.

5️⃣ Далее молекулы - совокупность атомов, например карточка, состоящая из текста, инпутов и кнопок. При работе с ними важно учитывать принцип универсальности и гибкости. Например, если карточка растягивается, то текст должен растягиваться вместе с ней, а кнопки должны передвигаться к левому краю, как это было изначально, а не оставаться где-то в центре. Автолейауты в Figma вам в помощь (еще одна интересная тема и повод поставить палец вверх 😉).

6️⃣ Организмы - совокупность молекул, кэп. Например, таблица, состоящая из молекул - колонок и хедера, а те в свою очередь состоят из атомов - текста, кнопок, тегов, иконок и т.д. Правило гибкости и универсальности здесь также применимо. Это касается ни только расширения, но и замены атомов внутри компонента. Для этого в Figma есть сеты компонентов (даю слово - я не хотел, но это еще одна статейка 🙈).

7️⃣ UI кит - это череда бесконечных итераций. Его всегда нужно дополнять или чистить до тех пор, пока проект в процессе разработки. Это нормально и боятся этого не стоит. Но чем больше вы предусмотрите на начальном этапе, тем меньше времени у вас будет уходить в итоге.

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

Если вам повезло работать в продуктовой команде, то всегда можно договориться на берегу и определиться с терминологией - «дропдаун» это или «выпадашка» 🤷. Но всё же рекомендую называть элементы по-английски. Разработчики используют в коде англоязычные названия, поэтому так будет проще всем вам.
Не забывайте про комментарии с описанием того или иного компонента. Экономьте время и нервы друг друга 🙌.

🎯 Резюмируем:

✅ Любому, даже небольшому проекту нужен UI кит и чем раньше об этом позаботиться, тем лучше будет в конечном итоге.
✅ Всё, что повторяется больше одного раза - это компонент. Чем больше компонентов - тем меньше затраченного времени, сил и нервов.
✅ Гибкость и универсальность - главные составляющие правильного компонента.


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

5АМ | #разработка

Выхода нет

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

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

🟣На самом деле решение есть всегда - мы просто не согласны с его ценой

Что тогда делать. Ментальный трюк - успокоиться. Так как проблема в голове, то и делать там можно все что угодно. Как в матрице: "Помни, ложки не существует, Нео")) В голове веса нет, можно просто вылезти из под плиты и посмотреть на неё. Походить с разных сторон с деловитым, надменным видом, поправляя моноколь на глазу))

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

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

Цена. Сколько стоит решение в максимальном значении. Сотни тысяч рублей. Десятки людей. Сотни часов рабочего времени. Отлично. А как можно снизить, а важно ли это сейчас? И вот плита начала трескаться. Расщепляй и распараллеливай

Примеры в кружке ниже 🔽

5АМ | #предпринимательство

Читать гениальность

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

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

И когда вы понимаете почему ход гроссмейстера - это искусство, почему именно эта неберущаяся нота - гениальность, то вы жаждите искать это во всем)

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

Если вы это видите, наблюдаете - это красота и это невероятный кайф) Кайф работать с гениями!

5АМ | #философия

С заботой о вас ❤️❤️ И всех с праздником))

Демонстрирую вам "ошибку выжившего"😄

Как раз те, кто читают меня на 3-4 день не читают глубоко, поэтому и такие результаты)) Спасибо за голоса🙌

Сегодня вечером пост light))

Пришел хвастаться😎

Мы допилили наш генплан для агентства-недвижимости, связав данные с их ЛК компании в LokeoData.

Зацените преходыыыы 🔥🔥🔥

5АМ | #Лóкео

Когда встречаете баг, пробовали посильнее нажимать?😁

У меня несколько раз правда баги пропадали) Главное - уверенно на монитор посмотреть 😁

5АМ | #мемы

Продакты наверняка знают самый топовый канал в нашей сфере - это Продакты не нужны Егора Данилова. Читаю уже года 3.

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

В этом канале я пишу как фаундер на темы продакт менеджмента. Егор тоже был и с той и с той стороны. Читая его труд, я подумал "блин как-будто это я писал".

Вот мои заметки, тезисы, которые я для себя выделил из его труда:

1) Не нанимать продакта настолько долго насколько это возможно

2) У фаундера все внимание на кратный рост продукта, а у продакта рост в процентах, докрутка.

3) KPI продакта должны быть связаны с бизнесом одной-двумя ключевыми метриками. Фаундеру важно держать фокус на ключевом показателе бизнеса, т.к. продакт могут легко увести не туда, рассказывая и показывая не главные метрики, а кучу промежуточных.

4) Скорость доставки фич - самое важное на нашем рынке. Если продакт пропускает сроки, то это хреновый продакт.

5) Успешность запуска гипотез не зависит от опыта или команды. Просто потому что никто не знает как правильно. Стреляешь в разные стороны и надеешься, что попадет. Клиенты тоже не знают как правильно. Они знают только то, что болит.

6) Ну никак нельзя до нахождения PMF раздувать команду. Защищайте свои инвестиции.

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

8) Фаундер, зная продукт, может срезать углы. Писал про это.

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

Короче - продакты не нужны)))

Дополнительные тезисы прикрепляю в комментарии к посту.

5АМ | #стартап

Так-с, ребята. А что происходит вообще?? Почему мы в арифметику разучились, м?)

А ну ка давайте вот вам для примера:

Руки прочь от калькулятора! Все в голове и быстро!

- Вы хотите сделать 300 продаж вашего продукта.
- Цена единицы вашего продукта 70 руб. в месяц
- За одну продажу вы продаете 1300 единиц
- Первый вопрос: Какая выручка будет каждый год, а за 3 года?
- Второй вопрос: Если 17% от выручки занимает маркетинг и 12% затраты на отдел продаж, то сколько стоит сделка?
- Третий вопрос: а сколько стоит звонок, если вы можете сделать 7 сделок за месяц и знаете, что каждый 5 звонок приводит к сделке?

Вот вам пример мышления предпринимателя.

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

И всякая SMART лабуда и методики не нужны) Идете за кофе? Посчитайте.

Качайте арифметику: сложение/вычитание, умножение/деление, процент от числа/ число от процента. Не нужно ни логарифмов, ни корней.

Ну и конечно же логику: суждение, умозаключение, рассуждение, связи между ними.

5АМ | #предпринимательство

Кто первым пришлет в течение 15 минут комментарий с наиболее точным ответом, тому подписку премиум на 3 месяца подарю 🤪

UPD - продлеваем до вечера, так и быть))

«Если не могут атаковать мысль, атакуют мыслителя» - Пол Валери.

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

5АМ | #цитаты

Сегодня вечером пост про PMF(Product-Market Fit) 🔥

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

Ганник-специалист

Ганник - это лучший гладиатор Капуи, дома Лентула Батиата, живущий в 73 г. д.н. Есть хороший сериал про спартанцев, но суть не в этом.

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

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

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

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

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

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

5АМ | #команда

Очищающий вихрь

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

Одним из интереснейших навыков является разотождествление себя и своего эго.

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

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

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

Не знаю, я его так назвал. Образ-придумка.

Как это работает, давайте по шагам:

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

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

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

Так, можно находить совершенно новые и крутые решения.

5АМ | #философия