Navrhovanie tipov a príkladov intenzívneho rozloženia obsahu

Ak chcete vytvoriť komplexné rozloženia pre web, vezmite si zručnosti a veľa odhodlania. Web dizajnéri vykonávajú prácu, v ktorej väčšina nemôže robiť a veľmi sofistikovaným spôsobom. Ako sa webové stránky vyvíjali, videli sme potrebu vyplniť viac priestoru a držať viac obsahu ako kedykoľvek predtým. Ak už viete, ako navrhnúť webové stránky, je to obrovský bonus na lepšie pochopenie týchto metód. Hlavné funkcie na webových stránkach sa zriedka menia. Avšak s viac ako priemerným obsahom stránok vstupujú do hry ďalšie faktory vrátane bielych priestorov, typografie, polohovania prvkov, medzi inými.

Pôjdeme do detailov, aby sme pokryli niekoľko dôležitých tipov pre vytváranie obsahovo náročných usporiadaní. Môžu sa pohybovať od aplikácií sociálnych sietí, veľkých obchodných a firemných webových stránok alebo niečoho medzi nimi. Je dôležité si položiť otázku "čo sa snažím dosiahnuť s týmto dizajnom?"pri navrhovaní stránok, pretože vám pomôže predvídať širšiu perspektívu.

Vlastné webové stránky

Bez ohľadu na to, ako ste mali skúsenosti s praktickým dizajnom webových stránok, je pravda, že sme všetci museli začať niekde. Navrhovanie vlastných webových stránok je všeobecne prvým krokom smerom k kariére v webovom programovaní pred aplikáciou konvenčných špecifikácií.

Vždy odporúčam vytvoriť malý zoznam prvkov stránok, ktoré sa považujú za nainštalované do šablóny. Akonáhle sú tieto všetky zapísané, je ľahšie zbaviť sa zlých nápadov alebo vyzdvihnúť zmeškané alebo zabudnuté drahokamy. To tiež otvára cestu pre ľahké plánovanie na zmiernenie stresu po ceste.

Layout Wireframe

Pre všeobecné 5-stranové webové stránky často uvidíte opakované rovnaké prvky. Logo top rohu, navigačné odkazy na hlavu, oblasť hlavného obsahu, prípadne rozdelená na bočný panel a ďalšie funkcie (prihlasovacie meno, vyhľadávacie pole atď.).

Zvážte dobrú východiskovú pozíciu na vytvorenie podrobného rozloženia stránok. Mnohí dizajnéri považujú za užitočné navrhnúť možné vzory drôtených rámov, aby sa vylúčili nevýrazné chyby. To nevyžaduje žiadny fantazijný papier a dokonca sa dá robiť v rušivom riadenom notebooku. Účelom drôteného rámčeka je poskytnúť hrubú predstavu o tom, kde by mal rozloženie stránok smerovať s miestnosťou na doplnenie podrobností neskôr.

Pri obsahových ťažkých rozloženiach by sa malo brať do úvahy, koľko platforma bude obsahovať. Vytvorenie uzatvoreného usporiadania 2-3 stĺpcov na usporiadanie 100+ stránok dlhého, zložitého obsahu nezanechá veľa miesta na dýchanie priestoru. Skicovaním a plánovaním dopredu môžete ovládať množstvo priestrannej miestnosti pre obsah stránky. Nie je to len zapuzdrenie textových alebo blokovacích oblastí, ale aj fotografie a videá.

Brilantný biely priestor

Bielej medzery je možné najdôležitejším faktorom ktoré sa majú brať do úvahy pri dizajne s náročným obsahovým usporiadaním. Obsah webových stránok to všetko riadi, a to viac ako akékoľvek bežné webové stránky. Ak čitatelia nedokážu porozumieť obsahu, pretože nie je priestor na trávenie vašich slov, návštevnosť bude nepríjemná a nepríjemná.

Odseky a hlavičky stránok sú skvelým miestom na začatie prispôsobovania. Pomocou vlastností CSS by ste mali byť schopní manipulovať s vonkajšími okrajmi a vyčnievať z každého prvku textového bloku. Patria sem všetky položky 1-6, odseky, blokové bloky, zoznamy, predformátovaný text a niekoľko menších prvkov.

Ak si želáte držať pozornosť čitateľa, je dôležité umiestniť medzery pod hlavné textové prvky. Odseky a menšie záhlavia fungujú najlepšie so spodnými okrajmi 15px-25px. Pre väčšie prvky stránky, ako napríklad h1 alebo h2, zvážte 35px + (závisí to od veľkosti písma). Medzery medzi vertikálnymi prvkami sú dôležité pre posúvanie a "okamžitý" skenovanie. však line-height je ďalšou dôležitou vlastnosťou CSS, ktorá ovplyvňuje medzery medzi riadkami v textovom prvku. Odseky by mali mať oveľa väčšiu hodnotu v porovnaní s veľkosťou písma, takže medzi jednotlivými čiarami existuje veľa extra výplne.

Zvážte dynamické štýly

Okrem medzery, digitálna typografia by mali byť manipulované spôsobmi, ako vyskočiť zo stránky. So stovkami miliónov webových stránok na dnešnom svete je bežné vidieť rovnaký typ písma všade.

Ak navrhujete rozloženie webových stránok s náročným obsahom, výsledok bude do konca vypadať ako ďalšia nevýrazná šablóna. Existuje veľa vlastností, s ktorými môžete hrať s pokročilými typografickými štýlmi. Textové tiene, menšie / viac písmen, medzery, ikony ... zoznam je nekonečný.

Skutočne ste dizajnér a vaše posledné slovo je zákon. Navrhovanie rozloženia nie je porovnateľné s jednosmernou cestou bez obratu. V priebehu procesu ste schopní vrátiť sa a zmeniť štýly, manipulovať s novými prvkami alebo úplne zneškodniť koncept. Zvážte niektoré ďalšie užitočné tipy pre CSS a zahrajte si, aby ste zistili, čo najlepšie vyhovuje!

Využite rozbaľovacie ponuky

S takým množstvom obsahu je nepravdepodobné, že všetky vaše odkazy sa zmestí na jednu stránku. Existuje mnoho možností, ako zvládnuť preťaženie stránok. Umiestnenie ďalších odkazov na bloky bočného panela alebo prišitie do stĺpcov v päte stránky sú dve účelné možnosti.

Najpohodlnejšou a najpohodlnejšou voľbou je vytvorenie navigačnej schémy rozbaľovacej ponuky s hlavovými kategóriami a podkategóriami. Existuje aj veľa skriptov s otvoreným zdrojovým kódom, ktoré ponúkajú čiastkové podkategórie, ak máte veľmi podrobné témy.

Pravdepodobne najrýchlejšou a najmenej frustrujúcou stratégiou je začať s javiskovým rámcom. Medzi najobľúbenejšie patria jQuery, MooTools alebo pravdepodobne Prototyp. Všetky tieto knižnice ponúkajú dokumentáciu a mnohé z nich majú k dispozícii voľné skripty rozbaľovacej ponuky.

Plánujte zobrazenia obsahu

V praxi je oveľa ťažšie vytvoriť zjednodušený priestor tela, ktorý by obsahoval všetok obsah, ktorý vaša priemerná webová stránka obsahuje. S presunutím štandardov prehliadačov a polopriemyselnou podporou pre mobilné zariadenia nie je divu, že vidíme, že také webové stránky s obsahom intenzívne zostreli. Buďte citliví na každý štýl webovej stránky na displeji. Niektoré obsahujú viacero obrázkov, iné môžu obsahovať primárnu grafiku alebo video alebo žiadnu grafiku. Po dokončení kódovania konečného rozloženia vytvorte viacero stránok HTML, ktoré budú obsahovať rôzne pohľady.

Všetky budú mať rovnakú vnútornú značku s výnimkou obsahu vo vnútri hlavnej oblasti obsahu. Každé zobrazenie jednotlivých stránok možno manipulovať a poskytuje prehľad o konečnom produkte. Prepnite ho tak, aby obsahoval všetky hlavné zobrazenia, ktoré si budete pri každej stránke považovať za potrebné. Ďalšie príklady prvkov stránky môžu obsahovať okná s poznámkami, videá alebo vložené galérie alebo odkazy na rozdelené stránky.

Plánujte stratégie dôkladne

V skutočnosti nie je úplne ťažké vytvoriť rozloženie webových stránok. Mnohí dizajnéri sa chytia s malými detailami, ako napríklad s rastlinnými prvkami alebo farebnými hypertextovými odkazmi. Tieto podrobnosti sú dôležité, pretože odosielajú cez správu o značke, a to aj z menších prvkov, ktoré by sa správa mala spájať s celou stránkou. Mentálne naplánujte fázy vášho dizajnu, aby ste zistili, ako najlepšie vyhovuje každej prekážke. Ak pracujete s klientom, bolo by dobré diskutovať o tom, aký typ obsahu bude dopĺňať stránky vopred. To vám dáva príležitosť naplánovať a navrhnúť najlepší prístup pre všeobecné usporiadanie.

Ďalšou mimoriadne temnou témou je mobilný dizajn. Tento nový trh vidí obrovské rozšírenie nielen o smartphony, ale o výkonné tabletové počítače. To znamená, že používatelia pristupujú k vášmu rozloženiu z mobilnej obrazovky - uistite sa, že obsah nie je pretečený a prezentuje sa úhľadne.

7 Príklady webových stránok s vysokým obsahom

Nižšie je niekoľko príkladov obrazoviek z obľúbených webových stránok s obsahom. Sú to zväčša dobre známe značky na fyzickom aj digitálnom trhu. Pozrite sa na niektoré z nasledujúcich myšlienok, aby ste našli inšpiráciu vo svojich vlastných projektoch. Taktiež môžete v sekcii komentárov zdieľať ďalšie obsahové rozloženia ťažkých webových stránok.

clicker

Clicker je nová aplikácia sociálnych sietí pre milovníkov televízie a filmov. Môžete sa zaregistrovať do nového účtu a vyhľadať niektoré z vašich obľúbených klasických televíznych relácií, archivované podľa sezóny a zoznamu epizód. Môžete porovnať lokalitu s IMDB s menej informácií a viac video obsahu!

Budúcnosť webového dizajnu

Budúcnosť webového dizajnu 2011 začne v Londýne na jar. Pozrite sa na domovskú stránku, kde nájdete viac informácií a skvelý príklad dizajnu rozloženia textu. Všetky detaily sú skutočne zdieľané a ponúkajú reproduktory, rozvrhy, workshopy, sponzory a oveľa viac.

Pán Pravdepodobne

V tomto komickom usporiadaní bola hlavná postava Lord Likely "kreslená" a preniknutá na ilustráciu. Stránka je rozdelená do 3 stĺpcov s každým športovým novým obsahom, reklamami, odkazmi na krmivá a archívmi. Samotný dizajn je veľmi retro a chytrý vziať na ilustračné návrhy.

Microsoft

Väčšina technických nadšencov pozná spoločnosť Microsoft. V skutočnosti väčšina ľudí, ktorí rozumejú počítaču, vám môže poskytnúť aj stručný popis Microsoftov a Bill Gates. Ich domovská stránka obsahuje obsah pre desiatky softvérových balíkov, aktualizácie správ, tlačové správy a informácie pre vývojárov. Malým smerom po stránke môžete nájsť vertikálnu ponuku kariet s dynamickým prepínaním obsahu.

Pozemný priestor pre vyhľadávače

Search Engine Land je populárny webový časopis zameraný na vyhľadávače a internetový marketing. Oni často aktualizovať s úžasnými kvalitné príspevky a riadiť stovky tisíc ľudí na svojich stránkach každý deň. Hlavná stránka sa rozdelí na 3 stĺpce, ktoré sa používajú na uchovávanie každého obsahuového modulu a reklamy.

Biely dom

Návrh Bieleho domu v Spojených štátoch vyzerá veľmi čisto a profesionálne. Existuje množstvo informácií týkajúcich sa rozvrhu prezidenta a ďalších dôležitých politických udalostí. Jeden trik na zmiernenie stránok miestnosti bol pridanie malého posúvača obsahu smerom k nadpisu stránky. To je skvelé pre zobrazenie 3-4 veľkých noviniek správne, keď návštevníci pristane na stránke.

Portál Yahoo

Pokiaľ ide o webové stránky s veľkým obsahom, musí smerovať k vrcholu. Yahoo! ponúka stovky služieb svojim zákazníkom vrátane webmailu, správ, videí a dokonca aj vyhľadávanie na webe. Pozrite sa na niektoré z Y! portálové odkazy z postranného panela a zistite, ako porovnávajú ich šablóny.

záver

To sú len niektoré z kľúčových bodov a krokov na vybudovanie konkrétneho obsahovo náročného rozloženia. Webové stránky s veľkými obsahovými nádržkami sú často považované za záťaž, ktorá drží SEO krmivo a nič o skutočnej hodnote. Návrh je všetko, pretože je to prvý dojem, ktorý používateľ získa z každej webovej lokality. Pri vysokých množstvách obsahu sa to môže stať katastrofou s nepríjemnosťou a zovšeobecneniami. Nikdy prestať pracovať a len s niekoľkými projektmi si vyberiete majstrovstvo pre predstavenie obsahovo náročných usporiadaní.