Коллеги-дизайнеры, как вы создаете свою систему типографики для каждого проекта? Как выбираете конкретные размеры шрифтов для основного текста, заголовков, кнопок и т.д., и т.п.?
Я сейчас дорос до того, чтобы создать некий единый мастер-файл со всеми элементами интерфейса — типографикой, иконками, кнопками, инпутами и т.д., и потом использовать его во всех проектах, изменяя, например, семейство, шрифта, цвета и прочее.
Интересует, как вы подходите к этому вопросу. Как выбираете цвета? Какие стандартные оттенки используете (например, серый с градациями или какой-то специальный серый, тонированный цветом бренда)? Как стандартизируете свою работу от проекта к проекту?
Вопросы касаются всех UI/UX–дизайнеров, но еще в большей мере тех, кто работает в Sketch, потому что он дает огромные преимущества для такой стандартизации.
Эм, для каждого проекта подбирается то, что ему подходит.
Если это какое-то медиа, то нужно смотреть в сторону шрифтов с засечками, например, потому что они больше предназначены для чтения. Ну и частенько serif- или slab-шрифт создает настроение, которое не передать обычными сансами. Шрифт, скорее всего, выбирается из ГуглФонтс и тот, где есть достаточное количество начертаний.
Если же это какое-то промо, тогда тут однозначно что-то сансовое и очень болдовое. Короче, от задачи все зависит.
Размер шрифта тоже подбирается не методом "а пусть будет 13pt", а просто делаешь в макете разные размеры, разный интерлиньяж и смотришь — что лучше читается, что опрятнее выглядит, как разные шрифты в разных блоках работают друг с другом.
Цвет, само собой, под настроение сайта или гайдбук клиента (если есть). Ну и т.д.
Короче, мне кажется, вы перепутали теплое с мягким. Дизайн-система и дизайн как таковой — это как нож и вилка — они про разное, но когда вместе собираются, тогда удобнее кушать.
Я ничего не перепутал. Меня интересует подход, при котором часто использующиеся компоненты интерфейса собраны воедино для дальнейшего использования в новых проектах. То есть все настроено так, что начиная новый проект, нужно лишь изменить семейство шрифтов (если используются другие) и цвета, а размерности шрифтов и стили, они уже настроены и не нужно каждый раз ломать голову над тем, какой кегль будет у заголовка, а какой у текста кнопки.
saveTibet: я же говорю — вы путаете.
Не бывает универсального размера заголовка и шрифта. Потому что кроме шрифта на сайте еще огромное количество элементов, которые должны друг с другом взаимодействовать.
Каждый проект индивидуален. Нельзя просто взять и сделать все заголовки 16px.
И уж тем более, если вы говорите про разные шрифты, то, наверное, должны быть в курсе, что один и тот же размер у разных шрифтов может выглядеть и восприниматься совершенно по-разному.
Да, это все понятно. Но хочется как-то упорядочить подход. В основном я использую 16 pt для основного текста и с помощью Modular Scale подбираю остальные размеры, чтобы соотношение между размерами шрифта на странице было подчинено какой-то системе, а не взято с потолка. В итоге получается список кеглей от, скажем, 11 pt, до 200 с лишним.
В идеале, навесить на каждый кегль стиль, завязать их все на семейство шрифта, а потом, просто менять шрифт. И из списка кеглей выбирать для конкретного элемента тот, который подходит.
Я вам очень настоятельно советую не автоматизировать подобные вещи.
Простой пример — один и тот же интерлиньяж (line-height) в колонке на 800px и в колонке на 200px будет выглядеть совершенно по-разному. На 800p текст будет читаться замечательно, а на 200px блок будет разваливаться, потому что между строками слишком большое расстояние для такой ширины.
Достаточно просто открыть Скетч и нарисовать колонку в 800px с текстом и комфортным интерлиньяжем. А потом сузить ее до 200px и посмотреть снова. Есть прямая зависимость между длинной строки и межстрочным расстоянием. Очень глупо это отрицать.
Ваш вопрос не совсем корректен- определитесь, вас интересуют способы выбора цвета размеров или сама технология подготовки стилей. Для первого есть масса книг / курсов / уроков / в конце концов личного вкуса. Для второго, например, здесь есть несколько статей: sketchapp.me
В частности sketchapp.me/poshagovoe-rukovodstvo-po-sozdaniyu-n...
Меня интересует второе. Хотя подбор цветов для проекта, признаюсь, до сих пор вызывает у меня сложности.
Статъи на приведенном вами ресурсе я читаю да, общий принцип мне понятен, но я хочу поинтересоваться опытом именно тех, кто увидел мой вопрос здесь. Все-таки, практика она у каждого своя.
Обычно все индивидуально. Я например пришел к тому, что делаю в песочнице разные варианты секций для сайта которые неизменны. Такие как adb topbar header navbar sidebar footer.. , блоки contact menu card subscribe.. и более мелкие элементы как оформление ссылок и тп.
Простой
Простой
Средний
