Turinio intensyvaus išdėstymo patarimų ir pavyzdžių projektavimas

Norint sukurti išsamius žiniatinklio išdėstymus, reikia įgūdžių ir daug atsidavimo. Žiniatinklio dizaineriai atlieka darbą, kur tai labiausiai nepavyksta, ir labai sudėtingu būdu. Vystydami tinklalapius matėme, kad reikia užpildyti daugiau vietos ir turėti daugiau turinio nei bet kada anksčiau. Jei jau suprantate, kaip sukurti svetainę, tai yra didžiulis bonusas geriau suprasti šiuos metodus. Pagrindinės svetainės funkcijos retai keičiasi. Tačiau su daugiau nei vidutiniu puslapių turiniu atsiranda ir kiti veiksniai, įskaitant baltąją erdvę, tipografiją, elementų išdėstymą.

Išsamiai aptarsime kai kuriuos svarbiausius turinio intensyvaus išdėstymo patarimus. Tai gali svyruoti nuo socialinių tinklų programų, didelių verslo ir įmonių svetainių arba bet kokių tarpinių. Svarbu paklausti savęs "ką bandau pasiekti su šiuo dizainu?„kai projektuojate puslapius, nes tai padės jums numatyti platesnę perspektyvą.

Pasirinktiniai tinklalapiai

Nesvarbu, kaip patyrėte praktinį interneto dizainą, tiesa, kad mes visi turėjome pradėti kažkur. Individualių tinklalapių kūrimas paprastai yra pirmas žingsnis link interneto programavimo karjeros prieš taikant įprastines specifikacijas.

Visada rekomenduoju sukurti nedidelį puslapio elementų, kurie laikomi įdiegtais į šabloną, sąrašą. Kai visa tai yra nurašyta, lengviau išsiaiškinti blogas idėjas arba pasiimti praleistus ar pamirštus brangakmenius. Tai taip pat palengvina lengvą planavimą sumažinti stresą keliuose.

Išdėstymo vielos rėmas

Dėl bendro 5 puslapių svetainės dažnai matysite tuos pačius elementus. Viršutinio kampo logotipas, galvos navigacijos nuorodos, pagrindinė turinio sritis, galbūt padalyta su šonine juosta ir kita funkcija (prisijungimas, paieškos laukelis ir tt).

Apsvarstykite gerą pradžios tašką, kad galėtumėte išspręsti išsamius puslapio išdėstymus. Daugelis dizainerių mano, kad būtų naudinga suprojektuoti galimus vielos brėžinius, kad būtų išvengta akivaizdžių trūkumų. Tai nereikalauja jokio išgalvoto popieriaus ir netgi gali būti padaryta neveikiančiu užrašu. Vielos karkaso paskirtis - pateikti apčiuopiamą idėją, kur svetainės išdėstymas turėtų būti nukreiptas į kambarį, kad vėliau būtų galima užpildyti detales.

Turint omenyje turinio sudėtingumą, reikia atsižvelgti į tai, kiek platformos bus. Uždarytas 2-3 stulpelių išdėstymas statant 100 + ilgo, sudėtingo turinio puslapius nepaliks daug vietos kvėpuoti. Skizuodami ir planuodami į priekį, galite kontroliuoti erdvaus kambario turinio kiekį. Tai ne tik apima teksto ar blokų sritis, bet ir vaizdus bei vaizdo įrašus.

Brilliant White Space

Galimas baltos spalvos atstumas svarbiausias veiksnys atsižvelgti į turinio intensyvų išdėstymą. Tinklalapio turinys reglamentuoja jį vis labiau, nei bet kokia įprastinė svetainė. Jei skaitytojai nesugeba suprasti turinio, nes nėra galimybių virsti savo žodžius, eismas bus dėmėtas ir nepatenkintas.

Dalys ir puslapio antraštės yra puiki vieta pradėti nuo tinkinimo. Naudojant CSS ypatybes turėtumėte sugebėti manipuliuoti išorinėmis paraštėmis ir išstumti kiekvieną bloko eilutės teksto elementą. Tai apima visas 1–6 antraštes, pastraipas, bloknotus, sąrašus, iš anksto suformatuotą tekstą ir keletą mažesnių elementų.

Jei norite laikyti savo skaitytojo dėmesį, svarbu taikyti tarpą pagal pagrindinius teksto elementus. Punktai ir mažesnės antraštės geriausiai veikia su 15px-25px apatinėmis paraštėmis. Dėl didesnių puslapių elementų, tokių kaip h1 arba h2, reikia atsižvelgti į 35px + (tai priklauso ir nuo šrifto dydžio). Tarpai tarp vertikalių elementų yra svarbūs skenavimui ir skenavimui. Tačiau linijos aukštis yra dar viena svarbi CSS savybė, kuri įtakoja tarpą tarp eilučių teksto elemente. Punktai turėtų turėti daug didesnę linijos aukščio vertę, palyginti su jų šrifto dydžiu.

Apsvarstykite dinaminius stilius

Be atstumo, skaitmeninė tipografija turėtų būti manipuliuojama taip, kad ji būtų išjungta iš puslapio. Šiandienos pasaulyje šimtai milijonų svetainių yra visuotinai matomas tas pats šrifto tipas (-ai).

Jei projektuojate svetainės turinį, kurio turinys yra sunkus, rezultatas bus panašus į kitą nuobodų šabloną. Yra daug savybių, kad galėtumėte žaisti su pažangiais spausdinimo stiliais. Teksto šešėliai, mažiau / daugiau raidžių tarpai, fono platformos, piktogramos ... sąrašas yra neribotas.

Tikrai jūs esate dizaineris ir jūsų galutinis žodis yra įstatymas. Dizaino išdėstymas nėra panašus į vieną juostos greitkelį be perėjimo. Proceso metu galite grįžti ir keisti stilius, manipuliuoti naujais elementais arba visiškai pašalinti sąvoką. Apsvarstykite kai kuriuos kitus naudingus CSS patarimus ir žaiskite, kas geriausiai tinka!

Naudokite „Dropdown“ meniu

Su tiek daug turinio, kad mažai tikėtina, kad visos jūsų nuorodos bus tinkamos viename puslapyje. Yra daug galimybių, kaip tvarkyti puslapių perkrovą. Papildomų nuorodų įdėjimas į šoninės juostos blokus arba siuvami stulpeliuose svetainių poraštėje yra du tikslingi variantai.

Patogiausias ir patogiausias pasirinkimas yra sukurti išskleidžiamąją navigacijos schemą su galvos kategorijomis ir subkategorijomis. Taip pat yra daug atviro kodo scenarijų, kurie siūlo sub-subkategorijas, jei turite intensyviai išsamių temų.

Greičiausiai ir mažiausiai varginantis strategija yra pradėti „JavaScript“ sistemą. Kai kurie iš populiariausių yra „jQuery“, „MooTools“ arba galbūt „Prototype“. Visos šios bibliotekos siūlo dokumentaciją, o daugelis jų turi nemokamą išskleidžiamojo meniu scenarijų.

Suplanuokite turinio rodinius

Praktiškai daug sunkiau sukurti supaprastintą kūno sritį, kurioje būtų visi jūsų vidutinės svetainės turiniai. Perėjimas prie naršyklės standartų ir pusiau gėdingas mobiliojo ryšio palaikymas, nenuostabu, kad matome, kad tokios turinio intensyvios svetainės užstrigo. Būkite jautrūs kiekvienam tinklalapio stiliui. Kai kuriuose bus keli vaizdai, kiti gali turėti pirminį grafinį vaizdą arba vaizdo įrašą arba be jokios grafikos. Baigę galutinio išdėstymo kodavimą, sukurkite kelis HTML puslapius, kad galėtumėte matyti skirtingus vaizdus.

Visa tai turės tą patį vidinį žymėjimą, išskyrus turinį, esantį pagrindinėje turinio srityje. Kiekvienas atskiras puslapio vaizdas gali būti manipuliuojamas ir supažindinamas su galutiniu produktu. Įjunkite šią funkciją, kad joje būtų visi pagrindiniai jūsų manymu reikalingi vaizdai. Kiti puslapių elementų pavyzdžiai gali būti komentarų laukai, vaizdo įrašai ar įterptosios galerijos arba suskaidytų puslapių nuorodos.

Planuokite strategijas

Tiesą sakant, nėra visiškai sunku sukurti „Powerhouse“ interneto išdėstymą. Daugelis dizainerių susiduria su nedidelėmis detalėmis, pavyzdžiui, kaip blokuoti elementus ar spalvų nuorodas. Šie duomenys yra svarbūs, nes jie siunčiami per prekės ženklo pranešimą, net ir iš mažesnių elementų pranešimas turėtų būti sujungtas su visu puslapiu. Mentiškai suplanuokite savo dizaino etapus, kad išsiaiškintumėte, kaip geriausias požiūris į kiekvieną kliūtį. Jei dirbate su klientu, būtų gerai aptarti, kokio tipo turinys bus užpildyti puslapius iš anksto. Tai suteikia jums galimybę planuoti ir strategizuoti geriausią požiūrį į bendrą išdėstymą.

