Tehnologija izrade web stranica je vrlo svestran proces. Ali ipak, sve njegove faze mogu se podijeliti u dvije glavne komponente - funkcionalnu i vanjsku ljusku. Ili, kao što je uobičajeno među webmasterima, backend i front, odnosno end. Ljudi koji naručuju svoje web stranice u studijima web razvoja često naivno vjeruju da je vrijedno fokusiranja samo na funkcionalnost, a to je ispravna odluka. No, to vrijedi u vrlo rijetkim slučajevima, obično za početne projekte u fazi beta testiranja. U drugom grafičkom dizajnu i korisničkom sučelju samo se moraju prilagoditi standardima web razvoja i biti udobni.


Prvi kamen temeljac s kojim se suočava dizajner sučelja, ili dizajner, je širina izgleda stranice. Uostalom, za to je potrebno pretvoriti sučelja. Postoje potpuno intuitivna dva pristupa - izraditi zasebne izglede za svaku popularnu razlučivost zaslona ili stvoriti jednu verziju stranice za sve prikaze. I obje opcije će biti netočne, ali sve je u redu.

Standardna širina stranice u pikselima za runet

Do razvoja prilagodljivog rasporeda, masovni fenomen bio je razvoj stranice s širinom od tisuću piksela. Ta je brojka odabrana iz jednog jednostavnog razloga - tako da je mjesto postavljeno na bilo koji zaslon. A to ima svoju logiku, ali pretpostavimo da još uvijek osoba ima barem HD monitor na radnoj površini. U tom slučaju izgled će izgledati kao maleni pojas na sredini zaslona, ​​gdje je sve isječeno u jednu hrpu, ana stranama ogroman neiskorišten prostor. Sada pretpostavimo da je osoba došla na vašu web-lokaciju sa zaslonom od 800 piksela, au postavkama je potvrdni okvir "Prikaži punu verziju web-lokacije". U tom slučaju, web-lokacija će se također prikazati pogrešno jer se jednostavno ne drži zaslona.


Iz ovih razmatranja možemo zaključiti da nam fiksna širina za raspored nije baš prikladna i da trebamo tražiti drugi način. Analizirat ćemo ideju o zasebnom izgledu za svaku širinu zaslona.

Izgledi za sve prigode

Ako odlučite stvoriti raspored za sve veličine zaslona prisutnih na tržištu, tada će vaša stranica postati najjedinstvenija na Internetu. Danas je jednostavno nemoguće doprijeti do čitavog raspona uređaja, pokušavajući točno prilagoditi svaku opciju. Ali ako se usredotočite na najpopularniju razlučivost monitora i zaslona uređaja, onda ideja nije loša. Jedini minus su financijski troškovi. Uostalom, kada je dizajner sučelja, dizajner i monter će biti prisiljeni obavljati isti posao 5 ili 6 puta, projekt će koštati mnogo više nego što je u početku postavljen u proračunu. Stoga, hvalisanje velikog broja verzija pod različitim ekranima može biti kao stranice od jedne stranice, čija je svrha prodati jedan proizvod i biti siguran da je to dobro. Pa, ako nemate jednu od ovih odredišnih stranica, i web-stranicu s više stranica, trebali biste razmisliti dalje.

Najpopularnije stranice

Kompromis između dviju krajnosti je za izgradnju rasporedatri ili četiri veličine zaslona. Među njima nužno mora biti mobilni raspored. Ostatak treba prilagoditi malim, srednjim i velikim zaslonima radne površine. Kako odabrati širinu stranice? U nastavku ćete naći statistiku HotLog servisa za svibanj 2017., koja nam pokazuje distribuciju popularnosti različitih razlučivosti zaslona uređaja, kao i dinamiku promjene ovog pokazatelja.
Iz tablice možete saznati kako odrediti veličinu web-lokacije koju želite koristiti. Osim toga, možemo zaključiti da je danas najčešći format ekran 1366 za 768 bodova. Takvi ekrani su instalirani u proračun laptop, tako da njihova popularnost je prirodna. Sljedeća popularnost je Full HD monitor, koji je zlatni standard za videozapise, igre i, stoga, za izradu izgleda stranica. Sljedeća u tablici, vidimo razlučivost mobilnih uređaja 360 na 640 točaka, kao i razne varijante desktop i mobilnih zaslona nakon njega.

Dizajnirajte raspored

Dakle, nakon analize statistike, možemo zaključiti da optimalna širina stranice ima 4 varijacije:

Verzija za prijenosna računala širine 1366 piksela.

Full HD verzija.

Veličina zaslona širine 800 piksela za prikaz na malim stolnim monitorima.

Mobilna verzija web-lokacije je široka 360 piksela.

Pretpostavimo da smo odredili koji bi trebao koristiti veličinu generiranog izvora za web-lokaciju. Ali takav projekt će i dalje biti skup. Pogledajmo druge opcije, ovaj put bez fiksne širine.

Izrađujemo fleksibilan raspored

