Ошибки дизайнеров, о которых не говорят

Есть ошибки, про которые говорят на каждом углу: плохой контраст, слишком много шрифтов, отсутствие адаптива. Про них ты уже знаешь, т.к. И мы тоже тебе о них рассказывали. Но есть другой класс ошибок – те, которые дизайнеры тянут годами, не замечая. Они не бросаются в глаза сразу, но именно они рушат кейсы, накапливают правки от клиентов и не дают расти дальше. Про них и поговорим.

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

Кейсы на Behance: первое впечатление

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

Огромные шрифты

Одна из самых частых проблем в кейсах, а именно огромные шрифты в оформлении самого кейса. Мы не говорим про какие-то декоративные решения, а про шрифты которые используются для описания проектов, в блоках типа “о проекте” и подобных.

Грамотное оформление блока кейса студента nexfield.academy 

Следи за размерами всех элементов: отступами, иерархией заголовков, плотностью текста. Если в самом проекте у тебя идеальная сетка, а в кейсе всё тяп ляп, то ты не относишься к подаче работы как к отдельной дизайн-задаче. А она именно ею и является.

Видео в кейсах: забудь про встроенный плеер Behance

Adobe – компания с богатой историей игнорирования собственных продуктов. Встроенный видеоплеер Behance работает нестабильно, часто лагает и портит впечатление от кейса. Решение простое: используй Vimeo и вставляй видео через embed-код. Разница в восприятии – огромная.

Видео в кейсе – это не опция, это обязательный элемент! Покажи работу в движении: анимацию перехода, оживлённый мокап, интерактивное состояние. Статичные экраны это базовый минимум, если необходимо ВАУ, то без видео никак. Видео мгновенно делает кейс живым и запоминающимся.

Правки от клиента – чаще всего твоя проблема, а не его

Если ты когда-нибудь злился на клиента за «бессмысленные» правки, то у меня есть для тебя неприятная новость. В большинстве случаев правки появляются не потому что клиент сложный. Они появляются потому что ты не объяснил своё решение.

Почему клиент просит перекрасить кнопку в красный?

Представь ситуацию: ты сделал CTA-кнопку синей. Клиент пишет: «Сделай красной, красный – это энергия, сила, я читал». Ты злишься. Но подожди, а ты рассказывал клиенту, почему кнопка синяя? Что это фирменный цвет бренда? Что синий в данном контексте работает лучше по контрасту с фоном? Что красный будет конкурировать с элементами на странице?

Типичная ситуация, когда не объясняешь свои решения

Скорее всего, нет. Ты просто прислал макет с кратким «Готово» – и клиент остался один на один с картинкой. Он не дизайнер, он не телепат. Поэтому он начинает опираться на то, что знает: статью про психологию цвета, которую прочитал 5 лет назад.

Как презентация работы сокращает количество правок

90% правок снимается банальным созвоном с клиентом перед сдачей. Не «вот ваш дизайн», а живая встреча или звонок, на котором ты проводишь клиента по макету. Объясняешь: вот почему мы использовали именно эти цвета, вот почему CTA размещён здесь, вот почему шрифт такой. Когда клиент понимает логику решений, он перестаёт их оспаривать.

Nielsen Norman Group в своих рекомендациях по дизайн-критике отмечает, что нередко проблема правок кроется в разном языке: то, что дизайнер называет «кернинг и высота строки», клиент описывает как «слишком плотно» или «неудобно читать». Задача дизайнера – стать переводчиком между своими профессиональными решениями и понятным языком бизнеса.

AI-инструменты для подготовки презентации

Подготовка презентации к показу клиенту теперь занимает не час, а 5–10 минут. С помощью AI можно быстро сгенерировать структурированные комментарии к слайдам, написать обоснование каждого решения, создать визуальный сопроводительный материал. Используй этот инструмент, который сэкономит твоё время и деньги. Подробнее о том, как дизайнерам применять AI на практике, рассказываем на нашем курсе AI for Designers.

Типографика: дьявол в деталях

Плохая типографика – это не «некрасиво». Это неудобно, нечитабельно и непрофессионально. При этом большинство типографических ошибок настолько привычны, что дизайнеры их просто не замечают. Шрифты – отдельный мир, в котором нужно разбираться. Если хочешь углубиться в тему выбора шрифта для проекта, почитай нашу статью «Как выбрать шрифт». Здесь разберём то, что ломается чаще всего.

Межстрочное расстояние: чем крупнее шрифт, тем теснее

