Rozloženie webových stránok

Najlepšie príklady rozloženia webových stránok a nápady


Rozloženie vášho webu môže definovať jeho úspech. Získajte nesprávny dizajn a ľudia budú zmätení a dezorientovaní, čo zničí dojem používateľa. Pravdepodobne zmešká kritický obsah alebo neuvidí výzvu na akciu.

Dôležitosť vášho rozloženia však ide ďalej. Dizajn musí zodpovedať obsahu vašich stránok. Pri správnom rozložení môže váš obsah žiariť, ale pri nesprávnom obsahu môže byť preplnený, ťažko čitateľný a nenápadný..

Rozloženie vášho webu môže definovať jeho úspech. Získajte nesprávny dizajn a ľudia budú zmätení a dezorientovaní, čo zničí dojem používateľa. Pravdepodobne zmešká kritický obsah alebo neuvidí výzvu na akciu.

Dôležitosť vášho rozloženia však ide ďalej. Dizajn musí zodpovedať obsahu vašich stránok. Pri správnom rozložení môže váš obsah žiariť, ale pri nesprávnom obsahu môže byť preplnený, ťažko čitateľný a nenápadný..

Nakoniec všetky stránky majú mriežkový systém, ktorý je umiestnený pod dizajnom webových stránok. Tieto stĺpce a riadky poskytujú poradie vášmu obsahu a usmerňujú oko používateľa okolo stránky. V rámci týchto sietí môžete vytvoriť množstvo rôznych prístupov. Každá webová stránka má základnú mriežku, na ktorej dizajnér zostavil rozloženie.

Pokiaľ však ide o výber správneho návrhu rozloženia pre vaše stránky, na začiatku môžete použiť niekoľko bežných východiskových bodov.

Stojí za zmienku, že sa nemusíte držať jedného prístupu. Na svojom webe alebo na jednej stránke, napríklad na vstupnej stránke, môžete ľahko kombinovať viacero rozložení.

Pozrime sa však na najbežnejšie možnosti rozloženia, ktoré máte k dispozícii.

Začneme najpriamejším usporiadaním zo všetkých, jedným stĺpcom.

1. Rozloženie jedného stĺpca

Hoci najkomplikovanejšie rozloženie nájdete, výrazne vzrástlo v popularite od rastu mobilného webu. Je to tak preto, že webová stránka môže používať rovnaký dizajn na mobilných zariadeniach, tabletoch a stolných počítačoch, čím sa skracuje čas potrebný na vývoj.

Rozmiestnenia v jednom stĺpci tiež fungujú dobre na vytvorenie skvelého zážitku z čítania, pretože zameriavajú používateľa na obsah bez rozptyľovania na oboch stranách. To je dôvod, prečo blogov stredná prijíma ho pre všetky svoje články.

Médium používa rozloženie s jedným stĺpcom na zlepšenie zážitku z čítania.

Nakoniec, v kombinácii s obrázkami, rozloženie jedného stĺpca môže mať silný vplyv, pretože umožňuje zobraziť tieto obrázky čo najväčšie. The Ocean Resort je toho skvelým príkladom v akcii.

Ocean Resort využíva celú šírku svojho návrhu s jedným stĺpcom, aby maximalizoval dopad snímok.

Berúc do úvahy tieto faktory, zvážte použitie rozloženia v jednom stĺpci, ak chcete, aby ľudia trávili veľa času čítaním na vašom webe, alebo ak máte snímky, ktoré potrebujú miestnosť na žiarenie.

Z dôvodu jeho jednoduchosti existuje okolo rozloženia jedného stĺpca niekoľko problémov. Je však potrebné starostlivo zvážiť tok informácií. Aká objednávka musí používateľ vidieť, aby videl váš obsah?

Napríklad je užitočné poskytnúť používateľom zhrnutie toho, čo stránka pokrýva v hornej časti, aby ich načrtli, a na konci dňa ponúkajú jasnú výzvu na akciu..

