01Кейсы на разбориз архива
Лендинг детской художественной студии: цвет нравится, а сетка разваливается
Алина Л показала 19 февраля 2024
- Правки
- 3 правки
- Последняя
- 29 февраля 2024
- В разборе
принятой правки пока нет
кейс
Я иллюстратор, второй месяц пробую себя в вебе. Сделала концепт лендинга для детской художественной студии, иллюстрации свои: на первом экране большая картинка с детьми и красками, заголовок поверх. Цвета: тёплый оранжевый #ff8a3d, мятный #9fe3c9, тёмно-синий текст.
Проблема: когда смотрю на всё вместе, блоки ниже стоят кто где. Карточки направлений разной ширины, потому что подгоняла их под иллюстрации, отступы между блоками то 80, то 120, то 64. Ещё сомневаюсь, читается ли белый заголовок на оранжевом. Как это собрать и не убить картинки?
Проблема: когда смотрю на всё вместе, блоки ниже стоят кто где. Карточки направлений разной ширины, потому что подгоняла их под иллюстрации, отступы между блоками то 80, то 120, то 64. Ещё сомневаюсь, читается ли белый заголовок на оранжевом. Как это собрать и не убить картинки?
правка 1
Картинки убивать не надо, надо дать им рамку. Сейчас сетку диктуют иллюстрации, а должно быть наоборот.
Возьми 12 колонок с гаттером 24 и разложи карточки направлений по 4 колонки, три в ряд. Иллюстрацию вписывай в карточку, пусть вылезает за край, если хочется живости, но сама карточка одной ширины.
Отступов между блоками выбери два: 120 между крупными смысловыми блоками и 64 внутри. Больше значений не нужно, глаз как раз и ловит, что 80 рядом со 120 стоит случайно.
Белый на #ff8a3d проверь плагином, по памяти там около 2,4:1, для заголовка не хватит даже трёх. Либо оранжевый темнее, либо заголовок тёмно-синим.
Возьми 12 колонок с гаттером 24 и разложи карточки направлений по 4 колонки, три в ряд. Иллюстрацию вписывай в карточку, пусть вылезает за край, если хочется живости, но сама карточка одной ширины.
Отступов между блоками выбери два: 120 между крупными смысловыми блоками и 64 внутри. Больше значений не нужно, глаз как раз и ловит, что 80 рядом со 120 стоит случайно.
Белый на #ff8a3d проверь плагином, по памяти там около 2,4:1, для заголовка не хватит даже трёх. Либо оранжевый темнее, либо заголовок тёмно-синим.
правка 2
И подумай, кто это читает. Студия детская, но решают родители: им нужны возраст, расписание и цена, а не только настроение. Картинка на первом экране хорошая, если рядом есть эти три вещи.
правка 3
Через две недели: собрала на 12 колонках, карточки по 4, отступы оставила 120 и 64. Плагин показал на оранжевом 2,35, сделала заголовок тёмно-синим, на оранжевом он даже лучше смотрится. Возраст и цену вынесла под заголовок. Странно, но картинки стали выглядеть дороже, когда их зажало в одинаковые рамки.