8 błędów graficznych, których należy unikać w witrynie
Duże obrazy, galerie i ciężkie projekty fotograficzne to duży trend w projektowaniu stron internetowych. Aby maksymalnie wykorzystać tę estetykę, musisz się upewnić, że każdy obraz w witrynie pasuje do wyświetlacza i dobrze reprezentuje Twoją markę.
Projektanci popełniają wiele błędów, od problemów technicznych po jakość obrazu. Ale nie musisz wpaść w jedną z tych pułapek podczas pracy z obrazami witryny. W tym artykule przyjrzymy się błędom obrazu i ich poprawieniu lub całkowitemu uniknięciu. (Jako bonus w tym poście przedstawiamy kolekcję zabawnych i świetnych zdjęć od Śmierci do najnowszej kolekcji fotografii Stock.)
Błąd: przesyłanie ogromnych plików
Obrazy w pełnym rozmiarze są piękne (i konieczne), jeśli chodzi o zadania drukowania, ale mogą powodować problemy, jeśli chodzi o Internet. Duże obrazy ładują się powoli; długi czas ładowania powoduje opuszczenie witryny przez użytkowników.
Niestety wpadnięcie w pułapkę jest łatwe. Wiele programów zaplecza pozwala na przesyłanie dużych obrazów i jeśli nie zwracasz uwagi, możesz nawet nie wiedzieć, że pliki są przesyłane w niewiarygodnych rozmiarach. Różne obrazy do różnych zastosowań wymagają różnych specyfikacji obrazu. Sprawdź swoją markę lub przewodnik po witrynie, aby wiedzieć, jakie są wymiary wspólnych obszarów obrazu w Twojej witrynie.
Podczas myślenia o obrazach ważny jest również typ pliku. Proszę nie używać tiff dla sieci. Najpopularniejsze i użyteczne formaty plików to PNG (obrazy generowane komputerowo, takie jak wykresy lub logo lub gdy wymagana jest przezroczystość), JPG (zdjęcia) lub GIF (animacje).
Rozwiązanie: Prostym rozwiązaniem jest zmiana rozmiaru obrazów do rozmiaru ramki, w którym będzie wyświetlana w odpowiedniej rozdzielczości internetowej. Ale jest coś więcej. Zapisz każdy obraz w celu optymalnego wykorzystania w swojej witrynie i do udostępniania w serwisach społecznościowych. (Na przykład szerokość obrazu na Pinterest wynosi 600 pikseli; jeśli chcesz, aby obraz był udostępniany, powinien mieć taki rozmiar).
Błąd: Zapominanie o przycięciu
Podczas korzystania z ogromnych plików może zepsuć witrynę, podobnie jak korzystanie z pełnoekranowych obrazów ukrytych na ekranie. Kadrowanie pomaga zaprezentować efekty wizualne, które mają być widoczne dla użytkowników, poprzez utworzenie zdefiniowanego punktu centralnego, którego może nie być w przypadku obrazu pełnoekranowego.
Brak kadrowania obrazu może również stworzyć mniej niż dynamiczny stos obrazów, które mają te same kształty i proporcje. Używanie wielu upraw i interesujących kształtów do zdjęć może dodać wizualnej intrydze stronie internetowej.
Rozwiązanie: przed przesłaniem przytnij obrazy do odpowiedniego rozmiaru lub wymiaru, aby każdy obraz był renderowany zgodnie z potrzebami.
Błąd: zapomnienie o miniaturach
Istnieje wiele sposobów radzenia sobie z powiększaniem i zmienianiem rozmiaru miniatur. (Wiele z nich zależy od twoich możliwości zaplecza, więc nie będziemy argumentować zalet każdego z nich.) Musisz jednak pamiętać o aktualizacji i zwracaniu uwagi na najmniejsze obrazy w witrynie.
Zbyt często projektanci zapominają, że miniatury, podglądy obrazów i ulubione będą musiały zostać zaktualizowane o zmiany w treści witryny.
Drugi poważny błąd? Używanie słabego obrazu w rozmiarze miniatury, ponieważ jest tak duży, jak to tylko możliwe. Jeśli obraz jest zły, po prostu go nie używaj. Żaden obraz nie jest lepszy od słabego obrazu.
Rozwiązanie: pamiętaj, aby usunąć stare miniatury lub podglądy, gdy obrazy się zmienią i twój favicon jest aktualny.
Błąd: nieznane nazwy i metadane
Cyfrowe aparaty fotograficzne zapisują wiele informacji w różnych polach meta, które nie tłumaczą się w Internecie. Usuń te informacje ze zdjęć i zamień je na przydatne dane. Wyszukiwarki nie mogą odczytać zawartości obrazów, dlatego aby można je było przeszukiwać, muszą zawierać opisowe słowa w tytule, znacznikach i otaczającej treści.
Przykłady złych nazw obrazów:
- zdjęcie1.jpg
- DSCN00023.jpg
- okulary% i% watch.jpg
Znacznie lepsza nazwa obrazu zawiera kilka opisowych słów, takich jak glass-and-watch-and-plant.jpg. Oznaczenie tagu dla obrazu powinno zawierać podobny opis, na przykład „przedmioty na szkle, zegarku i roślinie”. (I pamiętaj, aby poprawnie przeliterować słowa.)
Rozwiązanie: Stosuj silne konwencje nazewnictwa dla wszystkich obrazów witryn i łącz obrazy z treściami odnoszącymi się do każdego obrazu. Nazwy obrazów powinny zawierać opisowe słowa oddzielone łącznikami.
Błąd: niewłaściwe skalowanie lub rozciąganie
Nic nie wygląda bardziej dziwnie niż osoba o rozciągniętej twarzy lub niepoprawnie wyskalowanym obrazie. Rozciąganie lub nieproporcjonalne skalowanie obrazów (które może być szczególnie częste, gdy nastąpi zmiana motywu lub zaplecza) jest nie do przyjęcia. Każdy obraz musi być skalowany w stosunku 1 do 1, w pionie i poziomie. Wszystko inne narusza integralność zdjęcia.
Rozwiązanie: Uważnie obserwuj wszystkie proporcje skalowania i okresowo kontroluj swoją witrynę.
Błąd: brak planowania wielu rozmiarów urządzeń
Responsywne ramy projektowe mają pewne implikacje dla obrazów. Zmiana kształtu lub rozmiaru w zależności od urządzenia lub orientacji sprawia, że ważne jest, aby dyktować sposób renderowania obrazów na różnych urządzeniach.
Jedną z najczęstszych praktyk jest użycie zapytań o media w celu zaplanowania tych zmian według urządzenia. CSS pozwala na stosowanie określonych stylów do obrazów w oparciu o wymiary ekranu i pomaga w renderowaniu obrazów bez „łamania” projektu.
Rozwiązanie: Używaj zapytań o media do responsywnych struktur i testuj renderowanie obrazów na wielu urządzeniach.
Błąd: ignorowanie ekranów siatkówki
Nie było tak dawno temu, że standardowy obraz o szerokości 600 pikseli przy 72 ppi był wszystkim, czego potrzebujesz do strony internetowej. Ale ekrany poprawiają się w tempie, w którym już tak nie jest.
W zależności od struktury każdy obraz może faktycznie zawierać wiele obrazów zapisanych dla różnych rozmiarów i rozdzielczości ekranu, w tym wyświetlaczy siatkówki. (Rozdzielczość wyświetlaczy siatkówki może się różnić w zależności od urządzenia, ale jest znacznie wyższa niż w przypadku standardowych wyświetlaczy).
Rozwiązanie: dołącz pliki i zapytania dotyczące multimediów, które są przeznaczone specjalnie dla wyświetlaczy siatkówki. (Sztuczki CSS mogą pomóc.)
Błąd: nadużywana lub ogólna sztuka
Kolekcje fotografii mogą być świetną szybką naprawą, ale mogą prowadzić do niezamierzonych konsekwencji. Zdjęcia, które są używane w zbyt wielu witrynach lub które mają ogólny wygląd i wygląd, nie utworzą obrazu, który nawiąże połączenie z użytkownikami. (Nie chcesz, aby Twoja witryna wyglądała tak, jak każda inna?)
Jeśli planujesz używać fotografii stockowej, rozważ obrazy, które możesz edytować lub pracować na ciekawe sposoby. Unikaj obrazów, które wyglądają jak rzeczy, które widziałeś w innych miejscach (sprawdź zdjęcia wszystkich konkurentów lub podobnych witryn).
Rozwiązanie: Zastanów się nad zatrudnieniem fotografa, aby stworzyć świetny plik obrazu odpowiedni dla Twojej witryny. Uwzględnij wizualizacje odnoszące się do Twojej firmy lub marki i odpowiednio odzwierciedlające witrynę.
Wniosek
Wybieranie i tworzenie obrazów dla projektu witryny internetowej może być jedną z najbardziej zabawnych części procesu projektowania. Uważaj na każdy obraz i piksel, aby upewnić się, że witryna działa poprawnie i zawiera obrazy, które zaangażują użytkowników.
Czy masz jakieś wskazówki dotyczące korzystania z obrazów w projektach witryn? Chcielibyśmy wiedzieć, jakie są. Udostępnij je w komentarzach.
