Skipulag vefsíðna

Bestu dæmi um vefsíðugerð og hugmyndir


Skipulag vefsíðunnar þinnar getur skilgreint árangur þess. Fáðu ranga hönnun og fólk verður ruglað og ruglað og eyðileggur upplifun notenda. Þeir munu líklega sakna gagnrýnins efnis eða sjá ekki ákall til aðgerða.

En mikilvægi skipulagsins nær lengra. Hönnunin verður að passa við innihald vefsvæðisins. Með réttu skipulagi getur innihaldið þitt skín, en með röngunni getur innihaldið orðið þéttsetið, erfitt að lesa og andlaust..

Skipulag vefsíðunnar þinnar getur skilgreint árangur þess. Fáðu ranga hönnun og fólk verður ruglað og ruglað og eyðileggur upplifun notenda. Þeir munu líklega sakna gagnrýnins efnis eða sjá ekki ákall til aðgerða.

En mikilvægi skipulagsins nær lengra. Hönnunin verður að passa við innihald vefsvæðisins. Með réttu skipulagi getur innihaldið þitt skín, en með röngunni getur innihaldið orðið þéttsetið, erfitt að lesa og andlaust..

Á endanum hafa allar síður ristakerfi sem situr undir vefsíðugerðinni. Þessir dálkar og línur veita innihaldi þínu röð og leiðbeina augum notandans um síðuna. Innan þessara rita geturðu búið til ofgnótt af mismunandi aðferðum. Sérhver vefsíða er með undirliggjandi rist sem hönnuðurinn hefur byggt upp skipulagið.

Hins vegar, þegar kemur að því að velja rétta skipulagshönnun fyrir síðuna þína, þá eru nokkrir sameiginlegir upphafsstaðir sem þú getur notað til að byrja.

Það er þess virði að segja að þú þarft ekki að standa við eina nálgun. Þú getur auðveldlega sameinað margar skipulag á vefsvæðinu þínu eða jafnvel á einni síðu eins og áfangasíðu.

Sem sagt, við skulum líta á algengustu skipulagskostina sem í boði eru.

Við byrjum á einfaldasta skipulagsmynstri allra, staka dálkinn.

1. Skipulag eins dálks

Þó að flókið skipulag sem þú munt finna, hefur það aukist verulega í vinsældum síðan vöxtur farsímavefsins. Það er vegna þess að vefsíðan getur notað sömu hönnun í farsímum, spjaldtölvum og skjáborðum og dregið úr þróunartíma.

Einnig skipulag eins dálka virkar vel til að skapa mikla lestrarupplifun vegna þess að það beinir notandanum áherslu á innihaldið án truflana hvorugum megin. Þess vegna bloggsíða Miðlungs samþykkir það fyrir allar greinar sínar.

Miðlungs notar skipulag eins dálks til að auka lestrarupplifunina.

Að lokum, ásamt myndefni, getur skipulag eins dálks haft mikil áhrif því það gerir þér kleift að sýna myndirnar eins stórar og mögulegt er. Ocean Resort er frábært dæmi um þetta í verki.

Ocean Resort notar alla breiddina á eins dálki hönnun sinni til að hámarka áhrif myndar.

Með þessa þætti í huga skaltu íhuga að nota skipulag eins dálks ef þú vilt að fólk eyði miklum tíma í að lesa á síðuna þína eða ef þú ert með myndefni sem þarfnast þess að herbergið skín.

Vegna einfaldleika þess eru nokkrar áskoranir í kringum skipulag eins dálks. Hins vegar þarftu að huga að flæði upplýsinga vandlega. Hvaða röð þarf notandinn til að sjá efnið þitt?

Til dæmis er gagnlegt að gefa notendum yfirlit yfir það sem síðunni er efst til að draga þá inn og bjóða upp á skýran aðgerða undir lokin.

Hugleiddu einnig hvernig þú getur látið notandann fletta niður á síðunni. Skipulag á einni dálki hefur tilhneigingu til að vera lengri og það er ekki alltaf augljóst fyrir notandann að það er meira efni undir brjóta saman. Sjónræn vísir, svo sem ör, getur hjálpað.

Ef skipulag eins dálks virðist svolítið takmarkandi en þú hefur samt mikið af efni til að hafa samskipti skaltu íhuga að taka upp hönnun sem beinist að innihaldinu.

2. Skipulag á innihaldi

Vefhönnuðir nota oft skipulag á innihald á fréttasíðum eða bloggsíðum og það hefur venjulega aðal dálk fyrir innihald og einn eða fleiri hliðarsúlur fyrir viðbótarupplýsingar.

Kosturinn við þetta skipulag er að það getur hjálpað þér að stjórna línulengd aðalinnihalds með því að breyta breidd hliðarsúlna. Það skiptir máli vegna þess ef línulengd textans er of löng eða stutt verður erfiðara að lesa, svo að draga úr skilningi og varðveislu upplýsinganna.

Samt sem áður, rétt gert, er skipulag innihaldsins ákjósanlegt fyrir hvaða einbeitingarmiðaða vefsíðu sem er. Leyndarmálið er að brjóta upp innihaldið innan þessa skipulags í litla, auðvelt að melta klumpur.

Færslurnar á Boagworld brjóta upp efni með fyrirsögnum, listum, myndum og tilvitnunum í úttekt.

Til dæmis, á blogginu mínu, þú munt komast að því að meðalfærslan mín er stungin af fyrirsögnum, listum, myndum og draga tilvitnanir út. Þetta eru allt aðferðir til að hjálpa notandanum að skanna greinina, finna hluti sem vekja áhuga.

Einnig þarf að taka hliðarsúlurnar vandlega. Það er grundvallaratriði að vefhönnuðurinn setji rétt efni í þessa dálka og að þeir hafi sjónrænt rétta vigtun.

Vandamálið er að notendur búast við að finna efnisinnihald í hliðarsúlunum og veita þeim því minni athygli. Þess vegna, ef þú ætlar að taka eitthvað eins og ákall um aðgerðir í hliðarsúlu, verður það að vera nógu sterkt til að vekja athygli.

Taktu til dæmis hvernig Snilldar tímarit notar litríka mynd af kötti til að vekja athygli á skráningarformi fréttabréfsins í hægri dálki.

Smashing Magazine notar hliðarsúlur sínar til að veita auka upplýsingar um færsluna.

Ekki það að skipulag innihaldsins sé viðeigandi fyrir hverja síðu á vefsvæðinu þínu. Vefsíður para þetta skipulag oft við tímaritshönnun.

3. Skipulag tímarita

Eins og nafnið gefur til kynna er þessi skipulagsaðferð mikið notuð í tímaritum eða á fréttavefjum til að sýna mikinn fjölda ólíkra sagna.

Innblásin af útliti prentunar gera þau kleift að blanda fyrirsögnum og myndefni til að kynna sögur. Það getur verið grípandi leið til að koma á framfæri því sem er í raun listi yfir tengla.

Það er einnig frábært skipulag til að draga fram efni sem breytist reglulega. Þess vegna líkar fréttavefjum Washington Post hlynntu því.

Fréttasíður hafa tilhneigingu til að vera hlynntar skipulag tímaritsins.

Skipulagið er þó ekki án þess að það hafi galla. Skipulag tímarits getur verið krefjandi að verða móttækilegur, oft þarfnast algerrar breytinga á hönnun minni tæki.

Þessi útlitstíll vefsíðunnar getur líka verið nokkuð yfirþyrmandi þar sem mikill fjöldi mynda og fyrirsagna hrópar af athygli.

Skilvirkasta leiðin til að takast á við þetta vandamál er að búa til skýra sjónræn stigveldi. Með öðrum orðum, gera sumar sögurnar stærri en aðrar.

Með mismunandi sögustærðum leiðbeina þeir notendum auga.

Taktu til dæmis eftir því hvernig Vogue vefsíða beinir athyglinni að vinstri myndinni með því að gera hana talsvert stærri. Þeir eru að segja notandanum hvert á að leita fyrst.

