Navrhování obsahu Intenzivní tipy a příklady rozvržení

Chcete-li vytvořit komplexní rozvržení pro web se dovednosti a hodně věnování. Weboví designéři vykonávají práci tam, kde většina z nich není schopna udělat, a to velmi sofistikovaným způsobem. Jak se vyvíjely webové stránky, viděli jsme potřebu zaplnit více místa a mít více obsahu než kdykoli předtím. Pokud již chápete, jak navrhnout webové stránky, je to obrovský bonus k lepšímu pochopení těchto metod. Základní funkce na webu se zřídka mění. Nicméně s více než průměrným obsahem stránky přicházejí do hry další faktory, včetně mezer, typografie, umístění prvků.

Budeme se podrobně zabývat některými hlavními tipy pro budování obsahu s intenzivním uspořádáním. Ty se mohou pohybovat od aplikací sociálních sítí, velkých firemních a firemních webových stránek nebo mezi nimi. Je důležité se ptát sami sebe.co se snažím dosáhnout tímto designem?"když navrhujete stránky, protože vám to pomůže předvídat širší vyhlídky.".

Vlastní webové stránky

Bez ohledu na to, jak jste zkušený v praktickém designu webu, můžete být někde někde. Navrhování vlastních webových stránek je obecně prvním krokem k kariéře webového programování před použitím konvenčních specifikací.

Doporučuji vždy vytvořit malý seznam prvků stránky, které budou do šablony nainstalovány. Jakmile jsou všechny zapsány, je snazší vymýtit špatné nápady nebo vyzvednout na zapomenutých nebo zapomenutých drahokamech. To také připravuje cestu pro snadné plánování, jak zmírnit stres po silnici.

Rozvržení drátového modelu

U obecných 5stránkových webových stránek se často opakují stejné prvky. Logo horního rohu, navigační odkazy na hlavě, hlavní obsahová oblast s možností rozdělení na postranní panel a další funkce (přihlášení, vyhledávací pole atd.).

Uvažujme o dobrém výchozím bodě, který by se dal vytvořit do podrobných rozvržení stránek. Mnozí designéři považují za užitečné načrtnout možné návrhy drátěných modelů, aby se vyloučily tak nevysvětlitelné nedostatky. To nevyžaduje žádný luxusní papír a může být dokonce provedeno v run-down vládl notebook. Účelem drátového modelu je podat hrubou představu o tom, kde by mělo být rozložení stránky vedeno s prostorem pro pozdější vyplnění údajů.

S obsahem těžkých rozvržení by mělo být vzato v úvahu, kolik bude platforma obsahovat. Budování uzavřené 2-3 sloupce rozložení hostit 100 + stránky dlouhého, složitého obsahu nezanechá mnoho prostoru pro dýchání prostoru. Načrtnutím a plánováním dopředu můžete ovládat množství prostorného prostoru pro obsah stránky. To není jen zapouzdřit textové nebo blokové oblasti, ale zabývá se také obrázky a videem.

Brilantní bílý prostor

Pravděpodobně je bílá mezera nejvýznamnějším faktorem je třeba brát v úvahu při intenzivním návrhu vzhledu obsahu. Obsah webových stránek pravidla alll, více než jakékoli běžné webové stránky. Pokud čtenáři nejsou schopni porozumět obsahu, protože zde není místo, kde by bylo možné strávit vaše slova, provoz bude flekatý a nespokojený.

Odstavce a záhlaví stránek jsou skvělým místem, kde můžete začít s přizpůsobením. Pomocí vlastností CSS byste měli být schopni manipulovat s vnějšími okraji a vypalovat každý prvek textového bloku. Mezi ně patří všechna čísla 1-6, odstavce, blokové poznámky, seznamy, předformátovaný text a několik menších prvků.

Pokud si chcete udržet pozornost čtenáře, je důležité aplikovat mezery pod hlavní textové prvky. Odstavce a menší záhlaví fungují nejlépe s 15px-25px spodními okraji. U větších elementů stránky, jako jsou h1 nebo h2, zvažte 35px + (to bude záviset také na velikosti písma). Prostor mezi vertikálními prvky je důležitý pro rolování a skenování. nicméně výška čáry je další důležitá vlastnost CSS, která ovlivňuje mezery mezi řádky v textovém prvku. Odstavce by měly mít mnohem větší hodnotu řádkové výšky ve srovnání s velikostí písma, takže mezi řádky je spousta extra polstrování.

Zvažte dynamické styly

Kromě vzdálenosti, digitální typografie by mělo být manipulováno způsoby, jak to udělat ze stránky. Se současnými stovkami milionů webových stránek je běžné vidět stejný typ (typy) písma všude.

Pokud navrhujete rozvržení pro web těžký s obsahem, výsledek bude do konce vypadat jako další nevýrazná šablona. Pro pokročilé typografické styly existuje spousta vlastností. Textové stíny, méně / více mezer mezi písmeny, platformy na pozadí, ikony… seznam je nekonečný.

Opravdu jste návrhář a vaše poslední slovo je zákon. Navrhování rozložení není srovnatelné s jedinou jízdní dráhou bez obratu. Během procesu se můžete vrátit a změnit styly, manipulovat s novými prvky nebo zcela vyprázdnit koncept. Zvažte některé další užitečné tipy CSS a zahrajte si, abyste viděli, co nejlépe vyhovuje!

Využijte nabídky rozevírací nabídky

S tolik obsahu je nepravděpodobné, že všechny vaše odkazy se vejdou na jednu stránku. Existuje mnoho možností, jak zvládnout přetížení stránek. Umístění dalších odkazů v blocích sidebar nebo šití do sloupců v zápatí webu jsou dvě účelné možnosti.

Nejpohodlnější a nejvhodnější volbou je vytvořit rozevírací navigační schéma s kategoriemi hlav a podkategoriemi. Existuje také mnoho open source skriptů, které nabízejí sub-sub-kategorie, pokud máte intenzivně podrobná témata.

Pravděpodobně nejrychlejší a nejméně frustrující strategií je začít s frameworkem JavaScript. Některé z nejpopulárnějších patří jQuery, MooTools, nebo možná Prototype. Všechny tyto knihovny nabízejí dokumentaci a mnoho z nich má volné rozbalovací menu skripty k dispozici.

Zobrazení obsahu obsahu

V praxi je mnohem složitější vytvořit prostorovou oblast, kde se nachází veškerý obsah, který vaše průměrná webová stránka obsahuje. S posouváním standardů prohlížeče a semi-chatrné mobilní podpory, není divu, že vidíme takové obsahově náročné webové stránky sestřelené. Buďte citliví na každý styl zobrazované webové stránky. Některé budou obsahovat více obrázků, jiné mohou obsahovat primární grafiku nebo video nebo žádnou grafiku vůbec. Po dokončení kódování konečného rozložení vytvořte více stránek HTML, ve kterých budou uloženy různé pohledy.

To vše bude mít stejné vnitřní značení s výjimkou obsahu uvnitř hlavní oblasti obsahu. Každý jednotlivý pohled na stránku lze manipulovat a poskytuje přehled o hotovém produktu. Přepněte toto nastavení tak, aby obsahovalo všechny hlavní pohledy, o kterých si myslíte, že budou potřebné pro každou stránku. Další příklady prvků stránky by mohly zahrnovat pole komentářů, videa nebo vložené galerie nebo odkazy na rozdělených stránkách.

Plánové strategie Důkladně

Ve skutečnosti to není úplně obtížné vytvořit rozložení webové stránky powerhouse. Mnozí návrháři se dostanou do styku s malými detaily, jako je například blokování bloků nebo barevné hypertextové odkazy. Tyto údaje jsou důležité, protože se posílají přes zprávu o značce, a to i od menších prvků, a zpráva by se měla spojit s celou stránkou. Mentálně naplánovat fáze svého návrhu, aby zjistili, jak nejlepší přístup pro každou překážku. Pokud pracujete s klientem, bylo by dobré diskutovat o tom, jaký typ obsahu budou stránky předem vyplňovat. To vám dává možnost plánovat dopředu a strategizovat nejlepší přístup pro obecné uspořádání.

Dalším tématem je zejména mobilní design. Tento nový trh zaznamenává obrovskou expanzi nejen do smartphonů, ale i do výkonných tablet PC. To znamená, že uživatelé mohou přistupovat k vašemu rozvržení z mobilní obrazovky - ujistěte se, že obsah není přetékající a prezentuje se úhledně.

7 Příklady webových stránek s těžkým obsahem

Níže je několik příkladů screenshotů z populárních webových stránek obsahujících obsah. Jedná se většinou o známé značky na fyzickém i digitálním trhu. Podívejte se na některé z níže uvedených nápadů, abyste našli inspiraci ve svých vlastních projektech. Rovněž neváhejte a podělte se o další obsahy s těžkým webovým rozvržením v komentáři.

Clicker

Clicker je nová sociální síťová aplikace pro milovníky televize a filmu. Můžete se zaregistrovat na nový účet a najít některé z vašich oblíbených klasických televizních pořadů, archivovaných podle sezóny a epizody. Můžete porovnat stránky s IMDB s méně informací a více video obsahu!

Budoucnost Web Design

Budoucnost Web Design 2011 bude v Londýně tento nadcházející jaro startovat. Podívejte se na domovskou stránku, kde najdete další informace a skvělý příklad návrhu rozvržení textu. Všechny detaily jsou skutečně sdíleny a nabízejí reproduktory, plány, workshopy, sponzory a mnohem více.

Pane Pravděpodobně

V tomto komiksovém uspořádání byla hlavní postava Pána Pravděpodobně "cartoonized" a děrována do ilustrace. Stránky jsou rozděleny do 3 sloupců s každým novým sportovním obsahem, reklamami, zdrojovými odkazy a archivy. Samotný design je velmi retro a chytrý pohled na ilustrace.

Microsoft

Většina tech-nadšenců zná Microsoft. Ve skutečnosti, většina lidí, kteří chápou, co je počítač může dát vám dokonce stručný popis Microsoft a Bill Gates. Jejich domovská stránka obsahuje obsah pro desítky softwarových balíčků, aktualizace zpráv, tiskové zprávy a informace pro vývojáře. Trochu dolů na stránce můžete zobrazit vertikální kartu menu s dynamickým přepínáním obsahu.

Země vyhledávače

Search Engine Land je populární webový magazín se zaměřením na vyhledávače a internetový marketing. Oni často aktualizovat s úžasnými kvalitní příspěvky a řídit stovky tisíc lidí na svých stránkách každý den. Hlavní stránka se dělí do 3 sloupců, které slouží k držení každého obsahu a reklamy.

Bílý dům

Spojené státy Bílý dům design vypadá velmi čisté a profesionální. Existuje mnoho informací o plánu prezidenta a dalších důležitých politických událostech. Jedním z triků pro zmírnění stránky bylo přidání malého posuvníku obsahu směrem k záhlaví stránky. To je skvělé pro zobrazení 3-4 velké novinové titulky, když vaši návštěvníci přistanou na stránce.

Portál Yahoo

Pokud jde o velké obsahové stránky, jděte na Yahoo! musí směřovat k vrcholu. Yahoo! nabízí svým zákazníkům stovky služeb včetně webmailu, zpráv, videí a dokonce i vyhledávání na webu. Podívejte se na některé z Y! portálových odkazů z postranního panelu a uvidíte, jak jejich šablony porovnávají.

Závěr

To jsou jen některé z klíčových bodů a kroků k vybudování konkrétního obsahu náročného uspořádání. Webové stránky s velkými obsahovými zásobníky jsou často považovány za zátěž, která drží SEO krmivo a nic skutečného. Design je všechno, protože je to první dojem, který uživatel získá z každé webové stránky. S velkými objemy obsahu se to může stát katastrofou s nepořádkem a zobecněním. Nikdy nepřestávejte cvičit a jen s několika projekty budete vyzvednout mistrovství pro představení obsahu intenzivní rozložení.