Dlaczego myślenie z wyprzedzeniem jest kluczowe w projektowaniu stron internetowych

Różnica między budowaniem świetnej strony internetowej a przeciętną zazwyczaj ustalana jest bardzo wcześnie. Często chodzi o to, by projektant stron internetowych malował swój projekt w wirtualny „róg”. W tym miejscu projekt staje się nieelastyczny i nie jest w stanie dostosować się do różnych przypadków użycia.

Zwykle dzieje się to w fazie prototypowania. Poświęcamy mnóstwo czasu i twórczej energii na pomysł, który wygląda niesamowicie. Nasi klienci mogą to pokochać tak samo jak my. Ale dopiero kiedy faktycznie zaczniemy go budować, zaczynamy w pełni rozumieć konsekwencje.

Makieta projektowa służy jako kompas dla naszych projektów stron internetowych. Jeśli nie będziemy myśleć z wyprzedzeniem o tym, czego wymagają pewne elementy, może to oznaczać utknięcie w złej sytuacji. Efektem końcowym jest strona, która musi dokonać poważnych kompromisów, aby działać na różnych urządzeniach i przeglądarkach. Może to negatywnie wpłynąć na dostępność, wydajność i przestrzeganie najlepszych praktyk.

Na szczęście pewne planowanie pomoże ci uniknąć niechlujnego procesu budowania. Przyjrzyjmy się kilku kluczowym elementom do rozważenia przed podzieleniem się swoimi pomysłami z klientem.

Jak elementy dostosowują się do różnych ekranów

Jest powód, dla którego tak wiele mówi się o podejściu „najpierw mobilność” do projektowania stron internetowych. Zasadniczo pozwala nam to zacząć od podstawowych elementów strony internetowej. Stamtąd możemy dodawać i ulepszać w miarę powiększania się rzutni.

Mimo to każdy z nas ma własne preferencje dotyczące budowania prototypów. Dla tych, którzy nadal korzystają z podejścia opartego na komputerze, ważne jest, aby zastanowić się, jak wszystkie te fantazyjne elementy projektu będą działać na telefonie.

Jeśli planujesz wdrożyć CSS Grid lub Flexbox, bardzo pomogą one w jak najlepszym wykorzystaniu dostępnej powierzchni ekranu. Ale inne elementy mogą wymagać więcej wysiłku, aby zacząć działać.

Na przykład duże suwaki mogą być bardzo trudne w użyciu na małych ekranach. Skomplikowane obrazy mogą nie mieć tak dużego wpływu, a tekst może przekraczać granice. Wydajność również może się opóźniać.

W takim przypadku być może będziesz musiał zdecydować, czy suwak w ogóle warto wyświetlać na urządzeniach mobilnych. A może można by go zrefaktorować, aby lepiej dostosować się do pracy we wszystkich sytuacjach.

Wpływ na dostępność

Projektowanie zaczyna się od doboru odpowiednich czcionek i kolorów. Oba są głęboko związane z marką i dostępnością.

Czcionki powinny być ostre i odpowiednio duże, aby były czytelne. Chociaż fantazyjne pismo i ozdobne czcionki mogą wyglądać pięknie, muszą być wystarczająco duże, aby można je było przeczytać i ograniczyć do użycia w nagłówkach. Jeśli te wymagania nie mogą być rozsądnie spełnione, najlepiej będzie je całkowicie usunąć z projektu.

Ponadto dużym problemem powinien być również kontrast kolorów. Kolory tła i pierwszego planu muszą osiągnąć akceptowalny współczynnik kontrastu, aby można je było uznać za dostępne. Poza tym to po prostu dobra praktyka.

Jeśli nie masz pewności co do swojej palety, skorzystaj z narzędzia online, aby określić jej przydatność. Czasami wystarczy niewielka korekta, aby przejść standardy WCAG AA.

Poza tymi dwoma elementami dobrze jest również mieć plan, w jaki sposób będziesz wyświetlać elementy, takie jak ikony. Czy są intuicyjne? Czy towarzyszyć im będzie tekst?

Kompatybilność wsteczna

Nie każda witryna musi być w pełni kompatybilna, powiedzmy, z Internet Explorerem 9. A starsze przeglądarki niekoniecznie powinny zniechęcać nas do korzystania z najnowszego CSS lub JavaScript. Ale należy pomyśleć o kompatybilności wstecznej.

Szczególnie niepokojące są elementy projektu, które sprawią, że strona internetowa będzie całkowicie bezużyteczna w starszym oprogramowaniu. Nawet jeśli dana przeglądarka stanowi niewielki procent użytkowników Twojej witryny, nadal pozostawia to pewne potencjalne konwersje na stole.

Warto zastanowić się, jaki wpływ na tych użytkowników będą miały decyzje projektowe. Dostępne rozwiązania awaryjne dla danej technologii mogą wystarczyć, aby wszystko wyglądało przyzwoite i użyteczne. Jeszcze lepsze jest to, że mogą być dość proste do wdrożenia.

Kiedyś od projektantów oczekiwano, że elementy będą wyglądały i działały dokładnie tak samo we wszystkich przeglądarkach. W dzisiejszych czasach może to być zbyt wiele. Dopóki użytkownik może nawigować i konsumować zawartość niektórych starszych programów, może to wystarczyć.

Scenariusze, które jeszcze się nie wydarzyły

Nawet najmniejsze strony internetowe będą musiały z czasem ewoluować. W miarę dodawania nowych rodzajów treści należy je uwzględnić w projekcie. Jeśli nie jesteś przygotowany, wdrożenie tych elementów może kolidować z tym, co już jest.

Pomyśl na przykład o dodaniu serii filmów. Chociaż proces dodawania tej treści może być dość łatwy – jak będzie pasować do już ustalonego wyglądu? Czy użyjesz domyślnego interfejsu przeglądarki, czy stworzysz coś pasującego do Twojej marki?

Chociaż nie zawsze możesz przewidzieć przyszłość, możesz zaplanować różne możliwości. Jest to część tego, co pozwala osiągnąć system projektowania. Ustawiając kilka domyślnych wytycznych od samego początku, łatwiej będzie Ci radzić sobie z przyszłymi dodatkami.

W rzeczywistości to, co projektujemy dzisiaj, prawdopodobnie zmieni się w przyszłości. Dlatego opłaca się być gotowym na taką ewentualność.

Budowanie tego dobrze za pierwszym razem

Stworzenie pierwszej makiety to znacznie więcej niż tylko sprawienie, by wszystko wyglądało dobrze. To nawet wykracza poza imponowanie klientom. Rzeczywiście, jest to ćwiczenie, które zmusza nas do spojrzenia na nasz projekt jako całość.

Estetyka musi być przyjemna dla oka. Ale projekt musi być również dostępny i dostosowywać się do różnych ekranów. Ponadto może być konieczne dostosowanie do różnych rodzajów treści w miarę rozwoju rzeczy.

Jeśli brzmi to przytłaczająco – weź głęboki oddech. Tutaj na ratunek może przyjść Twoje doświadczenie i wiedza. Odpowiednie narzędzia również mogą się włączyć.

Pomyśl o tym, co zadziałało (a co nie) w twoich poprzednich projektach. Poszukaj sposobów implementacji funkcji, które są odporne. Zrób to, a będziesz na dobrej drodze do udanego projektu!