0:00
Привіт друзі в цьому відео я покажу вам
0:02
як створити дизайн карточки товару
0:05
[музика]
0:10
почнемо перше що ми зробимо Це додамо
0:13
робочу область десктоп і створимо
0:16
найпростішу сітку з 12ма
0:21
колонками а далі перейдемо до створення
0:24
нашої карточки товару одним з її
0:26
елементів є кнопка у мене в прикладі це
0:29
кнопка купити взагалі назви кнопок
0:32
намагайтесь робити максимально короткими
0:34
також не забувайте про читабельність
0:36
тексту для початківців рекомендую
0:38
використовувати шрифти Inter sathi або
0:41
Poppins розмір шрифту на кнопці не
0:44
повинен бути меншим 16 пунктів товщина
0:47
шрифту повинна бути або regular або
0:49
трохи товщою також допускається
0:51
використання болт висота рядка
0:54
залишається 100%. далі нам потрібно
0:57
зробити відступи навколо назви кнопки
1:00
щоб встановити внутрішні відступи я буду
1:02
використовувати правило і 2х тобто якщо
1:05
по вертикалі зверху і знизу я зроблю
1:07
відступи 16 пікселів то по горизонталі
1:10
вони будуть в два рази більшими 32
1:14
Пікселя і ще одна маленька але дуже
1:17
важлива деталь ширина кнопки повинна
1:20
бути від 100 до 360 пікселів а висота не
1:23
повинна виходити за межі діапазону 40-60
1:26
пікселів кнопка готова далі попрацюємо
1:30
над назвою ціною та коротким описом
1:32
товару тобто над нашим текстом тут
1:34
намагайтесь використовувати лише одну
1:36
гарнітуру і максимум три розміри шрифту
1:39
найменш важливим а отже найменшим
1:41
елементом є опис найкращими розмірами
1:44
опису залежно від масштабу картки є 12
1:47
14 або 16 Якщо текст кнопки 16
1:50
використовуйте 12 або 14 для кращої
1:53
читабельності висоту лінії зробимо
1:57
150%. ціна може бути точно такого ж
2:00
розміру і стилю як і текст на кнопці
2:02
основний заголовок може бути на два або
2:04
чотири пункти більшим зробимо його 20
2:07
пунктів далі давайте перейдемо до
2:10
фотографії товару Вона має займати
2:12
приблизно половину висоти карточки поки
2:15
що ми можемо залишити такий розмір як є
2:17
а пізніше глянемо скільки буде займати
2:19
наш текст з кнопкою та всіма відступами
2:21
і відповідно внесемо зміни тепер
2:23
налаштуємо відступи між елементами щоб
2:26
створити ієрархію між ними я буду
2:28
використовувати два роз роміри відступів
2:31
24 Пікселі та 12 пікселів між назвою
2:34
товару та ціною в мене буде відступ 12
2:37
пікселів тому що я хочу візуально
2:39
показати що ці два елементи знаходяться
2:41
в одній групі між іншими елементами а
2:44
також по боках зверху і знизу В мене
2:46
будуть відступи 24
2:48
Пікселі давайте вставимо нашу карточку
2:51
на робочу область і налаштуємо її ширину
2:54
Я хочу щоб вона по ширині займала Три
2:56
колонки і в майбутньому я б могла
2:58
розмістити чотири таких карточки в
3:00
одному рядку ось тут поправимо
3:02
налаштування внутрішнього автолейауту
3:04
щоб все знаходилось в межах контейнера і
3:07
не виходило за його рамки і покращимо
3:10
читабельність заголовка змінимо висоту
3:12
лінії на 150 Ось так краще далі
3:16
перейдемо до зміни кольорів на реальних
3:18
сайтах колір підбирається на основі
3:20
стайлгайду бренду але ця карточка не
3:22
відноситься до якогось конкретного
3:24
бренду тому ми можемо підібрати колір на
3:26
основі фотографії наприклад колір кнопки
3:29
буде ось такий використаємо той самий
3:32
колір для
3:35
ціни заголовок зробимо того ж кольору
3:38
тільки з насиченістю близько 20 і
3:40
світлістю близько 20 Тому що ми хочемо
3:43
щоб він був темніший але з невеличким
3:45
натяком на основний відтінок для опису
3:48
також використауємо той самий відтінок
3:50
але з насиченістю 10 і світлістю ближче
3:52
до 50 щоб він був світлішим така
3:55
градація кольорів забезпечує легку для
3:57
розуміння ієрархію нам лишилось
4:00
пофарбувати самфон карточки у білий
4:03
колір також заокруглимо йому кути
4:07
Слідкуйте за тим щоб кути були в межах
4:09
від 8ми до 24 пікселів оскільки на
4:12
занадто заокруглених карточках новачкам
4:14
буде складно правильно розташувати
4:16
елементи далі заокруглюємо кнопку До
4:19
речі її можна трохи розширити радіуси
4:22
кутів кнопки робимо так щоб вони оптично
4:24
відповідали округлості карточки в нашому
4:27
випадку це буде в два рази менше чи
4:29
число тобто вісім Ну і щоб було все
4:31
одинаково в нашому дизайні так само
4:33
заокруглимо кути фотографії і останнє що
4:37
ми зробимо це тінь карточки продублюємо
4:40
форму
4:42
кнопки повністю заокруглимо її
4:47
кути і розмістимо її під карткою
4:51
вибираємо ефект layout BL збільшуємо
4:55
розмитість до 32 і зменшуємо
4:57
непрозорість кольору
5:00
Як бачите тінь все ще є видимою але вже
5:03
не такою сильною а далі змінюємо тільки
5:06
фон робочої
5:11
області групуємо карточку і тінь і
5:14
вставляємо посередині на цьому все
5:17
сподіваюсь що вам сподобалось Якщо ви
5:19
хочете ще більше уроків напишіть про це
5:21
в коментарях а також Ставте лайки цьому
5:23
відео та підписуйтесь на канал З вами
5:26
була адолька до
5:28
зустрічі!