Please open Telegram to view this post
VIEW IN TELEGRAM
🤣22❤8🥰6🫡1
This media is not supported in your browser
VIEW IN TELEGRAM
Я теперь так сказать ноукод разработчик промпт инженер 😃
Наглым образом заставили сделать промо для лендосов, а я и сделал
Наглым образом заставили сделать промо для лендосов, а я и сделал
Please open Telegram to view this post
VIEW IN TELEGRAM
❤14🤣4🥰1
Я ж пересобираю основной lab.pics, смотрите как решили показывать хайлайт-проекты
По-моему, оч даже смотрибельно🤌
По-моему, оч даже смотрибельно
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9🤣3✍1😱1
Гулял во дворе и увидел такую табличку, решил очередной раз порассуждать насчёт группировки и контекстов
99% случаев решаются именно через воздух, чтобы не создавать лишний мусор и не обломаться с логикой (как в случае с разделителем на скрине)
Дело в том, что разделитель нужен только в 2 случаях:
1) Чтобы верхнеуровнево разделить группы элементов (как бы основательно)
2) Чтобы разделить, когда пространство в целом не позволяет (например мелкий виджет)
Самое страшное, что подобная табличка будет полезна лишь тогда, когда случится что-то критичное, и в этот момент человеку придется разбираться что имел ввиду дизайнер.
Снизу закинул нормальный вариант только с группировкой через отступы без херни
99% случаев решаются именно через воздух, чтобы не создавать лишний мусор и не обломаться с логикой (как в случае с разделителем на скрине)
Дело в том, что разделитель нужен только в 2 случаях:
1) Чтобы верхнеуровнево разделить группы элементов (как бы основательно)
2) Чтобы разделить, когда пространство в целом не позволяет (например мелкий виджет)
Самое страшное, что подобная табличка будет полезна лишь тогда, когда случится что-то критичное, и в этот момент человеку придется разбираться что имел ввиду дизайнер.
Снизу закинул нормальный вариант только с группировкой через отступы без херни
✍9🫡1
Когда делал хедер, появилась мысль, вопреки всемирно известной теореме "автолейаут пизже фреймов", что использовать последние — нормально. Просто все зависит от контекста.
Бывает, чтобы скомпоновать композицию, мы просто распихиваем всё по углам: логотип слева, навигацию по центру, корзину справа; получается норм. Но Auto Layout с отступами "Auto" просто уравнивает margins и та самая "навигация по центру" съезжает
Спасает либо Фрейм, либо Ignore Auto Layout, чтобы расположить контент по абсолютным значениям (Relative > Absolute). Тогда мы жёстко фиксируем правило, например, "center, center" и макет становится чище
Есть ещё нетривиальные Left-Right (Top-Bottom для вертикали) и Scale. В первом случае, элемент будет прижиматься к сторонам при растяжении фрейма (будто паттерн или заливка), а во втором, пропорциональный скейлинг, мастхев для иконок
Показалось, что всем всё равно на эти функции, а штука полезная же 🤌
Бывает, чтобы скомпоновать композицию, мы просто распихиваем всё по углам: логотип слева, навигацию по центру, корзину справа; получается норм. Но Auto Layout с отступами "Auto" просто уравнивает margins и та самая "навигация по центру" съезжает
Спасает либо Фрейм, либо Ignore Auto Layout, чтобы расположить контент по абсолютным значениям (Relative > Absolute). Тогда мы жёстко фиксируем правило, например, "center, center" и макет становится чище
Есть ещё нетривиальные Left-Right (Top-Bottom для вертикали) и Scale. В первом случае, элемент будет прижиматься к сторонам при растяжении фрейма (будто паттерн или заливка), а во втором, пропорциональный скейлинг, мастхев для иконок
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8🥰4
В своё время для меня была большим открытием оптическая компенсация — то, когда "на глаз" лучше, чем под линейку
И ещё большим открытием стала именно цветовая компенсация, то, когда одинаковый цвет кажется разным в разных контекстах. Плюс об этом нигде не было расписано в далёком ~2020, поэтому я начал выводить для себя чёткие правила такого поведения.
Во-первых, холодные и тёплые цвета ведут себя по-разному. Синий выглядит темнее жёлтого, при этом синяя линяя в 1 пиксель кажется почти чёрной, а жёлтая — белой. То есть важно, сколько площади занято цветом.
Во-вторых, всё зависит от контекста из-за Эффекта Пуркинье и других нюансов восприятия цвета. Что важно: на тёмной теме цвета ощущаются иначе, а элементы немного больше.
Если не знать магию, все кажется физикой
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤15
Немного бесполезных деталей о дизайне
В поле ввода цвета можно вносить hex-код цвета в формате #RRGGBB. Это понятно и логично.
А знали, что цвет можно вносить в формате #RGB через 3 символа, если каждая пара их них повторяется? Их еще называют "безопасный", потому что они примитивные и не требуют особой глубины цвета. Но сейчас такой код скорее применим, чтобы блеснуть знаниями в брендбуке и добиться лаконичного копирайтинга.
А если дописать еще 2 символа к шестизначному коду, то они будут означать 16-битную запись прозрачности. Имеет больше смысла, потому что внутрь дизайн-системы можно аккуратно ввести работу с опасити буквально через hex-коды. Например, #00000080 будет значить "Черный с 50% прозрачности".
Пользуйтесь! 💋
В поле ввода цвета можно вносить hex-код цвета в формате #RRGGBB. Это понятно и логично.
А знали, что цвет можно вносить в формате #RGB через 3 символа, если каждая пара их них повторяется? Их еще называют "безопасный", потому что они примитивные и не требуют особой глубины цвета. Но сейчас такой код скорее применим, чтобы блеснуть знаниями в брендбуке и добиться лаконичного копирайтинга.
А если дописать еще 2 символа к шестизначному коду, то они будут означать 16-битную запись прозрачности. Имеет больше смысла, потому что внутрь дизайн-системы можно аккуратно ввести работу с опасити буквально через hex-коды. Например, #00000080 будет значить "Черный с 50% прозрачности".
Пользуйтесь! 💋
🥰5❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Опыт — взгляд на одну вещь под разными углами.
Насчет этого есть один короткий диалог про цвет, который произошел лет 5 назад. Я работал в команде с 3D-артистом Сашей, и он привык работать пипеткой и брать цвета "на глаз". При этом мне буквально дискомфортно не "математизировать": надо, чтобы всё делилось на 10 или подчинялось какому-нибудь другому "правилу окр-щика". И, думаю, для многих это жиза, хоть и Саша де-факто был прав
Есть и другая ситуация: я залип на книжку о дизайне в Читай-городе и узнал, что некоторые дизайнеры подбирают шрифты ОТ ИХ НАЗВАНИЯ. Это звучит ужасно, но обе ситуации возникают исключительно от страха и желания рационализировать то, что априори невозможно/бессмысленно рационализировать
Думаю, что имеет место как "интерфейс по сеточке", так и "лютейший артхаус", главное — выразительность, консистентность и уверенность в собственном решении. Противно смотреть, когда работа скучная или "ни туда ни сюда". Это ж не ЕГЭ, чтоб бояться ошибиться
Насчет этого есть один короткий диалог про цвет, который произошел лет 5 назад. Я работал в команде с 3D-артистом Сашей, и он привык работать пипеткой и брать цвета "на глаз". При этом мне буквально дискомфортно не "математизировать": надо, чтобы всё делилось на 10 или подчинялось какому-нибудь другому "правилу окр-щика". И, думаю, для многих это жиза, хоть и Саша де-факто был прав
Есть и другая ситуация: я залип на книжку о дизайне в Читай-городе и узнал, что некоторые дизайнеры подбирают шрифты ОТ ИХ НАЗВАНИЯ. Это звучит ужасно, но обе ситуации возникают исключительно от страха и желания рационализировать то, что априори невозможно/бессмысленно рационализировать
Думаю, что имеет место как "интерфейс по сеточке", так и "лютейший артхаус", главное — выразительность, консистентность и уверенность в собственном решении. Противно смотреть, когда работа скучная или "ни туда ни сюда". Это ж не ЕГЭ, чтоб бояться ошибиться
❤13
This media is not supported in your browser
VIEW IN TELEGRAM
У каждого ведущего дизайнера, обремененного отбором людей в команду, есть свой абстрактный чек-лист, по которому можно определить уровень кандидата. Для кого-то это понимание ресерчей, для кого-то — знание UX-эвристик наизусть.
Лично я, упоротый на визуале, сразу обращаю внимание на работу с воздухом. С определенным опытом приходит понимание, что "пусто" — огонь, он очень полезен, но обжечься легко.
Мне нравится метафора с ножками табуретки: достаточно хотя бы 3 опоры, чтобы "удержать" плоскость (сделать композицию устойчивой), а "разделять ножки" можно как раз через воздух. Как и говорил в прошлых постах, воздух — просто более чистенький сепаратор.
Прекрасный индикатор понимания этого — самоподобные колонки, например, тарифы. Их стоит выравнивать по самому крупному варианту, а одинаковые элементы располагать на одинаковой высоте. Через "силовые линии" и разделяющий воздух как раз будет легче понять, что есть что🙂
Лично я, упоротый на визуале, сразу обращаю внимание на работу с воздухом. С определенным опытом приходит понимание, что "пусто" — огонь, он очень полезен, но обжечься легко.
Мне нравится метафора с ножками табуретки: достаточно хотя бы 3 опоры, чтобы "удержать" плоскость (сделать композицию устойчивой), а "разделять ножки" можно как раз через воздух. Как и говорил в прошлых постах, воздух — просто более чистенький сепаратор.
Прекрасный индикатор понимания этого — самоподобные колонки, например, тарифы. Их стоит выравнивать по самому крупному варианту, а одинаковые элементы располагать на одинаковой высоте. Через "силовые линии" и разделяющий воздух как раз будет легче понять, что есть что
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9
This media is not supported in your browser
VIEW IN TELEGRAM
Часто вижу споры по поводу того, нужна сетка или не нужна. Хоть сам ей не пользуюсь, этот канал нужен, чтобы добиться именно понимания сути. Суть сетки или направляющих — показать ту самую "силовую линию"
Нам проще считывать то, что расположено вдоль воображаемой линии. Именно поэтому наборный текст лучше делать по левой стороне, а суммы в таблицах — по правой. С первым-то понятно, а с цифрами что?
Всё просто: в таком случае десятки находятся под десятками, сотни под сотнями и так далее. Каждый разряд формирует свою "силовую линию" и снижает когнитивную нагрузку при сканировании. Если делать по левой стороне, то будет "лесенка" в рязрядах, с которой сложно разобраться на интуитивном уровне; с правой — будто считаем в столбик
Говоря именно о сетке, она должна помогать, а не мешать, выравнивать, а не быть основой концепции, как правило. Это просто один из методов добиться важнейшего параметра хорошего дизайна — предсказуемости
Нам проще считывать то, что расположено вдоль воображаемой линии. Именно поэтому наборный текст лучше делать по левой стороне, а суммы в таблицах — по правой. С первым-то понятно, а с цифрами что?
Всё просто: в таком случае десятки находятся под десятками, сотни под сотнями и так далее. Каждый разряд формирует свою "силовую линию" и снижает когнитивную нагрузку при сканировании. Если делать по левой стороне, то будет "лесенка" в рязрядах, с которой сложно разобраться на интуитивном уровне; с правой — будто считаем в столбик
Говоря именно о сетке, она должна помогать, а не мешать, выравнивать, а не быть основой концепции, как правило. Это просто один из методов добиться важнейшего параметра хорошего дизайна — предсказуемости
❤14
Доллар спереди или сзади? По идее, спереди, так ведь в сериалах пишут всегда... И да, и нет.
Исконное написание — доллар спереди, без пробела, тысячи отделены запятой, а центы точкой. С рублями же иначе, тысячи отделены пробелом, копейки запятой, потом пробел и знак ₽.
При этом при локализации понятность становится важнее традиций, из-за культурных различий сканирования.
Так, если американец увидит цену в рублях, то ему будет когнитивно проще воспринять "₽10,000.00", хоть это и кажется странным, "10 000,00 $" не вызывает у нас диссонанса и считывается нативно.
Уместно и вообще отказываться от знака валюты, если валюта очевидна. Так не будет косвенной ассоциации с денежными затратами. Например, когда в оффлайне продается повседневный товар, валюту опускают или заменяют на ".-", наверное, это показывает отсутствие копеек, но немного грязнит объект.
На самом деле, культура конечного пользователя очень влияет на восприятие красивого и удобного, и привычные правила лучше нарушить, ведь они слишком общие и поверхностные
Исконное написание — доллар спереди, без пробела, тысячи отделены запятой, а центы точкой. С рублями же иначе, тысячи отделены пробелом, копейки запятой, потом пробел и знак ₽.
При этом при локализации понятность становится важнее традиций, из-за культурных различий сканирования.
Так, если американец увидит цену в рублях, то ему будет когнитивно проще воспринять "₽10,000.00", хоть это и кажется странным, "10 000,00 $" не вызывает у нас диссонанса и считывается нативно.
Уместно и вообще отказываться от знака валюты, если валюта очевидна. Так не будет косвенной ассоциации с денежными затратами. Например, когда в оффлайне продается повседневный товар, валюту опускают или заменяют на ".-", наверное, это показывает отсутствие копеек, но немного грязнит объект.
На самом деле, культура конечного пользователя очень влияет на восприятие красивого и удобного, и привычные правила лучше нарушить, ведь они слишком общие и поверхностные
❤7
Нам очень нужны несколько миддл ux/ui и 3д-художник. Прям очень-очень
Отпишите мне с портфолио пожалста 🙏
Отпишите мне с портфолио пожалста 🙏
Telegram
daniel
lab.pics ceo @fromlabpics
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Работаю над образовательным контентом про красивый дизайн, уже полгода как, в котором описываются супер-необычные темы в визуале. Например, okLCH-палитры, работа с эмоциями, связка внутри дизайн-системы отступов и скруглений как пропорцию и тд... 🥵
Пока готова только текстовая теория с анимациями, но хочется разбавить стримами и интерактивом
Я хочу обкатать как раз таки эту текстовую теорию и получить фидбек, чего не хватает или сложно объяснено, чтобы сделать всё еще круче
Готов открыть эту красоту пяти людям за символические 5 тысяч, так что отпишите, а я уж завалю вопросами😘
Пока готова только текстовая теория с анимациями, но хочется разбавить стримами и интерактивом
Я хочу обкатать как раз таки эту текстовую теорию и получить фидбек, чего не хватает или сложно объяснено, чтобы сделать всё еще круче
Готов открыть эту красоту пяти людям за символические 5 тысяч, так что отпишите, а я уж завалю вопросами
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🥰2✍1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤12
Ребят, у меня получилось восстановить основной телеграм-канал вот тут @fromlabpics
Буду постить соответственно туды ☺️
Буду постить соответственно туды ☺️
❤3