Það hjálpar einnig að restin af notendaviðmótinu sé einfalt, með hreinni leturgerð og einföldum siglingastikum. Ef þú ætlar að nota tímaritsskipulagið þarftu að vinna hörðum höndum til að halda hlutunum einföldum.

Annar mögulegur galli við skipulag tímaritsins er að það getur litið út fyrir að vera „boxy“ vegna þess að ristin sem liggur að baki því er svo sýnileg. Þú getur samt sem áður dregið úr því með því að taka innblástur frá næstu skipulagstegund okkar.

4. Skipulag ristunar

Skipulag sem virðast brjóta undirliggjandi rist geta verið sjónrænt miklu áhugaverðari en hefðbundnari aðferðir. Þeir eru einnig frábærir til að vekja athygli á sérstökum skjáþáttum sem brjótast út úr venjulegum dálkum.

Tökum sem dæmi Vefsíða VR Arles-hátíðarinnar. Taktu eftir því hvernig þeir vekja athygli þína á leiðsögustikunni með því að láta það skarast í tvo dálka.

VR Arles hátíðin vekur athygli þína á leiðsögustikunni með því að láta það skarast í tvo dálka.

Önnur hagnýting notkunar á skipulagningu ristanna er að nota það til að leggja yfir texta á mynd á þann hátt að vekja athygli á afritinu. Þegar vefsíða leggst alveg yfir texta á mynd getur það oft glatast. Hins vegar, eins og þú getur sjá úr dæminu hér að neðan, ef textinn skarast að hluta til myndarinnar, þá skarast það miklu meira út.

Þessi hönnun vekur athygli á textanum og ákallinu með því að leggja hann að hluta yfir myndina.

Gallinn við skipulag netbrjótandi er að það er erfitt að fá rétt, sérstaklega þegar vefsíður þurfa að vera móttækilegir. Sannleikurinn er að flestar hönnunarmyndir eru ekki af því tagi. Það er enn undirliggjandi rist og allir skjáþættir passa inn í það. Það er bara að ristin eru miklu flóknari og það er því ekki svo augljóst. Það gerir þeim erfitt að hanna.

Meðfylgjandi flækjustig þeirra er ástæða þess að þú hefur tilhneigingu til að sjá þau notuð af hönnuðum fyrirtækjum eins og hönnunarstofum eða tískumerkjum. Þeir sýna fram á hve fágun hönnunar er höfðar til tiltekins markhóps.

Ef skipulag á ristum finnst of flókið fyrir aðstæður þínar, en þú vilt samt gera eitthvað nýstárlegri og óvenjulegri, skaltu íhuga hönnun á fullri skjá.

5. Skipulag á öllum skjánum

Skipulag á öllum skjánum, eins og nafnið gefur til kynna, passar á einn skjá þar sem notandinn þarf ekki að fletta. Það gerir þau tilvalin til frásagnar eða kynninga.

Tökum sem dæmi, Tegundir í stykki. Þessi ríka og gagnvirka kynningarreynsla segir sögur af 30 uppteknum tegundum.

Tegundir og stykki er rík, gagnvirk upplifun sem öll á sér stað án þess að fletta.

Eins og þú sérð eru skipulag á öllum skjánum upp á sitt besta þegar þeim fylgja öflug myndmál. Það gerir þær að miklu vali fyrir vefsíður sem eru ríkar af ljósmyndum, myndskreytingum eða myndböndum.

Ekki það að þú þarft að halda fast við nálgunina á einum skjá. Við fyrstu sýn, Roux á vef Alþingistorgsins virðist vera vefsíða á fullum skjá í sama skilningi og tegundir í stykki. Glæsilegt myndefni þeirra fyllir allt útsýni.

Þessi vefsíða notar allt útsýni til að sýna frábæra ljósmyndun.

Hins vegar er mögulegt að fletta lengra niður á síðunni til að sjá viðbótarefni. Því miður, það undirstrikar einn mögulegan galli með þessari skipulag nálgun. Notendur gera sér ekki alltaf grein fyrir því að þeir geta flett og svo geta þeir misst af verðmætu efni.

Þú þarft einnig að huga vel að því hvernig skipulagið mun aðlagast í ýmsum stærðum. Til dæmis, mun fullur skjár nálgun virka í farsíma? Einnig munu myndir skera þegar skjástærð breytist eða einfaldlega minnka? Þú getur fljótt fundið þungamiðja mynda sem skera út úr sýnilegu svæðinu í smærri stærðum.

Sem sagt, ef þú ert með töfrandi myndir til að sýna, muntu eiga í erfiðleikum með að finna betri skipulagshönnun. En ef þú vilt hafa möguleika á að bæta við einhverri lýsingu og kalla á aðgerðir samhliða þessum myndum, gætirðu viljað íhuga skiptis skipulag.

6. Skipt um skiptis

Skiptimynstrið til skiptis er eitt af því sem algengara er að finna á vefnum. Þú munt komast að því að það er samsett úr röð af efnisblokkum, sem hver um sig hefur tveggja dálka skipulag. Kubbarnir eru venjulega samanstendur af mynd á annarri hliðinni og texta á hinni.

Það sem gefur því nafn sitt er að myndin skiptir sér til hliðar. Svo að fyrsta reiturinn mun hafa efni til vinstri og mynd til hægri, en næsta reit snýr því skipulagi til baka.

Það er skipulagsaðferð sem er sérstaklega studd þegar þú útskýrir eiginleika eða ávinning af vöru. Til dæmis hugbúnaðarvörur eins og Webydo mun nota myndina til að sýna eiginleika og síðan afritið til að útskýra hvernig það virkar eða ávinningurinn sem það veitir.

Webydo varamaður texti og myndefni í mismunandi efni lokar fyrir heimasíðuna sína.

Ekki það að þessir efnisblokkir takmarkist við myndir og texta. Stundum koma síður í stað myndar fyrir myndband. Að sama skapi gæti innihaldshlið frumefnisins innihaldið allt frá táknum til vitnisburða eða kalla til aðgerða.

Til dæmis, Convertkit felur í sér vitnisburð og ákall til aðgerða samhliða texta þeirra í hverju innihaldsreit.

Convertkit inniheldur sögur og ákall til aðgerða samhliða myndum þeirra.

Hluti af ástæðunni sem skiptisblokkir eru svo algengir er að þeir eru einföld skipulag nálgun með fáum göllum. Ef þú þarft að miðla nokkrum sölustöðum er það næstum alltaf áreiðanlegt skipulagskost.

Auðvitað, kröfur þínar gætu verið aðrar, svo annar valkostur til að íhuga er kortið byggir.

7. Útlit með kortagerð

Uppsetning kortaupplýsinga er önnur algeng skipulagsaðferð sem þú munt sjá um allan vefinn.

Uppsetning korta sem er byggð á kortum er frábær leið til að gefa fólki röð valkosta fyrir notandann að velja á milli og kynna þeim nægar upplýsingar um hvert val til að taka ákvörðun.

Það gerir þá vinsælt val á vörulistasíðum eCommerce vefsvæða. Það gerir vefsíðunni kleift að birta mynd af vörunni, lýsingu og verðinu. Þú getur jafnvel bætt við virkni eins og „vista til seinna“ eins og þú sérð af Vefsíða Asos.

Netverslanir eins og Asos eru hlynntar kortaskipulagi til að birta vöruskráningar.

Hins vegar finnur þú vefsíður sem nota kortskipulag í öllum aðstæðum þar sem notendur þurfa að velja af lista. Til dæmis, önnur dæmigerð notkun væri að birta lista yfir greinar á bloggi eða fréttasíðu.

Kortatengt skipulag gerir þér kleift að birta mynd af sögunni, titlinum og lýsingunni, svo og öllum viðbótarupplýsingum um færsluna sem þú vilt hafa með. Awwwards blogg er frábært dæmi um notkun af þessu tagi í aðgerðum.

Awwwards nota kortatengd skipulag til að skrá færslurnar á blogginu sínu.

Það besta af öllu, kortatengd skipulag virkar vel á viðbrögð og fjöldi korta í röð minnkar hægt og rólega eftir því sem tiltæk breidd fer niður.

Hins vegar eru nokkrir minniháttar gallar við nálgunina. Í fyrsta lagi virka kortin best þegar myndin er tekin með. Það þýðir að ef þú ert í erfiðleikum með að finna hentugar myndir fyrir hvert listaefni þitt gætirðu verið betri með aðra hönnun.

Hitt örlítið vandamálið er með mismunandi magni af innihaldi. Ef eitt kort hefur meira efni en annað, getur það skilið eftir hvítt rými annað hvort innan kortsins eða á milli hverrar röð.

Ef kort hafa mismunandi magn af innihaldi getur það skilið eftir bil milli korta.

Ein leið til að draga úr þessu máli er að reyna ekki að halda kortum í sömu röð, eins og sýnt er í dæminu hér að neðan.

Með því að leyfa kortum að fylla tómt rými endarðu með fagurfræðilegri ánægjulegri hönnun.

Engu að síður er þetta smávægilegt mál, sem skýrir víðtæka samþykkt þessarar útlitsaðferðar.

Önnur jafn vinsæl hönnun er uppsetning hetjuímyndarinnar.

8. Hero Layout

Hetjuuppsetningin er nefnd eftir hetjuímyndum, þessar stóru myndir með yfirborð texta sem ráða yfir heimasíðunum á svo mörgum vefsíðum. Apple nýtir sér klassíska hetjuímyndina vel.

Apple nýtir sér klassíska hetjuímyndina vel.
Pixave fyrir MacOS tekur hetjuuppsetninguna enn frekar með því að láta hana ráða yfir heimasíðu heimasíðunnar.
Pixave fyrir MacOS tekur hetjuuppsetninguna enn frekar með því að láta hana ráða yfir heimasíðu heimasíðunnar.

Það sem gerir hetjuímyndir svo ríkjandi er að þær leyfa þér að skipuleggja gildi uppástunga á áhrifamikinn hátt rétt við inngangsstað vefsíðu þinnar.

Eins og þú sérð frá Pixave og Epli vefsíður hér að ofan samanstanda venjulega af stórum bakgrunnsmynd, titli eða ól og lýsingu. Hero skipulag koma einnig oft með áberandi athöfn.

Ef þú þarft að skýra skýrt hvað þú býður upp á heimasíðuna þína eða áfangasíðuna á þann hátt sem vekur athygli, þá gæti hetjaímynd verið leiðin. Hins vegar er það líklega umfang notkunar þeirra.

Stundum sérðu hetjuútlitið sem notað er á síðum síðum. En í flestum tilfellum dregur hetjaímyndin einfaldlega athygli frá verðmætara efni. Svo nota með varúð.

Fyrir utan það er lítill galli við að nota hetjuuppsetning. Já, þau eru algeng en notendur þekkja þau og eru áhrifarík.

Töluvert sjaldgæfari skipulagskostur er skipulag á hættu skjá.

9. Skipting skjás

Eins og skjárinn á öllum skjánum, er skipt skjár frábær leið til að vekja athygli þegar notendur koma fyrst á vefsíðuna þína eins og þú sérð af Heimasíða vefhönnunarfyrirtækis hér að neðan.

Þessi vefsíða notar skipulag á skjánum til að útskýra hlutana tvo sem þeir bjóða.

Það sem gerir dæmið hér að ofan svo árangursríkt er að það er skýr ástæða fyrir skipulagi skjásins. Vefsíðan gerir það ljóst að það eru tvær hliðar á viðskiptum þeirra – hönnun og þróun.

Svipað dæmi er þegar þú vilt gefa notendum skýrt tvöfalt val. Skipt skjár er mikið vit í þeim aðstæðum þar sem það skiptir skjánum jafnt á milli valkosta.

