Привіт друзі!
В цьому відео я покажу вам, як створити дизайн карточки товару.
Почнемо. Перше, що ми зробимо, це додамо робочу область Desktop і створимо найпростішу сітку з 12 колонками. А далі перейдемо до створення нашої карточки товару.
Одним з її елементів є кнопка. У мене в прикладі це кнопка “Купити”. Взагалі, назви кнопок намагайтесь робити максимально короткими. Також не забувайте про читабельність тексту. Для початківців рекомендую використовувати шрифти Inter, Roboto або Poppins. Розмір шрифту на кнопці не повинен бути меншим за 16 пунктів. Товщина шрифту повинна бути або Regular, або трохи товщою, також допускається використання Bold. Висота рядка залишається 100%.
Далі нам потрібно зробити відступи навколо назви кнопки. Щоб встановити внутрішні відступи, я буду використовувати правило 2х. Тобто, якщо по вертикалі зверху і знизу я зроблю відступи 16 пікселів, то по горизонталі вони будуть в два рази більшими - 32 пікселя. І ще одна маленька, але дуже важлива деталь: ширина кнопки повинна бути від 100 до 360 пікселів, а висота не повинна виходити за межі діапазону 40-60 пікселів. Кнопка готова.
Далі попрацюємо над назвою, ціною та коротким описом товару, тобто над нашим текстом. Тут намагайтесь використовувати лише одну гарнітуру і максимум три розміри шрифту. Найменш важливим, а отже найменшим елементом є опис. Найкращими розмірами опису, залежно від масштабу картки, є 12, 14 або 16. Якщо текст кнопки 16, використовуйте 12 або 14 для кращої читабельності. Висоту лінії зробимо 150%.
Ціна може бути точно такого ж розміру і стилю, як і текст на кнопці. Основний заголовок може бути на два або чотири пункти більшим. Зробимо його 20 пунктів.
Далі давайте перейдемо до фотографії товару. Вона має займати приблизно половину висоти карточки. Поки що ми можемо залишити такий розмір, як є, а пізніше глянемо, скільки буде займати наш текст з кнопкою та всіма відступами, і відповідно внесемо зміни.
Тепер налаштуємо відступи між елементами. Щоб створити ієрархію між ними, я буду використовувати два розміри відступів: 24 пікселі та 12 пікселів. Між назвою товару та ціною в мене буде відступ 12 пікселів, тому що я хочу візуально показати, що ці два елементи знаходяться в одній групі. Між іншими елементами, а також по боках, зверху і знизу в мене будуть відступи 24 пікселі.
Давайте вставимо нашу карточку на робочу область і налаштуємо її ширину. Я хочу, щоб вона по ширині займала три колонки, і в майбутньому я б могла розмістити чотири таких карточки в одному рядку. Ось тут поправимо налаштування внутрішнього автолейауту, щоб все знаходилось в межах контейнера і не виходило за його рамки. І покращимо читабельність заголовка, змінимо висоту лінії на 150%. Ось так краще.
Далі перейдемо до зміни кольорів. На реальних сайтах колір підбирається на основі стайлгайду бренду, але ця карточка не відноситься до якогось конкретного бренду, тому ми можемо підібрати колір на основі фотографії. Наприклад, колір кнопки буде ось такий. Використаємо той самий колір для ціни. Заголовок зробимо того ж кольору, тільки з насиченістю близько 20 і світлістю близько 20, тому що ми хочемо, щоб він був темніший, але з невеличким натяком на основний відтінок. Для опису також використаємо той самий відтінок, але з насиченістю 10 і світлістю ближче до 50, щоб він був світлішим. Така градація кольорів забезпечує легку для розуміння ієрархію.
Нам лишилось пофарбувати сам фон карточки у білий колір, також заокруглимо йому кути. Слідкуйте за тим, щоб кути були в межах від 8 до 24 пікселів, оскільки на занадто заокруглених карточках новачкам буде складно правильно розташувати елементи. Далі заокруглюємо кнопку. До речі, її можна трохи розширити. Радіуси кутів кнопки робимо так, щоб вони оптично відповідали округлості карточки. В нашому випадку це буде в два рази менше число, тобто вісім. Ну і щоб було все однаково в нашому дизайні, так само заокруглимо кути фотографії.
І останнє, що ми зробимо, це тінь карточки. Продублюємо форму кнопки, повністю заокруглимо її кути і розмістимо її під карткою. Вибираємо ефект Layer > Drop Shadow, збільшуємо розмитість до 32 і зменшуємо непрозорість кольору. Як бачите, тінь все ще є видимою, але вже не такою сильною. А далі змінюємо тільки фон робочої області, групуємо карточку і тінь і вставляємо посередині.
На цьому все. Сподіваюсь, що вам сподобалось. Якщо ви хочете ще більше уроків, напишіть про це в коментарях, а також ставте лайки цьому відео та підписуйтесь на канал. З вами була Адолька, до зустрічі!