Қысқаша
Бетте бір сурет емес, талаптары әртүрлі бес-алты орын бар. Бірінші экранға тақырыпқа бос орны мен салмағы аз кадр, өнім блогына заттық көрініс, сенім блогына адамдар, фонға тыныш бет, сілтеме превьюіне жеке көлденең кадр керек. Оларды бірдей таңдауға болмайды: әр орынның өз өлшемі, пропорциясы және қате құны бар.
Лендингті көбіне былай жинайды: бірінші экранға бір әсерлі сурет тауып, қалғанын «ұқсас бірдеңемен» толтырады. Бір айдан соң бет әртүрлі дереккөз коллажына ұқсайды, қажеттен ұзақ жүктеледі, ал мессенджерде сұр төртбұрыш болып ашылады. Бетті орындарға бөліп, әрқайсысына не керегін қарайық.
Қалыпты беттегі алты орынның әрқайсысы кадрға бөлек талап қояды.
Беттің қандай орындарына сурет қажет?
Әдетте алтау, әрі олар бірін-бірі алмастырмайды.
- Бірінші экран. Беттегі ең қымбат сурет: оны бәрі көреді, ол реңк береді және көбіне жүктелетін ең ауыр элемент болады.
- Өнім блогы. Затты не интерфейсті көрсетеді. Мұнда оқырман уәдені көрініспен салыстыратындықтан, шынайылық керек.
- Сенім блогы. Адамдар, команда, үдеріс, клиенттер. Әдемілікпен емес, танумен жұмыс істейді.
- Фон мен бөлгіштер. Мағыналық блоктар арасындағы тыныш беттер; міндеті — кедергі жасамау.
- Тізім карточкалары. Тиындай өлшемде оқылатын шағын кадрлар.
- Сілтеме превьюі. Беттің өзінен бұрын мессенджер мен әлеуметтік желіде көрінетін кадр.
Бірінші экрандағы кадр қандай болуы керек?
Шеттері тыныш, салмағы жеңіл. Бірінші экранда әдетте беттің ең ірі элементі тұрады және Largest Contentful Paint сонымен өлшенеді — Google бұл метриканы жүктеулердің 75-процентилінде 2,5 секунд шегінде ұстауды ұсынады (web.dev). Бірінші экрандағы ауыр сурет — осы межеден асудың ең жиі жолы.
Практикалық талаптар:
- Тақырыпқа бос орын. Мәтін мен түйме түсетін, маңызды бөлшегі жоқ біркелкі аймақ.
- Қарапайым композиция. Бір мағыналық орталық: күрделі кадр тақырыппен бәсекелесіп, екі хабар да ұтылады.
- Қиюға төзімділік. Мобильді экранда көлденең кадрдың ортасы ғана қалады, кейіпкер сонда сақталуы тиіс.
- Сығылу мүмкіндігі. Жұмсақ градиенті және ұсақ бөлшегі аз кадр бірдей сапада ала-құла суреттен бірнеше есе жеңіл.
Бүкіл енге кадр ма, әлде бағандағы сурет пе?
Екі шешім де жарайды; блокта атмосфера ма, түсіндіру ме маңызды екеніне қарай таңдаңыз.
Бүкіл енге кадр
Көңіл күй қалыптастырып, бетті қымбат көрсетеді. Шеттерінде қор керек: кең мониторда ортасы, телефонда одан да тар ортасы көрінеді. Ұсақ бөлшек пен кадрдағы мәтінді нашар көтереді. Салмағы қымбат және жүктеу жылдамдығын өлшеуге көбіне кіреді.
Бағандағы сурет
Мәтіннің жанында тұрып, оны түсіндіреді. Пропорциясы тұрақты, қиюы болжамды, салмағы аз. Ұсақ бөлшекке болады: оқырман жақыннан қарайды. «Уау» әсерін бермейді, есесіне оқуға кедергі жасамайды және блокты өзгертпей ауыстырылады.
Өнім, қызмет және сенім блоктарына не қою керек?
Мұнда сурет «не аламын?» және «мұны кімге сеніп тапсырамын?» деген сұрақтарға жауап береді. Абстракция нақты нәрседен нашар жұмыс істейді.
МокаптарМокаптар мен заттық көріністер: қолданба, қаптама, баспа материалын бар нәрседей көрсету.
Жұмыс, келіссөз, команда — «компания туралы» блогы мен қызмет бетін толтыратын кадрлар.
Бөлме мен жұмыс кеңістігі: қызмет офлайн көрсетілетін жерде, студиядан клиникаға дейін көмектеседі.
Жылжымайтын мүлік агенттігі үшін логика сол, тек кадрлар жылжымайтын мүлік бөлімінен алынады; блок фоны мен бөлгішке мәтінмен таласпайтын және түске оңай икемделетін абстрактілі беттер жарайды. Артықшылықтар тізіміне шағын графиканы қайта салғаннан гөрі иконкалардан алған оңай.
Бет ауырламауы үшін файлды қалай дайындау керек?
Беттегі кез келген орын үшін тәртіп бірдей.
Слотқа сай қиыңыз
Алдымен блок пропорциясына кроп, кейін қалғаны. Браузер қиған кадр бәрібір тұтас жүктеледі — ешкім көрмейтін пиксель үшін төлейсіз.
Нақты өлшем беріңіз
Сурет ені қос тығыздықты экрандарға қорымен бірге көрсету орнының еніне сай болуы керек, «сақтық үшін төрт мың пиксель» болмауы тиіс.
Сығып, салыстырыңыз
Заманауи форматта сақтап, көрсету масштабында түпнұсқамен салыстырыңыз. Сол масштабта көрінбейтін айырма — таза үнем.
Төменгі суреттерді кейінге қалдырыңыз
Бірінші экраннан төменгінің бәрі жалқау жүктеледі. Ал бірінші экран кадрын олай жүктеуге болмайды: беттің негізгі метрикасын өзіңіз баяулатасыз.
Телефонда тексеріңіз
Бетті мобильді экранда ашып, қиюдан кейін әр кадрдан не қалғанын және бірінші экранның қанша уақытта шыққанын қараңыз.
Сілтеме превьюінде не көрінеді?
og:image тегімен беретін жеке сурет. Meta кемінде 1200 × 630 пиксель, рұқсат етілетін минимум 200 × 200, файл 8 МБ-тан аспауын және кадр қиылмауы үшін пропорцияны 1.91:1 шамасында ұстауды ұсынады (Meta әзірлеушілер құжаттамасы). 600 × 315-тен кіші кадр сілтеме жанында шағын шаршы болып көрінеді — таратылымды бұзатын «сұр төртбұрыш» осы.
Alt-қа не жазу керек?
Суретте көрінгенді қысқа әрі нақты жазыңыз. Alt-ты экран дикторлары мен іздеу роботтары оқиды; Google сурет ұсынымдарында кілтсөз тізбегінің орнына сипаттама беруді сұрап, мағыналы файл атауы мен жанындағы қолтаңба да мазмұнды түсінуге көмектесетінін айтады (Google Search Central).
Практикалық ереже: кадрды шешім қабылдайтын адамға телефонмен сипаттағандай айтыңыз. «Бариста үстелде кофе дайындап жатыр» деген «кофе, кофехана, бариста, эспрессо, кофе сатып алу» дегеннен жақсы.
Бетке кездейсоқ олжа емес, жинақты қалай құруға болады?
Блоктарға бөлек емес, бетке тұтас қараңыз. Бір бет кадрлары үш белгі бойынша үйлесуі керек: жарық температурасы, түсіру нүктесі, бөлшек тығыздығы. Бір тапсырмадан не каталог бөлімінен алынғанда бұл оңай: ортақ мәнер брифтің өзінде бар.
Кадрды таңдау және сатып алғанша тексеру жобаға AI-суретті қалай таңдау керек мақаласында берілген. Бет кейін посттарға бөлінсе, әлеуметтік желілерге арналған суреттер, ал оған трафик жіберілсе, жарнама креативтері мақаласы көмектеседі.
Ең бастысы
- Бетте бір сурет емес, талаптары әртүрлі алты орын бар.
- Бірінші экран кадры жүктеу жылдамдығын шешеді: ол жалқау жүктелмейді әрі «сақтық үшін үлкен» болмайды.
- Пропорцияны түпнұсқа емес, слот белгілейді: браузерде емес, жүктемей тұрып қиыңыз.
- Сілтеме превьюі талғаммен емес, алаң талабымен бөлек таңдалады.
- Alt мазмұнды сипаттайды; сәндік фон сипаттамасыз қалады.
Лендингке қанша сурет керек?
Көрсетуді қажет ететін мағыналық блок қанша болса, сонша: әдетте төрттен сегізге дейін. Міндетсіз сурет — артық салмақ пен шу; затты көрсету керек блоктағы суретсіздік — жоғалған түсіндіру.
Бір кадрды бірінші экранда да, сілтеме превьюінде де қолдануға бола ма?
Екі пропорцияға шыдап, шағын өлшемде түсінікті қалса, болады. Көбіне бір сериядан екі кадр алған тиімді: превьюдің оқу масштабы басқа.
Бірінші экран суретінің ені қандай болуы керек?
Көрсету орнының ені экран тығыздығына көбейтілгендей, одан үлкен емес. Әмбебап сан жоқ: 720 пиксельдік баған мен бүкіл енге кадр үшін жауап бөлек.
Кадр әдемі, бірақ ала-құла болса не істеу керек?
Үстінде мәтін жоқ жерде қолданыңыз: өнім блогы, галерея, бөлгіш. Бірінші экранға бөлшексіз аймақ керек — басқа кадр не сол сюжеттің тыныш нұсқасы.
Беттегі суреттерге қолтаңба қажет пе?
Кадр дерек берсе не түсіндіруді талап етсе қажет: сызба, салыстыру, интерфейс. Сәндік иллюстрацияға қажет емес — ол тақырыптың назарын алады.
Суреттер бетті баяулатқанын қалай білуге болады?
Мобильді байланыста ең ірі элементтің шығу уақытын өлшеп, оның не екенін қараңыз. Ол бірінші экран суреті болса, оңтайландыруды скрипттен емес, содан бастаңыз.
Өнім әлі жоқ болса, фотосуретті немен алмастыруға болады?
Мокаппен немесе үдеріс иллюстрациясымен. Жоқ өнімді фотореалистік кадрмен көрсету қауіпті: шындыққа сай келмейтін уәде суреттің жоқтығынан қымбатқа түседі.