Til dæmis líkanastofnunin 62 Stjórnun notar hættuskjá til að hvetja notendur til að bera kennsl á hvort þeir séu að leita að karl- eða kvenlíkani.

62 Stjórnun notar deiliskjáhönnun til að hvetja notendur til að velja milli tveggja valkosta.

Því miður umfram þennan takmarkaða fjölda umsókna, er lítil ástæða til að taka upp skjáskjáhönnun. Það er tiltölulega takmarkandi skipulagskostur og það eru einfaldlega ekki svo mörg atburðarás þar sem það á við. En í þeim tilvikum þar sem það er, er það langbesti kosturinn.

Svipaður valkostur sem myndi veita aðeins meiri sveigjanleika er ósamhverfar skipulag.

10. Ósamhverf skipulag

Þrátt fyrir að skipulag skjámyndanna neyðir jafna skiptingu um miðju útsýnispunktsins, þá gerir ósamhverf hönnun þér kleift að deila skjánum hvernig sem þér sýnist.

Kosturinn við þetta skipulag yfir hættuskjá er að það gerir kleift að leggja áherslu á ákveðna hlið á síðunni. Því meira sem fasteignir hafa hlið, því meiri áhersla leggur þú á hana. Það, aftur á móti, gerir þér kleift að bera kennsl á aðal- og efnisinnihald.

Þegar forsenda aðal- og aukadálka er til staðar geturðu notað nálgunina á marga vegu. Til dæmis, Félix Lesouef notar aðferðina á vefsíðu sinni til að skipta á milli efnis og siglingar.

Félix Lesouef notar ósamhverf skipulag til að varpa ljósi á vefsvæði sitt.

Aftur á móti, Nærast mataræði vefsíða notar seinni dálkinn til að leyfa þér að sjá næsta hluta vefsíðu þess.

Nourish Eats notar þessa útlitsaðferð til að afhjúpa efnisinnihald meira áberandi.

Að mörgu leyti er ósamhverfar skipulag framúrskarandi kostur. Það er sveigjanlegt, tiltölulega auðvelt í framkvæmd og minna notað. Það er þægileg leið til að láta vefsíðuna þína líta öðruvísi út án höfuðverkja sumra annarra kosta völ.

Hvernig á að velja skipulag

Með því að lesa þessa grein hefurðu stigið fyrsta skrefið í að velja rétt skipulag fyrir síðuna þína. Þú hefur lært hvers konar möguleikar eru í boði fyrir þig.

Næst þarftu að fá tilfinningu fyrir því hvaða valkostir gætu hentað fyrir síðuna þína. Ein leið til að gera þetta er að skoða samkeppnisaðila þína. Hins vegar myndi ég ráðleggja að hætta ekki þar. Hættan er sú að þú afritar þá, og það mun alltaf setja þig einu skrefi á eftir.

Skoðaðu í staðinn vefsíður í öðrum geirum sem hafa tegundir af innihaldi sem þú átt. Ef þú ert með bæklingavefsíða sem miðar að B2B áhorfendum, kíktu á aðrar svipaðar síður. Jafnframt, ef þú ert með eCommerce síðu, skoðaðu þá eCommerce í öðrum geirum.

Þaðan skaltu vinna með hönnuð þínum til að gera tilraunir með nokkrar mismunandi leiðir. Fáðu þær til að raða saman hugmyndum út frá mismunandi skipulagi og sjá hvað hentar best þínu efni.

Ef þér finnst þú ekki geta tekið ákvörðun eða skortir sjálfstraust í rétta átt, reyndu að setja valkostina fyrir framan suma notendur og fá viðbrögð þeirra. Ekki bara spyrja þá sem þeir kjósa, spyrðu þá líka hvort þeir hafi séð mikilvægt efni eða skilið hvað fyrirtækið snýst um.

Sannarlega finnurðu líklega að þú velur og velur úr mismunandi skipulagi fyrir mismunandi hluta vefsíðu þinnar og það er í lagi. Vegna þess að þegar kemur að vefsíðuskipulagi er mikilvægt að nota réttan á réttum tíma.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map