Telegram Web Link
Сегодня впервые попробовал себя в дизайне макетов. Задизайнил простой грид с наиболее часто используемым элементом — карточкой. Думаю, проделать все паттерны (отсюда: https://csslayout.io/patterns/) сначала в фигме, а уже потом в HTML+CSS.

Нормально ли я справился для первой попытки, что думаете?
Вот, кстати, отдельно компонента и грид.
Кстати, для всех желающих попрактиковаться в CSS Grid и CSS Flexbox есть вот эти сайты: https://cssgridgarden.com/, https://flexboxfroggy.com/

Вы научитесь позиционированию элементов, используя Grid и Flexbox, в лёгкой игровой форме.
Так получилось, что я сам случайно залип 😅

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

Сегодня сделал вертикальную версию карточки (вчера делал горизонтальную), думаю, что за месяца два вполне соберу себе приличную дизайн-систему, из которой легко можно будет сконструировать какой-нибудь минималистичный UI-framework.

UPD: изучаю веб-дизайн для того, чтобы более свободно говорить об интерфейсах, плюс уметь находить более интересные решения, чем те, которые я делаю сразу в нативе
Отрисовал два экрана с разным отображением карточек, две компоненты switch (в состоянии on/off), две простых иконки.

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

В целом, если я выучу все хоткеи, то это сильно ускорит весь процесс работы в программе, скоро покажу вам результат.
Media is too big
VIEW IN TELEGRAM
Отрисовка кастомного инпута
Продолжаю работать в фигме, сегодня отрисовал одну иконку в трёх цветах, инпут для файла в двух состояниях и простенькое модальное окно.
2025/10/03 18:09:17
Back to Top
HTML Embed Code: