4 tip til design af et 4K-klar websted

Du har måske blinket og savnet det, men der har været en smule revolution i opløsning de sidste par år. Engang set som en eksperimentel og banebrydende teknologi, er 4K-skærme nu almindelige: i tv-skærme, computerskærme og endda smartphones.

Da 4K tilbyder fire gange så mange pixels per tomme, skal webdesignere sørge for, at deres websteder ser så godt ud som de kan på de nyeste skærme. Selvfølgelig, hvis du allerede følger principperne for responsivt webdesign , der giver dig det meste af vejen for at sikre, at dit websted ser godt ud, uanset hvor det ses. Men ud over det er her fire områder, du især skal være opmærksom på i 4K-æraen ...



hvordan man opretter lave poly-modeller

01. Brug skalerbar grafik

Ikoner, logoer og anden grafik skal oprettes som skalerbare, ikke rasterbilleder



Ikoner, logoer og anden grafik skal oprettes som skalerbare, ikke rasterbilleder

For at dit websted skal se godt ud på 4K-skærme, skal du bruge skalerbare snarere end rasterbilleder, hvor det er muligt.

Med rasterformater (som inkluderer jpegs, GIF'er og PNG'er) indeholder hvert billede et fast antal pixels, og så når de øges i størrelse, bliver de bare mere pixelerede og slørede. Skalerbare formater, kendt som SVG (skalerbar vektorgrafik), er derimod baseret på geometriske former. Dette betyder, at uanset hvor store de bliver, forbliver de rene og klare.



Selvfølgelig skal du stadig bruge rasterformater til fotografier. Hvilket betyder, at du skal bruge medieforespørgsler til at levere high-res versioner af dine fotos til 4K- og 5K Retina-skærme og meget mindre versioner med lavere opløsning til mobile enheder for at undgå at dræbe dit websteds ydeevne på 3G- og 4G-forbindelser. (Hvis du arbejder med mange billeder, er det værd at bemærke det Photoshop CC lader dig eksportere et enkelt billede i flere størrelser samtidigt.)

Logoer, tegninger, brugergrænsefladesværktøjer, knapper osv. Skal dog altid oprettes som SVG'er. Dette kan gøres i software som Adobe Illustrator, CorelDraw og Affinity Designer. For at lære mere om skalerbar grafik, læs vores 10 gyldne regler for responsive SVG'er .

02. Overvej større skærme

New York Times-webstedet, som screengrabbed af Jon Yabkonski på en stor skærm



New York Times-webstedet, som screengrabbed af Jon Yabkonski på en stor skærm

Når du tænker på, hvordan dit websted vil se ud i 4K, skal du huske, at højere opløsninger gør større og større skærme mere populære.

Så selvom vi kun lige er vant til ideen om, at vores websteder bliver set på 1920x1080 skærme, er vi nu nødt til at tænke over, hvordan de vil se ud på skærme med en bredde på 2.560 pixels. Mange websteder kan være vanskelige at læse på disse skærme, hvor teksten og indholdet kan se indsnævret og krympet ned og en overflod af hvidt mellemrum.

Det her fremragende artikel af Jon Yabkonski på CSS Tricks adresserer de tekniske udfordringer, som disse bredere skærme præsenterer, og foreslår nogle løsninger.

Adobe Photoshop CC 2018 systemkrav

03. Brug 4K-video

Lagerbiblioteker som iStock af Getty Images kan levere en bred vifte af 4K-optagelser

Lagerbiblioteker som iStock af Getty Images kan levere en bred vifte af 4K-optagelser

Fordi vores øjne naturligt reagerer på bevægelse på en måde, som stillbilleder ikke kan konkurrere med, er video et populært værktøj til at få opmærksomhed fra besøgende på websitet. Uanset om du tilføjer et videohoved, en videobaggrund eller strategiske videoklip til dit websted, skal du lige nu tjene det i 4K for at undgå at se klodset og gammeldags ud på de nyeste enheder.

Der er mange billige og nemme måder at optage 4K-optagelser i dag med mange af de nyeste still-kameraer , POV-sportskameraer og smartphones tilbyder 4K optagefunktioner. Alternativt, hvis du ikke har tid eller har brug for noget, du ikke kunne skyde dig selv, såsom droneoptagelser, har de fleste lagerbiblioteker nu masser af 4K-videoindhold, som du kan downloade.

Få flere oplysninger om brug af 4K-video ved at tjekke ud Hvad den nye bølge af 4K-video betyder for designere .

04. Køb en 4K-skærm

At købe en skærm som Acer S277HK tager alt gættet ud af at sikre, at dit websted fungerer i 4K

At købe en skærm som Acer S277HK tager alt gættet ud af at sikre, at dit websted fungerer i 4K

I slutningen af ​​dagen er den bedste måde at være sikker på, at dine websteder ser godt ud på en 4K-skærm - for at sige det indlysende - at købe en 4K-skærm. Den gode nyhed er, at det er muligt at komme videre til så lidt som £ 250, selvom du som med alt får det, du betaler for.

Du finder en opdateret oversigt over de nyeste skærme fra vores søsterside TechRadar her , mens hvis dit arbejde involverer 3D, bevægelsesgrafik og / eller videoredigering, kan du måske tjekke ud denne sammenfatning også.

Læs mere: