Designing Content Intensive Layout Tips og eksempler
At skabe omfattende layouter til internettet kræver dygtighed og en masse engagement. Webdesignere udfører et job, hvor de fleste ikke kan gøre og på en meget sofistikeret måde. Da websider er udviklet, har vi set behovet for at fylde mere plads og holde mere indhold end nogensinde før. Hvis du allerede forstår, hvordan man designer et websted, er det en stor bonus at forstå disse metoder bedre. Kernefunktioner på en hjemmeside ændres sjældent. Men med mere end gennemsnittet af sideindhold kommer andre faktorer til spil, herunder hvidt rum, typografi, elementpositionering, blandt andre.
Vi vil gå i detaljer for at dække nogle vigtige tips til opbygning af indholdsintensive layouter. Disse kan variere fra sociale netværksapps, store forretnings- og virksomhedswebsteder eller noget imellem. Det er vigtigt at spørge dig selv "hvad forsøger jeg at opnå med dette design?"når du designer sider, da det vil hjælpe dig med at forudse et bredere perspektiv.
Brugerdefinerede websider
Uanset hvor erfaren i praktisk webdesign du måtte være, er det sandt, at vi alle måtte starte et sted. Design af brugerdefinerede websider er generelt det første skridt i retning af en karriere inden for webprogrammering, før du bruger konventionelle specifikationer.
Jeg anbefaler altid at oprette en lille liste over sideelementer, der anses for at være installeret i skabelonen. Når disse er alle nedskrevet, bliver det lettere at udrydde de dårlige ideer eller afhente på savnede eller glemte ædelstene. Dette baner også vejen for nem planlægning for at lette stresset ned ad vejen.
Layout Wireframe
For den generiske 5-siders hjemmeside vil du ofte se de samme elementer gentaget. Et øverste hjørne-logo, hovednavigationsforbindelser, hovedindholdsområde muligvis opdelt med en sidebjælke og anden funktionalitet (login, søgefelt osv.).
Overvej et godt udgangspunkt for at bygge op i detaljerede side layout. Mange designere finder det nyttigt at skitsere mulige wireframe designs til at udelukke de ikke så åbenlyse fejl. Dette kræver ikke noget fancy papir og kan endda ske i en nedslidt rulet notesbog. Formålet med en wireframe er at give en grov ide om, hvor site layout skal være på vej med plads for at udfylde detaljer senere.
Med indhold af store layouter skal der tages højde for, hvor meget platformen vil indeholde. Opbygning af et lukket 2-3 kolonne layout til vært for 100 + sider med langt, indviklet indhold giver ikke meget plads til vejrtrækning. Ved at skitsere og planlægge fremover kan du styre mængden af rummelige rum til sideindhold. Dette indkapsler ikke kun tekst eller blokkeområder, men handler også med billeder og videoer.
Brilliant White Space
Hvid afstand er muligvis den vigtigste faktor at blive taget i betragtning i indholdsintensive layout design. Website indhold regulerer det alll, mere end nogen almindelig hjemmeside. Hvis læsere ikke kan forstå indholdet, fordi der ikke er plads til at fordøje dine ord, vil trafikken være plettet og utilfreds.
Punkter og sideoverskrifter er et godt sted at starte med tilpasninger. Ved hjælp af CSS-egenskaber skal du kunne manipulere de ydre margener og polstring af hvert bloklinje tekstelement. Disse omfatter alle overskrifter 1-6, afsnit, blokquotes, lister, præformateret tekst og et par mindre elementer.
Hvis du ønsker at holde din læser opmærksom, er det vigtigt at anvende mellemrum under store tekstelementer. Punkter og mindre overskrifter fungerer bedst med 15px-25px bundmargener på plads. For større sideelementer som h1 eller h2 overveje 35px + (dette afhænger også af din skriftstørrelse). Mellemrum mellem vertikale elementer er vigtigt for at rulle og scanne på et øjeblik. Imidlertid linjehøjde er en anden vigtig CSS-egenskab, der påvirker afstanden mellem linjer i et tekstelement. Afsnit skal have en meget større linjemængde værdi i forhold til deres skriftstørrelse, så der er masser af ekstra polstring mellem linjer.
Overvej dynamiske stilarter
Bortset fra afstanden, digital typografi bør manipuleres på måder at få det til at springe væk fra siden. Med hundredvis af millioner af websteder i verden i dag er det almindeligt at se de samme skrifttype (r) overalt.
Hvis du designer et layout for et websted, der er tungt med indhold, vil resultatet se ud som en anden blid skabelon ved enden. Der er masser af egenskaber at lege med for avancerede typografiske stilarter. Tekstskygger, mindre / flere bogstavafstand, baggrundsplatforme, ikoner ... listen er uendelig.
Sandelig du er designer og dit endelige ord er lov. Design af et layout er ikke sammenligneligt med en enkelt lane motorvej uden omløb. Under processen kan du gå tilbage og ændre stilarter, manipulere nye elementer eller affald et koncept helt. Overvej nogle andre nyttige CSS-tips og spil rundt for at se, hvad der passer bedst!
Brug Dropdown Menuer
Med så meget indhold er det usandsynligt, at alle dine links passer på en enkelt side. Der er mange muligheder for håndtering af en overbelastning af sider. Placering af ekstra links i sidebjælkeblokke eller syet i kolonner i sidefoden er to målrettede muligheder.
Det mest praktiske og praktiske valg er at oprette et drop-down navigationssystem med hovedkategorier og underkategorier. Der er også mange open source-scripts, der tilbyder underunderkategorier, hvis du har meget detaljerede emner.
Måske er den hurtigste og mindst frustrerende strategi at begynde med en JavaScript-ramme. Nogle af de mest populære omfatter jQuery, MooTools, eller muligvis Prototype. Alle disse biblioteker tilbyder dokumentation, og mange har gratis rullemenuskript tilgængelige.
Planlæg indholdsvisninger
I praksis er det meget sværere at skabe et forenklet kropsområde for at huse alt indhold, som din gennemsnitlige hjemmeside indeholder. Med skiftende browser standarder og semi-shoddy mobil support, er det ikke underligt, vi ser sådanne indholdsintensive hjemmesider nedskudt. Være følsomme over for hver stil på websiden i displayet. Nogle vil indeholde flere billeder, andre kan indeholde en primær grafik eller video eller slet ingen grafik. Når du er færdig med at kode det endelige layout, skal du oprette flere HTML-sider til at huse forskellige visninger.
Disse vil alle have samme interne markering bortset fra indhold inden for hovedindholdsområdet. Hver enkelt sidevisning kan manipuleres og giver indsigt i et færdigt produkt. Skift dette op for at indeholde alle de store synspunkter, du tror, vil være nødvendige på hver side. Andre eksempler på sideelementer kan indeholde kommentarfelter, videoer eller indlejrede gallerier eller deltids-links.
Planlæg strategier grundigt
Det er i sandhed ikke helt svært at oprette et powerhouse weblayout. Mange designere bliver ramt af de små detaljer, som f.eks. Hvordan man plante blokelementer eller farve hyperlinks. Disse oplysninger er vigtige, da de sender på tværs af en branding-besked, selv fra mindre elementer skal meddelelsen komme sammen med hele siden. Mentalt planlægge stadierne af dit design for at finde ud af, hvordan den bedste tilgang til hver hindring er. Hvis du arbejder med en klient, vil det være godt at diskutere, hvilken type indhold der skal udfyldes på forhånd. Dette giver dig mulighed for at planlægge og strategisere den bedste tilgang til et generelt layout.
Et andet særligt droll-emne ligger i mobildesign. Dette nye marked ser en enorm ekspansion i ikke kun smartphones, men kraftige tablet pc'er. Dette betyder, at brugere kan få adgang til dit layout fra en mobil skærm - sørg for, at indholdet ikke oversvømmes og præsenterer det rigtigt.
7 Eksempler på websteder med svær indhold
Nedenfor er et par eksempler på screenshots fra populære indholdssider. Disse er for det meste kendte mærker både på fysiske og digitale markeder. Tjek nogle af nedenstående ideer for at finde inspiration i dine egne projekter. Du er også velkommen til at dele andre websider med tungt indhold i kommentarfeltet.
Clicker
Clicker er en ny social networking applikation til tv og film elskere. Du kan tilmelde dig en ny konto og finde nogle af dine yndlings klassiske tv-shows, arkiveret efter sæson og episodeoversigt. Du kan sammenligne webstedet med IMDB med mindre information og mere videoindhold!
Fremtiden for Web Design
Fremtiden for Web Design 2011 lancerer ting i London i løbet af det kommende forår. Tjek hjemmesiden for mere information og et godt eksempel på tekstbaseret layoutdesign. Alle detaljerne er ægte delte og tilbyder højttalere, tidsplaner, workshops, sponsorer og meget mere.
Herre Sandsynligvis
I dette komiske layout er hovedkarakteren Lord Likely blevet "tegnet" og perforeret til en illustration. Webstedet er opdelt i 3 kolonner med hvert sportligt nyt indhold, annoncer, feedlinks og arkiver. Designet selv er meget retro og en smart tage på illustrationdesign.
Microsoft
De fleste tech-entusiaster er bekendt med Microsoft. Faktisk kan de fleste, der forstår, hvad en computer er, give dig en kort beskrivelse af Microsoft og Bill Gates. Deres hjemmeside indeholder indhold for snesevis af softwarepakker, nyhedsopdateringer, pressemeddelelser og udviklerinformation. En lille vej ned på siden kan du se en lodret faneblad med dynamisk indholdskobling.
Search Engine Land
Search Engine Land er et populært webmagasin med fokus på søgemaskiner og internetmarkedsføring. De opdaterer ofte med fantastiske kvalitetsindlæg og kører hundredtusindvis af mennesker til deres websted hver dag. Hovedsiden opdeles i 3 kolonner, der bruges til at holde hvert indholdsmodul og annonce.
Det Hvide Hus
United States White House design ser meget rent og professionelt ud. Der er mange oplysninger om præsidentens tidsplan og andre vigtige politiske begivenheder. Et trick til at lindre sideværelset har været tilføjelsen af et lille indholdsregulator hen imod sideoverskriften. Dette er fantastisk til visning af 3-4 store nyhedsoverskrifter, når dine besøgende lander på siden.
Yahoo Portal
Så vidt store indhold websites går Yahoo! skal træde mod toppen. Yahoo! tilbyder hundredvis af tjenester til deres kunder, herunder webmail, nyheder, videoer og endda websøgning. Tjek nogle af Y! portal links fra sidefeltet for at se, hvordan deres skabeloner sammenligner.
Konklusion
Disse er blot nogle af nøglepunkterne og skridtene til at opbygge et konkret indholdskrævende layout. Websider med store indholdsreservoirer betragtes ofte som en byrde med SEO foder og intet af reel værdi. Design er alt som det er det første indtryk, en bruger får fra hver hjemmeside. Med store mængder indhold kan dette blive en katastrofe med rod og over generaliseringer. Aldrig holde op med at praktisere, og med blot et par projekter vil du hente en mesterskab for at forestille indholdsintensive layouter.
