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