Главная/ Конкурсы/ Веб-дизайн/ № 1708

Обновление дизайна карточки товара

Победитель

Сергей Качественный

Хотел добавить также варианты шапки (на синем фоне / на белом фоне другой концепции), а так-же показать адаптивность по лучше но не успеваю до завершения приема работ.
Выкладываю как есть.

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

Правки, доработки - соответственно по вашим требованиям. Обновление дизайна карточки товара

Претенденты на победу

Лешкевич Вадим

Добрый день, немного изменил цвета. - Обновление дизайна карточки товара

Adam Starlight

Дополнение к работе #497199
Так же я переработал страницу с отзывами. Помимо изменения дизайна я добавил "рейтинг комментария". Без неё не понятно насколько комментарий имеет отношение к реальности и сколько других людей его поддерживают. - Обновление дизайна карточки товара

Adam Starlight

Доброго времени суток!
Предлагаю свой вариант дизайна страницы товара. Блок с рекомендованной ценой подвижен и смещается вниз при прокрутке, для чего оставлено место справа. Это удобно, когда пользователь находится на вкладках по типу характеристик/описания и т.п. т.к. не нужно дополнительно никуда нажимать и в целом повышает конверсию.
Хотелось сделать простой, интуитивно приятный и понятный дизайн. Так же могу выполнить адаптивную верстку своего макета, если это Вас это интересует.
Буду рад услышать Ваши комментарии, правки и предложения. - Обновление дизайна карточки товара

Сергей Качественный

Правки к последней работе. Блок с ценами по высоте вполне пойдет под любую высоту. В дальнейшем в вёрстке будет адаптивность (как и говорил - если повезет и буду победителем - предлагаю идеальную, профессиональную верстку) - уже при адаптивной верстке будем ужимать размеры, отступы, элементы и т.д. не только относительно ширины экрана (max-width), но и высоты экрана (max-height) и все будет - идеально на выходе :)
К сожалению тут, на фрилансе нет функции чтобы я мог отвечать на ваши комментарии. Только могу писать описания к работе. - Обновление дизайна карточки товара

Никита Ланда

Мой вариант карточек товара. Все выполнено единым шрифтом, в заданной цветовой палитре. Для наглядности - справа - пример того, как карточки могут смотреться на вашем сайте. Вкратце о деталях: постарался уместить всю основную информацию, чтобы смотрелось лаконично, при этом не слишком громоздким; при наведении на название товара, цвет меняется в соответствии с цветовой палитрой; слишком большие изображения располагаются до "ограничительной линии", после чего покрываются градиентом - на мой взгляд лучше, чем умещать длинную картинку, уменьшая ее; цена помечается как рекомендованная, чтобы не вводить пользователя в заблуждение; показывается количество отзывов, чтобы пользователь знал, насколько актуален товар; функция предпросмотра - на случай, если не требуется переходить на страницу товара, а требуется лишь уточнить какой-то отдельный момент (если потребуется, продемонстрирую ее). Любые замечания и правки. Готов к исправлениям. Страница товара будет чуть позже. - Обновление дизайна карточки товара

Александра Дизайн

Еще один вариант карточки товара. Старалась придерживаться ваших рекомендаций и брифа. Могу исправить если не устраивает, учту все пожелания. - Обновление дизайна карточки товара

Dzen Fang

Немного видоизменена страница товара.
В соответствии с комментарием добавлен блок/область для фотографий из инстаграма.
Также появилась идея сделать возможность сортировки предложений по убыванию или возрастанию цены и оценки магазина.

P.S Кстати,синее затемнение в прошлом варианте никак не относится к самому макету, просто это был элемент декора аля "продолжение следует" ведь там внизу должен идти футер)) - Обновление дизайна карточки товара

Dzen Fang

Мобильный вариант макета - Обновление дизайна карточки товара

Сергей Качественный

Дополнение к работе ID: #493937
Вид при прокрутки страницы вниз. Фиксируются табы и блок с ценами - всегда на виду :)

Да кстати, в новом варианте (ID: #493937) - использовал полностью на всем сайте шрифт Arial. - Обновление дизайна карточки товара

Сергей Качественный

Еще один вариант :) Функционал как и в прежнем варианте, плавающий блок с ценами я думаю переделывать и не стоит (или может сделать вариант без плавающего блока?). Любые правки / доработки - соответственно, в момент :) - Обновление дизайна карточки товара

Сергей Качественный

Поправки к работе ID: #492591
Добавил инстаграм. Блок с ценами - также будет скользить при прокрутке экрана ниже его первоначального позиционирования.
Табы - уже как табы, а не якоря, но идея такая, что они при прокрутки страницы вниз будут так-же прилипать к верхушке экрана, а при переключении вкладки (если человек находится в самом конце описания товара например и переключает вкладку) - смена соответственно вкладки и плавный скролл вверх к началу информации.

Т.е. получается у посетителя ВСЕГДА будет в зоне видимости блок с ценами и удобная навигация по информации о товаре. Отзывы / Обзоры - идея с первоначальным ограничением по высоте. Затем при нажатии на "Показать еще" - развернется полный список (простой jquery скрипт). - Обновление дизайна карточки товара

Dzen Fang

Вот мой вариант странички товара.
При нажатии на рекомендованную цену будит перекидывать на вкладку ниже с предложениями.
На счет вкладок, убрал "Полное описание" так как уже есть "Описание" и "Хар-ки" о товаре.
Был чуть больше задействован оранжевый цвет чтобы был баланс между цветами.
Возможны любые правки. Макет по сетке бутстрап. - Обновление дизайна карточки товара

Сергей Качественный

Здравствуйте.
Предлагаю вам свой вариант!

Блок с ценами - при прокрутке страницы до блока с ценами - он будет "прилипать" к верхней части экрана (~30px от верхней части страницы) и следовать вплоть до прокрутки страницы в самый низ (к футеру).

Панель информационных ссылок (Описание, Характеристики, Обзоры и т.д.)
..................
Их функционал совсем не как "табы", а скорее как ссылки на "якори". Т.е. при нажатии пользователей например на "Обзоры" - страница плавно прокрутиться вниз до блока "Обзоры потребителей", а сама панель информационных ссылок "прилипнет" к верхней части экрана

Итог: Пользователь будет всегда видеть навигацию по странице товара, он сможет прокручивать ВСЮ информацию (от описания до аксессуаров) даже без навигации - колесом мыши, справа от информации всегда будет закреплен блок "купить товар" не зависимо от того, на сколько пользователь прокрутил страницу вниз.

Более подробно описал в самом низу скриншота дизайна т.к. тут ограничение по символам. - Обновление дизайна карточки товара

Dzen Fang

Мои варианты карточек товара.
Пожалуйста, прокомментируйте, что понравилось или не понравилось.
В соответствии с вашим отзывом могу сделать правки.
Позже скину свой вариант страницы товара) - Обновление дизайна карточки товара

Приз зрительских симпатий

Dzen Fang

Сергей Качественный

boutique_358188

Diabolic Kitty