Zamyslite sa tiež nad tým, ako môžete zabrániť tomu, aby používateľ posúval stránku. Rozloženia jednotlivých stĺpcov bývajú zvyčajne dlhšie a nie je vždy zrejmé, že sa pod záhybom stránky nachádza viac obsahu. Pomôže vám vizuálny indikátor, napríklad šípka.

Ak sa zdá rozloženie jedného stĺpca trochu reštriktívne, ale stále máte veľa obsahu na komunikáciu, zvážte prijatie návrhu zameraného na obsah..

2. Rozloženie zamerané na obsah

Weboví dizajnéri často používajú rozloženie zamerané na obsah na spravodajských serveroch alebo blogoch a zvyčajne obsahuje primárny stĺpec pre obsah a jeden alebo viac vedľajších stĺpcov pre ďalšie informácie..

Výhodou tohto rozloženia je to, že vám môže pomôcť spravovať dĺžku riadkov centrálneho obsahu zmenou šírky bočných stĺpcov. To záleží, pretože ak je dĺžka riadku textu príliš dlhá alebo krátka, je čítanie ťažšie, čím sa znižuje porozumenie a uchovávanie informácií.

Ak to urobíte správne, rozloženie zamerané na obsah je ideálne pre akékoľvek webové stránky zamerané na kopírovanie. Tajomstvo je rozdeliť obsah v tomto rozložení na malé, ľahko stráviteľné kúsky.

Príspevky na serveri Boagworld rozdelia obsah pomocou nadpisov, zoznamov, obrázkov a úvodzoviek.

Napríklad, na mojom blogu, zistíte, že môj priemerný príspevok je prerušovaný nadpismi, zoznamami, snímkami a vyňatými úvodzovkami. Toto sú všetky techniky, ktoré pomôžu používateľovi prehľadať článok a nájsť časti, ktoré sú predmetom záujmu.

Je potrebné starostlivo zvážiť aj bočné stĺpce. Je nevyhnutné, aby webový dizajnér vložil do týchto stĺpcov správny obsah a aby mali vizuálne správne váhy.

Problém je v tom, že používatelia očakávajú, že v vedľajších stĺpcoch nájdu sekundárny obsah, a preto im venujú menej pozornosti. Preto, ak plánujete zahrnúť niečo ako výzvu na akciu do bočného stĺpca, musí byť dostatočne silné, aby upútalo pozornosť.

Napríklad, všimnite si ako Smashing Magazine používa farebnú ilustráciu mačky na upozornenie na formulár na prihlásenie k odberu noviniek v pravom stĺpci.

Časopis Smashing Magazine používa vedľajšie stĺpce na poskytnutie sekundárnych informácií o príspevku.

Nie že rozloženie zamerané na obsah je vhodné pre každú stránku vášho webu. Webové stránky často spájajú toto rozloženie s dizajnom v časopise.

3. Rozloženie časopisu

Ako už názov napovedá, tento prístup k rozloženiu sa vo veľkej miere používa v časopisoch alebo spravodajských weboch, aby ukázal veľké množstvo rôznych príbehov..

Inšpirované rozložením tlače umožňujú kombináciu titulkov a snímok, aby mohli predstaviť príbehy. Môže to byť pútavý spôsob sprostredkovania v podstate zoznamu odkazov.

Je to tiež vynikajúce rozloženie na zvýraznenie obsahu, ktorý sa pravidelne mení. To je dôvod, prečo sa nové webové stránky páčia The Washington Post tak to páči.

Webové stránky s novinkami majú tendenciu uprednostňovať rozvrhnutie časopisu.

Rozloženie však nemá svoje nevýhody. Usporiadanie časopisu môže byť náročné na reakciu a často vyžaduje úplnú zmenu dizajnu zariadení s menšou obrazovkou.

Tento štýl rozloženia webových stránok môže byť tiež ohromujúci, s veľkým počtom obrázkov a titulkov, ktoré kričia na pozornosť.

Najúčinnejším spôsobom riešenia tohto problému je vytvorenie jasnej vizuálnej hierarchie. Inými slovami, zväčšite niektoré z „príbehov“ ako iné.

Rôznymi veľkosťami príbehov usmerňujú používateľov.

