Nowa strona & wyzwanie z ikonami

Oto i jest—moja nowa strona. Poprzednia była w całości zakodowana ręcznie i choć podobał mi się jej minimalizm, to brak systemu zarządzania treścią (CMS, od angielskiego Control Management System) oraz konieczność edytowania indywidualnych plików HTML i CSS stały się po pewnym czasie zbyt męczące. Poza tym chciałam też mieć bloga, który byłby bardziej związany z projektowaniem niż mój osobisty blog z artykułami-esejami. Ponieważ jestem wielką fanką WordPressa, nie miałam wątpliwości, że będę chciała przenieść stronę właśnie tam, ale wyzwaniem było przeprojektować i dostosować ją do całkowicie nowej platformy.

Projekt układu strony był stosunkowo prosty, ponieważ w dużej mierze zrekonstruowałam styl poprzedniej. Pod względem kolorów niewiele też się zmieniło: jasnoszary stał się odrobinę jaśniejszy, a ciemnoszary pasek trochę ciemniejszy, podczas gdy różowy pozostał ten sam. Największym jednak wyzwaniem okazały się ikony. Początkowo bardzo chciałam umieścić ikony w pasku nawigacji i wykorzystywać je do nawigowania w części portfolio. Spędziłam dość dużo czasu, szukając informacji na temat sposobów uzyskania tego w WordPressie, ale problemem okazało się nie tyle zrobienie tego pod względem technicznym, ale kwestia użytkowania, tzn. znalezienie sposobu, by taka nawigacja była czytelna dla odbiorcy. Oglądałam wiele stron, które używają ikon do nawigacji, i przeczytałam kilka analiz zastosowania samych ikon versus ikon razem z tekstem. Na stronie AWWWARDS jest artykuł, który przedstawia 31 przykładów różnego rodzaju pasków nawigacji, z których kilka naprawdę mi się spodobało, chociażby na stronie projektanta Tima Roussilhe’a, czy trzy strony dedykowane napojom: piwa, wódki Mezcal Buen Viaje, oraz herbaty. Szybko spostrzegłam jednak, że większość tych stron ma oznaczenia tekstowe umieszczone obok ikon lub wysuwane w momencie najechania kursorem na ikonę. (Te, które miały ikony bez żadnych dodatkowych oznaczeń, zdaje się, że zostały przeprojektowane, ponieważ gdy klikałam na podane do nich linki, zostawałam przekierowana na strony, które w ogóle nie przypominały tych z zamieszczonych w artykule zdjęć.) Przy długich nazwach jak moje („graphic design for film”) oraz nawigacji w poziomie, opcja z wysuwanymi etykietkami nie zdałaby egzaminu. Gdyby mój pasek nawigacji był pionowy, dzięki czemu etykietki mogłyby się wysuwać w prawo czy lewo, może i byłoby to rozwiązanie, ale ja chciałam, by pasek pozostał poziomy.

Poza tymi przeszkodami natury technicznej, uświadomiłam sobie też, że ikony są dużo trudniejsze w zastosowaniu niż można by sądzić. W sieci znajduje się ogromna liczba artykułów i dyskusji między projektantami i developerami na rozmaitych forach o tym, czy i jak własnoręcznie zaprojektowane ikony można zastosować na stronie, by spełniały dobrze rolę w nawigacji. Wiele osób patrzy na ten problem z dużym sceptycyzmem. W artykule poświęconym użytkowości ikon, Aurora Bedford pisze że istnieje bardzo niewiele ikon, które są globalnie rozpoznawalne przez użytkowników. Ikona strony głównej, druku, lupa powiększająca służąca do szukania to niektóre przykłady. Poza nimi, większość ikon pozostaje mało czytelna, ponieważ każdy ma odmienne skojarzenia, zwłaszcza jeśli brać pod uwagę różne interfejsy. Nawet wszechobecna ikona hamburgera (trzy poziome, równolegle ułożone kreski) wciąż bywa błędnie interpretowana. Autor podkreśla, że ikonom zawsze powinien towarzyszyć opis słowny, który jest widoczny bez konieczności wykonania jakiejkolwiek czynności ze strony użytkownika. „Nie polegaj na efekcie najeżdżania myszką, by pokazać tekst: nie tylko podniesie to koszt interakcji, ale również będzie problemem w zastosowaniu na urządzeniach dotykowych.” Tak więc wszystkie te przykłady oryginalnych stron internetowych, które przykuły moją uwagę, były niestety przysłowiowym przerostem formy nad treścią.

W efekcie zdecydowałam się na nawigację słowną w pasku na górze, oraz tradycyjny system kategorii na stronie portfolio, a ikony znalazły zastosowanie jako dodatkowy element wizualny na pojedynczych stronach projektów portfolio, gdzie określają charakter danego projektu. Tak więc ikony filmu, sceny teatralnej, muzyki, sztuki i „życia” umieszczone zostały na szarym pasku po prawej stronie, tam gdzie pozostałe ikony („o mnie”, blog, opinie, FAQ, kontakt), ale to, czy odbiorca zrozumie ich znaczenie czy nie, nie ma żadnego wpływu na jego sprawność poruszania się po stronie. Same ikony też przeszły drobną metamorfozę—nie mają faktury. Na poprzedniej stronie, wszystkie ikony (włącznie ze strzałkami nawigacji) miały fakturę, dzięki czemu korespondowały wizualnie z fontem Cabin Sketch, którego użyłam obok PT Sans. Ale ponieważ zdecydowałam się nie używać go na nowej stronie, faktura na ikonach przestała mieć uzasadnienie.

A zatem: kilka zmian w wyglądzie ikon i tego, jak i gdzie są użyte, plus drobne zmiany kolorystyczne tła. Mam nadzieję, że się spodobają.