Tartalom intenzív elrendezési tippek és példák tervezése

Átfogó elrendezések létrehozása a weben készségeket és sok elkötelezettséget igényel. A webes tervezők olyan munkát végeznek, ahol a leginkább nem képesek, és nagyon kifinomult módon. Ahogy a weboldalak fejlődtek, azt látjuk, hogy több helyet kell kitöltenünk és több tartalmat kell tartanunk, mint valaha. Ha már megérti, hogyan kell megtervezni egy weboldalt, ez egy óriási bónusz a módszerek jobb megértéséhez. A webhely alapvető funkciói ritkán változnak. Azonban az átlagosnál nagyobb tartalom mellett más tényezők is megjelennek, többek között a fehér tér, a tipográfia, az elemek elhelyezése.

Részletesen meg fogjuk vizsgálni a tartalmi intenzív elrendezések építésének néhány fontos tippét. Ezek a közösségi hálózati alkalmazásoktól, a nagyvállalati és vállalati weboldalaktól, vagy bármi mástól függhetnek. Fontos, hogy kérdezd meg magadtól "mit igyekszem elérni ezzel a kialakítással?"amikor oldalakat tervez, mert segít abban, hogy szélesebb perspektívát tervezzen.

Egyéni weblapok

Nem számít, mennyire tapasztalt a gyakorlati web design, igaz, hogy mindannyian el kellett kezdeni valahol. Az egyéni weboldalak tervezése általában az első lépés a webes programozás előtt, mielőtt a hagyományos specifikációkat alkalmazza.

Mindig azt javaslom, hogy hozzon létre egy kis listát az oldalelemekről, amelyeket a sablonba telepítettek. Amint ezek mind le vannak írva, könnyebb lesz a rossz ötletek kiesése, vagy az elfelejtett vagy elfelejtett drágakövek felvétele. Ez is megkönnyíti a stressz csökkentését az úton.

Elrendezés drótváz

Az általános 5 oldalas webhelyen gyakran ugyanazokat az elemeket ismételjük meg. A felső sarok logó, a fej navigációs linkek, a fő tartalomterület, amely esetleg egy oldalsávdal és más funkcióval osztható meg (bejelentkezés, keresőmező stb.).

Gondoljunk egy jó kiindulási pontra, hogy részletes oldalelrendezéseket készítsünk. Sok tervező hasznosnak tartja a lehetséges drótvázrajzok vázlatait, hogy kizárja a nem-nyilvánvaló hibákat. Ez nem igényel semmilyen képzeletbeli papírt, és még le is zárt, le nem zárt notebookban is elvégezhető. A drótváz célja, hogy egy durva elképzelést adjon arról, hogy a helyszín elrendezése helyet foglaljon el, hogy később kitöltse a részleteket.

A tartalmi nehéz elrendezéseknél figyelembe kell venni, hogy a platform milyen mértékben fog tartalmazni. Zárt, 2-3 oszlopos elrendezés építése, amely 100+ oldal hosszú, bonyolult tartalmat fog adni, nem hagy sok helyet a légzés számára. Az előrajzolással és előkészítéssel ellenőrizheti a tágas szoba mennyiségét az oldal tartalmához. Ez nem csak a szöveg- vagy blokkterületeket tartalmazza, hanem a képekkel és videókkal is foglalkozik.

Ragyogó fehér tér

Lehet, hogy a fehér térköz a legfontosabb tényező figyelembe kell venni a tartalom intenzív elrendezésében. Weboldal tartalmának szabályozása alll, inkább, mint bármely rendszeres weboldal. Ha az olvasók nem tudják megérteni a tartalmat, mert nincs hely a szavak megemésztésére, a forgalom foltos és elégedetlen lesz.

A bekezdések és az oldalfejlécek kiváló hely a testreszabások elindításához. CSS tulajdonságok használatával képesnek kell lennie a külső margók manipulálására és az egyes blokkvonalak szövegelemének leválasztására. Ezek közé tartoznak az 1-6 fejezetek, a bekezdések, a blokkjegyek, a listák, az előformázott szöveg és néhány kisebb elem.

Ha el szeretné tartani az olvasó figyelmét, fontos, hogy a fő szövegelemek alatt alkalmazzuk a távolságot. A bekezdések és a kisebb fejlécek a legjobban a 15px-25px alsó margóval rendelkeznek. Nagyobb oldalelemekhez, mint például a h1 vagy a h2, a 35px + értéket veszi figyelembe (ez a betűmérettől is függ). A függőleges elemek közötti terek fontosak a görgetéshez és a "pillanatnyi" szkenneléshez. azonban line-height egy másik fontos CSS tulajdonság, amely befolyásolja a sorok közötti távolságot egy szövegelemben. A bekezdéseknek sokkal nagyobb vonalmagasság-értékkel kell rendelkezniük, mint a betűméretük, így rengeteg extra párnázás van a vonalak között.

Fontolja meg a dinamikus stílusokat

Eltávolítva a távolságot, digitális tipográfia úgy kell manipulálni, hogy leugorhasson az oldalról. A világ ma több száz millió webhelyével közös, hogy mindenütt ugyanaz a betűtípus (ok) látható.

Ha olyan tartalmat tartalmazó webhely elrendezését tervezi, akkor az eredmény egy másik piszkos sablonnak tűnik majd. A fejlett tipográfiai stílusokhoz rengeteg tulajdonság található. A szöveg árnyékai, kevesebb / kevesebb betű távolság, háttérplatformok, ikonok ... a lista végtelen.

Igazából te vagy a tervező, és az utolsó szó a törvény. Az elrendezés tervezése nem hasonlítható egyetlen sávú autópályához, amely nem fordul elő. A folyamat során visszamehet és megváltoztathatja a stílusokat, manipulálhatja az új elemeket, vagy teljesen eltávolíthat egy fogalmat. Tekintsünk néhány más hasznos CSS tippet és játsszon körül, hogy mi a legjobban illik!

Használja a legördülő menüket

Olyan sok tartalommal, hogy nem valószínű, hogy az összes hivatkozás egyetlen oldalra illeszkedik. Számos lehetőség van az oldalak túlterhelésének kezelésére. Az oldalsáv blokkokban található további linkek elhelyezése vagy az oldal láblécében oszlopokba varrva két célszerű lehetőség.

A legkényelmesebb és legkényelmesebb választás a legördülő navigációs séma létrehozása fejkategóriákkal és alkategóriákkal. Sok olyan nyílt forráskódú parancsfájl is található, amelyek al-alkategóriákat kínálnak, ha intenzíven részletes témakörök vannak.

Talán a leggyorsabb és legkevésbé frusztráló stratégia a JavaScript keretrendszer megkezdése. A legnépszerűbbek közé tartozik a jQuery, a MooTools vagy a Prototype. Mindezek a könyvtárak dokumentációt nyújtanak, és sokan ingyenesen letölthető menüszkriptekkel rendelkeznek.

Tartalom nézetek tervezése

A gyakorlatban sokkal nehezebb létrehozni egy egyszerű testületet, amely az összes webhely tartalmát tartalmazza. A változó böngésző szabványok és a félig kopott mobil támogatás mellett nem csoda, hogy ilyen tartalmi intenzív webhelyeket láttunk le. Legyen érzékeny a megjelenített weblapok minden stílusára. Egyesek több képet tartalmaznak, mások tartalmazhatnak elsődleges grafikát vagy videót vagy egyáltalán nem grafikát. Miután befejezte a végleges elrendezés kódolását, hozzon létre több HTML oldalt a különböző nézetek tárolásához.

Ezek mindegyike ugyanazzal a belső jelöléssel rendelkezik, kivéve, ha a tartalom a fő tartalmi területen belül van. Az egyes oldalnézetek manipulálhatók és betekintést nyújtanak a késztermékbe. Kapcsolja be ezt az elemet, hogy tartalmazza az összes olyan fontos nézetet, amelyre minden oldalra szükség lesz. Az oldalelemek egyéb példái közé tartozhatnak a megjegyzésekkel, videókkal vagy beágyazott galériákkal, vagy az osztott oldalakra mutató hivatkozásokkal.

Alaposan tervezze meg a stratégiákat

Valójában nem teljesen nehéz létrehozni egy erőmű webes elrendezését. Sok tervező elkapja a kis részleteket, mint például a blokkelemek vagy a színes hiperhivatkozások. Ezek a részletek fontosak, mivel egy márkaüzenetben küldnek üzenetet, még a kisebb elemekből is, az üzenetnek együtt kell lennie az oldal egészével. Mentálisan tervezze meg a tervezési fázisokat, hogy kitalálják, hogy a legjobb megközelítés minden akadályhoz. Ha egy ügyféllel dolgozol, jó lenne megvitatni, hogy milyen típusú tartalmak lesznek az oldalak kitöltése előtt. Ez lehetőséget ad arra, hogy előre tervezzen és stratégiailag a legjobb megközelítést alkalmazza az általános elrendezéshez.

Egy másik különösen droll téma a mobil tervezés. Ez az új piac hatalmas terjeszkedést mutat nemcsak az okostelefonokon, hanem a nagy teljesítményű táblaszámítógépeken is. Ez azt jelenti, hogy a felhasználók hozzáférhetnek az elrendezéséhez egy mobil képernyőn - győződjön meg róla, hogy a tartalom nem túlfolyik, és szépen bemutatja.

7 Példák a nehéz tartalmú webhelyekre

Az alábbiakban néhány példa a népszerű tartalom-nehéz weboldalakról. Ezek többnyire jól ismert márkák mind a fizikai, mind a digitális piacokon. Nézze meg az alábbi ötleteket, hogy ihletet találjon saját projektjeiben. Szintén nyugodtan ossza meg más tartalmú webes elrendezéseket a megjegyzések részben.

Balekfogó

A Clicker egy új szociális hálózati alkalmazás a TV és a film szerelmeseinek. Regisztrálhat egy új fiókhoz, és megtalálhatja néhány kedvenc klasszikus TV-műsorát, melyet szezon és epizódlisták archiválnak. Összehasonlíthatja a webhelyet az IMDB-vel kevesebb információval és több videotartalommal!

A Web Design jövője

A Web Design 2011 jövője a következő tavasszal indul Londonban. További információkért és a szöveges elrendezés tervezésének nagyszerű példájáról nézze meg a honlapot. Minden részlet valóban megosztott és kínál hangszórók, menetrendek, műhelyek, szponzorok, és még sok más.

Lord valószínűleg

Ebben a képregény elrendezésben az Lord Likely főszereplője "karikatúrázott", és egy illusztrációra perforált. A webhely három oszlopra oszlik, amelyek mindegyike új tartalommal, hirdetésekkel, hírcsatornákkal és archívumokkal rendelkezik. A tervezés maga is nagyon retro, és okos megragadni az ábrákat.

Microsoft

A legtöbb tech-rajongó ismeri a Microsoftot. Valójában a legtöbb ember, aki megérti, mi a számítógép, még rövid leírást is adhat a Microsoft és a Bill Gates számára. Kezdőlapjukon több tucat szoftvercsomag, hírfrissítés, sajtóközlemény és fejlesztői információ található. Egy kicsit lefelé az oldal, ahol egy függőleges lap menü látható dinamikus tartalmak váltásával.

Search Engine Land

A Search Engine Land egy népszerű webes magazin, amely a keresőmotorokra és az internetes marketingre összpontosít. Gyakran frissítenek csodálatos minőségi bejegyzésekkel, és naponta több százezer embert vezetnek a webhelyükre. A főoldal három oszlopra oszlik, amelyek az egyes tartalmi modulok és hirdetések tárolására szolgálnak.

A fehér Ház

Az Egyesült Államok Fehér Ház tervezése nagyon tiszta és profi. Sok információ van az elnök menetrendjéről és más fontos politikai eseményekről. Az oldalterület enyhítésére egy trükk volt egy kis tartalom csúszka hozzáadása az oldalfejléc felé. Ez nagyszerű 3-4 nagy hírcímek megjelenítéséhez, amikor a látogatók az oldalon találkoznak.

Yahoo portál

Ami a nagy tartalmi webhelyeket illeti, a Yahoo! a csúcs felé kell irányulnia. Jehu! több száz szolgáltatást kínál ügyfeleinek, beleértve a webmailet, a híreket, a videókat és a webes keresést is. Nézd meg az Y! portál linkek az oldalsávból, hogy megismerjék a sablonok összehasonlítását.

Következtetés

Ezek csak néhány kulcsfontosságú pont és lépés egy konkrét tartalomigényes elrendezés kialakításához. A nagy tartalmú tárolókkal ellátott weboldalakat gyakran a SEO takarmányt terhelő terhet és semmilyen valós értéket tekintik. A design minden, ami az első benyomás, amit a felhasználó minden weboldalról kap. Nagy mennyiségű tartalommal ez zavaros és általánosítások nélküli katasztrófává válhat. Soha ne hagyja abba a gyakorlatot, és csak néhány projektben elsajátíthatja a tartalmi intenzív elrendezéseket.