Юрий Головчанский
3 февраля 2016
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Здравствуйте!

Как лучше заинтересовать посетителя на первом экране? Те самые Attention & Interest. И достаточно ли эффективная концовка? Может, что-то добавить или убавить?

Укажите слабые стороны страницы. Вживую посмотреть можно здесь popkees.com.


Юрий!

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

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

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

Было

В тему: совет о фильтрах в магазине бюстгальтеров

Стало

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

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

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

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

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

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

Подобный контрол реализован в каталоге «Мэри Трюфель»

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

P. P. S. Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Евгений Калмыков
3 февраля 2016

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

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

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


3 февраля 2016

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

Алексей Скуратов
13 февраля 2016

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

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

Марат Абдрашитов
12 января 2017

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

Максим Петренко
2 февраля 2017

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть 3




Недавно всплыло

Как же мне сделать систему, удобную и понятную для конечного пользователя?

2
Как написать заказчику, что я установлю модуль на его сайт после окончательной оплаты, и при этом не обидеть его? 2 Расскажите об управляемости. Домашнее задание 4 Как флексить. Отступить от идеала 2