Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь. Работа с пространством осуществляется за счет базовой сетки, направляющих, прогрессивной шкалы отступов, работы с соотношением…
Когда плотность компонента увеличивается, отступы и выравнивание остаются неизменными, но сам размер изменяется. Отступы. Не меняй отступы компонента при увеличении его плотности. Отступы компонентов влияют на высоту, а вот уменьшение отступов может негативно повлиять на взаимодействие с пользователем. Размер. На картинке показано то, как меняется высота при увеличении плотности компонентов. Выравнивание. Используй выравнивание по центру.…
Наложение Когда UI меняется, тогда компонент может быть перекрыт другими элементами, которые будут его закрывать. В этой ситуации его позиция и размеры остаются неизменными. Обрати внимание: контентная область перекрывается боковой панелью навигации (сайдбаром), но сама область не сдвигается, а элементы остаются в исходных размерах. Компоненты могут адаптироваться в зависимости от размера экрана и типа устройства,…
» class=»s eq er es» src=»https://miro.medium.com/fit/c/96/96/1*NogLs69DA2t7XdsWq-JtjA.png» width=»48″ height=»48″/>
Часто можно заметить, как дизайнеры пренебрегают воздухом в макете, а некоторые клиенты и вовсе не могут смириться с тем, что дизайны для них не заполнены на 100% графическим мусором.
Как же пустота, она же воздух, может помочь дизайнеру сэкономить место, донести правильные эмоции и смыслы до аудитории, а также помочь выстроить грамотный макет и расставить акценты? Обо всём по порядку.
1Самое простое — негативное пространство сэкономит место
На первой пикче пример сделанного мной логотипа с негативным пространством. В нём содержится 3 символа — буквы «ОС», сердечко и морда собачки. Негативное пространство тут позволило сэкономить место (все 3 знака размером с 1, вместо 3 отдельных знаков), что делает логотип лаконичным, удобным и не перегруженным.
2Пространство поможет в эмоциональной окраске
На второй пикче идущий человек намного меньше, чем пустое пространство вокруг него. Перевес в сторону пространства используется автором для того, чтобы подчеркнуть необъятность пустыни. Возможно, даже заложены рассуждения о ничтожности человека по сравнению с природой, но это не точно.
3Пространство грамотно разделит информацию и расставит акценты
На третьей пикче в макете выделено пустое пространство в центре, чтобы важная часть фонового изображения получила более важный акцент. Таким образом, сначала наше внимание привлекает фото (также из-за цвета, размера, положения и т.д.), потом большой заголовок помогает понять, о чём идёт речь, а другая информация по бокам в последнюю очередь дополняет всё сказанное и увиденное.
Чтобы выразить её, подпишись на мои блоги, для меня это очень важно. Чем больше читателей, тем больше мотивация делать контент чаще, лучше и качественнее. Обнял.
— Мой полезный ВК блог о дизайне с полезным контентом для дизайнеров и многим другим;
Суть в том что бы прийти к одинаковому отображению элементов интерфейса на экранах с различной плотностью. Потому что устройств очень и очень много и все они разные, а некоторые из них еще и «врут». Например, большой физический размер экрана не означает то, что на экране будет отображаться большая плотность. Также, не факт что заявленная плотность…
Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь Material — это дизайн-система, которая была создана Google, чтобы помочь всем, кто заинтересован создавать высококачественные…
Элементы могут оставаться в фиксированном положении по осям x и y или быть подвижными в любом направлении. Поверхности могут оставаться в фиксированном положении. Верхняя панель (1) остается в фиксированном положении, в то время как список карточек (2) скролится по вертикали. Поверхности (1,2) могут двигаться в любом направлении, хотя движение может быть ограничено одной осью. Поверхности…
При работе над дизайном сайтов для Тильды я уделяю особое внимание его адаптивной версии. Но, часто бывает так, что заказчик просто не видит этой работы, потому что проверяет одну или максимум две версии. Рассказываю, как это исправить. Не обязательно иметь много девайсов или использовать Google DevTools для того, чтобы проверить дизайн. Достаточно установить расширение Responsive…
Да я сам в шоке. Если бы об этом узнала моя преподавательница по русскому языку, она пристрелила всех участвующих в этом процессе. А я скорее всего не отделался бы легкой смертью. Тем не менее книга читателя нашла и сейчас мне пишут многие люди со всего СНГ, что меня изрядно удивило. А самое главное, книгу то…
Сейчас набирает обороты тема с любовью к себе. Из каждого инстаграма пишут про осознанность, про время с собой, про принятие. Но мало кто пишет, что, во-первых, все эти инструкции не универсальные, а во-вторых, что менять нейронные связи и привычки очень тяжело. Сначала про инструкции. Я, как и многие страдающие хорошистки в школе, учусь себя понимать,…