Korištenje modularne mreže za raspored. HTML5 i CSS3 komponente

Izrada web stranica

Svaki dizajner izgleda koji se suočava sa još jednim zadatkom izgleda adaptivni raspored, trebaju nam rešetke. U većini slučajeva, koristi se stari dobri bootstrap i divovi sa klasama kao što je col-xs-6 col-sm-4 col-md-3 počinju da se pojavljuju u HTML-u. I čini se da je sve dobro i brzo, ali u ovom pristupu često postoje mnoge zamke. U ovom članku ćemo pogledati ove zamke i baciti trule rajčice na naš hak za rešetke bez problema.

Problemi Nestandardne mreže

Dakle, naš layout dizajner ima jako malo vremena, layout gori, sve treba da se uradi juče. Stoga on uzima popularni CSS framework bootstrap kao osnovu i započinje svoj rad. A onda, usred svog rada, iznenada naiđe na blok transparenta „5 u nizu“. Svako ko je radio sa bootstrap-om zna da je njegova zadana mreža 12-struka, tako da ne možete napraviti 5 stupaca za redom sa standardnom bootstrap mrežom. Da, naravno, možete sastaviti proizvoljnu mrežu u bootstrapu, ali ovo je gubljenje vremena, preuzimanje zavisnosti, prikupljanje manje (a mi, na primjer, pišemo u sass).

Možda povezati neku biblioteku za prilagođene mreže? Sve u svemu dobar izlaz, jedini nedostatak ovog pristupa je što su skoro svi dizajnirani ili za dugo i zamorno pisanje @media(min-width:)() , ili generiraju vlastiti skup klasa, sa gomilom vjerovatno nepotrebnih col15-xs- offset-3 , koji će biti uključen u konačni css.

Stoga će, s velikom vjerovatnoćom, dizajner izgleda jednostavno ručno napisati sve stilove (u principu, tu nema puno toga za pisanje).

Vrlo često standardnoj bootstrap mreži nedostaju dodatne tačke prekida, tj. postoje xs, sm, md, lg – sve do širine od 1200px. Šta je sa velikim monitorima? Neka tačka prekida xl na 1600px jednostavno traži da se koristi standardni set. Ali opet, toga nema, a nastaju ista rješenja kao u prethodni paragraf. Ali kontrolne tačke može biti puno - 320, 360, 640, 768, 992, 1200, 1600, 1900..

Redundantnost i opširnost

I tu se postepeno približavamo sljedeći problem. Zamislite da trebate specificirati različite veličine bloka za svaku mrežu, tada ćete na kraju dobiti nešto poput ovoga:

Je li to previše? Dodajte ovdje moguće pull/push i vidljivo/skriveno i tada možete sigurno početi ludovati. Ali sve ove klase su napisane u css-u, zamislite koliko klasa treba biti napisano u css-u za sve kombinacije 60-struke mreže!

Odvajanje stilova od markupa

Svaki dizajner izgleda zna da su inline stilovi loši. Zašto onda pišemo stilove u markup klasama? col-xs-6 , visible-sm i ne daj Bože text-right - sve su to stilovi, a ako je potrebno napraviti izmjene u rasporedu koji je već postavljen, definitivno će nastati problem koji će imati dizajner izgleda da zamolite backend dizajnera da promijeni col-sm- 6 na col-sm-4.

Nadjačavanje nepotrebnih stilova

Često je cijeli CSS okvir uključen samo radi mreža i nekoliko malih funkcija, što naknadno rezultira pretjeranim resetiranjem stilova i duplom veličinom konačnog CSS-a. Na primjer, povezuje se cijeli bootstrap.min.css, a zatim se veselo i veselo uklanjaju sjene i zaobljeni uglovi .btn, .form-control i slično, uključujući :hover, :focus, :first-child . Kao rezultat toga, umjesto da pomogne, okvir počinje da se miješa. Da ne spominjemo često nepotrebne funkcije kao što je .glyphicon . Naravno, možete ponovo sastaviti bootstrap od onoga što vam je potrebno, ali opet je vrijeme.

Tuđi standardi i kodni stil

Recimo da je dizajner izgleda proučio BEM i počeo ga koristiti. Ali potreba za korištenjem bootstrapa diktira svoje izuzetke - u njemu se sve klase pišu crticom, ne slijedeći principe BEM-a. I ovdje se javlja problem izbora - ili se pomiriti sa zbrkom imena klasa (btn-block disabled component__btn component__btn_disabled), ili izbaciti bootstrap.

Zastarjele metode

Kao što znate, mreže u Bootstrapu 3 su bazirane na plutajućim vrijednostima. Ono što često stvara probleme, jedan od najčešćih su različite visine blokova, zbog čega se prelijepa rešetka „puca“. Prestanite koristiti float u druge svrhe, svi pretraživači koji ne podržavaju flexbox su gotovo izumrli!

Susy! - da li je ovo izlaz?

U potrazi za rješenjem za sve gore navedene probleme, obratio sam se prekrasnom grid frameworku Susy! Sveukupno vrlo dobro. Ali nisam imao dovoljno brzine, jer Susy! predložio je opisivanje stupaca za svaku tačku prekida posebno:

.col ( @media (min-width: 768px) ( @include galerija (4 od 12); ) @media (min-width: 1200px) ( @include galerija (3 od 12); ) )

To je Susy! pretpostavlja da ćete se sami nositi sa tačkama prekida. Takođe, Susy! ne piše display: flex for lines za vas, morate zapamtiti da ih sami napišete. Uvlake između stupaca u njemu su postavljene samo relativno (neće ih biti moguće postaviti fiksnim u pikselima). Također, nedavno je naučio flex, a prije toga je napravio mreže koristeći float i:nth-child() . Generalno, Susy! ovo je dobro, ali bih volio brzinu i lakoću opisivanja mreža za sve tačke prekida, kao što je bio slučaj sa bootstrapom.

Potraga za drugim grid sistemima takođe nije dala mnogo rezultata - svi ili prate susy putanju, zaboravljajući na tačke prekida, ili prate bootstrap putanju, obezbeđujući skup generisanih klasa za upravljanje mrežama u html-u!

Proizvodnja bicikala

Dakle, odlučeno je da napišemo nešto svoje, i kao rezultat je rođen fast-grid. Ona je, kao i Susy, izgrađena na drskosti. Koje su glavne prednosti koje pruža u odnosu na druga rješenja, posebno susy!? Prije svega, brzina zbog manje koda, uzmimo standardni primjer bootstrapa:

1 2

Koristeći brzu mrežu, takvu mrežu je vrlo lako opisati:

@import "~fast-grid/fast-grid"; .row ( @include grid-row(); ) .col ( @include grid-col(6 4 3 2); )

Hajdemo sada da prođemo kroz naše nedostatke i vidimo kako brza mreža rješava sve ove probleme.

Nestandardne mreže

@import "~fast-grid/fast-grid"; .cols ( $grid: (razmak: 5px); @include grid-row($grid); &__item ( @include grid-col(12 6 null (1 od 5), $grid); ) ) Treba vam vlastita postavljena tačka prekida - ov @import "~fast-grid/fast-grid"; .cols ( $grid: (prelomne tačke: (xxs: 0px, xs: 360px, sm: 640px, md: 960px, lg: 1200px, xl: 1600px), kolone: ​​60); @include grid-row($grid); &__item ( @include grid-col((xxs: 60, xs: 30, sm: 20, md: 15, lg: 12), $grid); ) ) Redundantnost i opširnost / Odvajanje stilova od markupa

fast-grid je mrežni okvir za upotrebu u css-u, a ne u html-u zasnovan na generisanim skupovima klasa. Ovo drži oznake odvojenim od stilova, što je korisno za buduću podršku. Ovo takođe eliminiše potrebu za generisanjem gomile pomoćnih klasa (.col-xs-push-4, itd.) koje se uglavnom ne koriste.

Nadjačavanje nepotrebnih stilova

Pošto je brza mreža skup mixina, ona sama ne generiše nikakva pravila u css-u. Stoga, ovdje nećete naići na činjenicu da okvir stilizira elemente na način koji vam nije potreban. I općenito, ovo su samo mreže, i ništa više.

Tuđi standardi i kodni stil

fast-grid su miksini koje trebate koristiti interno tvoj klase, sa nazivima koje sami preferirate. Da li vam se sviđa BEM? Nema problema!

Zastarjele metode

Zadani je flexbox, koji otvara puno mogućnosti i rješava probleme klasičnih float-a. Na primjer, možete lako promijeniti redoslijed kolona.

U primjeru ispod prikazujemo bočnu traku ispod glavnog sadržaja za mobilna verzija, i učinite to prvim blokom na velikim ekranima.

Naravno, ovo bi se moglo postići korištenjem povlačenja/guranja za plutanje, ali ovo je vrlo teško.

Zaključak

Generalno, zadatak postavljen za mene je završen - sada mi mreže više ne prave probleme, a raspored je brz i lak. Možete pročitati više o mogućnostima fast-grid-a u spremištu i pogledati primjere:

Da li još uvijek koristite bootstrap? Onda idemo do vas!

Tagovi:

• css
• sass
• grid

Dodaj oznake

Nastavljamo temu adaptivnog izgleda. Danas razgovaraćemo o jednom od tri stuba prilagodljivog rasporeda - fleksibilnom rasporedu zasnovanom na mreži. Druge dvije su fleksibilne slike.

Sredinom 20. vijeka grafički dizajneri popularizovao koncept tipografski, ili modularni, mrežasti- racionalan sistem kolona i redova u koje se mogu postaviti moduli sa sadržajem. Izgledalo je svježe i vrlo skladno.

kako god grafički dizajn i web dizajn su, kako kažu u Odesi, dva velike razlike. Ključni trenutak evo veličine stranice. U tipografiji je to fiksno, ali web stranica se može rastezati i skupljati ovisno o tome na čemu se gleda.

Za primjenu modularne mreže na web stranicu trebate koristiti jednostavna formula proporcionalnost:

cilj/kontekst=rezultat

Najlakši način za razumijevanje ove formule je jasan primjer. Recimo da imamo izgled web stranice u dvije kolone - dio sadržaja i bočna traka:

Pokrićemo ga gumom. Ali ovdje je problem: kako postaviti širinu oba bloka? Uostalom, ako to napišete u pikselima, onda oni više neće biti gumeni. To znači da trebate koristiti procente, a ne piksele. Ali izvinite, koje vrijednosti da napišem? Svejedno, od nečega treba krenuti.

Možete, naravno, procijeniti na oko: sadržaj zauzima otprilike 70% ukupne širine stranice, a bočna traka - 30%. Ali pravi dizajner izgleda nikada ništa ne pogađa na oko. Potrebna nam je tačna veličina.

Tome služi formula proporcionalnosti. Jednostavno uzimamo širinu unutrašnjih blokova i dijelimo je sa ukupnom širinom stranice. Ovdje je cijela stranica kontekst, a svaki od internih blokova, respektivno, je cilj iz gornje formule.

660 / 960 = 0,6875
300 / 960 = 0,3125

Ostaje samo da ove podatke pretvorimo u procente. Bez previše brige, samo pomerite zarez dva mesta udesno. Dobijamo:

68,75%
31,25%

To je tako jednostavno. Ipak, zakomplikujmo zadatak. Pretpostavimo da je naš sadržajni dio podijeljen na još dva nejednaka dijela. Na primjer, na lijevoj strani nalazi se uski stupac s datumom članka i dugmad za društvene mreže, koji se nalazi okomito, a desna kolona je široka i u njoj imamo tekst članka.

Iz dizajna izgleda znamo da je širina ove uske kolone 120 piksela, a široke 520. Kako ove brojeve pretvoriti u %? Ponovo primijenite formulu proporcija. Ali ovoga puta, kao kontekst, koristimo ne cijelu širinu stranice, već širinu bloka koji sadrži ove dvije kolone, odnosno širinu dijela sadržaja, a to je 660 piksela. podijeliti:

120 / 660 = 0,1818
520 / 660 = 0,7878

U procentima dobijamo 18,18% odnosno 78,78%.

Usput, u moderni fajlovi stilovi koji koriste prilagodljivi izgled, ispravni dizajneri izgleda dodaju slične proračune kao komentare. Radi bolje jasnoće. Ovako to obično izgleda:

Sadržaj (
širina: 68,75%; /* 660px / 960px */
}

Nadam se da sa ovim nema poteškoća. Idemo dalje!

Raspored zasnovan na mreži

Gore navedeni primjeri, naravno, još uvijek nisu mreža. Pa kakva mreža sa dvije kolone? Ova modularna mreža je dizajnirana da pomogne i dizajnerima i dizajnerima izgleda da kreiraju složene lokacije sa mnogo kolona i pojedinačnih blokova.

Zato je bila misa pogodne usluge i alate koji ovu metodu implementiraju lako i jednostavno. Na primjer, 960.gs. Ovdje ne možete samo vizualno proučiti princip označavanja na temelju modularne mreže, već i preuzeti predloške i koristiti ih.

U stvari, ovakvih usluga je sada desetka! Nazivaju se i okviri. Odaberite koji vam se najviše sviđa. Evo velikog izbora od 30 CSS okvira za responzivni web dizajn.

Čemu služe ove modularne rešetke?

Prije svega, modularne mreže su potrebne za vizualno organiziranje sadržaja na web stranici. Ovo nije samo estetski lijepo i ugodno oku korisnika, već i zgodno za same programere. Pogotovo ako je stranica zaista složena po strukturi i sadržaju.

Osim toga, takve modularne mreže je mnogo lakše napraviti prilagodljivim od nasumično razbacanih blokova različitih veličina.

I, naravno, brzina razvoja takvih stranica je mnogo veća. Ne morate se zavaravati i iznova izmišljati točak od nule. Sve što trebate učiniti je odabrati odgovarajući okvir i dizajnirati svoju web stranicu koristeći ga.

Nadam se da sada znate šta je prilagodljivi raspored zasnovan na modularnoj mreži.

Sljedeći put ćemo govoriti o fleksibilnim slikama adaptivni raspored. Veoma važna i kontroverzna tema. Takođe preporučujem da ga temeljno proučite kako ne biste upali u nevolje. Ostati u kontaktu! Još bolje, pretplatite se na bilten bloga Web Council-a.

U ovoj lekciji ćemo se pripremiti za izgled sajta koristeći PSD izgled, koristeći samo Grid sistem iz Bootstrap 4 okvira. Nakon što ste naučili ovu metodu rasporeda, spasili ste se od mogući problemi sa prilagodljivošću sajta, ovo je posebno dobro za početnike.

Prilagodljivost stranice kada je postavljena pomoću Bootstrap mreže je osigurana flexbox sistemima, podržanim od svih glavnih pretraživača, pa čak i Internet Explorera, počevši od IE9+. Za više ranije verzije Za razliku od IE 9, povezujemo skripte koje nam pomažu da ispravno prikažemo naš izgled.

I što je najvažnije, PSD izgled se u početku mora nacrtati uzimajući u obzir naknadni Bootstrap izgled. I tako, nema drugih razloga zašto ne rasporedite koristeći bootstrap grid, kako u svojim projektima tako i po narudžbi. Pokušaću da dam manje teorije, bez vode, a više prakse.

Priprema za izgled

Otvorite izgled u Photoshopu i uvjerite se da ima raspored od 12 stupaca duž smjernica i da su svi elementi dizajna poravnati sa smjernicama. Udaljenost između vanjskih vodilica je obično 1170 piksela.

Preuzmite na web stranici https://getbootstrap.com/ kompajlirani CSS i JS za laku integraciju u vaš projekat.

Kopiraj iz odjeljka Uvod / Početni predložak- predložak početne stranice i zalijepite ga u indeksnu HTML datoteku vašeg projekta. Napravili smo šablon za budući HTML dokument.

Da li da preuzmem bootstrap.min.css ili da koristim vezu do njega?

Vjeruje se da će se datoteka bootstrap.min.css brže učitavati jer se nalazi na nekoliko servera, a ne na vašem jednom serveru. To znači da će se stranica brže otvoriti. Ako ipak odlučite preuzeti ovu datoteku za sebe, tada navedite ispravnu putanju do mape s Bootstrap datotekama. U svakom slučaju, morate kreirati praznu CSS datoteku u koju ćete pisati svoje stilove.

Bitan! Vaša CSS datoteka u indeksnoj datoteci treba biti uključena niže od bootstrap.min.css.

Povezujemo fontove. U čemu se vidi koje fontove i ikone dizajner koristi u izgledu Photoshop program ili u ekstenziji za Chrome pretraživač– WhatFont.

Zašto su potrebna dva CSS fajla?

CSS datoteka bootstrap.min.css je biblioteka u koju ne morate ni ulaziti. Radimo samo sa jednom datotekom - main.css, ali moramo se pobrinuti da se nazivi novih klasa za vaš CSS fajl slučajno ne poklapaju sa onom "biblioteka".

U datoteci bootstrap.min.css stilovi za flexbox grid su već kreirani i medijski upiti su napisani, samo treba da registrujemo odgovarajuće klase u potrebnih blokova na HTML stranici. Nazivi klasa mogu se naći na stranici okvira u odjeljku Grid. Iskusni dizajneri izgleda za Bootstrap izgled povezuju dodatke (Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) sa uređivačem koda Sublime Text.

Razbijanje PSD izgleda u blokove

Vidimo da se sajt sastoji od 8 blokova: zaglavlja sa navigacionim menijem (nav), 6 sekcija (sekcija) i podnožja.

