visual align 1160x620 - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

Краткий обзор, почему математика не является основным источником правды для дизайна.

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

Давайте рассмотрим несколько случаев:

Не все логотипы созданы равными

Работая над страницей клиентского раздела, я изначально хотел создать сетку, содержащую прямоугольники размером 256px * 200px с логотипами и именами клиентов.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

Хотя мой компьютер говорит, что все логотипы имеют высоту 24px, мои глаза говорят, что результат не выглядит визуально привлекательным.

Sketch позволяет мне преобразовать первый блок в символ для повторного использования, с помощью математики и модульности в качестве основы для создания макета. Но я должен был поверить своим глазам, и отказаться от этого повторяемого модуля, чтобы получить более сбалансированную и красивую сетку.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

Ограничительная рамка реальна

В приведенном ниже примере мои глаза говорят мне, что левая и правая стороны этой страницы успеха не кажутся вертикально выровненными по центру, но Figma утверждает обратное.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

Проблема в том, что компьютер видит изображения не так, как люди. Мы видим массу объекта, в данном случае футбольного мяча, но компьютер видит нечто, называемое ограничивающей рамкой (которая является невидимой рамкой, охватывающей каждый возможный пиксель на изображении). В приведенном ниже примере ограничивающей рамкой является синий прямоугольник.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

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

Вот как это сделать: найдите визуальную массу объекта, именно там находится его большая часть. Мы игнорируем маленькие осколки, которые имеют очень маленький вес, и таким образом получаем следующее:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

Более того, мы можем отредактировать растровое изображение, очистив некоторые брызги внизу, так что обновленная ограничивающая рамка станет естественной визуальной массой изображения.

Разные буквы одного шрифта могут не совпадать

Вот быстрый пример экспериментального логотипа для фирмы, занимающейся дизайном интерьеров. Выбран шрифт Helvetica Neue 64points, кернинг установлен на auto, а трекинг – на 60 точек. Базовая линия шрифта установлена на середину.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

Но мои глаза говорят мне, что между I и + больше пространства, чем между + и T. Мои глаза также говорят мне, что + не установлен по середине.

Итак, давайте исправим это:

Сначала базовая линия. Я бы обвел все слово, а затем вертикально выровнял буквы по центру.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

Затем, мы доверимся нашим глазам и настроим кернинг между + и T, чтобы он соответствовал кернингу I и +. Интервал по умолчанию смещает + слишком сильно влево. У I прямой вертикальный штрих, а у T – поперечная черта. Нам нужно проигнорировать ее большую часть, так как она занимает мало места относительно вертикальной черты.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

Вам не нужно придерживаться десятичных знаков

Когда я начинаю дизайн-проект, я обычно посещаю такой сайт, как type-scale.com, чтобы найти базовую шкалу шрифтов. Но обычно для большинства масштабов размеры шрифтов получаются в виде десятичных дробей.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Когда дело доходит до дизайна, лучше полагаться на глаза, чем на математику

Вам нужно создать несколько основных страниц с этой шкалой шрифтов, а затем вручную на глаз отрегулировать текст, прежде чем принимать решение о том, округлять значения в плюс или в минус. Это абсолютно субъективно и зависит от проекта, над которым вы работаете. Шкалы определенного шрифта лучше подходят для разных архетипов сайтов. Целевые страницы обычно имеют больший контраст между размерами шрифта, чем блоги или сайты продуктов.

Примечание: нет ничего плохого в том, чтобы оставить десятичные значения (лично мне это не нравится, особенно когда я делаю CSS). Здесь необходимо подчеркнуть, что, в целях достижения визуального баланса, ваш взгляд может помочь вам выйти за рамки измерений.

В книге «4 Hour Body», Тим Феррис объясняет, что весы не являются единственным источником правды, когда речь идет о потере веса. Вы можете весить 72 кг в прошлом месяце и 72 кг в этом месяце, но ваш жир будет перераспределен более правильно, так как в целом вы стали здоровее, чем были, и теперь ваша облегающая одежда идеально вам подходит.

Автоматизированные инструменты нашего софта помогают нам экономить время. Но эти инструменты созданы на языках программирования и поэтому очень математичны в своем подходе к интерпретации замысла дизайна. Ваши глаза – отличный инструмент. Используйте их.

Свежие вакансии
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург По договоренности ₽
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
                        Kodix Kodix UX/UI Designer Офис Москва (Moscow, Russia)
Все вакансии

Оригинал: uxdesign.cc

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Как создавать темные темы. Руководство от Superhuman

В этой статье мы расскажем, как создавать темные темы, которые будут читабельными, сбалансированными и восхитительными

10 золотых правил UI дизайна

Когда вы сомневаетесь, обратитесь к этому списку стандартных приемов UI дизайна, которым нужно следовать

Дизайн и проектирование лучших кнопок

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