Kita ypač droll tema yra mobilus dizainas. Ši nauja rinka rodo didžiulę plėtrą ne tik išmaniuosiuose telefonuose, bet ir galinguose planšetiniuose kompiuteriuose. Tai reiškia, kad vartotojai gali pasiekti savo išdėstymą iš mobiliojo ekrano - įsitikinkite, kad turinys nėra perpildytas ir pateikiamas tvarkingai.

7 Didelio turinio svetainių pavyzdžiai

Žemiau pateikiami keli populiarių turinio sunkių svetainių ekrano vaizdai. Tai daugiausia žinomi prekiniai ženklai tiek fizinėse, tiek skaitmeninėse rinkose. Išsiaiškinkite kai kurias toliau pateiktas idėjas, kad rastumėte įkvėpimo savo projektuose. Taip pat nedvejodami dalinkitės kitais turinio sunkiais žiniatinklio išdėstymais komentarų skiltyje.

Clicker

Clicker yra nauja socialinio tinklo programa, skirta televizijos ir filmų mėgėjams. Galite užsiregistruoti į naują paskyrą ir surasti keletą mėgstamų klasikinių TV laidų, kurios yra archyvuojamos pagal sezoną ir epizodų sąrašą. Galite palyginti svetainę su IMDB su mažiau informacijos ir daugiau vaizdo turinio!

Web dizaino ateitis

„Web Design 2011“ ateitis ateinančiais pavasariais prasidės Londone. Išsamesnės informacijos ieškokite pagrindiniame puslapyje ir puikus teksto išdėstymo dizaino pavyzdys. Visa informacija yra tikrai dalijamasi ir siūlo garsiakalbius, tvarkaraščius, seminarus, rėmėjus ir daug daugiau.

Viešpats tikriausiai

Šiame komiškame išdėstyme pagrindinis personažas Viešpaties tikriausiai buvo „animuotas“ ir perforuotas į iliustraciją. Svetainė suskirstyta į 3 stulpelius su kiekvienu nauju nauju turiniu, skelbimais, informacijos santraukomis ir archyvais. Pats dizainas yra labai retas ir protingas imtis iliustracijų.

„Microsoft“

Dauguma technologijų entuziastų yra susipažinę su „Microsoft“. Tiesą sakant, dauguma žmonių, kurie supranta, ką kompiuteris gali suteikti jums netgi trumpą „Microsoft“ ir „Bill Gates“ aprašymą. Jų pagrindiniame puslapyje yra daugybė programinės įrangos paketų, naujienų atnaujinimų, pranešimų spaudai ir kūrėjo informacija. Šiek tiek žemiau puslapio galite matyti vertikalaus skirtuko meniu su dinaminiu turinio perjungimu.

Paieškos sistema

„Search Engine Land“ yra populiarus interneto žurnalas, kuriame daugiausia dėmesio skiriama paieškos sistemoms ir interneto rinkodarai. Jie dažnai atnaujina nuostabius kokybės įrašus ir kasdien perkelia šimtus tūkstančių žmonių į savo svetainę. Pagrindinis puslapis suskirstomas į 3 stulpelius, naudojamus kiekvienam turinio moduliui ir reklamai.

Baltieji rūmai

Jungtinių Valstijų Baltųjų rūmų dizainas atrodo labai švarus ir profesionalus. Yra daug informacijos apie prezidento tvarkaraštį ir kitus svarbius politinius įvykius. Vienas pėdsakas, skirtas palengvinti puslapio kambarį, buvo mažo turinio slankiklio įtraukimas į puslapio antraštę. Tai puikiai tinka 3-4 didelėms naujienų antraštėms, kai lankytojai nusileidžia į puslapį.

„Yahoo“ portalas

Kiek didelių turinio svetainių „Yahoo! turi būti linkęs į viršūnę. „Yahoo! siūlo šimtus paslaugų savo klientams, įskaitant žiniatinklio paštą, naujienas, vaizdo įrašus ir net interneto paiešką. Patikrinkite kai kuriuos Y! portalo nuorodos iš šoninės juostos, kad pamatytumėte, kaip jų šablonai lyginami.

Išvada

Tai tik keletas svarbiausių dalykų ir žingsnių siekiant sukurti konkretų turinį, reikalingą turiniui. Tinklalapiai su dideliais turinio rezervuarais dažnai vertinami kaip našta, turinti SEO pašarus, ir nieko, kas nėra reali. Dizainas yra viskas, nes tai pirmas įspūdis, kurį vartotojas gauna iš kiekvienos svetainės. Su dideliu turinio kiekiu tai gali tapti nelaimingu atsitikimu ir pernelyg apibendrinimais. Niekada nenustokite praktikuoti ir tik keliais projektais pasieksite meistriškumą, kad galėtumėte įsivaizduoti turinio intensyvius išdėstymus.