10 Rock Solid vefsíðuskipulagsdæmi

 10 Rock Solid vefsíðuskipulagsdæmi

John Morrison

10 grjótharð sýnishorn af vefsíðuskipulagi

Upplit getur bæði verið ein auðveldasta og ein erfiðasta hlið vefhönnunar. Stundum getur hönnuður sloppið fram ótrúlegt skipulag á nokkrum mínútum og stundum getur sami hönnuður glímt við sama verkefni lengst af dags.

Hvert verkefni er einstakt og kallar á einstaka lausn, en ég hef fannst það hjálplegt að hafa nokkrar grjótharðar og ótrúlega fjölhæfar línur í huga sem ég get farið út þegar ég festist.

Upplitin tíu hér að neðan ættu að vera nóg til að koma þér í gegnum jafnvel verstu tilfelli hönnuðablokkunar þegar þú getur ekki fundið út bestu leiðina til að raða efninu á síðunni þinni.

Kannaðu stafrænt Eignir

Keeping It Simple

Síðuútlit er jöfn hluti list og vísindi. Að búa til eitthvað sem er sjónrænt aðlaðandi og einstakt tekur auga listamannsins. Hins vegar eru nokkrar mjög auðvelt að fylgja leiðbeiningum sem þú getur notað til að búa til traust skipulag sem virkar fyrir hvaða fjölda tilvika sem er. Þessar meginreglur fela í sér að velja og halda sig við röðun, skipuleggja hvíta rýmið þitt rétt og undirstrika mikilvæga þætti með stærð, staðsetningu o.s.frv.

Hönnuðir leggja oft allt of mikla áherslu á útlitsferlið. Við höfum tilhneigingu til að nálgast verkefni á meðan við hugsum að það þurfi að vera algjörlega einstakt í alla staði til að vera þess virði tíma okkar og peninga viðskiptavinarins.

Hins vegar, ef þú ert með aVcard vefsíðusniðmát, til dæmis. Sjáðu hvernig það notar mynd einstaklings sem bakgrunn fyrir alla vefsíðuna.

Eða þú getur notað sömu hugmyndina til að búa til betri netverslunarvefsíður, eins og Flatsome WordPress þema.

9. Rafmagnsnet

Raflnetið er flóknasta útlitið í þessari grein, en það er eitt áhrifaríkasta skipulag sem ég hef séð fyrir síður sem þurfa að innihalda alls kyns ýmislegt tengt efni. Allt frá myndum og tónlistarspilurum til texta og myndskeiða, þú getur troðið nánast öllu inn í þetta skipulag og það helst sterkt.

Lykillinn liggur í neðri hluta forskoðunarinnar hér að ofan. Taktu eftir að það er í raun stór ílát sem geymir röð af rétthyrningum. Þessi gámur veitir þér mörkin fyrir rýmið þitt og allt efni sem þú setur inni ætti að vera sniðið í sterku en fjölbreyttu ristli, ekki ósvipað og háþróaða töfluskipulaginu nálægt upphafi þessarar greinar.

Dæmi um vefsíðusniðmát og þemu

Fréttavefsíður, tímarit og blogg nota þessa nálgun til að hanna útlit þar sem þau geta fyllt eins mikið af upplýsingum og þau geta án þess að skapa ringulreið. Og það virkar líka nokkuð vel.

The Newspaper WordPress þemað er eitt af mörgum bloggþemum sem nota raforkukerfið. Þú munt sjá sama skipulag á mörgum virtum fréttavefsíðum frá BBC til CNN, Huffington Post og fleira líka.

10. Mynd í fullri skjá

ÚrslitaleikurinnÚtlit á listanum er annað sem hentar vel fyrir ljósmyndara, en mun virka á hvaða vef sem er með stóra, aðlaðandi bakgrunnsmynd til að sýna og takmarkað magn af efni.

Það getur verið mjög erfitt að lesa efni þegar hún er sett yfir bakgrunnsmynd, þannig að grunnhugmyndin hér er að búa til ógegnsætt (eða næstum ógegnsætt) láréttan strik sem situr ofan á myndinni og þjónar sem ílát fyrir tengla, afrit, lógó og annað efni.

