Обратить внимание на мелочи. Как улучшить свой дизайн
Автор статьи — Юлия Салах, дизайнер продукта в экосистеме “Мир Привилегий”
Связаться со мной — телеграм
Мой телеграм-канал “Другой дизайн”, где я делюсь опытом работы в продукте и пишу о дизайне.
Тонкости есть в любом деле, и чем дольше это дело постигаешь, тем больше этих тонкостей находится. В дизайне есть много лайфхаков, которые позволяют визуально его улучшать. Некоторые такие мелочи могут стать “своим стилем”, а некоторые являются основополагающими принципами, которые порой не замечаешь в работе, используя их бессознательно.
Новичкам всегда говорят: “Брось детали! Учись думать и анализировать, потом будешь кнопки рисовать”. Это правда, но учиться кнопки рисовать тоже придется и в целом на сам визуальный дизайн будет уходить много времени. Иногда эти мелочи позволяют значительно улучшить качество восприятия вашего дизайна, даже если кажется, что он и так совершенен.
Цветные тени.
Одно из самых простых решений, но крайне эффективных для того, чтобы дизайн стал чище.
Просто черный с прозрачностью или серый сильно портит элемент с тенью, тем более в природе вообще не существует черных/серых теней, поэтому визуально и появляется эффект грязи.
В художественных школах за грязные тени ставят двойки, и вообще запрещено писать чистым цветом, в нем всегда должны присутствовать оттенки, которые рефлектируют от окружения.
В интерфейсе удачнее всего примешивать темно-синий, но можно экспериментировать: если кнопка красная, то тень может быть темно-бардовой или темно-фиолетовой.
Не черный текст.
Как мы выяснили, черного цвета не существует. Типография это одно, где используется, наоборот, исключительно глубокий черный. В дизайне, одним из лучших решений для текста — это замена его на графитовый серый или темно-синий, так же, как и с тенями.
Выравнивания и отступы.
Банальнее не придумаешь, сетки для того в дизайне и существуют, но многие, тем не менее, особенно новички, этим пренебрегают.
Сложные композиции не обязательны, но центровка и равные отступы по краям и между элементами — закон визуальное иерархии. Отступами руководит закон близости, благодаря им мы легко объединяем объекты в интерфейсе в группы.
Скругления.
Важный момент, который сильно искривляет дизайн целиком.
Внутренний радиус скругления делим на два от внешнего радиуса.
Иногда, внутренний приходится не пропорционально увеличивать, чтобы визуально казалось гармоничнее.
За этим советую следишь когда проверяете верстку перед выпуском в продакшн. Часто разработчики в силу упрощения все равно делят на два, так проще. Однако в некоторых случаях это все равно режет глаз.
Небольшой личный лайфхак, все острые углы всегда скруглять на 1–2 px, в зависимости от масштаба, разумеется, если это соответствует стилистике. Остроугольные дизайны все еще создаются, но в основном все сейчас немного bubble.
Снова ссылаюсь на естество: в природе не существует идеально острых углов и совершенных прямых линий, скругления визуально всегда привлекательнее для человека, так зачем лишний раз раздражать?
К похожему визуальному искажению еще можно отнести следующий пункт.
Фрейм для иконок.
Ошибка практически №1 у новичков: нарисованная сгруппированная иконка.
Создать иконку и оставить ее без собственного фрейма — очень плохой тон, разработчики наверняка точно расстроятся.
Но не спешите центровать ее в середину рамки, наше зрение может обмануть.
В зависимости от самой иконки, полезно ее чуть сдвинуть ближе к какой-то из сторон, тогда фактически находясь не в центре фрейма, она визуально будет кажется отцентрованной. Еще можно любую иконку вписывать в малый квадрат и потом только центровать внутри фрейма. Короче, не верьте фактам, верьте глазам (но это только в этом случае).
Спасибо, что прочитали!
Жду Вас на своем канале в телеграм)
