Pažvelkite į geresnę šiuolaikinių svetainių tipografiją

Skaitmeninis tekstas gali būti suformatuotas tiek daug skonių. Toliau tobulindami žiniatinklio šriftus ir naršyklės scenarijus matėme, kad nauji kūrėjų kodai gali būti panaudoti. Web dizaineriai taip pat ieško geriausios strategijos koduoti savo svetaines ir sukurti vienodą tipografinį stilių tarp visų jų puslapių.

Daugybė profesionalių interneto dizainerių parašė temą, įskaitant atnaujintas funkcijas ir paslaugas. Jūs turite apsvarstyti kiekvieną tinklalapį kaip atskirą dokumentą, kuris nutraukia jūsų šaknų išdėstymą. Pagal šį vaizdą lengva matyti, kaip spausdinimas gali tekti iš puslapio į puslapį ir pasiūlyti unikalų kūrybos tašką. Ir tai tampa ypač akivaizdu kuriant unikalias klases jūsų pastraipoms ir antraštėms.

Žemiau aš eisiu į keletą fantastinių idėjų, kurias norėčiau siekti tipografijos dizainerių, kurie domisi žiniatinklio kūrimu. Dienoraščiai, socialiniai tinklai ir įmonės visada siekia atnaujinti savo dabartinę svetainę. CSS stiliai žiniatinklio tipografijai suteikia puikų šaltinį atnaujinti puslapius.

Šiandienos interneto skirtumai

Nuo 2000 m. Pradžios šiuolaikinis internetas smarkiai pažengęs. Interneto dizaineriams yra daugybė naujų funkcijų, kad būtų sukurti fantastiški grafinio dizaino, logotipų, reklaminių antraščių ir praktiškai bet kokie darbai. „HTML5“ ir „CSS3“ specifikacijų išleidimas taip pat padėjo rinkti senus interneto šriftų kūrimo būdus.

Dabar galima visiškai įtraukti savo šriftus į CSS @ šrifto veidas nuosavybė. Galite naudoti bet kurį „TrueType“(.ttf) arba „OpenType“(.otf) failą ir kopiją saugokite savo serveryje. Tada su kai kuriais CSS3 magija įtraukite šeimą bet kur jūsų tinklalapyje!

Vien tik taikant šią techniką galima pamatyti, kaip mūsų modernus internetas tapo.

„JQuery“ populiarėja kiekvieną dieną, todėl nenuostabu, kad galime sukurti neįtikėtiną animacinį efektą kartu su pasirinktiniais šriftais. Kaip alternatyvą aukščiau aprašytam metodui, jQuery „TTFGen“ papildinys leidžia į savo tinklalapį įtraukti bet kokį „TrueType“ šriftą.

Šis metodas yra šiek tiek patikimesnis, nes jums nereikia modernios naršyklės, palaikančios CSS3 standartus, kad jis veiktų. Tačiau, žinoma, senosios naršyklės, pvz., „Internet Explorer 6“, bus sudėtingos.

Tačiau dėkoju, kad dauguma vartotojų perėjo į naujesnę naršymo programinę įrangą, kuri palaiko šiuos standartus! O kai kuriate internetą, turėtumėte apsvarstyti, kas tiksliai yra jūsų rinka. Jūs negalite visada pasisveikinti visiems, bet jūs tikrai galite pabandyti gauti pakankamai arti.

Skaitmeninės spausdinimo tikslas

Keista idėja apsvarstyti, bet koks yra tikrasis skaitmeninio teksto tikslas? Perteikti informaciją, dalintis šaltiniais ir pasiūlyti savo nuomonę interneto vartotojų pasaulyje. Tekstas yra paprasčiausia žiniasklaidos forma, skirta dalintis mintimis ir idėjomis. Tačiau tai taip pat labai sudėtinga ir jame yra daug detalių, kurių nuotraukos / vaizdo įrašai negali būti naudojami.

Jūsų lankytojai gali rasti jūsų svetainę pagal jūsų teksto ar antraštių raktinius žodžius - tik dar viena priežastis, dėl kurios reikia atidžiai stebėti savo interneto kopiją. Ir kai tik šiek tiek atkreipsite dėmesį į savo svetainę, turite laikytis jų koncentracijos. Tai lengviausia padaryti su paryškintomis antraštėmis ir tolygiai išdėstytu puslapio tekstu.

