Тарҳрезии вебсайт. Асосҳои тарҳрезӣ

Тарҳрезии вебсайт ин раванди эҷоди саҳифаи веб тавассути рамзгузорӣ ва сохтори мундариҷа мебошад, то он дар браузери веб намоиш ва интерактивӣ бошад. Он тарҳрезии матн, тасвирҳо, видеоҳо, истинодҳо, шаклҳо ва дигар унсурҳоро дар саҳифа барои эҷоди таҷрибаи визуалии муттаҳид ва ҷолиб барои корбарон дар бар мегирад.

Тарҳ ва тарҳрезии сайт ҷанбаҳои асосии зеринро дар бар мегирад:

1. HTML (забони аломатгузории гиперматнӣ):

   • HTML барои сохтани сохтори веб саҳифа истифода мешавад. Он сарлавҳаҳо, параграфҳо, рӯйхатҳо, тасвирҳо, истинодҳо ва дигар унсурҳоро муайян мекунад, ки асоси мундариҷаи саҳифаро ташкил медиҳанд.

2. CSS (Варақаҳои услуби каскадӣ):

   • CSS барои услуби элементҳои HTML ва назорати намуди онҳо истифода мешавад. Бо истифода аз CSS, шумо метавонед рангҳо, шрифтҳо, андозаҳо ва ҷойгиркунии элементҳоро дар саҳифа муқаррар кунед.

3. Тарҳрезии вебсайт. Тарҳрезии ҷавобӣ:

   • Тарҳрезии ҷавобӣ истифодаи CSS ва технологияҳои дигарро барои эҷоди саҳифаҳои веб, ки метавонанд дар дастгоҳҳои гуногун ва қарорҳои экран дуруст намоиш диҳанд, ба монанди компютерҳо, планшетҳо ва смартфонҳо дар бар мегирад.

4. javascript:

   • JavaScript метавонад барои илова кардани интерактивӣ ба веб саҳифаҳо истифода шавад. Ин забони барномасозӣ ба шумо имкон медиҳад, ки унсурҳои динамикӣ эҷод кунед, бо корбарон муошират кунед ва мундариҷаи саҳифаро бе талаби дубора бор кунед.

5. Тарҳрезии вебсайт. Мутобиқати байни браузерҳо:

   • Тарҳ инчунин баррасии мутобиқати байни браузерҳоро дар бар мегирад, то саҳифаҳои веб дар браузерҳои гуногуни веб (масалан, Google Chrome, Mozilla Firefox, Safari, Microsoft Edge) дуруст намоиш дода шаванд.

6. Оптимизатсияи иҷроиш:

   • Ҷанбаи муҳими тарҳбандӣ ин оптимизатсияи кор аст, ба монанди кам кардани андозаи тасвирҳо, истифодаи кэш ва усулҳои дигар барои таъмини зуд боркунии саҳифаҳо.

Генераторҳои тарҳбандии китоб: 5 асбобҳои РОЙГОН.

Барои боварӣ ҳосил кунед, ки шумо вебсайте пайдо мекунед, ки меҳмонони шумо онро тарк намекунанд, мо ин дастурро барои он ҷамъ овардаем асосҳои тарҳрезӣ тарҳбандии вебсайт. Мо асосҳои он чизеро, ки бояд анҷом дод, баён хоҳем кард тарҳи хуб, усулҳои асосии эҷоди тарҳбандии муассири вебсайт ва намудҳои маъмултарини тарҳҳои вебсайт.

Тавсифи мухтасари тарҳрезии бастабандӣ

Ҳадафҳо. Тарҳрезии вебсайт

Ҳарчанд оддӣ ба назар мерасад, ҳадафи ягонаи тарҳбандии вебсайт дастгирии ҳадафҳои вебсайт аст, хоҳ табдилдиҳӣ, эътирофи бренд, вақтхушӣ ё ҳадафи дигар. Аммо максадхо вебсайт тавассути мундариҷа ифода карда мешавад, ва тарҳрезии тарҳ чӣ гуна ба таври муассир интиқол додани он мундариҷаро тавсиф мекунад. Бо ин гуфтаҳо, дар ин ҷо баъзе вазифаҳои умумӣ мавҷуданд, ки тарҳрезии вебсайт метавонад иҷро кунад:

• Намоиши иттилоот . Тарҳбандии хуби вебсайт маълумотро тавре ташкил мекунад, ки пайдарпайии аёнро риоя кунад, скан кардан осон бошад, ба унсурҳои муҳимтарин вазн диҳад ва абзорҳои корбарро барои дарёфт ва истифода осонтар кунад.
• Фаъолияти корбар:  Тарҳбандии хуби вебсайт саҳифаро аз ҷиҳати визуалӣ ҷолиб мегардонад, чашми корбарро ба нуқтаҳои ҷолиб равона мекунад ва онҳоро барои идома додани паймоиш дар сайт ташвиқ мекунад.
• Брендинг: Тарҳбандии хуби вебсайт инчунин дар брендинг, истифодаи фосила, ҳамоҳангсозӣ ва миқёс барои мувофиқ кардани бренди ширкат нақш мебозад.

Ин ҳадафҳои сатҳи баланд тарҳрезии тарҳи вебсайтро пеш мебаранд, аммо пеш аз он ки мо ба тарҳҳои мушаххаси вебсайт назар кунем, биёед чӣ гуна амалӣ кардани ин ҳадафҳоро муфассалтар баррасӣ кунем.

Шаҳодатномаи тӯҳфа. Чӣ тавр эҷод кардан?

Раванди таҳияи тарҳи вебсайт. Тарҳрезии вебсайт

Раванди тарҳбандии вебсайт бояд дар аввали эҷоди вебсайт сурат гирад, ки чанд вақт пас аз таҳияи стратегияи вебсайти шумо, аммо пеш аз он ки шумо ба барномаи графикӣ барои эҷод кардани интерфейс гузаред.

Чӣ тавр як вебсайти арӯсӣ эҷод кардан мумкин аст?

Тарҳбандии вебсайт бо истифода аз сими телефонӣ тасвир карда мешавад, ки харитаи асосии кабелӣ мебошад, ки чӣ гуна мундариҷа ба ҳам мувофиқат мекунад. Муҳим аст, ки тарроҳии wireframe аз тарроҳии веб, ки тамоми он аст, фарқ кунад раванди эҷоди графикаи интерфейс ва дигар унсурҳои визуалӣ барои саҳифаи веб. Тарҳрезии тарҳбандии вебсайт як қисми зиёди тарроҳии веб аст ва он аз сими телефон оғоз меёбад. Идеалӣ, тарҳи визуалӣ бояд ба тарҳбандии симчӯб мувофиқат кунад, то ки унсурҳои графикӣ ба таври стратегӣ ҷойгир карда шаванд ва на ба афзалиятҳои эстетикии зуд асосёфта бошанд.

Пас аз он, инҳо қадамҳои эҷоди тарҳбандии вебсайт мебошанд:

• Тарҳрезии вебсайт. Ҳамаи соҳаҳои мундариҷаро муайян кунед.

Симҳо одатан мундариҷаро ҳамчун мураббаъҳо ва росткунҷаҳои оддӣ, хоҳ тасвир ё блоки матн муаррифӣ мекунанд. Муҳим аст, ки пешакӣ донед, ки шумо чӣ қадар мундариҷа доред ва андозаи тахминии ҳар як порча (ё шумори калимаҳо), то шумо метавонед унсурҳоро ба таври дақиқ мувофиқ созед.

• Як қатор симчӯбҳо ва прототипҳо эҷод кунед. 

Тарҳ метавонад ба мисли расмкашӣ бо қалам ва коғаз содда бошад, аммо барномаҳои зиёде мавҷуданд (масалан.  Беҳуда ), барои оптимизатсияи раванд пешбинӣ шудааст. Азбаски чаҳорчӯбаҳои симдор набояд асарҳои муфассали санъат бошанд, шумо метавонед дар як вақт якчандтои онҳоро эҷод кунед. Ҳатто агар шумо ба идеяи аввалини худ ошиқ шуда бошед ҳам, шумо бояд барои васеъ кардани тасаввуроти худ ва ба худ имконоти худ гузоред. Бе графикаи зебое, ки шуморо парешон мекунад, шумо метавонед ба таҷрибаи корбар тамаркуз кунед ва бифаҳмед, ки кадом тарҳ барои онҳо беихтиёрона хоҳад буд. Боварӣ ҳосил кунед, ки ҳамаи андозаи экранро ба назар гиред - тавсия дода мешавад, ки бо тарҳбандии он оғоз кунед дастгоҳҳои мобилӣ, ва сипас онро созед.

• Санҷед, фикру мулоҳизаҳоро ҷамъ кунед ва такрор кунед. 

Пас аз он ки шумо якчанд вариант доред, боварӣ ҳосил кунед, ки фикру мулоҳизаҳои ҳамсолони худро ҷамъ кунед. Барномаҳо ба монанди  Даъват  и  Фигма,  ба шумо имкон медиҳад, ки прототипҳои интерактивӣ эҷод кунед, то шумо метавонед тугмаҳо ва паймоишро бидуни сохтани саҳифаи воқеии веб санҷед. Агар корбарони озмоиш ҳангоми паймоиш дар прототип худро дар экран сабт кунанд, ин метавонад блокҳои пешпохӯрдаи UX-ро ошкор кунад. Пас аз он ки шумо чанд ёддошт доред, ба қадами дуюм баргардед ва то ба даст овардани натиҷаи комил такрор кунед.

Гарчанде ки ин қадамҳои аслӣ барои эҷоди тарҳи вебсайт мебошанд, фаҳмидан душвор аст, ки чӣ гуна тарҳро самаранок мегардонад ё не, вақте ки шумо нав оғоз мекунед. Дар фасли оянда мо усулҳои мушаххасеро, ки шумо метавонед барои қабули қарорҳои тарроҳӣ истифода баред, дида мебароем.

Усулҳои асосии эҷоди самаранок. Тарҳрезии вебсайт

Тарҳрезии тарҳрезии вебсайт як амалияест, ки тӯли даҳсолаҳо вуҷуд дорад ва маънои онро дорад, ки дар тӯли солҳо як қатор конвенсияҳо ва принсипҳои тарроҳӣ барои роҳнамоии тарроҳон дар ҳунари худ таъсис дода шудаанд. Дар зер баъзе аз муфидтарини ин техникаҳо ҳастанд:

Иерархияи визуалӣ

Иерархияи визуалӣ як роҳи услубӣ кардани шаш унсури тарроҳӣ барои баланд бардоштани контраст, то қисмҳои муайяни мундариҷа аз дигарон фарқ кунанд. Барои ноил шудан ба ин, муҳимтарин қисмҳои тарҳбандӣ қисматҳое мебошанд, ки корбар бояд вобаста ба ҳадафи саҳифа фавран муайян кунад. Онҳо одатан сарлавҳаҳо, пешниҳодҳои арзишӣ, ба амал даъват менамояд ва абзорҳои корбар ба монанди паймоиш.

Иерархияи визуалӣ метавонад бо роҳҳои гуногун зоҳир шавад, аз қабили интихоби шрифт (андоза, вазн ва ҳатто таркиби ҳуруфҳои гуногун), мувофиқ кардани унсурҳои муҳим дар саҳифа ё бо истифода аз рангҳои иловагӣ барои равшан кардани унсурҳо.

Намунаҳои хониш. Тарҳрезии вебсайт

Намунаҳои хониш роҳҳои маъмултарини сканкунии саҳифаҳоро тавсиф мекунанд аз ҷониби корбарон ва ҳамчун хатҳои равона тасвир шудаанд (векторҳо, барои математикҳо). Азбаски тадқиқот нишон медиҳад, ки 79% меҳмонони вебсайт танҳо саҳифаро аз назар мегузаронанд, муҳим аст, ки скан кардани он то ҳадди имкон осон бошад. Яке аз роҳҳои муассири иҷрои ин тарҳрезии тарҳ бо дарназардошти намунаи мушаххаси хониш аст.

Дохил кардани намунаҳои хониш ба тарҳҳои худ ҷойгир кардани унсурҳои аз ҷиҳати стратегӣ дар хатти назари тамошобинро дар бар мегирад. Намунаҳои маъмултарине, ки бояд баррасӣ шаванд, намунаи Z (вектори зигзаг; барои тарҳҳои вазнини тасвир муфид) ва намунаи F (вектори хат; барои тарҳҳои вазнини матн муфид) мебошанд.

Дар боло ё поёни қабат. Тарҳрезии вебсайт

Дар тарроҳии веб, "қатъ" хатест, ки дар он саҳифаи веб бо сабаби маҳдудияти андозаи экран бурида мешавад. Мундариҷае, ки ҳангоми боркунии саҳифа намоён мешавад, "боло саҳифа" номида мешавад, дар ҳоле ки мундариҷае, ки аз корбарон барои кушодани он ба поён ҳаракат кардан лозим аст, "поёни саҳифа" номида мешавад.

Вақте ки сухан дар бораи тарҳрезии тарҳи вебсайт меравад, мундариҷаи муҳимтарин ва/ё ҷолибтарин (ба монанди пешниҳоди арзиш ва даъват ба амал) бояд бехатар дар болои саҳифа ҷойгир карда шавад, то корбарон маҷбур нашаванд, ки онро ҷустуҷӯ кунанд. Ин фосила 1000 x 600 пиксел барои аксари андозаи экран аст. Гуфта мешавад, тарроҳон инчунин метавонанд пӯшишеро барои буридани графикаи ҷолиб ва нусхабардорӣ истифода баранд, то корбаронро водор созанд, ки ҳангоми идомаи ҳамкории онҳо бо саҳифаи веб ба поён ҳаракат кунанд.

Системаҳои шабакавӣ. Тарҳрезии вебсайт

Системаи шабакавӣ тарҳест, ки ба андозагирӣ ва дастурҳои сахт асос ёфтааст. Шабака аз сутунҳо (фосилаҳои таъиншуда барои ҷойгиркунии мундариҷа) ва ҷараёнҳо (фосилаҳои холии байни сутунҳо) иборат аст.

Фазои холӣ

Фазои сафед, ки баъзан фазои манфӣ номида мешавад, танҳо як майдони тарроҳӣ бидуни мундариҷа, яъне фазои холӣ мебошад. Гарчанде ки онро нодида гирифтан осон аст ва аксар вақт пур кардани мундариҷа, фазои сафед метавонад муҳимтарин бошад дорои дар тарҳбандии вебсайт.

Ин макети вебсайт бо фазои самараноки сафед таваҷҷӯҳро ҷалб мекунад.

Дар бораи он фикр кунед, ки чӣ тавр як сатри матн дар саҳифаи холӣ барои ҷалби диққати шумо назар ба саҳифаи пур аз мундариҷа самараноктар хоҳад буд. Фазои васеи сафед тамаркузро ба вуҷуд меорад ва хондани тамоми композицияро душвортар мекунад. Баръакси саҳифаҳои чопшуда, дарозии саҳифаи веб маҳдуд нест ва ба тарроҳон дар стратегия ва истифодаи фазои сафед озодии бештар медиҳад.

Намудҳои маъмули тарҳҳои вебсайт. Тарҳрезии вебсайт

Тарҳҳои вебсайт хеле кам аз сифр сохта мешаванд; дар хакикат аксар вакт гуфта мешавад, ки ин тавр нест. Аксарияти вебсайтҳои муосир ба схемаҳои маъмули тарҳрезӣ асос ёфтаанд, ки пайваста бо тағироти ночиз дар саросари Интернет истифода мешаванд.

Гарчанде ки дар ҳама гуна тарроҳӣ як дараҷаи аслӣ муҳим аст, вебсайтҳо тарҳрезӣ шудаанд, ки фавран фаҳманд ва истифода шаванд. Ҳамин тавр, вақте ки корбарон дар тӯли солҳо ба намудҳои муайяни тарҳҳо одат мекунанд, барои тарроҳон пайвастан бо онҳо маъно дорад. Дар хотир доред, ки дар охири рӯз тарҳрезӣ бояд амалӣ бошад ва корбарон барои омӯзиши тарҳи нав ҳар қадар камтар вақт сарф кунанд, ҳамон қадар вақти бештарро барои истифодаи воқеии сайт сарф мекунанд. Ба ғайр аз ин, инҳоянд баъзе аз тарҳҳои маъмултарини вебсайт:

Тарҳбандии сутуни ягона

Тарҳбандии яксутун тарҳест, ки мундариҷаро пайдарпай дар як сутун ҷойгир мекунад ва аксар вақт дар марказ ҷойгир аст.

Бисёр тарҳҳои саҳифаҳои веб дар ин ҷо оғоз мешаванд, бо назардошти он, ки тарҳи аввалини мобилӣ як равиши тавсияшаванда аст ва вебсайтҳои мобилӣ бо сабаби маҳдудиятҳои андоза аксар вақт дар як сутун ҷойгир карда мешаванд. Ин тарҳ барои саҳифаҳои кушода ё мундариҷаи ба канал асосёфта муфидтар аст, масалан шабакаҳои иҷтимоӣ ва блогҳо, зеро он шумораи унсурҳои саҳифаро коҳиш медиҳад ва ҳаракатро пеш мебарад.

Тарҳбандии ду сутун. Тарҳрезии вебсайт

Тарҳбандии ду сутун, баъзан дар намуди экрани тақсимшуда, мундариҷаро паҳлӯ ба паҳлӯ нишон медиҳад.

Ин барои таъкид кардани дихотомия байни ду унсур муфид аст (масалан, аудиторияи гуногун дар сайтҳои либос, услуби хидматрасонӣ пеш аз / пас аз ё имконоти дугона нархгузорй). Он инчунин барои мувозинати графикӣ бо нусхабардорӣ муфид аст, ки хондани намунаи Z-ро дастгирӣ мекунад.

Тарҳбандии бисёрсутун. Тарҳрезии вебсайт

Тарҳбандии бисёрсутун аксар вақт ҳамчун тарҳи рӯзнома ё маҷалла номида мешавад. Он мундариҷаи вазнини вебсайтро дар як саҳифа ҷойгир мекунад.

Шабака маъмулан барои нигоҳ доштани тартиб ва иерархия тавассути фароҳам овардани фазои васеътари сутун барои унсурҳои муҳимтар ба монанди мундариҷаи асосӣ истифода мешавад, дар ҳоле ки унсурҳои камтар муҳим ба монанди менюи паймоиш, панели паҳлӯӣ ё таблиғи баннерӣ фазои камтари мутаносиб мегиранд. Ин барои саҳифаҳои хонагии ширкат, сайтҳои тасвирӣ ё видеоӣ, нашрияҳои онлайн, панелҳои фармоишӣ ва вебсайтҳои харид муфид аст - вебсайтҳое, ки мундариҷа ва категорияҳои зиёд доранд, то корбаронро ба онҳо равона кунанд.

Тарҳбандии асимметрӣ. Тарҳрезии вебсайт

Тарҳбандии асимметрӣ ин аст, ки унсурҳо дар миқёси нобаробар ва наздик ҷойгир карда мешаванд - ба таври оддӣ гӯем,  не ба таври симметрй. Аммо дар ҳоле ки он муқобили системаи шабакавӣ аст, асимметрия маънои бесарусомониро надорад.

Мувозинат дар ҳама гуна тарроҳӣ муҳим аст ва тарҳбандии асимметрӣ ба ин танҳо бо роҳҳои ғайричашмдошт ноил мешавад, ба монанди омезиши намоиши миқёси калон дар як тараф бо бисёр унсурҳои хурдтар аз тарафи дигар. Ин барои илова кардани таъкид тавассути муболиға кардани баъзе элементҳо (тавассути андозаи аслӣ, ранг ё ҷойгиркунӣ) бар дигарон муфид аст. Он инчунин метавонад намунаҳои хониши фармоиширо дастгирӣ кунад (дар муқоиса бо намунаҳои муқаррарии дар боло зикршуда).

Брендҳое, ки метавонанд ба тарроҳӣ бархӯрди ғайримуқаррарӣ дошта бошанд, ин услуби тарҳрезиро идеалӣ хоҳанд кард, яъне вебсайтҳое, ки ба санъат тамаркуз мекунанд, аудиторияи саёҳат доранд ё мехоҳанд маҳсулоти инноватсионӣ ё пешрафтаро таъкид кунанд.

Тарҳбандии вебсайт пурра тартиб дода шудааст

Тарҳрезии олиҷаноби вебсайт на танҳо онро аз ҷиҳати визуалӣ ҷолиб мегардонад, балки онро беихтиёрона мегардонад. Ин қадами аввалин барои эҷод кардани таассуроти аввал дар корбарон аст, ки онҳоро водор мекунад, ки монад ва дидани ҳама мундариҷаи сайти шумо пешкаш кунад. Тарҳрезии вебсайт

Гарчанде ки ин асосҳои тарҳрезии вебсайт метавонанд ба шумо нуқтаи ибтидоӣ диҳанд, шумо бояд кӯшиш кунед, ки ҳама кори имконпазирро барои фароҳам овардани таҷрибаи истисноӣ барои меҳмонони сайти худ анҷом диҳед. Ва беҳтарин роҳи ба даст овардани тарроҳии муосири вебсайт ин кор бо тарроҳи касбӣ мебошад.

 АЗБУКА «