Utforma innehållsintensiva layouttips och exempel

Att skapa omfattande layouter för webben tar skicklighet och mycket engagemang. Webbdesigners utför ett jobb där de flesta inte kan göra, och på ett mycket sofistikerat sätt. När webbsidor har utvecklats har vi sett behovet av att fylla mer utrymme och hålla mer innehåll än någonsin tidigare. Om du redan förstår hur man utformar en webbplats är det en stor bonus att förstå dessa metoder bättre. Kärnfunktioner på en webbplats förändras sällan. Men med mer än genomsnittligt sidinnehåll kommer andra faktorer att komma till spel, bland annat vitt utrymme, typografi, elementpositionering, bland annat.

Vi kommer att gå in i detalj för att täcka några viktiga tips för att bygga innehållsintensiva layouter. Dessa kan sträcka sig från sociala nätverk, stora affärer och företagswebbplatser eller något däremellan. Det är viktigt att fråga dig själv "vad försöker jag uppnå med denna design?"när du utformar sidor som det hjälper dig att förutse en bredare utsikt.

Anpassade webbsidor

Oavsett hur erfaren i praktisk webbdesign du kanske är, det är sant att vi alla måste börja någonstans. Att designa egna webbsidor är i allmänhet det första steget mot en karriär inom webbprogrammering innan man använder konventionella specifikationer.

Jag rekommenderar alltid att skapa en liten lista över sidelement som anses installeras i mallen. När dessa är alla nedskrivna blir det lättare att luka ut de dåliga idéerna eller hämta på missade eller glömda pärlor. Detta banar också vägen för enkel planering för att lindra stress på vägen.

Layout Wireframe

För den generiska 5-sidiga webbplatsen ser du ofta samma element upprepade gånger. En högra hörnlogotyp, huvudnavigeringslänkar, huvudinnehållsområde eventuellt delat med en sidofält och annan funktionalitet (inloggning, sökrutan, etc.).

Tänk på en bra utgångspunkt för att bygga upp i detaljerade sidlayouter. Många designers tycker att det är till hjälp att skissa upp eventuella wireframe-mönster för att utesluta de inte så uppenbara bristerna. Detta kräver inte något fint papper och kan till och med göras i en nedslagen rullande anteckningsbok. Syftet med en wireframe är att ge en grov uppfattning om var platslayouten ska gå på plats för att fylla i detaljerna senare.

Med innehåll tunga layouter bör det tas hänsyn till hur mycket plattformen kommer att innehålla. Att bygga en sluten 2-3 kolumnlayout för att vara värd för 100 + sidor med långa, invecklade innehåll ger inte mycket utrymme för andningsutrymme. Genom att skissera och planera framåt kan du styra mängden rymligt rum för sidinnehåll. Detta inkapslar inte bara text- eller blockområden utan handlar också om bilder och videor.

Briljant White Space

Vitavstånd är möjligen den viktigaste faktorn att beaktas i innehållsintensiv layoutdesign. Webbplatsinnehåll reglerar det alll, mer än någon vanlig webbplats. Om läsare inte kan förstå innehållet eftersom det inte finns något utrymme för att smälta dina ord kommer trafiken att vara spottig och missnöjd.

Punkter och sidhuvud är ett bra ställe att börja med anpassningar. Med hjälp av CSS-egenskaper borde du kunna manipulera de yttre marginalerna och stoppa bort varje block-textelement. Dessa inkluderar alla rubriker 1-6, stycken, blockquotes, listor, förformaterad text och några mindre element.

Om du vill hålla läsarens uppmärksamhet, är det viktigt att tillämpa avstånd under stora textelement. Punkter och mindre rubriker fungerar bäst med 15px-25px bottenmarginaler på plats. För större sidelement, t.ex. h1 eller h2, överväga 35px + (det här beror också på din skriftstorlek). Mellanslag mellan vertikala element är viktigt för att bläddra och skanna "vid en blick". dock radavstånd är en annan viktig CSS-egenskap som påverkar avståndet mellan linjer i ett textelement. Punkter bör ha ett mycket större linjehöjdvärde jämfört med deras teckensnittstorlek, så det finns gott om extra vaddering mellan linjer.

Tänk på dynamiska stilar

Bortsett från avståndet, digital typografi bör manipuleras på sätt att få det att hoppa från sidan. Med hundratals miljoner webbplatser i världen idag är det vanligt att se samma typsnittstyp (er) överallt.

Om du utformar en layout för en webbplats tung med innehåll, kommer resultatet att se ut som en annan blid mall i slutet. Det finns gott om egenskaper att leka med för avancerade typografiska stilar. Textskuggor, mindre / fler brevavstånd, bakgrundsplattformar, ikoner ... listan är oändlig.

Verkligen är du designer och ditt sista ord är lag. Att utforma en layout är inte jämförbar med en enda lane motorväg utan vändning. Under processen kan du gå tillbaka och ändra stilar, manipulera nya element eller skräp ett koncept helt. Tänk på några andra användbara CSS-tips och spela om för att se vad som passar bäst!

Använd Dropdown Menyer

Med så mycket innehåll är det osannolikt att alla dina länkar kommer att passa på en enda sida. Det finns många alternativ om hur man hanterar en överbelastning av sidor. Placering av extra länkar i sidofält eller sys i kolumner i sidfoten är två ändamålsenliga alternativ.

Det mest praktiska och praktiska valet är att skapa ett rullgardinsmeny med huvudkategorier och underkategorier. Det finns också många open source-skript som erbjuder subunderkategorier om du har intensivt detaljerade ämnen.

Den snabbaste och minst frustrerande strategin är kanske att börja med en JavaScript-ram. Några av de mest populära inkluderar jQuery, MooTools, eller möjligen Prototype. Alla dessa bibliotek erbjuder dokumentation och många har gratis menyalternativ som finns tillgängliga.

Planera innehållsöversikter

I praktiken är det mycket svårare att skapa ett förenklat kroppsområde för att hysa allt innehåll som din genomsnittliga webbplats innehåller. Med skiftande webbläsarstandarder och semi-skrämmande mobilt support är det inte konstigt att vi ser sådana innehållsintensiva webbplatser sköt ner. Var känslig för varje stil på webbsidan i displayen. Vissa kommer att innehålla flera bilder, andra kan innehålla en primär grafik eller video eller ingen grafik alls. När du har slutat att koda den slutliga layouten, skapa flera HTML-sidor för att hysa olika visningar.

Dessa kommer alla att ha samma interna markering förutom innehållet inom huvudinnehållet. Varje enskild sidvy kan manipuleras och ger insikt mot en färdig produkt. Byt upp det här för att innehålla alla de viktigaste vyerna som du tror behövs för varje sida. Andra exempel på sidelement kan innehålla kommandofält, videofilmer eller inbäddade gallerier eller länkar med delad sida.

Planera strategier noggrant

Det är i själva verket inte helt svårt att skapa en webbplatslayout. Många designers fångas ihop med de små detaljerna, såsom hur man planterar blockelement eller färglänkar. Dessa detaljer är viktiga när de skickar över ett varumärkesmeddelande, även från mindre element måste meddelandet sammanfatta med hela sidan. Mentalt planera stadierna i din design för att ta reda på hur det bästa sättet för varje hinder. Om du arbetar med en klient, är det bra att diskutera vilken typ av innehåll som ska fylla på sidor i förväg. Detta ger dig möjlighet att planera och strategisera det bästa tillvägagångssättet för en allmän layout.

Ett annat särskilt droll ämne finns i mobil design. Den här nya marknaden ser en enorm expansion i inte bara smartphones utan kraftfulla surfplattor. Det betyder att användare kan komma åt din layout från en mobil skärm - se till att innehållet inte överflödar och presenterar snyggt.

7 Exempel på webbplatser med tung innehåll

Nedan följer några exempel på skärmdumpar från populära innehållsrika webbplatser. Dessa är mest kända varumärken både på fysiska och digitala marknader. Kolla in några av nedanstående idéer för att få inspiration i dina egna projekt. Du kan också dela med dig av andra webbinnehåll i andra innehåll i kommentarfältet.

Clicker

Clicker är ett nytt socialt nätverk för TV och filmälskare. Du kan registrera dig för ett nytt konto och hitta några av dina favorit-klassiska TV-program, arkiverade efter säsong och avsnittlista. Du kan jämföra webbplatsen med IMDB med mindre information och mer videoinnehåll!

Framtiden för webbdesign

Framtiden för Web Design 2011 kommer att lansera saker i London den kommande våren. Kolla in hemsidan för mer information och ett bra exempel på textbaserad layoutdesign. Alla detaljer delas verkligen och erbjuder högtalare, scheman, workshops, sponsorer och så mycket mer.

Herre troligen

I denna komiska layout har huvudpersonen Lord Likely "cartooniserats" och perforeras till en illustration. Webbplatsen är indelad i 3 kolumner med varje nytt sportligt innehåll, annonser, matningslänkar och arkiv. Designen är mycket retro och en smart ta på illustrationen.

Microsoft

De flesta teknikentusiaster är bekanta med Microsoft. Faktum är att de flesta som förstår vad en dator är kan ge dig en kort beskrivning av Microsoft och Bill Gates. Deras hemsida innehåller innehåll för dussintals mjukvarupaket, nyhetsuppdateringar, pressmeddelanden och utvecklarinformation. Lite vägar ner på sidan kan du se en vertikal flikmeny med dynamisk innehållsbyte.

Sökmotorland

Search Engine Land är en populär webbtidning med inriktning på sökmotorer och internetmarknadsföring. De uppdaterar ofta med fantastiska kvalitetsposter och kör hundratusentals människor till sin webbplats varje dag. Huvudsidan delas upp i 3 kolumner som används för att hålla varje innehållsmodul och annonsering.

Vita huset

United States White House-design ser väldigt rent och professionellt ut. Det finns mycket information om presidentens schema och andra viktiga politiska händelser. Ett knep för att lindra sidrummet har varit tillägget av ett litet innehållsreglage mot sidans rubrik. Detta är perfekt för att visa 3-4 stora nyhetsrubriker direkt när dina besökare landar på sidan.

Yahoo Portal

Såvitt stora innehållswebbplatser går Yahoo! måste trender mot toppen. Yahoo! erbjuder hundratals tjänster till sina kunder, inklusive webbmail, nyheter, videor och till och med webbsökning. Kolla in några av Y! portal länkar från sidofältet för att se hur deras mallar jämför.

Slutsats

Dessa är bara några av de viktigaste punkterna och stegen för att bygga upp konkreta innehållskrävande layouter. Webbsidor med stora innehållsreservoarer ses ofta som en börda som håller SEO-foder och inget av verkligt värde. Design är allt som det är det första intrycket en användare får från varje hemsida. Med stora volymer av innehåll kan detta bli en katastrof med rodnad och över generaliseringar. Sluta aldrig med att träna och med några få projekt kommer du att hämta en behärskning för att se innehållsintensiva layouter.