Jei rašote straipsnį ar pamoką, turite naudoti aiškią kalbą. Tai taip pat svarbu, kaip atrodo jūsų puslapio tekstas ir kokybė. Kuo didesnis jūsų tekstas, tuo lengviau skaityti ir ieškoti raktinių žodžių. Ir kadangi pastraipose bus daugelis jūsų turinio, turėtumėte išleisti daug laiko prototipams, kad būtų galima tinkamas. Straipsniai naudojami pranešimams perkelti į bitų dydžio gabalus, suskirstytus į sakinius. Suprasti, kaip rašote ir planuojate į priekį, kad gautumėte tinkamą puslapio išdėstymą.

Be to, su puslapio tekstu pateikiamas laikmenos ir antrinis turinys. Jei jūsų pastraipose yra pirminė informacija, galbūt turite grafikų ar vaizdų, kad būtų galima patobulinti puslapį. Šie akcentai yra tik tinkamas liesti, kad vartotojai judėtų per jūsų svetainę.

Vaizdo įrašai ir vaizdai gali sugadinti jūsų turinį ir atrodo, kad skaitytojai greičiau perkelia jūsų straipsnį. Tačiau naudokitės šiais elementais taupiai ir neleiskite nieko užvaldyti pagrindinio pranešimo. Vartotojai (dažniausiai) atvyksta į jūsų svetainę informacijos ir nenori pernelyg daug dėmesio.

Visos kitos formatavimo parinktys naudojamos funkcionalumui ar tikslui nurodyti. Pavyzdžiui, hipersaitų tekstas dažnai skiriasi nuo kitų spalvų, kad išsiskirtų kaip “paspaudžiamas”. Jūs galite dirbti su drąsiais arba pasvirusiais žodžiais, pabrėždami savo sakinius. Be to, naudojant bloknotus arba iš anksto suformatuotus tekstus, galima apibrėžti pagrindinius teiginius arba interneto kodus.

Svetainių antraštės

Vienas iš svarbiausių žiniatinklio tipografijos vertybių yra antraštės žymės. Jei nesate susipažinę su HTML antraštėmis, nuo

į

buvęs turintis didžiausią svarbą, o paskutinis - mažiausiai. Šis žymėjimas yra naudingas norint suprasti, nes „Google“ taip pat pagal savo turinį suskirsto jūsų domeną ir tinklalapius. Taigi jūs galiausiai galėsite kontroliuoti, kuriuos raktinius žodžius naudojate ir kokių kategorijų antraštes jums reikės.

Nors standartinėje HTML5 specifikacijoje yra iki 6 skirtingų kategorijų stilių, rekomenduoju naudoti nuo 3-4. Nėra būtina juos visus įtraukti į puslapius. Ir taip pat labai mažai tikėtina, kad rasite 6 skirtingas antraštes. Pirmą kartą atsisėdę kurti savo stilius pabandykite parengti keletą pavyzdžių antraštėms, kad pamatytumėte, kas jums patinka.

„Photoshop“ puikiai tinka šiam scenarijui. Taip pat galite pabandyti koduoti įvairias HTML antraštes, kad pamatytumėte, kaip jie atrodo naršyklėje. Svarbu dirbti su puslapių srauto ir dizaino antraštėmis pagal jų reitingą.

Pavyzdžiui, jūsų

žymės turėtų išsiskirti labiausiai tarp visų jūsų puslapio antraščių.

ir

yra populiariausios žymos, kurias „Google“ rekomendavo nuskaityti puslapio turinį. Naudojant dizaino efektus, pvz., Paryškintą šriftą, pabraukimą, punktyras, skirtingas spalvas, jūsų pavadinimai gali išeiti iš puslapio.

Tarpai taip pat yra svarbūs kai kalbama apie antraštes, ar bet kokį turinį. Įsitikinkite, kad tarp antraštių ir pagrindinės turinio srities pridedate papildomų maržų. Jei padarėte šriftą pakankamai didelį, kiekviena antraštė turėtų išsiskirti kaip savo pagrindinį bloką. Ši išvaizda idealiai tinka, jei norite aiškiai nuskaityti skaitytojų dėmesį.

Unikalių hipersaitų kūrimas

Yra daug ką pasakyti apie puslapių nuorodas. Vienaip ar kitaip savo kode turėsite naudoti hipersaitus. Jie yra labai svarbūs kaip pagrindinė navigacijos sąsaja tarp skirtingų jūsų svetainės puslapių. Jūs taip pat galite susieti su kitais dienoraščiais ar net savo archyvuotais dienoraščių įrašais, kad juos būtų galima pateikti vėliau.