Postoji alternativni pristup, kada je podešavanje samo pod minimalnom veličinom zaslona, ​​a veličina samih stranica bit će postavljena kao postotak. Istovremeno se takvi elementi sučelja, izbornika, gumba i logotipa mogu postaviti u apsolutne vrijednosti, fokusirajući se na minimalnu veličinu širine zaslona u pikselima. Blokovi sadržaja, naprotiv, protežu se u skladu s određenim postocima od širine zaslona. Ovaj pristup vam omogućuje da prestanete percipirati veličinu web-mjesta kao ograničenje za dizajnera i talentiranog da tuku tu nijansu.

Što je zlatni odjeljak i kako ga primijeniti na izgled web stranice? Čak iu doba renesanse mnogi su arhitekti i umjetnici nastojali dati svojim djelima idealnu formu i proporciju. Odgovarajući na pitanje značenja takvog omjera, obratili su se kraljici svih znanosti - matematici. Od antike do danas izmišljen je udio, koji naše oko doživljava kao najprirodnije i najsofisticiranije, jer je svugdje u prirodi. Otkrivač formule za takav odnos bio je talentirani francuski arhitekt Fidium. On je izračunao da ako je veći dio omjera manje važan od cjeline vrijedi za veći, onda ovaj udio će izgledati najbolje. Ali to je slučaj ako želite podijeliti objekt asimetrično. Taj je postotak kasnije postao poznat kao "zlatni dio, koji još uvijek ne precjenjuje njegov značaj za svjetsku kulturnu povijest."

Povratak na web dizajn

Sve je vrlo jednostavno -Zlatni dio, možete dizajnirati stranice koje će biti što ugodnije ljudskom oku. Izračunavanjem formule zlatnog odjeljka, dobivamo iracionalan broj od 16180339887, ali za praktičnost možete upotrijebiti zaokruženu vrijednost od 162. To će značiti da blokovi naše stranice trebaju biti 62% i 38% cjeline, bez obzira na veličinu generiranog izvora za web-lokaciju koriste Primjer se može vidjeti u sljedećim shemama:

Koristiti nove tehnologije

Moderne tehnologije web-dizajna omogućuju precizno prenošenje dizajnerskog i dizajnerskog dizajna, tako da sada možete priuštiti primjenu više odvažnih ideja nego na početku internetskih tehnologija. Više ne treba mnogo da se razbije glava koja bi trebala biti veličina stranice. S pojavom takvih stvari kao što su blok adaptivni izgled, dinamički sadržaj i fontovi, razvoj stranice je postao ugodniji trenutak. Uostalom, takve tehnologije imaju manje ograničenja, iako još uvijek postoje. Ali kao što znate, ne bi bilo nikakvih ograničenja na umjetnost. Predlažemo vam da koristite jedan doista kreativan pristup dizajnu - zlatnom dijelu. Uz njegovu pomoć možete učinkovito i lijepo popuniti radni prostor, koju veličinu stranica niste stavili u svoje predloške.

Kako povećati radni prostor stranice

Vrlo je vjerojatno da nećete imati dovoljno prostora za smještaj svih elemenata sučelja u malom rasporedu. U tom slučaju morate početi razmišljati kreativno ili čak kreativnije nego prijeovoga. Možete osloboditi prostor na web-lokaciji skrivanjem navigacije u skočnom izborniku. Ovaj pristup je logičan za korištenje ne samo na mobilnim uređajima, već i na stolnim računalima. Uostalom, korisnik ne mora uvijek gledati na koje odjeljke na vašoj web-lokaciji je došao za sadržaj. A želja korisnika je da se poštuje. Primjer dobrog načina za skrivanje izbornika je sljedeći izgled (slika ispod). U gornjem kutu crvenog područja možete vidjeti križ, klik na koji će sakriti izbornik u maloj ikoni, ostavljajući korisnika sam sa sadržajem web stranice. Međutim, ako to ne učinite, možete ostaviti navigaciju koja će uvijek biti na vidiku. Ali možete napraviti prekrasan element dizajna, a ne samo popis popularnih linkova na web-lokaciji. Koristite intuitivne ikone uz ili čak tekstualne veze. To će također omogućiti vašoj web-lokaciji da učinkovitije koristi prostor zaslona na korisničkom uređaju.

Najbolja web stranica - prilagodljiva

Ako ne znate koji je raspored stranica, onda je za vas lako. Da biste uštedjeli na troškovima razvoja, a da pritom ne izgubite publiku zbog lošeg izgleda uređaja, koristite prilagodljiv dizajn. Adaptive je dizajn koji jednako dobro izgleda na različitim uređajima. Takav pristup omogućit će vašoj web-lokaciji da bude jasna i udobna čak i na prijenosnom računalu, iako na tabletu, čak i na pametnom telefonu. Ovaj efekt se postiže automatskom promjenom širine radnog prostoraekran. Koristeći prilagodljive stilske stranice web-mjesta, prihvaćate ispravno rješenje od mogućeg.