SL
422 subscribers
89 photos
54 videos
196 links
По всем вопросам - https://t.me/SLtowl?direct
Download Telegram
Почему все хуесосят вайбкодинг?

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

Так вот вопрос, почему его хейтят? За то, что он собирается создать что то вайбкодом?

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

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

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

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

Кто то может реально объяснить смысл такого хейта людей, что у человека в голове когда он пишет какой то уебанский комментарий. Мне действительно очень интересно.
🤷‍♂11🤯5🐳5💯1
Только легенды успели это лицезреть

Или то, как Тимер положил телетайп

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

ЧИТАТЬ
ЗАПОМИНАТЬ
ДОБАВЛЯТЬ

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

Всех обнял. Еще увидимся.
🤯11🐳8💯6
This media is not supported in your browser
VIEW IN TELEGRAM
Мой процесс работы и создания дизайна

Выпустил новый ролик, где показал весь свой процесс создания сайта от поиска референсов до готового результата.

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

ПОСМОТРЕТЬ

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

Лично для меня Codex сейчас является правой рукой во фронтенде. Он выполняет супер много в формировании сайта, но мне всё равно приходится искать референсы, понимать какой результат я хочу получить и постоянно доёбываться до мелочей. Но в этом и вся прелесть работы с ним.

Кстати, монтировал этот видос инфл круче меня - @bybass_build

Полезные ссылки из ролика:

Dribbble - основное место, где я ищу референсы
Awwwards - сайты с более интересными решениями и анимациями
Pinterest - подбор цветовых палитр и визуального направления
OnlineSim - одноразовые номера для регистрации
Сервис для оплаты ИИ подписок

Надеюсь на ваш фидбек и поддержку! Еще увидимся.
🤯8🐳7💯5🍌1
Please open Telegram to view this post
VIEW IN TELEGRAM
🐳9💯7🍌6
Media is too big
VIEW IN TELEGRAM
- Ало, Chow, я бы хотел заказать доставку на дом

Или то, как я впервые попробовал сделать вроде и базовый, но концепт для компании доставки еды.

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

Что получилось на мой взгляд круто, а что прям shit.

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

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

Получилось это все дело как по мне очень неплохо. Буква О - пицца (надеюсь все поняли)

2. Иконографика - одно из любимых.

Над самими иконками я не парился слишком долго, нашел прикольные на пинтересте и слегка видоизменил + сделал новые. Мне нравится тот стиль, который смог удержать кодекс во ВСЕХ иконках.

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

3. Главный экран - с ним были сложности не в плане реализации композиции и постановки элементов. Главной сложностью тут стала сама наполненность.

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

• адрес и профиль
• поиск
• акционное предложение
• рестораны с бесплатной доставкой
• категории
• полный каталог ресторанов

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

4. Карточки ресторанов - сначала они были слишком однообразные. Я не слишком старался над их заполнением в плане блюд, но постарался над внешним видом и удобством.

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

Карточки получились достаточно компактными, но в них осталось всё необходимое.

Финальная часть работы состояла в основном из полировки элементов: выравнивание, настройка hover-реакций, прокрутки, инерции, переходов и отмены конфликтующих анимаций.
🤯8💯7👨‍💻7🐳1
This media is not supported in your browser
VIEW IN TELEGRAM
Ну сделай уже из своего дашбордика конфетку

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

Но у меня получилось.

К посту прикреплен видеоролик вымышленного дашборда. Мне кажется дизайн получился достаточно минималистичным, но при этом очень приятным и самое главное - УДОБНЫМ.

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

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

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

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

• Первое, что вам нужно сделать - определить, какая информация самая важная и что вы хотите видеть первым своими глазами.

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

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

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

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

• Третье - циферки и шрифт.

У меня были плашки, которые выглядели просто ужасно из за их содержания внутри и их размера. Где то слишком мало места, а где то наоборот полно.

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

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

• И финал - кнопки и взаимодействия с ними.

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

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

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

Ну и теперь обещанный скилл.

Все эти решения я собрал в Graphite Dashboard Design: палитру, шрифты, поверхности, отступы, оформление компонентов и правила проверки.

Он помогает ИИ создавать дашборды в таком же стиле, но под ВАШУ задачу. Копировать мою карту связей не обязательно. Я уже попробовал его на аналитике видеороликов и расходах компании.

В репозитории есть инструкция по установке и примеры, которые можно открыть и потыкать.

Буду безумно рад вашему фидбеку и тестам! Еще увидимся.
1🤯9🐳7🍌6👨‍💻2
Я к чему то очень хорошо готов, но пока что не знаю к чему...

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

Также готовлю много приколюх на GitHub. В скором времени выложу готовые UI элементы, которые можно будет забрать и адаптировать под свой проект, скиллы для анимаций элементов и отдельный скилл для аудита UI/UX. Он будет находить косяки и подсказывать, что вам стоит исправить.
👌9🤯6💯4🐳3
This media is not supported in your browser
VIEW IN TELEGRAM
GPT 6 ASTRA в ВЕБ-ДИЗАЙНЕ - СМОТРИ

Новый ролик на моем канале, где решил затестить Astra в реализации дизайн идеи из головы.

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

ПОСМОТРЕТЬ

Идея, которая была для создания: магазин роботов, в максимально темных тонах, использовав при этом генерацию видео.

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

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

Всем приятного просмотра! А ниже я лишь оставлю ссылки из видео:

Покупка подписок, сервис из ролика
Генерация изображений и видео
Pinterest
Dribbble
Awwwards

В течение 2х дней хочу затестить создание 3D моделей через Astra, поэтому ждите постик! Еще увидимся.
🤯13🍌9🐳8
Всем огромное спасибо! Без вас этого бы не было

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

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

(Сегодня выкачу первую версию библиотеки UI элементов и сделаю вам постик, уже сделано 70+ разных приколов).
🤯11💯6👌5🐳1🍌1
This media is not supported in your browser
VIEW IN TELEGRAM
Библиотека UI элементов - единственное что нужно для счастья

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

Там содержатся: 10 кнопок, полей ввода, переключателей, 25 чекбоксов, 20 слайдеров, 15 менюшек, 10 навигационных элементов и 10 оверлеев.

И все это абсолютно бесплатно как для кодеров, так и для вайбкодеров. Если ты являешься представителем кодеров - ты можешь пройтись по всей библиотеке и взять код на CSS, HTML и JS (в будущем будет добавлено еще больше вариаций).

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

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

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

Новые версии не заставят вас долго ждать, так еще и параллельно с ними выйдет скилл, для аудита всего кривого в вашем пользовательском интерфейсе!

И еще одна ссылка

Команда для установки в Codex: codex plugin marketplace add SLtowl/sl-ui-library && codex plugin add sl-ui-library@sl-ui-library

Ну либо просто ссылку закиньте на репу, а там уже разберетесь!

Завтра на телефоне буду допиливать все, включая сам репозиторий. Еще увидимся.
💯11🐳9🤯6👌1
This media is not supported in your browser
VIEW IN TELEGRAM
124 - что это за магическое число?

Ладно, магического в нем ничего нет, это лишь количество новых элементов, добавленных в релизе 1.1.0 моей UI библиотеки и плагина. Было 110, теперь целых 234.

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

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

Библиотеку можно использовать как тебе удобно: установить плагин целиком в Codex или Claude Code, скачать отдельный элемент или просто скопировать его HTML, CSS и JS. А через плагин нейросеть поможет подобрать элемент, адаптировать его под твою палитру и добавить в проект.

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

Эту библиотеку я создаю как для себя, так и для вас. Я и сам очень часто использую элементы от туда (не все, конечно, но очень большую часть).

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

Codex:
codex plugin marketplace add SLtowl/sl-ui-library && codex plugin add sl-ui-library@sl-ui-library

Claude Code:
claude plugin marketplace add SLtowl/sl-ui-library && claude plugin install sl-ui-library@sl-ui-library

Если ты вообще не вдуплил, о чем этот текст, то прочитай пост выше. Еще увидимся!
🐳7💯6👨‍💻5
До меня только дошел тренд второго мозга

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

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

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

В общем то, просто держу вас в курсе в такой хороший вечерок.

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

Параллельно со всем этим работаю над SL UI Library, своим плагином с UI элементами. Дополняю его новыми штуками. Кто ВСЕ ЕЩЕ не вдупляет, вот первый ПОСТ и второй.

Планов много, осталось реализовать все по достойному, а не как обычно. Еще увидимся!
🤯9👌5💯5