Друзья, приветствую! Как и обещал, записал вторую часть видео, в котором покажу, как можно разработать окно быстрого просмотра карточки товаров для интернет-магазина. Если вы не знаете о чем я, то для начала рекомендую ознакомиться с первой частью, в ней мы разработали прототип этого окна. В предыдущий раз мы создали некую основу, базу, а сегодня перейдем к дизайну.
Это видео будет разделено на две части. В первой части я из прототипа создам дизайн с минимальными изменениями. Поработаем с цветами и элементами. Во второй же части мы будем дорабатывать и попытаемся улучшить макет. Попробуем поменять местами блоки, изменим цвета элементов карточки.
В итоге мы получим два вот таких варианта окна карточки предварительного просмотра товаров.
Напишите в комментариях, какой из вариантов на ваш взгляд лучше и почему вы так считаете. На мой взгляд, доработанный вариант получился лучше первого, так как он получился более гармоничный. Хотя есть небольшое сомнения насчет желтого фонового квадрата.
В дальнейшем планирую больше уроков по веб-дизайну, показывать процессы создания дизайна сайтов, landing page либо каких-то отдельных блоков. Будет ли вам интересно смотреть такие видео, и если есть пожелания, напишите о них также в комментариях.
Размеры макета сайта при разработке адаптивного дизайна
Дизайн кнопки для сайта: рекомендации
Разрабатываем дизайн окна быстрого просмотра карточки товаров. Урок #1 Прототип
Чек-лист по типографике и текстам в веб-дизайне
Делайте правильно! Иконки в веб-дизайне
А мне вариант без желтой рамки и с оранжевыми кнопками больше понравился. Смотрится как мне показалось легче и интереснее, даже на кнопку купить захотелось покликать.
Арсентий, спасибо за ваше мнение. В принципе оба варианта рабочие на мой взгляд, визуально кому-то нравится один, а кому-то другой.
По факту лучше конечно протестировать на реальном сайте сделать АВ тест и посмотреть статистику.
Спасибо, что делитесь и даёте возможность посмотреть на процесс вживую! Для меня как начинающего веб-дизайнера ваши уроки очень актуальны. Особенно такие не очевидные вещи, как использование временной рамки для выравнивания, выбора сетки и расположения текста и кнопок.
Виктория, приятно знать что материал кому-то оказался полезен.
Здравствуйте
Нужен исходник если это возможно
Здравствуйте Rahim. К сожалению исходник уже наверное не найду. Попробуйте создать сами по видео.