Найти тему
Важные хоткеи в фигме Ctrl + alt + c: копирует свойства выбранного объекта. Очень удобно, когда надо быстро перенести несколько свойств с одного на другой (или несколько). Shift + a: ну это должен знать каждый. Это создание автолейаута. Ctrl + alt + k: создание компонента. Ctrl + ": убрать интерфейс. Удобно, если хочешь глянуть макет в полный рост, а просмотрщик включать лень или не можешь. Shift + v [h]: отразить выделенный элемент по вертикали и горизонтали, соответственно. Alt + w [a, s, d]: быстро выравнивай по верхнему [левому, нижнему, правому] краю.
10 месяцев назад
Иконки в веб-дизайне
Есть несколько правил по использованию иконок. Соберу их в одну кучу здесь. 1. Консистентность. Очевидно, что аутлайновые иконки не дружат с залитыми. 2. Простота. Не нужно усложнять, если можно донести информацию простой иконой, не нужна нам мешанина из крохотных элементов. 3. Отображение. Показывай иконку в анфас без изометрий. Это не строгое правило, но лучше соблюдать. 4. Сетка. По возможности рисуй иконку по сетке. Размер сетки определяется произвольно. 5. Превью вид...
10 месяцев назад
Адаптив или резиновый дизайн?
Многие не знают разницу в этих подходах. Стоит разобраться. Адаптивный дизайн использует медиазапросы для адаптации макета. Дизайнер заранее продумывает переходы из одного размера в другой. Зачем это нужно? Чтобы элементы, которые были в размере десктопа, хорошо выглядели на мобилке. Почему используют: адаптивный дизайн точнее контролирует изменение макета и стилей, в зависимости от размера экрана. Резиновый дизайн подстраивается под ширину экрана, используя доступное пространство. Такой подход обеспечивает консистентность макета во всех размерах. Очень удобен для сайтов-новостников, где много текста, который хотелось бы читать удобно на любых экранах...
10 месяцев назад
Основные правила ux дизайна
1. Закон Хика (Hick's Law): - Описание: Закон Хика гласит, что время, необходимое для принятия решения, увеличивается с увеличением количества вариантов. Чем больше вариантов предлагается пользователю, тем дольше он будет принимать решение. - Пример: в интернет-магазине, если на странице оформления заказа будет слишком много шагов и вариантов доставки/оплаты, пользователь может испытывать затруднения и отказаться от покупки. - Влияние на пользователей и продажи: чем быстрее пользователь придёт к решению своих проблем, тем быстрее он совершил покупку, всё просто. 2. Закон Фитта (Fitts's...
10 месяцев назад
Шрифт в веб-дизайне
Базовые правила при работе со шрифтом в вебе. Непреложные правила: 1. Размер шрифта (или кегль) - не меньше 14px. 2. Интерлиньяж - не меньше размера шрифта (здесь допустимо другое, в зависимости от шрифта) 3. Если создаешь ui-kit, то не нужно использовать все возможные начертания, скорее всего для проекта нужны несколько размеров и еще меньше из них с разными начертаниями. Теперь по спорным правилам: 1. В шрифтовой паре, шрифты должны быть похожи. Это не всегда верно, хотя для новичков это хорошее правило...
10 месяцев назад
Фигма доработала переменные
Теперь можно привязывать одни переменные к другим. Это кажется незначительным, но это удобно. Например, в проекте используются отступы от 4 до 120. В зависимости от шага, этих переменных может быть около 20ти. А потрогав вёрстку, мы поймем, что для разных объектов есть разные отступы. Есть margin-top, margin-bottom, то же самое с padding-ами, + gap (отступ между карточками). И в итоге, куча одинаковых переменных с одинаковыми значениями, но разными именами...
10 месяцев назад
Структурирование макетов
Сейчас речь пойдёт о большом продукте, с множеством страниц. 1. Большой продукт скорее всего включает в себя разные проекты и подпроекты. Сформируйте для каждого отдельную папку (проект). 2. Держите каждую страницу в отдельном файле. 3. Внутри каждого файла постранично расформируйте различные версии. Я пришёл к тому, что у нас хранятся только 3 версии: deprecated, current, new. Так мы не путаемся в целой куче версий и не мучаем разрабов. 4. Если в версии new нужно повертеть несколько вариантов, то пусть в отдельных секциях, удобная штука...
10 месяцев назад
Проверь сайт перед сдачей. Задача дизайнера работать на результат. Из каждого утюга говорят, что результат работы дизайнера это не красивая картинка, а дизайн, который продаёт. Вот несколько советов, как можно быстро улучшить дизайн: 1. Заголовки и тексты-подписи должны быть понятны и заметны. Надо проверить их размеры, контраст и визуальный вес. 2. Call-to-action должны быть заметны. Используйте акцентные цвета для них, обязательно в них должны быть кнопки, чтобы люди понимали что делать дальше, если их заинтересовало предложение. 3. Визуальная иерархия. Большой блок с кучей текста? - Раздели, выдели главное и обозначь визуально. 4. Адаптив это база, просто не забывай про него. Дальше пункты, которые зависят не только от дизайнера. 5.Формы. Нужно сокращать количество инпутов в формах, да и количество самих форм. К тому же, они должны быть функциональными и иметь защиту от дурака. 6. Скорость загрузки страницы. Важная оговорка, решения по таким вопросам относятся как к разработчикам, так и к владельцам бизнеса. Частый кейс: дизайнер: делает 2 инпута в форме, владелец: нужно собирать как можно больше данных, разработчик: мне вообще всё равно, что и как делать, но маски, автозаполнения и сложную логику в форме делать не буду. Телеграм канал: Ссылка
10 месяцев назад
Режимы наложения в фигме Multiply - делает белый цвет прозрачным. Screen - противоположность multiply. Делает чёрный цвет прозрачным. Hue - перекрашивает оттенок цвета в оттенок, который накладывается поверх. Overlay - перекрывает/накладывает один цает на другой, делая первый контрастнее. Saturation - повышает насыщенность цвета, игнорируя тон и цвет. Телеграм канал: Ссылка
10 месяцев назад
Плагины для Фигмы - styler - помогает выгрузить всю библиотеку стилей на одну страницу - charts - можно создавать редактируемые графики - avatars - генерит рандомные фото людей для аватарок - beautiful shadows - все понятно, накидывает на объект тень. Иногда работает не точно и дает грязные тени - find and replace - может помочь во время организации макетов - rename it - отличный плагин для переименования макетов. Устраняет некоторые недоработки фигмы в именовании Телеграм канал: Ссылка
10 месяцев назад