Mamy piątek, czas więc po raz kolejny zahaczyć nieco o tematy związane z poszukiwaniem pracy dzięki naszej współpracy z theprotocol.it. 

Dzisiaj skupimy się nie tyle na samym procesie poszukiwania, co na umiejętnościach, które można dość łatwo rozwinąć, a które z pewnością przydadzą się zarówno podczas rozmowy rekrutacyjnej, jak i później - po zdobyciu wymarzonej pracy jako UX/UI designer.

Nie jest żadną tajemnicą, że podstawą efektywnej współpracy między grafikiem, a programistą jest komunikacja. 

Niestety czasem zdaje się, że rozmawiamy w innych językach co sprawia, że wprowadzone uwagi i wytyczne nie zawsze wyglądają tak, jakbyśmy tego oczekiwali. Od tego już tylko krok do ciągłych poprawek, przepychanek i niepotrzebnej frustracji.

Co więc warto wiedzieć, aby taka komunikacja poszła sprawniej? 

Język angielski - podstawa branży IT

W dziedzinie projektowania graficznego język angielski może nie być aż tak kluczowy, ale jeśli rozważacie przekierowanie swojej kariery w stronę UX/UI, z pewnością zauważyliście, że opanowanie angielskiego otwiera sporo drzwi. 

Wynika to nie tylko z konieczności komunikacji z klientami, ale przede wszystkim z szerokiej dostępności materiałów edukacyjnych i oprogramowania dostępnych jedynie w języku angielskim. 

W programowaniu jest podobnie, a może i nieco “gorzej”, bo oprócz podstawowych materiałów i wiedzy, po angielsku dostępna jest zdecydowana większość dokumentacji.

W języku angielskim wyprowadzane są też wszystkie nowości i nawet jeśli używane są także w polskich artykułach czy materiałach, wciąż roi się w nich od zapożyczeń, bo nikt nie jest w stanie (i nie czuje się tyle kompetentny) aby zajmować się oficjalnym branżowym nazewnictwem. 

I tak kodując stronę korzystamy z częściej z “grida”, a nie z “siatki” i planujemy responsywne “break pointy” a nie “punkty łamania”. 

Oczywiście nazw tych można używać po prostu jako nazw własnych, nie analizując dokładniej ich znaczenia, znajomość angielskiego jednak bardzo pomoże zrozumieć wszystkie nowości i zapamiętać je znacznie szybciej, albo ich znaczenie po prostu wyłapać z kontekstu.

Podstawowa widza frontendowa

Innym “językiem” który warto poznać jest HTML i CSS. Im lepiej będziemy wiedzieć jak strona jest zbudowana, tym łatwiej będzie nam projektować tak, aby niepotrzebnie nie utrudniać frontendowcowi pracy. 

I oczywiście możecie powiedzieć, że nie chcecie i nie potrzebujecie uczyć się HTML i CSS od podstaw (i to oczywiście prawda!), dlatego zebrałam dla Was kilka pojęć, których poznanie powinno nieco ułatwić Wam komunikację nawet wtedy, gdy nie chcecie zagłębiać się w temat kodowania. 

Jednostki miary

Projektując grafikę najczęściej spotykamy się z pojęciem pikseli. Tworząc do druku pojawić mogą się też centymetry czy milimetry. Programista operuje jednak zupełnie innymi jednostkami, które z jednej strony są kompletną nowością, a z drugiej (odpowiednio wykorzystane) mogą nawet ułatwić Wam pracę.

• px (piksele) - piksele są podstawową jednostką używaną do pomiaru rozmiaru elementów na ekranie. Określają ilość punktów na ekranie komputera lub urządzenia mobilnego.
• rem - jednostka rem (root em) to jednostka względna, która odnosi się do rozmiaru czcionki elementu nadrzędnego (root). Dzięki temu, gdy korzystasz z rem, zmiany rozmiaru czcionki na poziomie nadrzędnym automatycznie wpływają na wszystkie elementy korzystające z tej jednostki. To świetne rozwiązanie dla wszelkiego rodzaju szablonów gdzie po zmianie fontu na taki, który “wypada mniejszy”, wystarczy zmienić wielkość fontu bazowego, a reszta “dopasuje się sama” (w dużym uproszczeniu).
• em: podobnie jak rem, em to jednostka względna, ale w odniesieniu do rozmiaru czcionki elementu, na którym jest zastosowana. Oznacza, że wielkość em zależy od wielkości czcionki elementu nadrzędnego. Em sprawdza się świetnie do określania interlinii (w HTML line-height), bo zamiast wartości w pikselach podać możemy wartość procentową - na przykład 1,2 dla 120%.

Odstępy

• padding - to odstęp pomiędzy zawartością elementu a jego granicą (obwódką). Jest to obszar wewnątrz elementu, który oddziela zawartość od jego krawędzi.
• margin - to odstęp pomiędzy zewnętrzną granicą elementu a jego sąsiadującymi elementami. Określa przestrzeń między elementem a jego otoczeniem.

Stany elementu

• Hover -  odnosi się do stanu, w którym użytkownik najedzie kursorem na interaktywny element strony, taki jak link lub przycisk. Stan hover jest aktywowany w momencie, gdy kursor znajduje się nad elementem, co umożliwia zastosowanie specjalnych stylów, efektów wizualnych lub interaktywności. 
• Active -  stan elementu, który jest aktywowany w momencie, gdy użytkownik wchodzi w interakcję z elementem, najczęściej poprzez jego kliknięcie lub naciśnięcie. 
• Focused - stan ten dotyczy elementów, na które skupiona jest uwaga użytkownika, najczęściej poprzez interakcję klawiaturą (na przykład za pomocą TAB czy strzałek). Stan „Focused” jest istotny dla dostępności, ponieważ pomaga użytkownikom z niepełnosprawnościami w nawigacji za pomocą klawiatury oraz dostarcza im informacji zwrotnej na temat aktualnie zaznaczonego obszaru.

Projektowanie responsywne

• Responsywny projekt - odnosi się do projektowania stron internetowych i aplikacji w taki sposób, aby dostosowywały się do różnych rozmiarów ekranów, zapewniając optymalne doświadczenie użytkownika zarówno na dużych monitorach, jak i na urządzeniach mobilnych.
• Skoki responsywne (responsive breakpoints) - to punkty, na których układ strony internetowej lub aplikacji ulega zmianie w celu dostosowania do rozmiaru ekranu. Takiemu dostosowaniu mogą podlegać poszczególne elementy strony jak i całe sekcje. 
• Mobile first / desktop first - to podejście do projektowania określające która wersja projektu jest wariantem “wyjściowym” z którego dziedziczą kolejne widoki. W metodologii mobile first wersja najmniejsza jest bazą i w kolejnych krokach elementy są zwiększane, w podejściu desktop first podchodzimy do tego odwrotnie. 
• Gęstość ekranu - to miara ilości pikseli zawartych na jednostkowym obszarze ekranu urządzenia. Wyraża się ją zazwyczaj w ilości pikseli na cal (PPI - piksele na cal). Im wyższa gęstość ekranu, tym więcej pikseli znajduje się na danym obszarze, co może wpływać na klarowność i jakość wyświetlanego obrazu. To szczególnie istotne, bo projektując pod konkretne urządzenia programista może potrzebować od projektanta plików o różnej wielkości.

Przede wszystkim empatia

Niezależnie jednak od tego jakie pojęcia znamy, a których nie rozumiemy najważniejsze jest to, aby wzajemnie się słuchać, dążyć do tego samego celu i starać się po prostu zrozumieć i uczyć się od siebie wzajemnie.

A jeśli chcecie wkręcić się w slang programistów jeszcze bardziej - sprawdźcie też słowniczek IT na stronie naszego partnera i artykuły na blog.the protocol.it.