U odjeljcima (odjeljak: #services, #portfolio) pojavljuju se kolone koje ćemo rasporediti na osnovu glavne Bootstrap komponente - mreže.

Prvo ćemo napraviti HTML oznaku glavne strukture, dodaćemo detalje kako izgled bude napredovao.

U sljedećem dijelu ćemo započeti raspored, ali ne cijeli izgled, već njegove pojedinačne blokove. Budući da je cilj ovih lekcija pokazati početnicima kako uspješno kombinirati konvencionalni izgled rasporeda s Bootstrap rasporedom mreže.

Modularna mreža je poseban šablon prema kojem se gradi dizajn web stranice. U suštini, ovo je sistem za predstavljanje vizuelnih informacija posetiocu na osnovu pojedinačnih blokova koji se nazivaju moduli. Web stranica razvijena pomoću takvog predloška mnogo je lakša za čitanje i navigaciju.

Kako se mreža koristi

Modularna mreža se koristi za razvoj dizajna knjiga, vizitkarti, zaštitnih znakova, logotipa itd. Takođe je obavezno koristiti pri izradi web stranica. Pravilno napravljena mreža skladno komponuje okruženje za sve elemente resursa – grafičke i tekstualne. To čini mnogo lakšim da ih sve uklopite na stranicu i stvorite jasne granice između njih. Poređajući elemente na određeni način, svaki od njih možete učiniti uočljivim i istovremeno povezati sve informacije o samom sajtu.

Vrste modularnih mreža

Najčešća modularna mreža u dizajnu stranice je ćelija sa tri osnovne kolone. U ovom slučaju, zaglavlje i podnožje imaju širinu jednaku njihovoj veličini. Ovo standardna opcija Obično ga koriste amateri prilikom kreiranja web stranica. Ponekad se širina jedne ćelije povećava na račun širine druge.

Izrada druge verzije modularnih mreža - nestandardnih - moguća je samo za ljude koji se bave profesionalnim web dizajnom. U ovom slučaju, samo širina stupova i razmak između njih odvojeni elementi. Modularna mreža u dizajnu razne vrste izvori vijesti i online časopisi se obično razvijaju na sljedeći način:

Kreira se zaglavlje i podnožje. Naziv stranice treba da se nalazi ovdje, navigacijski meni, razne vrste video materijala.

Stranica je podijeljena u tri kolone. Štaviše, dva od njih imaju iste dimenzije. Treći stupac je vertikalnom linijom podijeljen na dva dijela. Tako dobijamo četiri sekcije (vesti, galerija fotografija, oglasni prostor, najnovije promene informacija na sajtu).

Modularna mreža za online trgovine različitih specijalizacija kreirana je nešto drugačije. U ovom slučaju, vrlo je važno osigurati laku navigaciju posjetiteljima. U ovom slučaju, elementi se grupišu na standardan i ujednačen način. Za svaki od objekata u mreži, a važna informacija karakterišući ga.

Lenjir u Photoshop editoru

Web stranice se kreiraju pomoću rasterskih ili vektorskih stranica. Vrlo je zgodno napraviti mrežu u njima. Da vidimo kako se to radi u popularni urednik Photoshop. Kreiranje modularne mreže u Photoshopu je vrlo jednostavno.

Da bi se lenjiri pojavili po obodu prozora radne slike, idite na stavku glavnog menija „Prikaz“ i kliknite na liniju „Lenjira“. U ovom uređivaču možete koristiti najviše različitih elemenata- sa podjelama u centimetrima, milimetrima, inčima ili pikselima. Da biste izvršili potrebna podešavanja, idite na stavku glavnog menija „Uredi“. Zatim odaberite redak "Postavke" (Preference) - "Jedinice i ravnala". Nakon toga će se pojaviti prozor u kojem možete promijeniti vrstu ravnala. U gornjem padajućem meniju odaberite centimetre, milimetre, piksele itd.

Međutim, obično kada rade u Photoshop editoru koriste malo drugačiji, jednostavniji metod. Za promjenu mjernih jedinica jednostavno kliknite na samo ravnalo u prozoru slike desni klik miševi. Nakon toga, u meniju koji se pojavi možete napraviti potrebna radnja. Obično se prilikom kreiranja web stranice koristi mreža piksela.

Photoshop Grid

Modularna mreža samog programa Photoshop postat će vidljiva nakon što odete na stavku glavnog izbornika "Prikaz" - "Prikaži" - "Mreža". Razmak između linija mreže može se podesiti. Da biste to učinili, izvršite naredbu "Uređivanje" - "Postavke" - "Vodice, mreža, isječci". Ovdje možete promijeniti ne samo korak između linija, već i njihovu boju. Koristeći ovu mrežu, biće apsolutno lako brzo i precizno postaviti sve objekte buduće lokacije na radno polje.

Rad sa kursorom

Modularna web mreža se kreira na ovaj način vrlo jednostavno. Kursor se drži linija tokom rada. Ovo može biti zgodno ako trebate napraviti blokove preciznih, specifičnih veličina. Ako se iz nekog razloga pokaže da ova funkcija nije potrebna, može se onemogućiti. Podrazumevano, ishodište mreže u Photoshopu se nalazi u gornjem levom uglu prozora. Po želji se može premjestiti na bilo koje drugo mjesto na platnu. Da biste to učinili, zadržite pokazivač iznad kvadrata ishodišta i jednostavno ga povucite dok držite tipku miša. Da biste vratili početnu tačku na njeno mjesto, dvaput kliknite na isti kvadrat u uglu.

Između ostalog, postoje razni dodaci za Photoshop editor koji kreiranje web stranice pomoću modularne mreže čine još praktičnijim. Preuzmite ih na mreži. Koristeći ove dodatke možete kreirati mreže sa određenim parametrima.

Mreža u CorelDrawu

Sada da vidimo kako napraviti modularnu mrežu vektorski uređivač CorelDraw. Ovdje je kreiran na isti način kao u Photoshopu. Njegova ikona se nalazi na gornji panel(oko u mreži). Nakon što kliknete na njega, možete učiniti sve neophodna podešavanja. Možete odabrati rastojanje između linija, promijeniti mjernu jedinicu itd. Oni razgraničavaju radno polje u prozoru slike u CorelDraw-u i pomoću vodiča. Mogu se učiniti vidljivim ili nevidljivim ako je potrebno.

Modularna mreža u dizajnu web stranice je temeljni element, čijem razvoju treba pristupiti s maksimalnom odgovornošću. Uostalom, udobnost njegovih posjetitelja, a time i vrijeme koje provode na njegovim stranicama, ovisi o tome koliko je resurs pravilno strukturiran.

Od autora: nažalost, mnogi moderni i spektakularni web dizajneri često zaboravljaju da bi rezultat njihovih aktivnosti trebala biti web stranica prilagođena korisniku, a ne prelep screenshot, pogodan samo za portfolio. U ovom članku sam formulirao zahtjeve koje je potrebno uzeti u obzir u procesu dizajniranja i dizajniranja web sučelja.

Modularna mreža u web dizajnu je osnovno rješenje koje ne samo da će poboljšati upotrebljivost stranice, već će i znatno olakšati život programerima.

Šta je modularna mreža?

Objasniću na primjeru koji vam je poznat. Otvorite bilo koju papirnatu knjigu. Vidite tekst koji se proteže po cijeloj širini stranice, isključujući margine? Dakle, ovdje imate tipičan raspored u jednoj koloni. Sada pogledajte časopis ili novine. U časopisu se informacije tradicionalno dijele na dvije kolone, a u novinama - na tri ili četiri, pa čak i više.

Općenito, web dizajn je naslijedio dosta različitih "trikova" od print dizajna. To uključuje principe rada sa fontovima, pravila kompozicije i module. Stranice sa vizit kartama i prezentacijske stranice mogu biti zadovoljne strukturom od jedne kolone, početne stranice - sa dvije kolone, složenije informacioni projekti bi, shodno tome, trebalo da imaju složeniji i promišljeniji raspored.

Modularna mreža u web dizajnu je jedinstveni raspored svih elemenata i blokova web stranice. Ovaj žičani okvir prolazi kroz sve web stranice i pomaže u stvaranju vizualnog reda na stranici.

Mreže mogu biti jednostavne ili složene, fiksne ili dinamičke, ali to nije bitno. Ako ste u procesu kreiranja web dizajna postavili određenu modularnu strukturu, molimo vas da je se držite od početka do posljednja stranica site.

Šta učiniti ako tokom crtanja interne stranice Imate li blokove ili elemente koji ne odgovaraju vašem okviru? Mrzim što vam ga razbijam, ali ovo je znak da vaša mreža nije dobra i da niste potrošili dovoljno vremena na dizajn.

Koje vrste mreža postoje?

Pogledajmo vrste mreža za web dizajn.

1. Blok mreža - grubo označavanje područja u blokove.

2. Stupasti - ima kolone u svojoj strukturi.

3. Modularno - sastoji se od linija koje se ukrštaju koje formiraju module.

4. Hijerarhijski - mreža sa intuitivnim postavljanjem blokova, bez ikakve logičke strukture.

Za razliku od print dizajna, mreža u web dizajnu može biti ne samo fiksna, već i dinamička. Na primjer, možete napraviti jedan ili više stupaca rasporeda rastezljivim, gumenim, postavljanjem njihove širine u postocima i fiksirati veličinu preostalih stupaca.

Moderne tendencije i pristupe u web razvoju

Naučite algoritam za brzi rast od nule u izgradnji web stranica

Mreža za web dizajn 960 Grid System (http://960.gs) ispunjava koncept „statičnog“ izgleda, a da biste kreirali „fluidni“, možete obratiti pažnju na mrežu Bootstrap framework-a (http:/ /getbootstrap.com/css/#grid ). Modularni okvir 960 GS dijeli web stranicu na 12, 16 i 24 kolone.

Kada razvijate „gumenu“ strukturu, ne zaboravite maksimalna širina ekran. Obično je ograničen na 1280 piksela. Ako ne uzmete u obzir maksimalna vrijednost u širinu, zatim po veliki monitori sadržaj stranice će biti jako rastegnut, što će negativno utjecati na njegovu percepciju.

Najpopularnija i najlakša za implementaciju je modularna mreža s dva stupca, čije se proporcije izračunavaju uzimajući u obzir sljedeće pretpostavke:

najčešća rezolucija ekrana je 1024x768;

širina izgleda ne bi trebala prelaziti 770 piksela tako da se traka za pomicanje ne pojavljuje pri dnu na ekranu rezolucije 800x600;

stupac koji obavlja funkcije informacioni modul, mora imati veću širinu od kolone koja je definirana kao navigacijski modul (meni).

Na osnovu ovoga, proporcija izgleda ovako: 200 piksela. + 550 px. ili 150 px. + 620 px.

IN veća kolona Trebalo bi da postavi navigacioni meni, u manji – katalog ili sadržaj.

Uzmimo za primjer mrežu web dizajna poznate web stranice. Sve BBC web stranice koriste univerzalni raspored kolona od 61 x 16 piksela, u skladu sa standardnim fotografijama i video zapisima brenda.

Kao što možete vidjeti na slici, BBC mreža je prilično fleksibilna i omogućava vam postavljanje bilo koje informacije: od ozbiljne analitike do vijesti iz zabave. Ova modularna mreža je poslovna kartica kompanije, jer je standardna za sve njene sajtove. Inače, ova stvar je sastavni dio smjernice “Global Experience Language”, ako nekoga zanima.

BBC programeri rado daju savjete o dizajniranju modularnih mreža u web dizajnu. Naravno, bicikl nisu izmislili za nas, ali mislim da će biti zanimljiv onima koji su tek počeli u karijeri web dizajnera.

1. Proces počinje određivanjem lokacija za blokove najviše hijerarhije. Zamišljamo sebe kao neku vrstu Sherlocka Holmesa - majstore dedukcije i slijedimo pravilo "Od opšteg ka specifičnom, od najvećeg do najmanjeg."

2. Spuštamo se na sljedeći nivo i postavljamo blokove koji slijede u hijerarhiji. Istovremeno, baziramo se na prioritetima sadržaja, da bismo odredili koje analiziramo očekivanja korisnika i identifikujemo svoja konkurentske prednosti.

3. Dakle, prvo razrađujemo cjelokupnu kompoziciju i najveće elemente. Zatim pojašnjavamo, finaliziramo i detaljiziramo. Da bismo to učinili, morat ćemo nacrtati niz grubih skica. Tek nakon detaljnog razvoja ideje o web stranici koristeći olovku i papir, konačno sjedamo za kompjuter.

4. Informacije distribuiramo u blokove i grupne sadržaje. Na primjer, na web stranici BBC-a gotovo svaka grupa sadržaja ima naslov, koji se ogleda u kategorijama navigacijskog menija. Naslovi blokova služe kao vizualna sidra koja vam omogućavaju da brzo skenirate web stranicu, a također vam pomažu da shvatite kojoj kategoriji materijala pripada određena vijest.

Ovaj pristup naširoko koriste i početnici i stručnjaci za web dizajn. Omogućava vam ne samo da uštedite mnogo vremena, već i da pronađete originalna rješenja složeni zadaci.

Dakle, na našem današnjem kursu mladi borac web dizajnera, pogledali smo koncept modularne mreže i karakteristike njene primjene. U suštini, ovo je svojevrsna vizuelna apstrakcija, uz pomoć koje sve elemente i blokove sadržaja postavljamo na prihvatljivu udaljenost jedni od drugih i na nivou prilagođenom korisniku. Modularnu mrežu možete vizualizirati koristeći poseban sloj sa slikom vodilica.

Na kraju, želio bih vas podsjetiti da je web dizajn stvaranje ne samo lijepog, već i praktičnog, pogodan sistem. Zato bi svaki web dizajner koji poštuje sebe trebao biti u stanju dizajnirati modularni navigacijski sistem, strukturirati informacije i razbiti ih u blokove. Zahvaljujući tome, korisnik će sa zadovoljstvom "surfati" vašom web lokacijom i lako uočiti njen sadržaj.

Pretplatite se na ažuriranja našeg bloga i dijelite vrijedne informacije sa prijateljima. Sretne modularne mreže svima i vidimo se sljedeći put!

Savremeni trendovi i pristupi u web razvoju

Naučite algoritam za brzi rast od nule u izgradnji web stranica