Í stað þess að nota stikuna sem eitt mjög breitt efnissvæði skaltu prófa að skipta því í nokkra mismunandi hluta. Þetta er hægt að gera með því að breyta bakgrunnslitnum, bæta við lúmskum lóðréttum línum sem skilrúmum eða jafnvel skipta stóra kassanum í smærri ótengda kassa eins og ég hef gert hér að ofan.

Dæmi um vefsíðusniðmát og þemu

Þetta vefskipulag er einnig algeng hönnunarstefna sem sést á alls kyns vefsíðum frá eignasöfnum til persónulegra vefsíðna. En það er vinsælast á fyrirtækja- og fyrirtækjavefsíðum.

Charles er HTML sniðmát fyrir vefsíður fyrir viðskiptaráðgjöf. Og það notar heildarmyndahugmyndina til að búa til meira athyglisverðan haushluta fyrir vefsíðuna.

Þú getur líka notað þetta sama hönnunarútlit til að búa til aðrar tegundir vefsíðna líka. Til dæmis er AppStorm app áfangasíðuvefsíða sem sýnir hversu skapandi þú getur orðið með þessu hönnunarhugtaki.

Niðurstaða

Þarnavoru nokkur lykilatriði hér að ofan sem ég vil ítreka að lokum. Í fyrsta lagi, jafnvel þó að útlit síðu sé ekki endilega „ein stærð sem hentar öllum“, þá eru það vísindi sem hægt er að beita fljótt og auðveldlega við ótrúlega margar aðstæður.

Næst, Útlitshugmyndir, sem settar eru fram hér að ofan, þurfa ekki að leiða til vefsíðna með smákökuskera sem líta allar eins út, heldur aðeins að veita þér grunn striga sem þú getur byggt á sérstaklega einstaka klára hönnun á.

Sjá einnig: 27+ bestu HDR Lightroom forstillingar 2023

Að lokum, lykillinn að því að innleiða þetta með góðum árangri. Hugmyndir eru að muna að þær eru ekki greyptar í stein. Hverjum þeirra ætti að breyta til að passa við þitt tiltekna verkefni og jafnvel hægt að blanda saman og passa saman til að búa til nýjar hugmyndir!

Skiptu eftir athugasemd hér að neðan og láttu okkur vita hvað þér finnst um útlitin hér að ofan. Eru einhverjir sem ekki eru nefndir hér að ofan sem þú notar sjálfgefið þegar þú átt í vandræðum? Skildu eftir hlekk á dæmi.

skoðaðu þig vel um vefinn og þú munt sjá að þetta er ekki endilega raunin. Frábærar vefsíður nota oft útlit sem eru frekar einföld og ekki síst einstök. Það er rétt að síðurnar sem við hönnuðir dásama mest eru oft frá sérkennilegum síðum sem brjóta mótið, en meðalviðskiptavinur þinn vill bara eitthvað nothæft, hreint og faglegt.Frábærar vefsíður nota oft útlit sem eru frekar einföld og ekki að minnsta kosti einstakt.

Í þessari grein ætlum við að skoða tíu mjög algengar uppsetningar sem þú getur fundið á óteljandi síðum á vefnum. Taktu eftir því hvernig þessar síður eru stílaðar, sem þýðir litir, grafík og leturgerðir, er einstakt, en grunnbygging vefsvæða sjálfra er byggð á sannreyndum aðferðum til að setja upp vefsíðu. Við leggjum áherslu á þetta með því að sýna þér fyrst einfalda skuggamynd af útlitinu svo þú getir varpað þínum eigin hugsunum og hönnun á það, síðan munum við fylgja því eftir með einu eða tveimur dæmum um raunverulegar síður sem nota útlitið.

Ef þú ert vefhönnuður skaltu setja bókamerki á þessa síðu og koma aftur næst þegar þú festist við að setja upp síðu. Hafðu í huga að hvert af eftirfarandi skipulagi táknar grunntillögu fyrir þig til að móta og breyta. Ég hvet þig til að nota þau ekki eins og þau eru heldur setja þinn eigin snúning á þau út frá þörfum verkefnisins.

1. Three Boxes

Þetta er líklega einfaldasta skipulagið álista. Reyndar muntu freistast til að halda að það sé allt of einfalt til að uppfylla þínar eigin þarfir. Ef þetta er raunin muntu koma þér á óvart ef þú veltir virkilega fyrir þér hversu fjölhæft fyrirkomulagið er í raun og veru.

Sjá einnig: 60+ bestu grunntónsniðmát 2023

Umsetning kassanna þriggja er með einu grafísku aðalsvæði og síðan tveir smærri kassar undir. Hvert þeirra er hægt að fylla með grafík, textablokk eða blöndu af hvoru tveggja. Aðalreiturinn í þessu skipulagi er oft jQuery renna, sem getur sýnt eins mikið efni og þú vilt!

Skuggaformin meðfram toppnum eru svæði sem hægt er að nota fyrir lógó, fyrirtækjanöfn, flakk, leitarstikur og hvers kyns annað upplýsinga- og hagnýtt efni, venjulega á vefsíðu.

Þessi hönnun er tilvalin fyrir safnsíðu eða eitthvað sem þarf að sýna nokkrar sýnishorn af grafík. Hver mynd gæti verið hlekkur sem leiðir á stærri og flóknari gallerísíðu. Síðar í greininni munum við sjá hvernig á að blanda þessari hugmynd saman enn frekar.

Dæmi um sniðmát og þemu fyrir vefsíður

Það er auðvelt hugtak að byrja með. En þú getur fengið forskot í þessari tegund af hönnun með því að nota fyrirfram tilbúið sniðmát. Þú getur auðveldlega fundið fullt af HTML sniðmátum og WordPress þemum sem nota þessar uppsetningar á vinsælum markaðsstöðum. Hér eru bara nokkur frábær dæmi.

Hurst er HTML vefsíðusniðmát sem notar uppsetningu kassanna þriggja á nokkuð áhrifaríkan hátt. Eins og þú sérð á þessutil dæmis virkar útlitið vel til að varpa ljósi á bæði fyrirtækið og vörur þess án þess að auka ringulreið við hönnunina.

Bloom er annað frábært dæmi um HTML sniðmát sem notar hönnunarhugmyndina til að búa til aðlaðandi eignasafnshönnun. . Þessi hönnun nýtir skjáinn til fulls til að búa til vel skipulagða vefsíðu til að sýna verkin þín.

2. 3D skjámyndir

Þegar þróunaraðilar halda áfram að búa til endalaust safn af vefforritum, verður þrívíddarskjámyndaskipulagið sem sést hér að neðan, eða einhver afbrigði af því, sífellt vinsælli. Grunnhugmyndin er að toppa síðuna þína með fyrirsögn og henda síðan inn nokkrum stílfærðum forskoðunum af forritinu þínu. Þessum fylgir oft spegilmyndir, þungir skuggar, stór bakgrunnsgrafík, eða jafnvel flóknar skreytingar eins og vínvið sem skríða um allar skjámyndirnar, en kjarnahugmyndin er alltaf mjög einföld.

Annars staðar sé ég þetta bragð. mikið notað er í forsmíðuðum þemum. Í þessum tilfellum er hönnuður að selja lagerútlit og þarf virkilega grafík staðsetningar til að skína og ekkert segir flott og nútímalegt eins og einhver fín þrívíddarbrellur!

Dæmi um vefsíðusniðmát og þemu

Þó að það séu leiðir til að búa til þrívíddarbrellur jafnvel með ekkert nema CSS, þá er besta og auðveldasta leiðin til að búa til flotta þrívíddarlíka hausa á vefsíðum að nota WordPress tappi eins og Slider Revolution. Það gerir þér kleift að gefa ímyndunaraflinu lausan tauminn til að búa til dáleiðandiÞrívíddar skyggnusýningar og gagnvirkir hlutir á vefsíðum.

Til dæmis, We Build er WordPress þema sem notar Slider Revolution viðbótina til að búa til ótrúlega gagnvirka hluta á vefsíðusniðmátum sínum með þrívíddarlíkri hönnun.

Eða þú getur búið til hreinan CSS þrívíddarmyndarennibraut eins og þennan.

3. Advanced Grid

Mörg af útlitunum sem þú munt sjá í þessari grein fylgja ansi ströngri riströðun. Hins vegar, að mestu leyti, benda þeir ekki einfaldlega á síðu fulla af samræmdum smámyndum. Til dæmis blandar útlitið hér að neðan saman stærð myndanna til að forðast offramboð.

