05Сетка и типографикаиз архива
H1 48, H2 40, H3 36, и всё выглядит одинаково
Учебное приложение для записи в бассейн, первый курс. На экране расписания заголовок экрана 48, название дня 40, название занятия 36, остальной текст 16. Преподаватель сказал, что иерархии нет и всё кричит. Я же сделала разные размеры. Не понимаю, на что смотреть.
правка принятаавтор кейса взял в работу
Разница 48-40-36 слишком маленькая, глаз её почти не различает, а всё вместе слишком крупно для телефона. Иерархия держится не только на кегле, а на трёх вещах сразу: размер, насыщенность, цвет. Попробуй так:
заголовок экрана 28 жирный;
день недели 20 полужирный;
название занятия 17 полужирный, время и тренер 15 обычный, серым #5f6670;
остальной текст 16.
Шаг между уровнями хотя бы в 1,2 раза, тогда разница видна. И не всё надо делать заголовком: день недели может быть плашкой-разделителем, мелким капсом 13 px с разрядкой. Уровней должно быть столько, сколько смысловых ступеней на экране, а не сколько стилей в библиотеке.
заголовок экрана 28 жирный;
день недели 20 полужирный;
название занятия 17 полужирный, время и тренер 15 обычный, серым #5f6670;
остальной текст 16.
Шаг между уровнями хотя бы в 1,2 раза, тогда разница видна. И не всё надо делать заголовком: день недели может быть плашкой-разделителем, мелким капсом 13 px с разрядкой. Уровней должно быть столько, сколько смысловых ступеней на экране, а не сколько стилей в библиотеке.
И проверь отступы: над заголовком расстояние должно быть больше, чем под ним, иначе заголовок висит между двумя блоками и непонятно, к чему относится. По описанию у тебя это тоже может быть. В сетке 8: сверху 24, снизу 8.
Сделала по Татьяниной схеме, 28/20/17, время серым. Отступы как Гена написал. Преподаватель на просмотре сказал «вот, теперь читается сверху вниз». Сама вижу, что раньше экран был как афиша
Хорошая переделка. Серый #5f6670 на белом проходит с запасом, около 5,8:1, можно не бояться.