Jak ułatwić sobie życie, przy tworzeniu warstwy frontendowej aplikacji

Zaawansowane techniki modelarskie określane jako wheathering, pozwalają na uzyskanie modelu pojazdu, który wygląda niemal jak prawdziwy. Aby osiągnąć ten niesamowity efekt, trzeba jednak najpierw idealnie skleić model i prawidłowo go pomalować kilkoma warstwami farb. Efekty nakłada się na pojazd dopiero na sam koniec.
Podobną taktykę warto zastosować przy tworzeniu nowoczesnych stron WWW, jednak początkujący deweloperzy, przystępują do bardzo zaawansowanej stylizacji strony mimo tego, że „model nie został jeszcze sklejony”.

Tworzenie wyglądu i zachowania aplikacji, daje mnóstwo frajdy. Klient, któremu pokażemy ukończone, śliczne widoki, uzna, że jego program jest już na ukończeniu. Dzieje się tak nawet wtedy, gdy znacznie ważniejsze kwestie związane z działaniem programu (takie, jak na przykład logowanie), nie są jeszcze poprawnie obsłużone.
Wszyscy lubimy bajery graficzne, takie, jak animacje, mikrointerakcje czy efektownie wyglądające pop-upy i filmy w tłach (slidery nie, sliderów nie lubimy), jednak, nie powinniśmy zaczynać od nich, podczas tworzenia strony.
Adrian Bienias, w cyklu na temat tworzenia szablonów Wordpress, podkreślał, że należy działać zgodnie z szablonem „od ogółu do szczegółu”. Całkowicie się z tym zgadzam, ponieważ struktura poszczególnych elementów na stronie jest ważniejsza od bajerów.
Pracę z nową stroną, najlepiej jest zacząć od rozrysowania poszczególnych elementów z grubsza na zwykłej kartce papieru w kratkę. Gdy mamy taki szkic, możemy szybko wdrożyć szkielet strony i powielać struktury na wielu podobnych podstronach. Jeśli projekt jest bardziej rozbudowany, użyj narzędzia do tworzenia mockupów, takiego, jak UXPin. Nie jestem fanem projektowania strony w Photoshopie, ponieważ to narzędzie wymusza skupianie się na poszczególnych elementach strony, a nie uwzględnia, ich wzajemnych relacji. 

Warto na nich rozrysować sobie (nawet na papierze) poszczególne elementy strony, ze szczególnym uwzględnieniem ich szerokości na różnych rozdzielczościach ekranu. Podczas takiego mockupowania, pojawią się różne problemy z wyglądem strony i jej zachowaniem, które będzie trzeba rozwiązać. Są one znacznie ważniejsze, od problemów typu „jak ma wyglądać przycisk anulowania akcji”. Spójność wyglądu strony, powinna być priorytetem.
Zaprojektowany wcześniej wygląd podstron można stosunkowo szybko wdrożyć, używając Bootstrapa lub innego frameworka CSS, by przekonać się, jak takie rozwiązanie sprawdzi się w praktyce.

Co się dzieje, gdy zaczynamy od tworzenia strony od najmniej znaczących elementów?

Jeśli Twoim pierwszym krokiem przy tworzeniu strony, jest tworzenie animacji, mikrointerakcji czy poświęcanie godzin na prawidłowe ostylowanie buttonów, tracisz czas. Prawdopodobnie te elementy zmienią się z czasem, ponieważ nie będą pasowały do ogólnej koncepcji strony. Animacja na stronie pobierania wpisów, która jest Twoim oczkiem w głowie, może całkowicie wypaść z projektu, ponieważ klient zrezygnuje z tej podstrony. Kilkudniowe „dopieszczanie” elementów na stronie może nie mieć większego sensu, ponieważ ktoś może zaproponować ich całkowitą zmianę lub usunięcie z projektu.
Zamiast tego, lepiej jest poświęcić czas na ogólne omówienie działania strony i tego, co tak naprawdę będzie na niej potrzebne. Gdy zespół dojdzie do wniosku, że dana podstrona jest już wdrożona w miarę dobrze, warto skupić się na jej dodatkowej waloryzacji.
Dochodzi tutaj jeszcze jeden problem – wszelkiego typu „fajerwerki graficzne” będą spowalniały stronę. Co więcej, jeśli pracujesz nad stroną po 8 godzin dziennie, to animacje czy przemieszczające się slidery, będą Cię denerwować i powodować ból głowy. Z tego powodu, wolę ich używać raczej później.
Działanie od ogółu do szczegółu, pozwoli Ci zaoszczędzić czas i unikać rozczarowania, gdy Twoje pieczołowicie ostylowane elementy, nie pojawią się w końcowej wersji strony.