Я Никита Колюгин, дизайнер цифровых продуктов. Делал дизайн для Бургер Кинга, Бетховена и Medlinx. Веду телеграм-канал про жизнь дизайнера.
В статье мы пройдёмся по этапам создания красивых скруглений.
Правила в картинках:
Уровень дизайнера легко определить по деталям. Одна из таких мелочей — умение правильно подобрать корнер-радиус.
Представьте ситуацию.
Дизайнеру Косте упала задачка — задизайнить промо-карточку для мобильного приложения.
Костя привык подбирать радиусы элементов на глаз, и у него получилось это:
Он ещё не читал эту статью, поэтому не знает, как исправить макет. Давайте разбираться вместе.
Собрал пять правил красивого скругления в дизайне. Сохраняйте в закладки, чтобы не оказаться на месте Кости.
Правило №1 «Внутренний угол связан с внешним»
Пусть будет главным правилом в списке — радиус внешнего контейнера равен радиусу внутреннего плюс отступ между ними.
Это правило — база, но дизайнеры нарушают его в каждом втором макете.
Используйте для радиусов и отступов числа, которые делятся на четыре: 4, 8, 12, 16, 20, 24, 32… Лучше всего зафиксировать значения в переменных.
Вот, что у нас получается.
С прямоугольными формами разобрались. Костя уже готовится уйти на обеденный перерыв, но замечает, что круглая иконка не вписывается в угол.
Правило №2 «Кружок внутри, угол снаружи»
Первое правило работает и в случае с кружочком. Чему равен радиус скругления окружности? Вспоминаем школу и делим сторону эллипса пополам.
Есть ещё один фокус, следите за руками.
- Рисуем кружок со стороной равной двум радиусам контейнера.
- Прибиваем круг к углу вплотную.
- Уменьшаем окружность к собственному центру.
Получили такой блок.
Костя — фанат марки Эппл, а у них скругления выглядят как-то посимпатичнее что ли.
Правило №3 «Применяем сглаживание»
В природе не бывает правильных углов, вычерченных циркулем. Обычные скругления выглядят неестественно для человеческого глаза.
Используйте «corner smoothing» в Фигме, чтобы сгладить углы и сделать дизайн приятнее для восприятия.
Большинство конструкторов сайтов не умеют сглаживать углы, а некоторые версии браузеров и андроида вообще неего не поддерживают. Ребята из Эппла добавили сглаживание в свои продукты по-умолчанию, но для веб-сайта придётся повозиться с отдельной библиотекой. Покурите тему до передачи макетов в разработку.
Добавили сглаживание — глаз радуется.
Осталось наполнить карточку текстом. На этом моменте Константин снова загрустил.
Правило №4 «Радиус дружит с текстом»
Нет ничего более непрофессионального и гадкого на вид, чем строчка текста, которая упирается в радиус. Большое скругление выглядит некрасиво рядом со строгим гротеском по типу Интера и одновременно отжирает ширину у текстового блока. Так же бугеркинговский Флейм не играет с острыми углами.
Я использую радиусы от 12 pt до 20 pt для карточек в мобильных приложениях. Большие разделы и поп-ап шторки скругляю до 32 пунктов. Рисунок шрифта, кегль текста и ширина экрана играют решающую роль в подборе скруглений для карточек.
Правило №5 «Проверка обводкой»
Как удостовериться, что мы правильно подобрали радиус скругления? Сейчас покажу маленький лайфхак.
Создаём внутреннему элементу внешнюю обводку и увеличиваем толщину до тех пор, пока она не достигнет края контейнера. Фигура, образованная обводкой, должна идеально лечь в угол.
Такой экран уже можно без кринжа показывать арт-директору.
Пост-скриптум
Каждое из приведённых правил можно нарушать. Большие цифровые продукты и экосистемы вообще не забивают себе голову такими мелочами.
Тем не менее, я считаю, что нужно стремиться к совершенству, ведь сделать хреново всегда успеем!
Десерт
Панель приложения на Макбуке знает о физическом скруглении дисплея.
... и наступает та эпоха, когда подобная шняга с десятикратным превышением всех разумных ПДК по содержанию кринжатины становится обыденностью. Господь, здесь уже нечего спасать, жги...
Уровень дизайнера легко определить по деталям. — а вот это, пожалуй, золотые хоть и банальные слова. Судя по "правилам", чтобы достичь уровня автора, нужно затариваться вагонами кислородных баллонов.Не все такие умные и прокачанные как ты.
Это не я такой умный и прокачанный, это они такие тупые и никчемные. Все относительно в пирамиде человеческой глупости, вопрос лишь в пропорции над уровнем материала и и под.
Но ты все равно возвышаешься над этой массой биоматериала.
Опять ты не понял. Я не возвышаю, я четко и трезво позиционирую себя на своем уровне этой пирамиды. И от этого еще страшнее видеть подобные свежие инфокучки - количество тех кто "под" ужасает. При том что, если мы уж переходим на личности, то я далеко не на высоких ярусах, автор где-то там, а лизунов вообще не видно внизу, но здесь они проявляются потому что к основанию количество кирпичей в ярусах существенно больше. Се ля ви )
Мне статья зашла, более того я занес ее в закладки. Такие дела…
С чем тебя и поздравляю, каждому свое, увы. Включив логику — если что-то "зашло", это не означает что это годнота. Какое бы гуано не издал кто-то, обязательно найдутся те, кто сочтет его золотом. Раньше книжки специализированные печатали из серии "Что-то там для чайников", сейчас чтобы не уничижать чувства ЦА пишут такие вот промостатейки без подобного дисклейма.
Я понял. Ваш пример дизайна, чего либо... Покажете?
Да он токсик какой-то, не парься.. У него, если почитать, все комменты такие возвышенные.