Разработка дизайна для вашего будущего сайта. Адаптивная верстка и интеграция на CMS WordPress!

Разрабатываем дизайн окна быстрого просмотра карточки товаров. Урок #2 Дизайн

/ Сергей Нуйкин / Веб-дизайн

Друзья, приветствую! Как и обещал, записал вторую часть видео, в котором покажу, как можно разработать окно быстрого просмотра карточки товара для интернет-магазина. Если вы не знаете о чем речь, то для начала рекомендую ознакомиться с первой частью, в которой был создан прототип этого окна. В процессе прототипирования была создана основа с расположением элементов. В этом видео опираясь на прототип перейдем к дизайну.

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

В итоге мы получим два варианта окна карточки для предварительного просмотра товара.

веб-дизайн, дизайн карточки товаров

Напишите в комментариях, какой из вариантов на ваш взгляд лучше и почему вы так считаете.

На мой взгляд, доработанный вариант получился немного лучше первого, выглядит более гармоничным. Хотя кнопка в первом привлекает больше внимания, и есть сомнения насчет желтого фонового квадрата у товара.

В дальнейшем планирую больше уроков по веб-дизайну, показывать процессы создания дизайна сайтов, landing page либо каких-то отдельных блоков. Будет ли вам интересно смотреть такие видео? Если есть пожелания, напишите о них также в комментариях.

Понравилась статья?
Подпишитесь на обновления сайта:


Информация о политике конфиденциальности
Поделитесь статьей с друзьями:

Выражаю искреннюю благодарность читателям, которые поддерживают проект и рассказывают о статьях своим друзьям!

Комментарии к статье:
    • Арсентий

      А мне вариант без желтой рамки и с оранжевыми кнопками больше понравился. Смотрится как мне показалось легче и интереснее, даже на кнопку купить захотелось покликать.

    • Сергей Нуйкин

      Арсентий, спасибо за ваше мнение. В принципе оба варианта рабочие на мой взгляд, визуально кому-то нравится один, а кому-то другой.
      По факту лучше конечно протестировать на реальном сайте сделать АВ тест и посмотреть статистику.

    • Виктория

      Спасибо, что делитесь и даёте возможность посмотреть на процесс вживую! Для меня как начинающего веб-дизайнера ваши уроки очень актуальны. Особенно такие не очевидные вещи, как использование временной рамки для выравнивания, выбора сетки и расположения текста и кнопок.

    • Сергей Нуйкин

      Виктория, приятно знать что материал кому-то оказался полезен.

    • Rahim

      Здравствуйте
      Нужен исходник если это возможно

    • Сергей Нуйкин

      Здравствуйте Rahim. К сожалению исходник уже наверное не найду. Попробуйте создать сами по видео.

Добавить комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Нажимая на кнопку «Отправить комментарий», вы соглашаетесь с Политикой конфеденциальности.