Sve što trebate znati o HD dizajnu
Ako već niste zabilježili, web će postati def. Od slike do pozadine do elemenata korisničkog sučelja, visoka razlučivost je novo normalno.
Sve je počelo s mrežama zaslona mrežnice i visoke rezolucije, ali pristup bržim vezama također je naglasio ovaj fenomen, pružajući veći pristup HD web lokacijama s bilo kojeg uređaja. Razmišljate li i dizajnirate u visokoj razlučivosti? Evo nekoliko stvari koje treba razmotriti.
Što je HD, stvarno?
Najčešći znak za HD je pojava mrežnice. Izradio popularan od strane Apple uređaja, izraz je postao sinonim za zaslone visoke definicije. To se odnosi na neke prilično specifične tehnologije za uređaje.
Paula Borowska za Designmodo ima jedan od najjednostavnijih za razumijevanje opisa:
- Piksel uređaja je najmanja prikazana fizička jedinica.
- Gustoća piksela je broj piksela prikazan u određenom prostoru.
- Rezolucija je broj piksela po cijeloj širini ili visini vidljivog prostora.
- Piksela po inču, poznata kao ppi ili dpi, odnosi se na broj piksela koji dobijete kada fizičku širinu zaslona podijelite s brojem prikazanih vodoravnih piksela.
- Visoki DPI gustoća je prikaza od 200 piksela po inču ili više.
Većina uređaja koje danas kupujete, od mobilnih telefona do tableta i prijenosnih računala, vjerojatno imaju zaslon visoke razlučivosti. (A stvarnost je da čak i ako imate uređaj bez HD zaslona, web mjesto visoke razlučivosti neće naštetiti.)
slike
Mjesto na kojem biste prvo željeli razmisliti o visokoj razlučivosti je kad su u pitanju slike. Prošli su dani spremanja svake slike širine 600 piksela pri 72 ppi. To jednostavno neće smanjiti na današnjim ekranima.
Osnovni standard za HD je 200 ppi. To je više nego dvostruko više nego što ste možda uštedjeli ranije. Dodajte činjenicu da se zasloni povećavaju s rastom 1920. do 1080. godine. Prema W3Schools.com, najčešći zasloni su od 1024 do 768 piksela ili više, a više od 30 posto korisnika radi na ekranu visoke razlučivosti.
Isto vrijedi i za male ekrane. Popularni uređaji poput iPhone 6 (401 ppi) i Samsung Galaxy S5 (577 ppi) također se mogu pohvaliti HD mogućnostima.
Pa kad su u pitanju slike, one moraju biti oštre. Nećete pobjeći nejasnim ili pikseliranim slikama. Ako spremite u staru "standardnu rezoluciju", vaš će dizajn izgledati ravno, dok će se slike visoke rezolucije činiti sjajnije. Loša strana korištenja ove vrste slike je brzina; veća kvaliteta jednaka je duljim vremenima opterećenja. Spremite što je moguće bliže specifikacijama i nemojte pretjerano preuzimati slikovne datoteke.
Zabavni trik: Razmislite o tome da ovdje koristite svoju prednost zamućenih slika ako ste zabrinuti zbog vremena učitavanja. Manje je podataka za čitanje, a možete uštedjeti malo manje i još uvijek dobiti željenu oštrinu od ostalih manjih elemenata visoke rezolucije.
Video
Video je neizostavni vizualni trend 2016. Čini se da se tamo gdje god se okrenete kreće akcija na početnim stranicama web stranice. Baš kao i kod slika, ona mora biti visoke kvalitete.
Za većinu dizajnera i web stranica to znači držati se prilično kratkog videa kako bi se spriječilo učitavanje štucanja. Drugi se odlučuju za dulje videozapise i odvlače korisnike od čekanja s animacijom za učitavanje. Video visoke kvalitete zahtijeva kvalitetno snimanje, kompresiju i uštedu.
Također je potrebno puno planiranja kada je u pitanju kako će se videozapis reproducirati i izgledati u dizajnu web mjesta. Na primjer, videozapis heroja preko cijelog zaslona treba snimiti vodoravno kako bi odgovarao zaslonu. Za jednostavniju upotrebu, jednostavni video uređivači pomoći će vam da podesite okvire prema omjeru; odaberite 16: 9 za osjećaj širokog zaslona ili 4: 3 za izgled više kvadrata.
Zabavni trik: Za postizanje visokih dramskih efekata koristite "još uvijek video". Evo ideje: Snimite nešto što je uglavnom statično sa samo malim pomakom u pozadini. Nabavit ćete cool korisničko iskustvo bez smanjivanja dizajna.
Ilustracije i pozadine
Kada su u pitanju ilustracije i pozadina, i HD je važan ovdje. Imajte na umu da je svaki detalj (ili nedostatak istih) vidljiv u prostoru visoke razlučivosti, pa ćete biti sigurni da svaki dio dizajna doprinosi ukupnoj estetici.
Kad su u pitanju ilustracije ili pozadine, detalji su važni. Usredotočite se na izradu dizajna koji je praktički piksela savršen, uklapa se u dizajn i ne raspada se ako je pomaknete prema gore ili dolje. Najlakši način za to je usredotočiti se na jednostavnost.
Iako se lako može zavući u stvaranje komplicirane ilustracije ili teksture pozadine, jednostavno je vjerojatno bolja opcija. Ako želite dodati više interesa, razmislite o tome da jedan mali animirani element učinite dizajnom ili ga začinite smjelijim bojama nego što to obično možete koristiti.
A tu je i tehnička komponenta: Morate koristiti skalabilni format slike tako da se sve zaista mjeri kako je planirano i u punom HD potencijalu.
Zabavni trik: Dodajte nagovještaj animacije pozadini na dugoj petlji. Posjetitelji brzog pregleda mogu ga propustiti, no mala će nagrada oduševiti ponovljene korisnike i one koji se drže dužeg vremenskog razdoblja.
Ikone i elementi
Kada su u pitanju svi ikoni i elementi korisničkog sučelja na vašoj web stranici, morate znati šest slova: SVG i CSS. I svi će ti elementi vjerojatno biti svrstani u jedan od ova dva tipa.
SVG ili skalabilna vektorska grafika ključni je vektor za web. Možete koristiti SVG za spremanje oblika, ikona i mnoštva drugih elemenata korisničkog sučelja. Slike čitaju moderni preglednici - postoje neki stariji koji ne rade (razgovaramo s nekolicinom vas koji rade na Internet Explorer-u) - kao tekst i prikazuju na isti način kao i HTML. Scott Murray na svom blogu ima prilično sjajan primer ako želite ući u grizu SVG.
CSS elementi čisti su kôd, a skalirat će se i stil oblikovanja. (Vjerojatno ne trebate crtati gumbe u Photoshopu i zalijepiti ih na svoje web mjesto.) W3Schools.com ima osnovni tutorial o stvaranju i korištenju CSS elemenata.
Evo stvari i za SVG i za CSS: Elementi se kreću s vaše web lokacije. To vam treba u odgovornom okviru. Ništa neće ubiti vaš dizajn web stranice visoke definicije brže od gomile piksela.
Zabavni trik: Ne morate izumiti kotač da biste pronašli sjajne SVG ili CSS elemente. Pogledajte ove SVG tipke iz Tympanusa ili CSS Generator gumba.
Zaključak
Visoka razlučivost razlikuje vašu web stranicu od svih koji to ne čine. Korisnici počinju očekivati HD doživljaj na svakom svom ekranu, od televizora do računala do telefona. Vaša web stranica mora ispuniti ta očekivanja.
Dobra vijest je da možete unijeti male promjene na putu do tamo. Obratite pažnju na svoje slike, videozapise i druge elemente korisničkog sučelja kako biste osigurali da prikazujete piksele i da je svaki vizualni prikaz neprimjetan i kvalitetan.
