September 3, 2020

UX UI

https://antonz.ru/
https://designpub.ru/
отступы-в-дизайне-системный-подход-82cad46dd34f
https://setproduct.com/
https://web-etalon.ru/blog/usability/


пользуйся колонками
компонентами
добавляй воздух
направляющие
не дизайн ради дизайна
делай контраст
размеры и отступы одинаковые
исп-уй одни и те же эл-ты в разных вариациях


Фигма позволяет быстро расставить constraints (настроить адаптивность), благодаря чему мини-карточку можно увеличить для планшетной или десктоп версии, не потеряв связь с мастер-компонентом. Плюс ко всему разработчикам становится понятна адаптивность любого модуля.


делать 1000 пкс, чтобы 24 уходили под скролл
при адаптиве, кнопки уходят - вниз налево
1.для ноутбука убираем "уши" делаем сильно меньше
2.сужаем контент по высоте
3.справа -вниз налево
переставляй блоки, а не перепрыгивай (телепорт)
Видим не 678, а 650 пкс - потому что меню, потому что браузер.
Высота первого экрана 900 пкс +-
(покажи менюшку бургера на экране 480 - размером 320 - так тебе будет меньше работы)

на экран 1024 - 15 шрифт это нормально, но мельче не надо.


Figma
Alt+L заколапсить слои. А сворачивай разворачивай с зажатым
альтом alt
ctrl+{} - перемещение слоя или групп слоев. ctrl + shift + {} - сразу наверх
ctrl+r - переименование. А если выделишь несколько, то будет массовое переименование
3-е 14:01 - инструмент Slice (нарезать область)
там же - оптовая вставка фотографий и карандаш
всё о менюшке - https://www.youtube.com/watch?v=1XnyI-ZaKlI&list=PLM2Q6lcZo4MexclJrYxA0Is42qWBBuHpB&index=2
У bootstrap 12 колонок, а размеры 70 и 30

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

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

Урок 7 — Компоненты в Фигме #1 - Про компоненты внутри компонентов ( на отдельном фрейме)

140 - 150 % для межстрочного - это нормально

вставляй текст через ctrl + shift + v - так будут учитываться твои стили

Пользуйся текстовыми стилями. Можно сделать стили для теней.