Одна из самых массовых ошибок – оставлять стандартное межстрочное расстояние для любого размера шрифта. Стандартный line-height может быть и неплохой вариант для мелкого текста (но тоже не всегда), но для крупных заголовков, необходимо «шатать» высоту строки.

Строки левого заголовка выглядят “разлетевшимся” из-за Auto высоты строки

Правило работает так: чем крупнее шрифт, тем меньше должно быть межстрочное расстояние. Для заголовков часто нужно ставить line-height 90-100%, иначе строки «разваливаются» и теряют связь между собой. Для основного текста нормальный диапазон – 120-150%. Nielsen Norman Group в своих исследованиях типографики указывает, что увеличение стандартного leading на 4–6px для блоков текста создаёт более «воздушное» и комфортное чтение, но применять это механически к заголовкам – ошибка.

Кернинг: когда слово разлетается на части

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

Пример плохого кернинга на реальном плакате выставки. Из-за некорректнового кернинга текст читается следующим образом -> ШАГ АЛ. ПР АГУ ЛКА.

Особенно коварны буквы с диагональными элементами. В латинице это W, V, Y, T, A – они создают так называемые «ловушки пространства» по обеим сторонам. В кириллице следи за Г, Д, Л, У, Ч, г, з, у – принцип тот же. Команда Fontfabric, которая профессионально занимается созданием шрифтов, рекомендует простой лайфхак: прищурься или переверни текст вверх ногами. Так мозг перестаёт читать слова и начинает воспринимать пространство между буквами как абстрактные формы – и плохой кернинг сразу становится очевидным.

Один вопрос «зачем?» экономит часы работы

Дизайнер получает задачу: «Сделай редизайн кнопки». И идёт делать. Не спрашивает зачем. Не спрашивает, что не так с текущей. Не смотрит на данные. В итоге делает другую кнопку, но не решает проблему. Потому что проблема была не в цвете или форме кнопки, а в том, что до неё нужно скроллить 5 экранов, она теряется среди других элементов, или CTA вообще не тот.

Задача дизайнера – решать проблему, а не выполнять задание.

Вопрос «зачем нам это нужно?» в начале – это не занудство и не попытка усложнить процесс. Это профессионализм. Именно так работают сильные дизайнеры: они сначала разбираются в проблеме, и только потом проектируют решение. 

Спрашивай: что сейчас не работает? Какая метрика нас не устраивает? Есть ли данные – аналитика, результаты юзер-тестов, тепловые карты? Чем больше контекста у тебя на старте, тем точнее будет решение – и тем меньше шансов, что ты нарисуешь «другое, но неправильное».

Сетки: не для слабаков, а для тех, кто хочет расти

Сетка в дизайне – это не ограничение. Это инструмент. И то, что некоторые опытные дизайнеры говорят «я так вижу, мне сетки не нужны» – не значит, что ты можешь позволить себе то же самое на старте карьеры.

Если ты только начинаешь: используй сетки! С ними работать легче, чище и понятнее – и для тебя, и для тех, кто будет смотреть твой макет. Совсем не обязательно брать стандартные 12 бутстраповских колонок. Попробуй 4-колоночную сетку, 8-колоночную, швейцарскую модульную сетку. Главное – используй систему, а не делай «на глаз».

Интерфейс Paraform выстроен по сетке

Сетка помогает набить руку в построении композиции, а это фундаментальный навык, без которого дальше не двинешься. Nielsen Norman Group прямо указывает в своих материалах, что выравнивание по сетке – один из ключевых принципов визуально привлекательного и воспринимаемого как профессиональный интерфейса. Это не субъективное «красиво/некрасиво», а вопрос доверия пользователя к продукту.

Когда ты поработаешь с сетками несколько месяцев, ты начнёшь их чувствовать – и тогда сможешь осознанно от них отступать. Но это именно осознанное отступление, а не незнание. Разница между этими двумя вещами огромная.

Итого

Обидная правда: большинство конкретных и «неочевидных» ошибок в итоге всё равно упираются в базу. В базу работы с типографикой – потому что кернинг и межстрочное это не «детали», а фундамент. В базу коммуникации с клиентом – потому что дизайн это не картинка, а решение задачи. В базу композиции – потому что сетка это не подсказка для начинающих, а профессиональный инструмент.

Учи матчасть, задавай вопросы до начала работы, презентуй свои решения – и большинство этих ошибок просто исчезнут из твоей практики. Если хочешь прокачаться системно, залетай к нам на курс UX/UI дизайнер в nexfield academy мы разбираем именно это: не как рисовать красивые картинки, а как думать и работать как профессионал.