Labai atsargiai turėtumėte pasirinkti nuorodos laikymo tekstą. Tai yra konkretus turinys, kurį akcentuos nuorodų stilius. Pavyzdžiui, „spustelėkite čia“ yra labai populiarus ir dažniausiai naudojamas tiesioginiams atsisiuntimams. Stenkitės vengti šio sistemingo požiūrio ir vietoj to gauti šiek tiek kūrybišką nuorodą. Jūsų lankytojai yra labiau linkę spustelėti nuorodą, jei jie taip pat gali atpažinti kontekstą ir galbūt išsiaiškinti, kas bus naujame puslapyje.

Kai planuojate kurti savo nuorodas, turėtumėte apsvarstyti šiuos dalykus - kaip pakeitimai atrodys jūsų puslapio nustatymuose, kokio tipo fono spalva dirbate, ir kokia spalva yra kontrasto tekstas?

Nuorodos turėtų būti akivaizdžiai išjungtos kaip spustelėję elementai - galų gale tai yra jų funkcija. Štai kodėl senas mėlynas su pabrauktu tekstu veikia taip gerai. Bet jei pastebėsite, kad alternatyvi spalva veikia geriau, turėtumėte išbandyti. Nuorodų dizainui nėra vieno dydžio. Tiesiog šiek tiek naršykite po internetą ir jūs, be abejo, sudėsite kažką išskirtinio.

Vienas interesų taškas yra keletas funkcijų, kurias turėtumėte pabandyti vengti. Tokie dalykai kaip teksto šrifto šeimos ar šrifto dydžio keitimas gali būti labai erzina. Tai sukels teksto iškraipymą ir judėjimą, o tai gali įdėti pelės žymeklį tiesiai iš nuorodų zonos. Panašiai turėtumėte vengti pridėti papildomų maržų / užpildų savo nuorodoms ar svyravimų efektams. Šie darbai yra daug geriau, kai likti paprasti. Spalvos pasikeitimas arba pridėtinis pabraukimas į vartotojo patirtį patenka į ilgą kelią.

Stilingų sąrašų sudarymas

Yra tikimybė, kad turėsite dirbti su sąrašais tam tikru momentu. Įtrauktas ir užsakytas, ir nekoduotas sąrašas HTML. Tai puikiai tinka pasiūlyti nedidelę idėjų, produktų, žmonių ar nuorodų kolekciją labai nedidelėje erdvėje. Stilistika taip pat nėra kitokia nei pastraipos ar antraštės.

Jūsų lankytojai turi nedelsdami suprasti, kad jie ieško elementų sąrašo. Kiekvieną sąrašo elementą laikykite atskirai ir savo naujoje eilutėje. Jei įmanoma, pridėkite papildomą tarpą tarp jų. Tai suteiks tam tikrą kvėpavimo kambarį ir pasirodys kaip gražus straipsnio tekstas. Jei norite, galite netgi paryškinti šriftą ar įtrauką, kad būtų galima šiek tiek išsiskirti nuo standartinių išdėstymo ribų.

Papildomų funkcijų pridėjimas, kad padėtų jūsų sąrašui išsiskirti, nėra reikalavimas. Bet jei jums patinka blokų išdėstymo stilius, jis iš tikrųjų sutelkiamas į jūsų sąrašus. Galite pabandyti pridėti šviesų foną arba piktogramas. „List Apart“ yra puikus rašymas apie tamingus sąrašus, kurie, mano manymu, apima keletą labai galingų žinių. Bet jei puslapių turinį laikote linijiniu ir sąrašo blokus naudosite tik tada, kai reikia, neturėtumėte susidurti su jokiais dizaino trūkumais.

Kaip sukurti puslapių kainas

Šių dienų citatos ir citatos yra labai ribotos. Ankstyvame žiniatinklyje nematote labai daug šių elementų. Galbūt redakcijos, esė ar mokomieji dokumentai. Bet HTML5 tikrai atnaujino taisykles šiek tiek, todėl citatos blokavimas yra daug lengviau.

HTML5 gydytojo svetainėje yra įdomių išteklių aptarti šią tikslią temą. Jie diskutuoja apie turinio naudojimą viduje blokų, kurie pasirodo dokumento struktūroje. Taigi galite įtraukti antraštes, pastraipas ir net sąrašus bei poraštes. Pagrindinis naudojimas a