Napríklad, všimnite si, ako móda webová stránka zameriava pozornosť na ľavý obrázok tým, že ho výrazne zväčšuje. Efektívne hovoria používateľovi, kde hľadať ako prvý.

Pomáha tiež to, že zvyšok používateľského rozhrania je jednoduchý, s čistou typografiou a jednoduchými navigačnými lištami. Ak sa chystáte používať rozloženie časopisu, budete musieť tvrdo pracovať, aby veci zostali jednoduché.

Ďalšou potenciálnou nevýhodou rozloženia časopisu je to, že môže vyzerať „boxy“, pretože mriežka, ktorá ho podopiera, je tak viditeľná. Môžete to však zmierniť tým, že sa budete inšpirovať ďalším typom rozloženia.

4. Rozloženie mriežky

Rozloženie, ktoré podľa všetkého narušuje svoju základnú mriežku, môže byť vizuálne oveľa zaujímavejšie ako tradičnejšie prístupy. Sú tiež vynikajúce na upozornenie na konkrétne prvky obrazovky, ktoré vychádzajú z obvyklých stĺpcov.

Vezmite napríklad Webová stránka VR Arles Festival. Všimnite si, ako upozorňujú na svoj navigačný panel tak, že sa prekrývajú s dvoma stĺpcami.

Festival VR Arles upozorňuje na svoju navigačnú lištu tak, že ju prekrýva s dvoma stĺpcami.

Ďalším praktickým využitím rozloženia mriežky je použitie na prekrytie textu na obrázku takým spôsobom, aby upútalo pozornosť na kópiu. Keď webová stránka úplne prekrýva text na obrázku, môže sa často stratiť. Avšak, ako môžete pozri z nižšie uvedeného príkladu, ak sa text čiastočne prekrýva s obrázkom, vynikne oveľa viac.

Tento dizajn upozorňuje na text a vyzýva na akciu tým, že ho čiastočne prekrýva s obrázkom.

Nevýhodou rozloženia rozloženia mriežky je, že je ťažké sa napraviť, najmä keď webové stránky musia reagovať. Po pravde povedané, väčšina návrhov, ktoré ničia mriežku, nie sú ničím podobným. Stále existuje základná mriežka a do nej zapadajú všetky prvky obrazovky. Je to len tak, že mriežka je omnoho zložitejšia a nie je to tak zrejmé. To sťažuje ich navrhovanie.

Ich komplexná zložitosť je dôvodom, prečo ich zvyknete používať v dizajne vedených spoločnostiach, ako sú dizajnérske agentúry alebo módne značky. Preukazujú stupeň sofistikovanosti dizajnu, ktorý osloví konkrétne publikum.

Ak je rozloženie prerušenia mriežky pre vašu situáciu príliš komplikované, ale napriek tomu chcete urobiť niečo inovatívnejšie a nezvyčajnejšie, zvážte návrh na celú obrazovku..

5. Rozloženie na celú obrazovku

Rozloženie na celú obrazovku, ako už názov napovedá, sa zmestí na jednu obrazovku bez toho, aby sa používateľ musel posúvať. Vďaka tomu sú ideálne na rozprávanie príbehov alebo prezentácií.

Zoberme si napr, Druhy v kusoch. Táto bohatá a interaktívna prezentačná skúsenosť rozpráva príbehy 30 zapojených druhov.

Druh a kúsky sú bohaté a interaktívne zážitky, ktoré sa odohrávajú bez toho, aby ste sa museli posúvať.

Ako vidíte, rozloženie na celej obrazovke je v najlepšom prípade, keď je sprevádzané výkonnými snímkami. Vďaka tomu sú skvelou voľbou pre webové stránky bohaté na fotografie, ilustrácie alebo videá.

Nie že by ste sa mali striktne držať prístupu na jednotnej obrazovke. Na prvý pohľad Roux na webovej stránke Parliament Square Zdá sa, že ide o webovú stránku na celej obrazovke v rovnakom zmysle ako druh v kusy. Ich nádherné snímky zapĺňajú celý výrez.

Táto webová stránka používa celý výrez na predstavenie svojej vynikajúcej fotografie.

Je však možné prejsť ďalej po stránke a zobraziť ďalší obsah. To však nanešťastie poukazuje na jednu potenciálnu nevýhodu tohto prístupu k usporiadaniu. Používatelia si nie vždy uvedomujú, že sa môžu posúvať, a tak môžu chýbať hodnotný obsah.

Musíte tiež starostlivo zvážiť, ako sa rozloženie prispôsobí v rôznych veľkostiach. Bude napríklad prístup na celej obrazovke fungovať na mobilnom zariadení? Budú sa obrázky tiež orezávať so zmenou alebo zmenšením veľkosti obrazovky? Ohniskové body obrázkov, ktoré sú orezané, môžete rýchlo nájsť v menšej veľkosti mimo viditeľnej oblasti.

To znamená, že ak máte ohromujúce obrázky, ktoré môžete predviesť, budete sa snažiť nájsť lepší návrh rozloženia. Ak však chcete, aby sa k týmto obrázkom pridal aj popis a výzvy na akciu, môžete zvážiť alternatívne usporiadanie..

6. Striedavé rozloženie

Striedavý vzor rozloženia je jedným z najbežnejších na webe. Zistíte, že sa skladá zo série blokov obsahu, z ktorých každý má rozloženie v dvoch stĺpcoch. Bloky sú zvyčajne tvorené obrázkom na jednej strane a textom na strane druhej.

Jeho názov je ten, že obrázok sa strieda. Prvý blok bude mať obsah vľavo a obrázok vpravo, zatiaľ čo nasledujúci blok zmení toto rozloženie.

Ide o rozvrhnutie, ktoré sa uprednostňuje najmä pri vysvetľovaní vlastností alebo výhod produktu. Napríklad softvérové ​​produkty ako Webydo použije obrázok na zobrazenie funkcie a potom kópiu na vysvetlenie, ako to funguje alebo výhody, ktorú poskytuje.

Webydo alternatívny text a obrázky v rôznom obsahu blokuje svoju domovskú stránku.

Nie, že tieto bloky obsahu sú obmedzené na obrázky a text. Stránky niekedy nahradia obrázok videom. Rovnako by obsahová stránka prvku mohla obsahovať všetko od ikon až po posudky alebo výzvy na akciu.

Napríklad, Convertkit obsahuje odkaz a výzvu na akciu spolu s ich textom v každom bloku obsahu.

Convertkit obsahuje posudky a výzvy na akciu spolu s ich obrázkami.

Jedným z dôvodov, prečo sú striedavé bloky také bežné, je to, že ide o jednoduchý prístup k rozvrhnutiu s niekoľkými nevýhodami. Ak potrebujete komunikovať niekoľko predajných miest, je to takmer vždy spoľahlivá možnosť rozloženia.

Vaše požiadavky sa môžu samozrejme líšiť, takže ďalšou možnosťou, ktorú je potrebné zvážiť, je rozloženie na karte.

7. Rozloženia založené na karte

Rozloženie stránky založené na karte je ďalší bežný prístup k rozmiestneniu, ktorý uvidíte na celom webe.

Rozloženia na karte sú skvelým spôsobom, ako dať ľuďom rad možností, ktoré si môžu vybrať medzi používateľmi, a poskytnúť im dostatok informácií o každej voľbe, aby sa mohli rozhodnúť..

Vďaka tomu sú obľúbenou voľbou pre stránky so zoznamom produktov na stránkach elektronického obchodu. Umožňuje webovej stránke zobraziť obrázok produktu, popis a cenu. Môžete dokonca pridať funkcie ako „uložiť na neskôr“, ako vidíte z Webová stránka Asos.

Webové stránky elektronického obchodu, ako je Asos, uprednostňujú rozloženie na karte na zobrazenie zoznamov produktov.

Webové stránky, ktoré používajú rozloženia založené na karte, však nájdete v každej situácii, keď používatelia musia vybrať zo zoznamu. Napríklad ďalším typickým použitím by bolo zobrazenie zoznamu článkov na blogu alebo spravodajskej stránke.

Rozloženie založené na karte vám umožňuje zobraziť obrázok príbehu, názvu a popisu, ako aj ďalšie podrobnosti o príspevku, ktorý chcete zahrnúť.. Awwwards blog je vynikajúcim príkladom tohto druhu použitia v akcii.

Awswards ďalej pomocou rozloženia založeného na karte uvádza zoznam príspevkov na svojom blogu.

Najlepšie zo všetkého je, že rozloženia založené na karte fungujú dobre, pričom počet kariet v rade sa pomaly znižuje s klesajúcou dostupnou šírkou..

Tento prístup má však niekoľko nevýhod. Najprv karty fungujú najlepšie, keď pridáte obrázok. To znamená, že ak sa snažíte nájsť vhodné fotografie pre každú zo svojich položiek v zozname, môžete byť lepší s iným dizajnom.

Ďalším miernym problémom je kolísanie obsahu. Ak má jedna karta viac obsahu ako druhá, môže na karte alebo medzi jednotlivými riadkami ponechať medzeru.

Ak majú karty rôzny obsah, môžu medzi nimi zostať medzery.

Jedným zo spôsobov, ako tento problém zmierniť, je nevyskúšať si ponechať karty v rovnakom riadku, ako je uvedené v príklade nižšie.

Umožnením kariet zaplniť prázdne miesto získate esteticky príjemnejší dizajn.

Toto je však menej dôležitá otázka, ktorá vysvetľuje rozsiahle prijatie tohto prístupu usporiadania.

Ďalším rovnako obľúbeným dizajnom je rozloženie obrazu hrdiny.

8. Rozloženie hrdinov

Rozloženie hrdiny je pomenované po obrázkoch hrdinov, veľkých obrázkoch s textovými prekrytiami, ktoré dominujú na domovských stránkach toľkých webových stránok. Apple dobre využíva klasický obraz hrdinu.

Apple dobre využíva klasický obraz hrdinu.
Pixave pre MacOS ešte viac rozvíja hrdinu tým, že ho ovláda v dizajne svojej domovskej stránky.
Pixave pre MacOS ešte viac rozvíja hrdinu tým, že ho ovláda v dizajne svojej domovskej stránky.

Čo robí obrázky hrdinov tak rozšírené, je to, že vám umožňujú rozmiestniť vaše obrázky návrh hodnoty účinným spôsobom priamo na vstupnom bode vašich webových stránok.

Ako môžete vidieť z Pixave a jablko webové stránky nad nimi zvyčajne pozostávajú z veľkého obrázka na pozadí, názvu alebo linky a popisu. Usporiadania hrdinov často prichádzajú s výzvou na akciu.

Ak potrebujete jasne vysvetliť, čo ponúkate na svojej domovskej stránke alebo na vstupnej stránke spôsobom, ktorý upúta pozornosť, potom by mohol byť obraz hrdiny tým správnym smerom. To je však pravdepodobne rozsah ich použitia.

Príležitostne uvidíte rozloženie hrdiny použité na nasledujúcich stránkach. Vo väčšine prípadov však obraz hrdiny jednoducho upúta pozornosť od hodnotnejšieho obsahu. Takže používajte opatrne.

Okrem toho existuje malá nevýhoda v používaní rozloženia hrdiny. Áno, sú bežné, ale používatelia ich poznajú a sú efektívne.

Oveľa menej bežnou možnosťou rozloženia je rozloženie rozdelenej obrazovky.

9. Rozloženie obrazovky

Podobne ako rozloženie na celú obrazovku je rozdelená obrazovka skvelým spôsobom, ako upútať pozornosť, keď používatelia prvýkrát dorazia na váš web, ako môžete vidieť z domovská stránka spoločnosti webdizajn nižšie.

Táto stránka používa rozloženie rozdelenej obrazovky na vysvetlenie týchto dvoch častí svojej ponuke.

Čo robí tento príklad tak efektívnym, je jasný dôvod pre rozloženie rozdelenej obrazovky. Táto webová stránka objasňuje, že ich podnikanie má dve stránky – dizajn a vývoj.

Podobný príklad je, keď chcete používateľom dať jasný binárny výber. Rozdelená obrazovka má v tejto situácii veľký zmysel, pretože rozdeľuje obrazovku rovnako medzi tieto dve možnosti.

