Zamie艅 ten tekst na URL聽Webhooka

馃聽O perspektywie kodowania s艂贸w kilka. Co jest wa偶ne w zakodowaniu UI?

3 minuty
馃棑
19 luty
Maria
Gabrowska

Wiemy ju偶, jak wa偶na jest komunikacja z osobami odpowiedzialnymi za implementacj臋 naszych projekt贸w. Ale czy wiemy, co tak naprawd臋 jest dla nich istotne? Na co przede wszystkim zwracaj膮 uwag臋, gdy zaczynaj膮 prac臋 z prototypami i makietami UI? No i o tym s艂贸w kilka!

鈩癸笍 Przede wszystkim: dla programisty kluczowe s膮 aspekty zwi膮zane z efektywnym, skalowalnym i utrzymanym kodem (inaczej m贸wi膮c: aktualizowanym), oraz z optymalizacj膮 wydajno艣ci strony (to tzw. performance).

A w og贸le, wi臋cej o pracy jako programista frontend dowiesz si臋 wi臋cej z tego odcinka naszego podcastu. Te偶 warto tam zajrze膰!

Ok艂adka do blogposta: O Kodzie! Wa偶na jest czytelno艣膰 i czysta struktura projektu.

馃敘 O kodzie! 馃檹

Programi艣ci (programistki) zwracaj膮 uwag臋 na czytelno艣膰 i odpowiedni膮 struktur臋 kodu. U偶ywanie przyj臋tego nazewnictwa (sprawd藕 nasz 鉁 S艂owniczek designera 鉁), zachowanie modularno艣ci (czyli projekt strony jest jak matrioszka 鈥 baba w babie, boks w boksie, a o modu艂ach doczytasz w innym wpisie na naszym blogu: tutaj) oraz zastosowanie sprawdzonych wzorc贸w projektowych (navbar na g贸rze strony, stopka na dole, itepe, itede) pomaga w utrzymaniu kodu w dobrej kondycji.

W ko艅cu potem o higien臋 takiego kodu trzeba dba膰.

Co powinno by膰 wa偶ne dla designera: porz膮dek w projekcie 鈿狅笍. ****Odpowiednio grupujemy i nazywamy frame鈥檡, komponenty, wszystkie assety鈥 Jak my nie zagubimy si臋 w tych wszystkich elementach, to p贸艂 biedy. Jeszcze jest programist(k)a, kt贸ry p贸藕niej wchodzi w zupe艂nie obc膮 dla niego struktur臋, no i musi si臋 w niej po艂apa膰, coby wszystko dzia艂a艂o jak nale偶y.

馃暩锔 Pami臋tamy tutaj te偶 o odpowiednim gridzie. Siatki (gridy) s膮 jak szkielet strony. Pozwalaj膮 na elastyczno艣膰 w rozmieszczeniu element贸w, ale i nadanie im odpowiedniej struktury. Dla osoby odpowiedzialnej za zakodowanie projektu istotne s膮 te偶 wielko艣ci zastosowane w projekcie, czy 聽spacingi (odleg艂o艣ci) pomi臋dzy elementami. Dlatego te kwestie te偶 musz膮 by膰 sp贸jne.

馃憠 A co wi臋cej, dobrze udokumentowany kod u艂atwia wsp贸艂prac臋 z innymi kodziarzami. 馃 Stworzenie jasnej dokumentacji oraz przestrzeganie standard贸w (w tym wypadku wsp贸lnej pracy 馃) przyspiesza rozw贸j projektu stonks.

鈿掞笍 Kompatybilno艣膰

Programi艣ci (programistki) cz臋sto korzystaj膮 z dost臋pnych narz臋dzi i bibliotek open source, kt贸re s膮 rozwijane przez spo艂eczno艣膰 i posiadaj膮 stabiln膮 dokumentacj臋. Otwarty kod pozwala na wi臋ksz膮 reu偶ywalno艣膰, elastyczno艣膰, i dostosowanie do konkretnych potrzeb projekt贸w.

馃挕 Oczywi艣cie, programi艣ci (programistki) jako dobr膮 praktyk臋 przyjmuj膮 te偶 unikanie blokuj膮cych skrypt贸w. Wszystko po to, aby zoptymalizowa膰 艂adowanie zasob贸w, a tak偶e minimalizowa膰 ilo艣膰 niepotrzebnego kodu. A takim zewn臋trznym skryptem jest np. Google Fonts 鈥 艣wietny wyb贸r, ale jednak ma te偶 sw贸j udzia艂 w performance strony.

馃搱 Badanie i poprawa czas贸w 艂adowania strony to sta艂y proces, kt贸ry bardzo mocno przek艂ada si臋 nie tylko na do艣wiadczenie u偶ytkownik贸w, ale i efekty marketingowe (np. SEO, czyli pozycj臋 strony w wyszukiwarce, a nawet i dzia艂ania SEM, czyli p艂atne kampanie).

 Mobile first w UI: Projektuj interfejsy z my艣l膮 o urz膮dzeniach mobilnych, a nast臋pnie dostosowuj je do wi臋kszych ekran贸w. Zadbaj o prostot臋 i intuicyjno艣膰 nawigacji, aby u偶ytkownicy mogli z 艂atwo艣ci膮 korzysta膰 z aplikacji na smartfonach i tabletach.

Oczywi艣cie, wa偶ne jest te偶 utrzymanie kompatybilno艣ci kodu z r贸偶nymi przegl膮darkami i urz膮dzeniami. Unikamy rozwi膮za艅, kt贸re mog膮 generowa膰 problemy z obs艂ug膮. Oczywi艣cie kr贸luje nam te偶 podej艣cie mobile-first, a bardzo cz臋sto implementacja kodu rozpoczyna si臋 w艂a艣nie od tego widoku.

馃攣 Testowanie

Testowanie to fundament poprawno艣ci dzia艂ania kodu. Nie wiesz, czy co艣 dzia艂a, dop贸ki tego nie sprawdzisz na 偶ywca.

Testowanie jednostkowe pozwala sprawdza膰 poszczeg贸lne fragmenty kodu, podczas gdy testowanie funkcjonalne skupia si臋 na sprawdzaniu, czy ca艂o艣膰 systemu dzia艂a zgodnie z za艂o偶eniami.

Regularne i kompleksowe testy pomagaj膮 utrzyma膰 stabilno艣膰 systemu, nawet w miar臋 wprowadzania nowych funkcji czy poprawek. Oczywi艣cie, do takiego kodu te偶 prowadzi si臋 odpowiedni膮 dokumentacj臋, w kt贸rej odnotowuje si臋 komentarze i poprawki.

Naszym wsp贸lnym celem jest stworzenie strony, kt贸ra nie tylko wygl膮da 艣wietnie, ale tak偶e dzia艂a efektywnie i zgodnie z za艂o偶eniami projektowymi. Dlatego komunikacja to klucz! 馃攽

馃 Chcesz dowiedzie膰 si臋 wi臋cej o perspektywie kodowania?

Sprawd藕, czy nasz kurs, w pe艂ni po艣wi臋cony animacjom, protoypowaniu i interakcjom 鈥 Interaction聽Designer jest w sprzeda偶y. Czeka w nim na Ciebie specjalny modu艂 po艣wi臋cony wywiadowi z programist膮 frontend, kt贸ry omawia temat ciekawych makiet UI w Figmie ze swojej perspektywy 鈥 dos艂ownie.

A jak nie wiesz, czy prototypowanie i animacje s膮 dla Ciebie 鈥 zapisz si臋 na darmowe lekcje. Wystarczy, 偶e klikniesz ten link, a na Tw贸j adres e-mail pofrun膮 a偶 cztery, bardzo tre艣ciwe wideo-materia艂y.