Svetainės išdėstymas. Išdėstymo pagrindai

Svetainės išdėstymas yra tinklalapio kūrimo procesas, koduojant ir struktūrizuojant turinį taip, kad jis būtų rodomas ir interaktyvus žiniatinklio naršyklėje. Tai apima teksto, vaizdų, vaizdo įrašų, nuorodų, formų ir kitų puslapio elementų stiliaus kūrimą, kad naudotojams būtų sukurta darni ir patraukli vaizdinė patirtis.

Svetainės dizainas ir išdėstymas apima šiuos pagrindinius aspektus:

1. HTML (hiperteksto žymėjimo kalba):

   • HTML naudojamas tinklalapio struktūrai sukurti. Ji apibrėžia antraštes, pastraipas, sąrašus, vaizdus, ​​nuorodas ir kitus elementus, kurie sudaro puslapio turinio pagrindą.

2. CSS (kaskadiniai stiliaus lapai):

   • CSS naudojamas HTML elementų stiliui formuoti ir jų išvaizdai valdyti. Naudodami CSS galite nustatyti spalvas, šriftus, dydžius ir elementų vietą puslapyje.

3. Svetainės išdėstymas. Reaktyvus dizainas:

   • Interaktyvus dizainas apima CSS ir kitų technologijų naudojimą kuriant tinklalapius, kurie gali būti tinkamai rodomi skirtinguose įrenginiuose ir ekrano skyra, pvz., kompiuteriuose, planšetiniuose kompiuteriuose ir išmaniuosiuose telefonuose.

4. „JavaScript“:

   • „JavaScript“ gali būti naudojamas tinklalapiams pridėti interaktyvumo. Ši programavimo kalba leidžia kurti dinamiškus elementus, bendrauti su vartotojais ir keisti puslapio turinį nereikalaujant iš naujo įkelti.

5. Svetainės išdėstymas. Kelių naršyklių suderinamumas:

   • Išdėstymas taip pat apima suderinamumą su keliomis naršyklėmis, kad tinklalapiai būtų tinkamai rodomi įvairiose žiniatinklio naršyklėse (pvz., Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).

6. Našumo optimizavimas:

   • Svarbus išdėstymo aspektas yra našumo optimizavimas, pvz., vaizdų dydžio sumažinimas, talpyklos naudojimas ir kiti metodai, užtikrinantys greitą puslapių įkėlimą.

Knygų maketavimo generatoriai: 5 NEMOKAMAI įrankiai.

Siekdami užtikrinti, kad gausite svetainę, kurios lankytojai neapleis, parengėme šį vadovą dizaino pagrindai svetainės išdėstymas. Mes išdėstysime pagrindus, ką reikėtų daryti geras dizainas, pagrindiniai efektyvaus svetainės išdėstymo kūrimo būdai ir dažniausiai naudojami svetainių maketų tipai.

Trumpas pakuotės dizaino aprašymas

Tikslai. Svetainės išdėstymas

Kad ir kaip paprastai tai skambėtų, vienintelis svetainės išdėstymo tikslas yra palaikyti svetainės tikslus, nesvarbu, ar tai būtų konversija, prekės ženklo atpažinimas, pramogoms ar kitiems tikslams. Bet tikslai svetainė išreiškiama per turinį, o išdėstymo dizaine aprašoma, kaip efektyviai pateikti tą turinį. Tai pasakius, čia yra keletas bendrų funkcijų, kurias gali atlikti svetainės išdėstymas:

• Informacinis ekranas . Geras svetainės išdėstymas tvarko informaciją taip, kad būtų laikomasi akivaizdžios sekos, būtų lengva nuskaityti, suteikia svarbos svarbiausiems elementams, o naudotojo įrankius būtų lengva rasti ir naudoti.
• Naudotojo įtraukimas:  Geras svetainės išdėstymas daro puslapį vizualiai patrauklų, nukreipia vartotojo žvilgsnį į lankytinas vietas ir skatina toliau naršyti svetainėje.
• Prekės ženklas: Geras svetainės išdėstymas taip pat vaidina svarbų vaidmenį kuriant prekės ženklą, naudojant tarpus, lygiavimą ir mastelį, kad jis atitiktų įmonės prekės ženklą.

Šie aukšto lygio tikslai lemia svetainės išdėstymo dizainą, tačiau prieš nagrinėdami konkrečius svetainės maketus, aptarkime, kaip šiuos tikslus įgyvendinti išsamiau.

Dovanų kuponas. Kaip sukurti?

Svetainės maketo kūrimo procesas. Svetainės išdėstymas

Svetainės maketavimo procesas turėtų įvykti ankstyvame svetainės kūrimo etape, t. y. šiek tiek laiko po to, kai sukūrėte savo svetainės strategiją, bet prieš pereinant į grafinę programą, kad sukurtumėte sąsają.

Kaip susikurti vestuvių svetainę?

Svetainės išdėstymas vizualizuojamas naudojant vielinį rėmą, kuris yra pagrindinis rėmo žemėlapis, rodantis, kaip turinys derės. Svarbu atskirti rėmo dizainą nuo interneto dizaino, kuris yra visas sąsajos grafikos ir kitų vaizdinių elementų kūrimo procesas tinklalapiui. Svetainės išdėstymo dizainas yra didelė interneto dizaino dalis ir prasideda nuo rėmo. Idealiu atveju vizualinis dizainas turėtų atitikti vielinio rėmo išdėstymą, kad grafiniai elementai būtų išdėstyti strategiškai, o ne pagal trumpalaikius estetinius pageidavimus.

Po to atlikite svetainės maketo kūrimo veiksmus:

• Svetainės išdėstymas. Apibrėžkite visas turinio sritis.

Vieliniai rėmeliai paprastai vaizduoja turinį kaip paprastus kvadratus ir stačiakampius, nesvarbu, ar tai vaizdas, ar teksto blokas. Svarbu iš anksto žinoti, kiek turinio turite ir apytikslį kiekvienos dalies dydį (arba žodžių skaičių), kad galėtumėte tiksliai suderinti elementus.

• Sukurkite vielinių rėmų ir prototipų seriją. 

Išdėstymas gali būti toks paprastas kaip piešimas rašikliu ir popieriumi, tačiau taip pat yra daug programų (pvz.,  Įnoringas ), skirtas procesui optimizuoti. Kadangi vieliniai rėmeliai nebūtinai turi būti detalūs meno kūriniai, vienu metu galite jų sukurti kelis. Net jei įsimylėsite savo pirmąją idėją, turėtumėte sukurti daugiau rėmų, kad išplėstumėte savo vaizduotę ir suteiktumėte sau galimybių. Be įmantrios grafikos, kuri atitrauktų jūsų dėmesį, galite sutelkti dėmesį į naudotojo patirtį ir sužinoti, koks išdėstymas jiems bus intuityviausias. Būtinai atsižvelkite į visus ekrano dydžius – rekomenduojama pradėti nuo išdėstymo mobiliuosius įrenginius, tada sukurkite jį.

• Išbandykite, rinkite atsiliepimus ir kartokite. 

Kai turėsite kelias parinktis, įsitikinkite, kad surinkote atsiliepimų iš kolegų. Programos kaip  Invision  и  Figma,  leidžia kurti interaktyvius prototipus, kad galėtumėte lengvai išbandyti mygtukus ir naršymą nekurdami tikrojo tinklalapio. Jei bandomieji vartotojai, naršydami po prototipą, įrašo save ekrane, tai gali atskleisti UX kliūtis. Kai turėsite keletą pastabų, grįžkite į antrą veiksmą ir kartokite, kol gausite puikų rezultatą.

Nors tai yra tiesioginiai svetainės maketo kūrimo žingsniai, gali būti sunku suprasti, kas daro maketą efektyvų ar neveiksmingą, kai tik pradedate kurti. Kitame skyriuje apžvelgsime konkrečius metodus, kuriuos galite naudoti priimdami dizaino sprendimus.

Pagrindiniai efektyvaus kūrimo metodai. Svetainės išdėstymas

Tinklalapio maketavimo kūrimas yra dešimtmečius taikoma praktika, o tai reiškia, kad bėgant metams buvo sukurta daugybė dizaino konvencijų ir principų, kuriais vadovaujantis dizaineriai dirba savo amato. Žemiau pateikiami keli naudingiausi iš šių metodų:

Vizualinė hierarchija

Vizualinė hierarchija yra būdas stilizuoti šešis dizaino elementus, siekiant padidinti kontrastą, kad tam tikri turinio elementai išsiskirtų aukščiau kitų. Norint tai pasiekti, svarbiausios išdėstymo dalys yra tos, kurias vartotojas turi iš karto identifikuoti, priklausomai nuo puslapio paskirties. Paprastai juos sudaro antraštės, vertės pasiūlymai, raginimai veikti ir vartotojo įrankiai, pvz., navigacija.