Eins og með dæmið um þrjá kassana, þá er ein aðalmynd á síðunni. Þessu er fylgt eftir með einföldum snúningi á hugmyndinni um samræmt rist af smámyndum. Rýmið myndi leyfa fjóra ferninga lárétta, en í staðinn höfum við sameinað fyrstu tvö svæðin þannig að vinstri helmingur síðunnar er frábrugðinn þeim hægri.

Eins og við nefndum með þeim fyrri skipulag, kubbarnir þurfa ekki að vera myndir. Til dæmis geturðu ímyndað þér þetta sem textabubba vinstra megin við ferkantaða myndir hægra megin.

Dæmi um vefsíðusniðmát og þemu

Þú getur notað svo margar aðferðir til að hanna vefsíður sem byggjast á ristli . Rammar eins og Bootstrap og Foundation eru gerðir fyrir þessar tegundir vefsíðna. Hins vegar er háþróað rist skipulag aðallega vinsælt í vefsíðuhönnun eignasafns.

Leedo erfrábært dæmi sem sýnir hvernig á að búa til hreina eignasafnsvefsíðu með því að nota háþróaða töfluuppsetninguna.

Lágmarkssniðmát HTML eignasafns notar risthönnunina á annan hátt til að sýna safnasafnið sitt.

Það er undir þér komið að gera þetta hugtak að þínu eigin.

4. Valin grafík

Stundum ertu ekki með nóg efni fyrir síðu fulla af myndum. Svo hvað gerirðu ef þú vilt sýna eitt tákn, mynd eða jafnvel tákn eins og merki? Útlitið hér að neðan er ofur auðveld lausn sem er nokkuð vinsæl og les mjög vel vegna skorts á truflunum.

Útkoman er síða sem er feitletruð en samt lítil og hrein. Yfirlýsingin sem hún gefur frá sér er sterk og ómögulegt að missa af, vertu bara viss um að grafíkin þín sé nógu góð til að vera svo áberandi!

Dæmi um sniðmát og þemu fyrir vefsíður

Hið sýnda grafíska hugtak er eitt af algengustu straumarnir í vefsíðuhönnun, sérstaklega á vefsíðum fyrir áfangasíður fyrirtækja og vöru.

Lamira er WordPress þema sem sýnir þér hvernig þú getur notað þessa þróun á áhrifaríkan hátt til að kynna vöruna þína á heimasíðu vefsíðunnar. Það er fullkomið til að sýna og sýna bestu vörurnar þínar.

Hugmyndin virkar líka fullkomlega fyrir fyrirtækjavefsíður. FinWin HTML vefsíðusniðmát notar stefnuna til að manna fyrirtæki fyrirtæki.

5. Fimm kassar

Umsetning kassanna fimm er einfaldlega þróun þessara þriggjakassa skipulag. Öll sama rökfræði á við, henni hefur bara verið breytt til að halda enn meira efni. Það gæti auðveldlega verið fjórir kassar líka, það fer bara eftir því hvað þú vilt sýna. Það lætur það líka líta út fyrir að þú hafir lagt aðeins meira í hönnunina!

Augljóslega, þegar þú bætir við útlitið, verða aukahlutirnir minni og minni svo fyrir flesta notkun munu fimm kassar líklega nálgast mörkin.

Rétt eins og með þriggja kassa skipulagið er þessi svo fjölhæfur að það er bókstaflega hægt að nota það á nánast hvaða tegund af vef sem er. Hugmyndir til að breyta því eru meðal annars að bæta við stórri bakgrunnsmynd, hringja hornin, bæta við skuggum og/eða endurspeglun, eða jafnvel bæta gagnvirku atriði við smærri smámyndir. Þú gætir auðveldlega bætt inn hnöppum sem valda því að þeir fletta lárétt.

Dæmi um vefsíðusniðmát og þemu

Fimm kassar er frekar villt hugtak sem þú sérð ekki eins oft og það var áður . En þú munt rekast á vefsíðu hér og þar sem notar þessa stefnu alveg snilldarlega.

ECOSHOP er HTML sniðmát fyrir netverslun og það notar hugmyndina um fimm kassa til að búa til flotta rist-líka heimasíðuhönnun .

Þú getur líka notað það fyrir blogg og eignasafnsvefsíður, gott dæmi er Voku HTML sniðmátið.

6. Fast hliðarstika

Hingað til hafa allar síðurnar sem við höfum séð verið með lárétta leiðsögn að ofan. Theannar vinsæll valkostur er auðvitað lóðrétt flakk, sem hentar því að búa til sterkan lóðréttan dálk vinstra megin á síðunni. Oft er þetta fastur þáttur sem helst þar sem hann er á meðan restin af síðunni flettir. Ástæðan fyrir þessu er svo að flakkið geti verið aðgengilegt hvar sem er á síðunni.

Restin af efninu er hægt að fá að láni frá einhverju af hinum útlitunum á þessum lista. Taktu eftir því að ég hef aftur breytt þriggja kassaskipulaginu, að þessu sinni í fjögurra kassa fyrirkomulagi. Þegar þú ert búinn að lesa þessa grein skaltu skoða öll útlitin aftur og íhuga hvernig þú getur blandað saman hugmyndunum til að búa til ný útlit.

Dæmi um sniðmát og þemu fyrir vefsíður

Föst hliðarstikan er algeng hönnun sem notuð er í hönnun vefsvæða. Það er sérstaklega gagnlegt fyrir persónulegar vefsíður í CV-stíl til að bæta við hluta sem líkist sniði.

Sonex er fallegt HTML sniðmát sem er með fasta hliðarstiku. Það gerir þér kleift að bæta við valmynd og tenglum á samfélagsrásirnar þínar á skapandi hátt.

Moler HTML sniðmát mun sýna þér aðra leið til að nota fasta hliðarstikuna hugtakið.

7. Fyrirsögn & amp; Gallerí

Allir elska góða gallerísíðu. Frá sjónarhóli skipulags, hvað gæti verið einfaldara? Allt sem þú þarft er traust, samræmt rist af myndum og pláss fyrir fyrirsögn með valfrjálsum undirhaus. Lykillinn hér er að gera fyrirsögnina þína stóra og feitletraða. Ekki hika við aðnotaðu þetta sem sköpunarkraft og láttu handrit eða einhverja brjálaða leturgerð fylgja með.

Þetta dæmi notar þrýsta ferhyrninga til að spegla raunverulegu síðuna hér að neðan, en þetta má og ætti að breyta til að passa hvað sem þú ert sýna sig. Málið hér er að fá þig til að hugsa út fyrir rammann en ekki sjálfgefið ferningur, kannski gætirðu notað lóðrétta ferhyrninga eða jafnvel hringi í þínu eigin myndasafni!

Dæmi um sniðmát og þemu fyrir vefsíður

Þessi hugmynd er fullkomin til að búa til vefsíður fyrir hönnunarstofur sem og fyrir ljósmyndara. Þegar það er notað rétt virkar þetta hugtak frábærlega til að búa til nútímalega lágmarkshönnun á vefsíðum.

Satie er frábært HTML sniðmát sem sýnir þér hvernig það er gert.

Park er annað dæmi sem þú getur fengið innblástur til að búa til vefsíður fyrir eignasafn.

8. Valin mynd

Upplitið hér að neðan er mjög algengt, sérstaklega meðal ljósmyndasamfélagsins. Grunnhugmyndin hér er að hafa stóra mynd sem sýnir annaðhvort hönnunina þína eða ljósmyndun (hvað sem er í raun), ásamt lóðréttri leiðsögn til vinstri.

Leiðsögnin gæti verið sterkust í vinstri röðun, en ekki hika við að gera tilraunir með miðju eða jafnvel hægri röðun til að hrósa beinni brún myndarinnar.

Dæmi um vefsíðusniðmát og þemu

Jú, það er mjög algengt hugtak. En áskorunin er hversu skapandi geturðu orðið með þessu hugtaki?

Taktu Centrix, a

John Morrison

John Morrison er vanur hönnuður og afkastamikill rithöfundur með margra ára reynslu í hönnunariðnaðinum. Með ástríðu fyrir að deila þekkingu og læra af öðrum hefur John skapað sér orðspor sem einn af fremstu hönnunarbloggurum í bransanum. Hann eyðir dögum sínum í að rannsaka, gera tilraunir og skrifa um nýjustu hönnunarstrauma, tækni og verkfæri, með það að markmiði að hvetja og fræða aðra hönnuði. Þegar hann er ekki týndur í heimi hönnunarinnar nýtur John þess að ganga, lesa og eyða tíma með fjölskyldu sinni.