Napríklad modelingová agentúra 62 Manažment využíva rozdelenú obrazovku na povzbudenie používateľov, aby zistili, či hľadajú mužský alebo ženský model.

62 Manažment používa dizajn rozdelenej obrazovky, aby povzbudil používateľov, aby si vybrali medzi dvoma možnosťami.

Nanešťastie, za hranicami tohto obmedzeného počtu aplikácií, nie je dôvod na prijatie dizajnu rozdelenej obrazovky. Ide o relatívne obmedzenú možnosť rozloženia a jednoducho nie je toľko scenárov, kde je to vhodné. Avšak v tých prípadoch, kde je, je zďaleka najlepšou voľbou.

Podobnou možnosťou, ktorá by poskytla trochu väčšiu flexibilitu, je asymetrické usporiadanie.

10. Asymetrické usporiadanie

Zatiaľ čo rozloženie rozdelenej obrazovky si vynúti rovnomerné rozdelenie stredu výrezu, asymetrický dizajn umožňuje rozdeliť obrazovku tak, ako uznáte za vhodnú..

Výhodou tohto rozloženia oproti rozdelenej obrazovke je to, že umožňuje pridať dôraz na konkrétnu stranu stránky. Čím viac nehnuteľností má strana, tým viac sa na ňu zameriavate. To vám zase umožní identifikovať primárny a sekundárny obsah.

S predpokladom primárnych a sekundárnych stĺpcov môžete použiť prístup niekoľkými spôsobmi. Napríklad, Félix Lesouef používa metódu na svojom webe na rozdelenie obsahu a navigácie.

Félix Lesouef používa asymetrické rozloženie na zvýraznenie navigácie na svojich stránkach.

Naopak, Nourish Eats webová stránka používa druhý stĺpec, aby vám umožnila zobraziť ďalšiu časť jej webovej stránky.

Nourish Eats používa tento prístup k rozloženiu na výraznejšie vystavenie sekundárneho obsahu.

Asymetrické usporiadanie je v mnohých ohľadoch vynikajúcou voľbou. Je flexibilný, relatívne ľahko implementovateľný a menej používaný. Je to pohodlný spôsob, ako zmeniť vzhľad svojich webových stránok bez bolesti hlavy pri niektorých ďalších možnostiach.

Ako vybrať rozloženie

Čítaním tohto článku ste urobili prvý krok pri výbere správneho rozloženia svojich stránok. Dozvedeli ste sa, aké možnosti máte k dispozícii.

Ďalej musíte zistiť, ktoré možnosti by mohli byť pre váš web vhodné. Jedným zo spôsobov, ako to dosiahnuť, je pozrieť sa na svojich konkurentov. Radil by som však, aby som sa tam nezastavil. Nebezpečenstvo spočíva v tom, že ich skopírujete a vždy vás posunú o krok ďalej.

Namiesto toho sa pozrite na weby v iných odvetviach, ktoré majú súvisiaci typ obsahu. Ak máte webová stránka brožúry zameraná na publikum B2B, pozrite sa na ďalšie podobné stránky. Rovnako ak máte stránku elektronického obchodu, pozrite sa na elektronický obchod v iných odvetviach.

Odtiaľ spolupracujte so svojím dizajnérom a experimentujte s rôznymi prístupmi. Nechajte ich prepojiť niekoľko nápadov založených na rôznych rozloženiach a zistite, čo sa vášmu obsahu najviac hodí.

Ak zistíte, že sa nemôžete rozhodnúť alebo nemáte dôveru správnym smerom, skúste niektorým používateľom dať možnosti a dostať ich reakcie. Nepýtajte sa ich, na čo dávajú prednosť, a opýtajte sa ich, či si všimli kritický obsah alebo či pochopili, o čom je spoločnosť.

Po pravde povedané, pravdepodobne sa ocitnete pri výbere a výbere z rôznych prístupov rozloženia pre rôzne časti vášho webu, a to je v poriadku. Pretože, pokiaľ ide o rozloženie webových stránok, použitie správneho v správnom čase je rozhodujúce.

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