Юрий!

В плане интереса на странице всё отлично, просто на первый экран поставьте не коробку, а объект мужского вожделения — женское тело :‑) А коробку покажите в конце — получите эффективную концовку.

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

Попробуем уменьшить количество полос и этажей. У каждых трусиков объединим название, описание и иллюстрацию в один этаж.

Было
Стало

Избавимся от капслока с серым текстом и ради выразительности возьмём шрифт поживее:

Туфельки, свечки и прочие иконки можно будет вернуть в виде фонового паттерна, но я не буду специально на этом останавливаться.

Этажи идут один за другим и одинаковая структура быстро приестся. Поэтому сразу прикинем этаж с перевёрнутой конструкцией, который будем чередовать с предыдущим:

Обратите внимание, что иллюстрация обращена к тексту — это поможет глазу связать их друг с другом, а не с содержимым соседних этажей. Применим получившиеся конструкции к странице (шапка и подвал пока остались за кадром):

Добавим мотивирующую шапку и подвал с коробкой:

Напоследок ещё идея. Переключалки видов привлекают много внимания и загораживают фотографии. Можно попробовать заменить их на один залипающий в углу контрол, который будет менять вид у всех фотографий разом. Подобный контрол реализован в каталоге «Мэри Трюфель».

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеМодульная вёрсткаЧередование ритмаФормат: иллюстрацияФормат: текстНоситель: сайт
Отправить
Поделиться
Запинить

Комментарии

Так как теперь этажи чередуются компоновкой, то залипающий контрол в углу может работать не очень хорошо: на половине этажей он будет слишком далеко от картинки.

Возможно, подойдёт такой вариант: показывать контрол смены вида при наведении мыши на фотку девушки.

Если следовать названию сайта, то вид фотографий по умолчанию должен быть другим :‑)

3 фев 2016

Я бы ещё вынес отдельно ответ на автоматически возникающий в голове вопрос: «А как узнать размер?». Разместил бы его рядом с выбором размера.

3 фев 2016

В конце я, наверное, либо как‑то написал текстом, либо показал приоткрытую коробку, чтобы было видно что это целый набор трусиков по цене 3500 рублей.

Потому что человек может просто «заглядеться» и забыть, зачем он сюда вообще зашёл, и подумать, что это одни трусики стоят 3500 рублей.

13 фев 2016

Соглашусь с предыдущим советчиком и сделал бы ещё при наведении на коробочку вот такую анимацию для полноты картины.

12 янв 2017

Марат, подскажите, пожалуйста, откуда этот скриншот? Что за софт или сервис? В Гугле не удалось найти ответ :‑)

2 фев 2017

Рекомендуем другие советы