Wszystko, co musisz wiedzieć o projektowaniu HD
Jeśli jeszcze tego nie zauważyłeś, sieć będzie w wysokiej rozdzielczości. Od obrazów po tła i elementy interfejsu użytkownika, wysoka rozdzielczość to nowa norma.
Zaczęło się od niektórych ekranów siatkówki i wysokiej rozdzielczości, ale dostęp do szybszych połączeń również uwypuklił to zjawisko, zapewniając większy dostęp do stron HD z dowolnego urządzenia. Czy myślisz o projektowaniu w wysokiej rozdzielczości? Oto kilka rzeczy do rozważenia.
Co to jest HD, naprawdę?
Najczęstszym sygnałem dla HD jest termin wyświetlacz siatkówki. Popularny przez urządzenia Apple termin ten stał się synonimem ekranów o wysokiej rozdzielczości. Dotyczy to dość specyficznej technologii urządzeń.
Paula Borowska dla Designmodo ma jeden z najłatwiejszych do zrozumienia opisów:
- Piksel urządzenia to najmniejsza wyświetlana jednostka fizyczna.
- Gęstość pikseli to liczba pikseli wyświetlanych w danym obszarze.
- Rozdzielczość to liczba pikseli na całej szerokości lub wysokości widocznej przestrzeni.
- Liczba pikseli na cal, znana jako ppi lub dpi, odnosi się do liczby pikseli uzyskanych po podzieleniu fizycznej szerokości wyświetlacza przez liczbę wyświetlanych poziomych pikseli.
- Wysoka DPI to gęstość wyświetlania 200 pikseli na cal lub więcej.
Większość urządzeń, które dziś kupujesz, od telefonów komórkowych po tablety i laptopy, ma prawdopodobnie wyświetlacz o wysokiej rozdzielczości. (W rzeczywistości nawet jeśli masz urządzenie bez wyświetlacza HD, posiadanie witryny w wysokiej rozdzielczości nie zaszkodzi.)
Obrazy
Miejsce, w którym możesz najpierw pomyśleć o wysokiej rozdzielczości, to obrazy. Dni zapisywania każdego obrazu o szerokości 600 pikseli przy 72 ppi dobiegły końca. Tego po prostu nie da się wyciąć na dzisiejszych ekranach.
Podstawowy standard HD to 200 ppi. To ponad dwukrotnie więcej niż wcześniej. Dodaj fakt, że ekrany stają się coraz większe, a ich rozdzielczość 1920 na 1080 rośnie w szybkim tempie. Według W3Schools.com, najpopularniejsze ekrany mają rozdzielczość 1024 na 768 pikseli lub większą, a ponad 30 procent użytkowników pracuje na ekranie o wysokiej rozdzielczości.
To samo dotyczy również małych ekranów. Popularne urządzenia, takie jak iPhone 6 (401 ppi) i Samsung Galaxy S5 (577 ppi) również mają funkcję HD.
Więc jeśli chodzi o obrazy, muszą być ostre. Nie uciec od rozmytych lub pikselowanych obrazów. Zapisanie w starej „standardowej rozdzielczości” sprawi, że projekt będzie wyglądał płasko, a obrazy w wysokiej rozdzielczości będą wyglądały na bardziej dopracowane. Minusem korzystania z tego typu obrazów jest szybkość; wyższa jakość oznacza dłuższy czas ładowania. Zapisz tak blisko specyfikacji, jak to tylko możliwe i nie przesyłaj zbyt mocno plików graficznych.
Zabawna sztuczka: jeśli martwisz się czasem wczytywania, skorzystaj z trendu rozmycia obrazu na swoją korzyść. Jest mniej danych do odczytania i możesz zapisać trochę mniejszy i nadal uzyskać pożądaną ostrość z innych mniejszych elementów o wysokiej rozdzielczości.
Wideo
Wideo jest obowiązkowym trendem wizualnym 2016 roku. Wygląda na to, że wszędzie tam, gdzie się obracasz, na stronach internetowych jest ruch. Podobnie jak w przypadku obrazów, musi być wysokiej jakości.
Dla większości projektantów i stron internetowych oznacza to przyklejanie się do raczej krótkiej pętli wideo, aby zapobiec ładowaniu czkawki. Inni wybierają dłuższe filmy i odwracają uwagę użytkowników od czekania za pomocą animacji ładowania. Wideo wysokiej jakości wymaga wysokiej jakości nagrywania, kompresji i zapisywania.
Trzeba także dużo planowania, jeśli chodzi o to, jak wideo będzie odtwarzane i wyglądać w projekcie witryny. Na przykład film z pełnoekranowym bohaterem musi zostać nakręcony poziomo, aby zmieścił się na ekranie. Aby ułatwić obsługę, proste edytory wideo pomogą Ci dostosować klatki według proporcji; wybierz 16: 9, aby uzyskać efekt szerokoekranowy, lub 4: 3, aby uzyskać bardziej kwadratowy wygląd.
Zabawna sztuczka: użyj „nieruchomego wideo”, aby uzyskać wysoki efekt dramatyczny. Oto pomysł: sfilmuj coś, co jest w większości statyczne, z niewielkim ruchem w tle. Zyskasz fajne wrażenia użytkownika bez obciążania swojego projektu.
Ilustracje i tła
Jeśli chodzi o ilustracje i tła, HD ma tutaj również znaczenie. Pamiętaj, że każdy szczegół (lub jego brak) jest widoczny w przestrzeni wysokiej rozdzielczości, więc upewnij się, że każda część projektu przyczynia się do ogólnej estetyki.
W przypadku ilustracji lub tła ważne są szczegóły. Skoncentruj się na stworzeniu projektu, który jest praktycznie idealny pod względem pikseli, pasuje do projektu i nie rozpada się podczas skalowania w górę lub w dół. Najprostszym sposobem na to jest skupienie się na prostocie.
Chociaż łatwo jest wciągnąć Cię w tworzenie skomplikowanej ilustracji lub teksturowanego tła, proste jest prawdopodobnie lepszą opcją. Jeśli chcesz zwiększyć zainteresowanie, zastanów się nad włączeniem małego elementu animowanego do projektu lub urozmaicaj go odważniejszymi opcjami kolorów niż zwykle.
I jest jeszcze element techniczny: musisz użyć skalowalnego formatu obrazu, aby wszystko rzeczywiście skalowało się zgodnie z przeznaczeniem i do pełnego potencjału HD.
Zabawna sztuczka: dodaj cień animacji do tła na długiej pętli. Szybkie przeglądanie odwiedzających może przegapić, ale niewielka nagroda z pewnością zachwyci powtarzających się użytkowników i tych, którzy pozostaną na dłużej.
Ikony i elementy
Jeśli chodzi o wszystkie ikony i elementy interfejsu użytkownika w witrynie, musisz znać sześć liter: SVG i CSS. Wszystkie te elementy prawdopodobnie zostaną sklasyfikowane jako jeden z tych dwóch typów.
SVG, czyli skalowalna grafika wektorowa, jest niezbędnym wektorem dla sieci. Możesz użyć SVG do zapisywania kształtów, ikon i wielu innych elementów interfejsu użytkownika. Obrazy są odczytywane przez nowoczesne przeglądarki - niektóre starsze nie działają (rozmawiamy z kilkoma z was, którzy pracują w Internet Explorerze) - jako tekst i renderowane w bardzo podobny sposób jak HTML. Scott Murray ma całkiem niezły podkład na swoim blogu, jeśli chcesz dostać się do drobiazgowego SVG.
Elementy CSS są czystym kodem i będą skalowane i stylizowane wraz z projektem. (Prawdopodobnie nie musisz rysować przycisków w Photoshopie i wklejać ich do swojej witryny.) W3Schools.com ma podstawowy samouczek na temat tworzenia i używania elementów CSS.
Oto zarówno SVG, jak i CSS: elementy poruszają się wraz z twoją witryną. Właśnie tego potrzebujesz w responsywnych ramach. Nic nie zabije Twojej witryny w wysokiej rozdzielczości szybciej niż kilka pikselowanych przycisków.
Zabawna sztuczka: nie musisz wymyślać koła, aby znaleźć jakieś fajne elementy SVG lub CSS. Sprawdź te przyciski SVG od Tympanusa lub Generatora przycisków CSS.
Wniosek
Wysoka rozdzielczość odróżni Twoją witrynę od wszystkich, którzy tego nie robią. Użytkownicy zaczynają oczekiwać jakości HD na każdym ekranie, od telewizora po komputer i telefon. Twoja strona musi spełniać te oczekiwania.
Dobrą wiadomością jest to, że możesz wprowadzić niewielkie zmiany na drodze do osiągnięcia tego celu. Zwróć uwagę na swoje zdjęcia, filmy i inne elementy interfejsu użytkownika, aby zapewnić wyświetlanie pikseli, a każda grafika jest płynna i wysokiej jakości.