Vizualinė hierarchija gali pasireikšti įvairiais būdais, pavyzdžiui, pasirenkant šriftą (dydį, svorį ir net skirtingus šriftų derinius), išlygiuojant svarbius elementus aukščiau puslapyje arba naudojant papildomas spalvas elementams paryškinti.

Skaitymo modeliai. Svetainės išdėstymas

Skaitymo modeliai apibūdina dažniausiai naudojamus puslapių nuskaitymo būdus vartotojų ir yra vaizduojamos kaip nukreiptos linijos (vektoriai, matematikams). Kadangi tyrimai rodo, kad 79 % svetainės lankytojų tik nuskaito puslapį, svarbu, kad jį būtų kuo lengviau nuskaityti. Vienas veiksmingų būdų tai padaryti – sukurti išdėstymą atsižvelgiant į konkretų skaitymo modelį.

Skaitymo modelių įtraukimas į maketus reiškia strategiškai išdėstytus elementus išilgai žiūrovo matymo linijų. Dažniausi modeliai, į kuriuos reikia atsižvelgti, yra Z raštas (zigzago vektorius; naudingas sudėtingiems maketams) ir F modelis (linijos vektorius; naudingas daug teksto turintiems maketams).

Virš arba žemiau raukšlės. Svetainės išdėstymas

Interneto dizaino srityje „lenkimas“ yra linija, kurioje tinklalapis nupjaunamas dėl ekrano dydžio apribojimų. Turinys, kuris matomas įkeliant puslapį, vadinamas „virš puslapio“, o turinys, kuriam naudotojams reikia slinkti žemyn, kad jį atidarytų, vadinamas „puslapio apačia“.

Kalbant apie svetainės išdėstymą, svarbiausias ir (arba) patraukliausias turinys (pvz., vertės pasiūlymas ir raginimas veikti) turėtų būti saugiai išdėstyti puslapio viršuje, kad naudotojams nereikėtų jo ieškoti. Ši erdvė yra 1000 x 600 pikselių daugeliui ekrano dydžių. Be to, dizaineriai taip pat gali naudoti lankstymą, kad nukirptų intriguojančią grafiką ir nukopijuotų, kad priviliotų vartotojus slinkti žemyn ir toliau sąveikauti su tinklalapiu.

Tinklelio sistemos. Svetainės išdėstymas

Tinklelio sistema yra išdėstymas, pagrįstas griežtais matavimais ir gairėmis. Tinklelį sudaro stulpeliai (skirtos vietos turiniui talpinti) ir latakai (tuščios vietos tarp stulpelių).

Tuščia vieta

Balta erdvė, kartais vadinama neigiama erdve, yra tiesiog dizaino sritis be jokio turinio, ty tuščia erdvė. Nors tai lengva nepastebėti ir dažnai vilioja užpildyti turiniu, balta erdvė gali būti svarbiausia turtas svetainės makete.

Šis svetainės maketas patraukia dėmesį efektyvia balta erdve.

Pagalvokite apie tai, kaip teksto eilutė tuščiame puslapyje bus daug veiksmingesnė, kad patrauktų jūsų dėmesį, nei puslapyje, perkrautame turiniu. Daug baltos erdvės sukuria pabrėžimą, todėl visą kompoziciją lengviau perskaityti. Skirtingai nuo spausdintų puslapių, tinklalapio ilgis neribojamas, todėl dizaineriams suteikiama daug daugiau laisvės strategijoje ir tuščios erdvės panaudojime.

Įprasti svetainių maketų tipai. Svetainės išdėstymas

Svetainių maketai retai kuriami nuo nulio; iš tikrųjų dažnai sakoma, kad taip nėra. Dauguma šiuolaikinių svetainių yra pagrįstos įprastomis išdėstymo schemomis, kurios nuosekliai ir su nedideliais skirtumais naudojamos visame internete.

Nors tam tikras originalumas yra svarbus bet kokiam dizainui, svetainės kuriamos taip, kad būtų iš karto suprantamos ir naudojamos. Taigi, kai bėgant metams vartotojai pripranta prie tam tikrų maketų tipų, dizaineriams prasminga jų laikytis. Atminkite, kad galiausiai išdėstymas turėtų būti praktiškas ir kuo mažiau laiko naudotojai praleidžia mokydamiesi naujo išdėstymo, tuo daugiau laiko jie skirs faktiniam svetainės naudojimui. Be to, čia yra keletas dažniausiai naudojamų svetainių maketų:

Vieno stulpelio išdėstymas

Vieno stulpelio išdėstymas yra išdėstymas, kuriame turinys nuosekliai dedamas į vieną stulpelį, dažnai centre.

Daugelis tinklalapių išdėstymo prasideda čia, nes mobiliesiems skirtas dizainas yra seniai rekomenduojamas metodas, o svetainės mobiliesiems dažnai išdėstomos viename stulpelyje dėl dydžio apribojimų. Šis išdėstymas labiausiai naudingas nukreipimo puslapiams arba kanalo turiniui, pvz socialiniai tinklai ir tinklaraščius, nes tai sumažina puslapio elementų skaičių ir skatina slinkimą.

Dviejų stulpelių išdėstymas. Svetainės išdėstymas

Dviejų stulpelių išdėstymas, kartais padalytame ekrane, rodomas turinys vienas šalia kito.

Tai naudinga norint pabrėžti dviejų elementų dichotomijas (pavyzdžiui, skirtingos auditorijos drabužių svetainėse, stilius prieš / po aptarnavimo arba dvi parinktys kainodara). Tai taip pat naudinga subalansuojant grafiką su kopijavimu, subtiliai palaikant Z modelio skaitymą.

Kelių stulpelių išdėstymas. Svetainės išdėstymas

Kelių stulpelių išdėstymas dažnai vadinamas laikraščio ar žurnalo maketu. Jis talpina didelį svetainės turinį į vieną puslapį.

Tinklelis paprastai naudojamas tvarkai ir hierarchijai palaikyti, suteikiant platesnę stulpelių erdvę svarbesniems elementams, pvz., pagrindiniam turiniui, o mažiau svarbiems elementams, tokiems kaip naršymo meniu, šoninė juosta ar reklamjuostės skelbimas, suteikiama mažiau proporcinga erdvė. Tai naudinga įmonės pagrindiniams puslapiams, vaizdų ar vaizdo įrašų svetainėms, internetiniams leidiniams, tinkintoms informacijos suvestinėms ir apsipirkimo svetainėms – svetainėms, kuriose yra daug turinio ir kategorijų, į kurias galima nukreipti vartotojus.

Asimetriškas išdėstymas. Svetainės išdėstymas

Asimetriškas išdėstymas yra tada, kai elementai yra išdėstyti nevienodu masteliu ir arti – paprasčiau tariant,  ne simetriškai. Tačiau nors tai yra priešinga tinklelio sistemai, asimetrija nereiškia chaoso.

Pusiausvyra yra svarbi bet kokiame dizaine, o asimetriškas išdėstymas tiesiog pasiekiamas netikėtais būdais, pavyzdžiui, vienoje pusėje derinamas didelio masto atvaizdavimas su daug mažesnių elementų kitoje. Tai naudinga norint pabrėžti kai kuriuos elementus (pažodžiui nurodant dydį, spalvą ar vietą) prieš kitus. Jis taip pat gali palaikyti pasirinktinius skaitymo modelius (priešingai nei įprastiniai, minėti anksčiau).

Prekiniams ženklams, kurie gali sau leisti taikyti netradicinį požiūrį į dizainą, toks išdėstymo stilius bus idealus – tai yra svetainės, kuriose dėmesys sutelkiamas į meną, turi nuotykių trokštančią auditoriją arba nori pabrėžti naujovišką ar proveržio produktą.

Svetainės išdėstymas pilnai išdėstytas

Puikus svetainės išdėstymo dizainas daro ją ne tik patrauklią, bet ir intuityvią. Tai pirmas žingsnis siekiant padaryti pirmąjį įspūdį naudotojams, priviliojant juos likti ir pamatyti visą turinį, kurį gali pasiūlyti jūsų svetainė. Svetainės išdėstymas

Nors šie svetainės maketavimo pagrindai gali padėti jums pradėti, turėtumėte stengtis padaryti viską, kas įmanoma, kad svetainės lankytojams būtų suteikta išskirtinė patirtis. O geriausias būdas gauti modernų svetainės maketą – dirbti su profesionaliu dizaineriu.

 АЗБУКА «