4 съвета за проектиране на уебсайт, готов за 4K

Може да сте мигнали и да сте го пропуснали, но през последните няколко години имаше малка революция в резолюцията. Веднъж разглеждани като експериментална и авангардна технология, 4K екраните сега са нещо обичайно: в телевизионни екрани, компютърни монитори и дори смартфони.

С 4K, предлагащ четири пъти повече пиксели на инч, уеб дизайнерите трябва да се уверят, че техните уебсайтове изглеждат възможно най-добре на най-новите екрани. Разбира се, ако вече спазвате принципите на отзивчив уеб дизайн , което ще ви отведе по-голямата част от пътя, за да гарантирате, че уебсайтът ви изглежда добре навсякъде, където се гледа. Но освен това, има и четири области, на които особено трябва да обърнете внимание в ерата 4K ...



01. Използвайте мащабируема графика

Иконите, логата и други графики трябва да се създават като мащабируеми, а не растерни изображения



Иконите, логата и други графики трябва да се създават като мащабируеми, а не растерни изображения

За да изглежда вашият уебсайт добре на 4K екрани, трябва да използвате мащабируеми, а не растерни изображения, където е възможно.

С растерните формати (които включват jpegs, GIF и PNG файлове), всяко изображение съдържа фиксиран брой пиксели и така, тъй като те се увеличават по размер, те просто стават по-пикселирани и размазани. Мащабируемите формати, известни като SVG (мащабируема векторна графика), за разлика от тях се основават на геометрични фигури. Това означава, че колкото и големи да станат, те ще останат чисти и ясни.



Разбира се, все още трябва да използвате растерни формати за снимки. Което означава, че трябва да използвате медийни заявки, за да обслужвате версии с високи разделителни способности на вашите снимки на 4K и 5K Retina екрани и много по-малки версии с по-ниска разделителна способност за мобилни устройства, за да избегнете убиването на ефективността на вашия сайт при 3G и 4G връзки. (Ако работите с много изображения, заслужава да се отбележи това Photoshop CC ви позволява да експортирате едно изображение в множество размери едновременно.)

Логотата, чертежите, инструментите на потребителския интерфейс, бутоните и т.н., обаче, винаги трябва да се създават като SVG. Това може да се направи в софтуер като Adobe Illustrator, CorelDraw и Affinity Designer. За да научите повече за мащабируемата графика, прочетете нашата 10 златни правила за отзивчиви SVG .

02. Помислете за по-големи дисплеи

Уебсайтът на Ню Йорк Таймс, както е заснет от Джон Ябконски на голям монитор



Уебсайтът на Ню Йорк Таймс, както е заснет от Джон Ябконски на голям монитор

Когато мислите за това как ще изглежда вашият уебсайт в 4K, не забравяйте, че по-високите резолюции правят все по-популярни все по-големите и по-големи екрани.

Така че, макар че току-що сме свикнали с идеята нашите сайтове да се гледат на монитори с размери 1920x1080, сега трябва да помислим как ще изглеждат на дисплеи с ширина 2 560 пиксела. Много уебсайтове могат да бъдат трудни за четене на тези екрани, където текстът и съдържанието може да изглеждат свити и свити и преизпълнение с празно пространство.

Това отлична статия от Йон Ябконски на CSS Tricks разглежда техническите предизвикателства, които тези по-широки дисплеи представят, и предлага някои решения.

03. Use 4K video

Фондовите библиотеки като iStock на Getty Images могат да предоставят широк спектър от 4K кадри

Фондовите библиотеки като iStock на Getty Images могат да предоставят широк спектър от 4K кадри

Тъй като очите ни естествено реагират на движение по начин, с който неподвижните изображения не могат да се конкурират, видеото е популярен инструмент за привличане на вниманието на посетителите на уебсайта. Но независимо дали добавяте заглавка на видео, видео фон или стратегически видеоклипове към вашия сайт, в момента трябва да го обслужвате в 4K, за да не изглеждате тромав и старомоден на най-новите устройства.

В днешно време има много евтини и лесни начини за заснемане на 4K кадри с много от най-новите фотоапарати , POV спортни камери и смартфони предлагащи 4K възможности за снимане. Като алтернатива, ако нямате време или се нуждаете от нещо, което не бихте могли да застреляте, като кадри от дрон, повечето библиотеки на запасите вече имат масиви от 4K видео съдържание, което можете да изтеглите.

За повече информация относно използването на 4K видео вижте Какво означава новата вълна от 4K видео за дизайнерите .

04. Купете 4K монитор

Закупуването на монитор като Acer S277HK премахва всички предположения, за да гарантирате, че сайтът ви работи в 4K

Закупуването на монитор като Acer S277HK премахва всички предположения, за да гарантирате, че сайтът ви работи в 4K

В крайна сметка най-добрият начин да сте сигурни, че уебсайтовете ви ще изглеждат добре на 4K монитор е - да заявим очевидното - да закупите 4K монитор. Добрата новина е, че е възможно да се качите само за £ 250, въпреки че, както при всичко, получавате това, за което плащате.

поза 11 срещу поза про 11

Ще намерите актуална информация за най-новите монитори от нашия сестра сайт TechRadar тук , докато ако вашата работа включва 3D, графики за движение и / или видео редактиране, може да искате да проверите този обзор също.

Прочетете още: