Satura intensīva izkārtojuma padomu un piemēru izstrāde

Lai izveidotu visaptverošus izkārtojumus tīmeklī, ir prasme un daudz centību. Tīmekļa dizaineri veic darbu, kur tas nav iespējams, un ļoti sarežģītā veidā. Tā kā tīmekļa lapas ir attīstījušās, esam redzējuši nepieciešamību aizpildīt vairāk vietas un turēt vairāk satura nekā jebkad agrāk. Ja jūs jau saprotat, kā veidot tīmekļa vietni, tas ir milzīgs bonuss, lai labāk izprastu šīs metodes. Galvenās tīmekļa vietnes funkcijas reti mainās. Tomēr ar vairāk nekā vidējo lappuses saturu tiek parādīti citi faktori, tostarp baltā telpa, tipogrāfija, elementu pozicionēšana.

Mēs sāksim detalizētāku informāciju, lai aptvertu dažus galvenos padomus satura intensīvai izvietošanai. Tie var būt no sociālā tīkla lietojumprogrammām, lielām biznesa un korporatīvām vietnēm vai kaut kas starp tiem. Ir svarīgi sev jautāt:ko es cenšos sasniegt ar šo dizainu?"kad jūs veidojat lapas, jo tas palīdzēs jums paredzēt plašāku perspektīvu.

Pielāgotas tīmekļa lapas

Neatkarīgi no tā, cik pieredzējis ir praktiskais web dizains, jums ir taisnība, ka mums visiem bija jāsāk kaut kur. Pielāgotu tīmekļa lapu izstrāde parasti ir pirmais solis ceļā uz web programmēšanu, pirms tiek izmantotas parastās specifikācijas.

Es vienmēr iesaku izveidot nelielu lapu elementu sarakstu, kurus uzskata par instalētiem veidnē. Kad tie visi ir pierakstīti, ir vieglāk nolaist sliktas idejas vai uzņemt neatbildētos vai aizmirstos dārgakmeņus. Tas arī paver ceļu vieglai plānošanai, lai mazinātu stresu pa ceļu.

Layout Wireframe

Attiecībā uz vispārējo 5-lapu tīmekļa vietni bieži redzēsiet tos pašus elementus. Augšējā stūra logo, galvas navigācijas saites, galvenā satura zona, kas, iespējams, ir sadalīta ar sānjoslu un citām funkcijām (pieteikšanās, meklēšanas lodziņš utt.).

Apsveriet labu sākumpunktu, lai izveidotu detalizētus lapu izkārtojumus. Daudzi dizaineri uzskata, ka ir noderīgi ieskicēt iespējamos stiepļu karkasa dizainus, lai izslēgtu ne tik acīmredzamos trūkumus. Tas neprasa nekādu iedomātu papīru, un to var pat izdarīt notecinātā piezīmjdatorā. Wireframe mērķis ir sniegt aptuvenu priekšstatu par to, kur vietnes izkārtojumam jābūt novietotam ar telpu, lai vēlāk aizpildītu informāciju.

Ar satura smago izkārtojumu jāņem vērā, cik daudz platformas būs. Aizvērtas 2-3 kolonnas izkārtojuma izveide, lai uzņemtu 100+ lapas ilgu, sarežģītu saturu, neatstās daudz vietas elpošanas telpai. Skicējot un plānojot uz priekšu, varat kontrolēt plašā numura apjomu lapas saturam. Tas ne tikai iekapsulē teksta vai bloku apgabalus, bet arī aplūko attēlus un videoklipus.

Brilliant White Space

Iespējams ir balts atstatums svarīgākais faktors jāņem vērā satura intensīvajā plānošanā. Tīmekļa vietnes saturs nosaka to alll, vairāk nekā jebkura regulāra tīmekļa vietne. Ja lasītāji nespēj saprast saturu, jo nav iespējas sagremot savus vārdus, satiksme būs plankumaina un neapmierināta.

Punktu un lapu galvenes ir lieliska vieta, kur sākt ar pielāgojumiem. Izmantojot CSS rekvizītus, jums vajadzētu būt iespējai manipulēt ar ārējām malām un nošķirt katru bloka rindu teksta elementu. Tie ietver visas pozīcijas 1-6, rindkopas, bloknotes, sarakstus, iepriekš formatētu tekstu un dažus mazākus elementus.

Ja jūs vēlaties, lai jūsu lasītāja uzmanība tiktu pievērsta, ir svarīgi izmantot atstarpes zem galvenajiem teksta elementiem. Punkti un mazākas virsraksti vislabāk darbojas ar 15px-25px apakšējām malām. Lielākiem lapas elementiem, piemēram, h1 vai h2, ņemiet vērā 35px + (tas būs atkarīgs arī no jūsu fonta lieluma). Telpas starp vertikāliem elementiem ir svarīgas skenēšanai un skenēšanai. Tomēr līnijas augstums ir vēl viens svarīgs CSS īpašums, kas ietekmē atstarpi starp rindu rindas teksta elementā. Punktiem ir jābūt daudz lielākai līnijas augstuma vērtībai, salīdzinot ar to burtu izmēru, lai starp līnijām būtu daudz papildu polsterējumu.

Apsveriet dinamiskos stilus

Papildus atstarpēm, digitālā tipogrāfija jārīkojas tā, lai tas lēktu no lapas. Mūsdienās pasaulē ir simtiem miljonu tīmekļa vietņu, un tas ir visai bieži redzams vienāds (-i) fonta veids (-i).

Ja izstrādājat vietnes izkārtojumu, kas ir smags ar saturu, rezultāts līdz galam izskatīsies kā vēl viens mīlīgs šablons. Ir daudz īpašību, kas ļauj spēlēt apkārt ar moderniem tipogrāfijas stiliem. Teksta ēnas, mazāk / mazāk burtu atstarpes, fona platformas, ikonas ... saraksts ir bezgalīgs.

Patiesi jūs esat dizainers un jūsu pēdējais vārds ir likums. Plānojot izkārtojumu, nav salīdzināms ar vienu joslu šoseju bez apgrozījuma. Procesa laikā jūs varat atgriezties un mainīt stilu, manipulēt ar jauniem elementiem vai pilnībā izmest koncepciju. Apsveriet dažus citus noderīgus CSS padomus un apmeklējiet, lai redzētu, kas vislabāk atbilst!

Izmantot nolaižamās izvēlnes

Ar tik lielu saturu ir maz ticams, ka visas jūsu saites tiks ievietotas vienā lapā. Ir daudz iespēju par to, kā rīkoties ar lapas pārslodzi. Papildu saišu ievietošana sānjoslas blokos vai uzšūtajās kolonnās vietnes kājenē ir divas mērķtiecīgas iespējas.

Ērtākā un ērtākā izvēle ir izveidot nolaižamo navigācijas shēmu ar galvas kategorijām un apakškategorijām. Pastāv arī daudzi atvērtā koda skripti, kas piedāvā apakškategorijas, ja jums ir intensīvi detalizētas tēmas.

Iespējams, ka visstraujāk un vismazāk nomākta stratēģija ir sākt ar JavaScript sistēmu. Daži no populārākajiem ir jQuery, MooTools vai, iespējams, prototips. Visas šīs bibliotēkas piedāvā dokumentāciju, un daudzās ir pieejamas bezmaksas nolaižamās izvēlnes skripti.

Plānojiet satura skatījumus

Praksē ir daudz grūtāk izveidot vienkāršotu ķermeņa zonu, lai izvietotu visu saturu, ko satur jūsu vidējā tīmekļa vietne. Pārslēdzot pārlūkprogrammas standartus un daļēji neskaidru mobilo tālruni, nav brīnums, ka mēs redzam, ka šādas satura ietilpīgas tīmekļa vietnes tiek noņemtas. Esiet jutīgi pret katru mājas lapas stilu. Daži no tiem satur vairākus attēlus, citi var saturēt primāro grafiku vai videoklipu vai bez grafikas. Kad esat beidzis galīgā izkārtojuma kodēšanu, izveidojiet vairākas HTML lapas, lai izvietotu dažādus skatus.

Visiem tiem būs vienāds iekšējais marķējums, izņemot saturu galvenajā satura apgabalā. Katru atsevišķu lapas skatu var manipulēt un sniedz ieskatu par gatavo produktu. Pārslēdziet to, lai tajā būtu visi galvenie viedokļi, kas, pēc jūsu domām, būs nepieciešami ar katru lapu. Citi lapu elementu piemēri var ietvert komentāru kastes, videoklipus vai iegultās galerijas vai dalītu lapu saites.

Plānojiet stratēģijas pamatīgi

Patiesībā nav pilnīgi grūti izveidot jaudīgu tīmekļa izkārtojumu. Daudzi dizaineri nokļūst līdzi mazajām detaļām, piemēram, kā bloķēt bloku elementus vai krāsu hipersaites. Šīs detaļas ir svarīgas, jo tās nosūta pāri zīmola ziņojumam, pat no mazākiem elementiem, ziņojumam ir jābūt kopā ar visu lapu. Garīgi plānojiet sava dizaina posmus, lai noskaidrotu, kā vislabāk izmantot katru šķēršļu. Ja jūs strādājat ar klientu, būtu labi apspriest, kāda veida saturs iepriekš tiks aizpildīts. Tas dod jums iespēju plānot uz priekšu un stratēģizēt labāko pieeju vispārējam izkārtojumam.

Vēl viena īpaši aktuāla tēma ir mobilais dizains. Šis jaunais tirgus piedzīvo milzīgu paplašināšanos ne tikai viedtālruņos, bet arī spēcīgos planšetdatoros. Tas nozīmē, ka lietotāji var piekļūt jūsu izkārtojumam no mobilā ekrāna - pārliecinieties, ka saturs nav pārpildīts un ir kārtīgi.

7 Smagā satura vietņu piemēri

Zemāk ir daži piemēri ekrānšāviņi no populārām satura smagajām tīmekļa vietnēm. Tie ir galvenokārt pazīstami zīmoli gan fiziskajos, gan digitālajos tirgos. Apskatiet dažas tālāk minētās idejas, lai atrastu iedvesmu savos projektos. Komentāru sadaļā arī varat justies brīvi koplietot citus smagus tīmekļa izvietojumus.

Clicker

Clicker ir jauns sociālā tīkla lietojums TV un filmu mīļotājiem. Jūs varat reģistrēties jaunam kontam un atrast dažas no jūsu iecienītākajām klasiskajām TV šovām, kas arhivētas pēc sezonas un epizodes saraksta. Jūs varat salīdzināt vietni ar IMDB ar mazāk informācijas un vairāk video satura!

Web dizaina nākotne

Web Design 2011 nākotne būs pavisam pavasarī uzsākta lieta Londonā. Lai iegūtu plašāku informāciju un lielisku teksta izkārtojuma dizainu, apmeklējiet mājas lapu. Visas detaļas ir patiesi kopīgas un piedāvā runātājus, grafikus, darbnīcas, sponsorus un daudz ko citu.

Kungs, visticamāk

Šajā komikālajā izkārtojumā galvenais varonis Kungs, iespējams, ir bijis "karikatūra" un perforēts ilustrācijā. Vietne ir sadalīta 3 slejās ar katru jaunu sporta saturu, reklāmas, plūsmas saites un arhīvus. Projekts pats par sevi ir ļoti retro un gudrs uzņemas ilustrācijas.

Microsoft

Lielākā daļa tehnoloģiju entuziastu ir pazīstami ar Microsoft. Patiesībā lielākā daļa cilvēku, kas saprot, ko dators ir, var jums sniegt īsu Microsoft un Bill Gates aprakstu. Viņu mājas lapa satur saturu desmitiem programmatūras pakotņu, ziņu atjauninājumu, preses relīzes un attīstītāja informācijas. Mazliet veidi, kā lejup pa lapu jūs varat atrast vertikālu cilnes izvēlni ar dinamisku satura pārslēgšanu.

Meklētājprogrammas zeme

Search Engine Land ir populārs interneta žurnāls, kas koncentrējas uz meklētājprogrammām un interneta mārketingu. Viņi bieži atjaunina ar pārsteidzošiem kvalitātes ziņojumiem un katru dienu vada simtiem tūkstošu cilvēku savā vietnē. Galvenā lapa sadalās 3 kolonnās, ko izmanto, lai turētu katru satura moduli un reklāmu.

Baltais nams

Amerikas Savienoto Valstu Baltā nama dizains izskatās ļoti tīrs un profesionāls. Ir daudz informācijas par prezidenta grafiku un citiem svarīgiem politiskiem notikumiem. Viens triks lapu telpas atvieglošanai ir neliela satura slīdņa pievienošana lapas virsrakstam. Tas ir lieliski piemērots 3-4 lielo ziņu virsrakstu rādīšanai, kad apmeklētāji nokļūst lapā.

Yahoo portāls

Ciktāl lielas satura vietnes iet Yahoo! jābūt tendenču virzienā uz pīķi. Yahoo! piedāvā simtiem pakalpojumu saviem klientiem, tostarp tīmekļa e-pastu, jaunumus, video un pat tīmekļa meklēšanu. Pārbaudiet kādu no Y! portāla saites no sānjoslas, lai redzētu to veidņu salīdzinājumu.

Secinājums

Tie ir tikai daži no galvenajiem punktiem un soļiem, lai izveidotu konkrētus satura pieprasījumus. Web lapas ar lieliem satura rezervuāriem bieži tiek uztvertas kā slogs, kas tur SEO barību, un nekas, kam ir reāla vērtība. Dizains ir viss, jo tas ir pirmais iespaids, ko lietotājs saņem no katras tīmekļa vietnes. Ar lielu saturu, tas var kļūt par katastrofu ar pārmērīgu un vispārīgu. Nekad nepārtrauciet praksi un tikai ar dažiem projektiem jūs iegūsiet meistarību, lai redzētu satura intensīvus izkārtojumus.