Przyszedł czas na Sketcha! Tym razem narzędzie, które znam i o którym z pewnością również słyszeliście.
Mój stosunek do Sketcha zmienił się diametralnie na przestrzeni ostatniego roku. Najpierw ignorowałam, potem pod nosem naśmiewałam się z fanbojów zwiastujących bliski koniec panowania Photoshopa, by po kilku miesiącach podjąć decyzję o zakupie laptopa w oparciu o platformę (żeby móc ze Sketcha korzystać). Wciąż psychofanką nie jestem i daleko mi do biegania z proporczykiem z logo Sketcha, ale uważam, że to jeden z lepszych programów dedykowanych projektowaniu interfejsów, więc nie mógł się tu nie pojawić.
Niestety wciąż tylko na Maca
Największym problemem Sketcha jest dostępność jedynie na Maca. Niestety, ale wygląda na to, że twórcy narzędzia w najbliższym czasie nie planują stworzyć wersji windowsowej. Jeżeli nie jesteście posiadaczami Maca, to niestety, nie skorzystanie z tego programu. Chyba, że tak jak ja – przy okazji zmiany sprzętu, zdecydujecie się na zmianę platformy.
Pierwsze wrażenie
Wiele recenzji do tej pory opierałam na porównaniach do Sketcha, więc pewnie już to znacie. Interfejs dzielimy na cztery obszary
– środkowy – główny obszar roboczy (canvas),
– górny pasek narzędzi (toolbar),
– lewy pasek obsługi stron (czyli obszarów roboczych), grup i warstw
– prawy pasek właściwości.
Sketch oferuje sporo funkcji, zatem mamy możliwość dopasowania wyglądu interfejsu do własnych potrzeb, co dla mnie zawsze jest sporym udogodnieniem (głównie po to, by pozbyć się większości z pola widzenia).
Jedną z wygodniejszych funkcji jest dla mnie możliwość dzielenia projektu na strony. Na każdej ze stron mogę poukładać całą masę widoków, więc przy rozbudowanych projektach dużo łatwiej utrzymać porządek.
Symbole
Jeżeli projektowaliście do tej pory UI w Photoshopie, to wiecie jak upierdliwe bywa tworzenie dynamicznych elementów interfejsu – takich jak przyciski, które mają różną szerokość, zależną od tekstu. W CC trochę się to zmieniło i skorzystamy z bibliotek, które możemy tworzyć, ale wciąż jestem zdania, że w tym zakresie PSowi daleko od ideału. Tymczasem Sketch i jego symbole sprawiają, że praca na UI staje się bajką. Bajką nie dla samego bajeru, ale oszczędzającą mnóstwo czasu w momencie, kiedy projekt zawiera sporo powtarzalnych elementów.
No dobra, ale tak dokładniej, to o co chodzi? Symbole to takie obiekty inteligentne – elementy, które mają swój oryginał, a ich kopie możecie umieszczać w innych miejscach projektu. Kiedy zaktualizujecie oryginał, kopie również się zmieniają – no ale to znamy praktycznie z większości programów. To, co jednak bardzo wygodnie się obsługuje to dynamiczne rozmiary symboli, które mogą być zagnieżdżane. Łatwo zapanować nad zależnościami między poszczególnymi typami symboli, ich marginesami i rozmiarami.
Zobaczcie zresztą na ten krótki filmik:
film pochodzi ze strony: https://www.sketchapp.com/docs/symbols/editing-symbols/
Ogromny artykuł na temat symboli powstał zresztą na Smashing Magazine (https://www.smashingmagazine.com/2017/04/symbols-sketch/), gdzie zobaczycie przykłady użycia oraz poczytacie o dobrych praktykach używania symboli w Sketchu.
Edycja bitmap i wektorów
To, co z pewnością jest kolejnym plusem Sketcha to możliwość edytowania bitmap. Nie oszukujmy się – jest zdeeeeecydowanie uboższa niż w choćby Photoshopie czy Gimpie, ale to i tak krok do przodu w programach dedykowanych UI. Nic tylko czekać na rozszerzenie podstawowych funkcji zaznaczania, cięcia i kolorowania.
Edycja wektorów jest za to dla mnie czymś tak podstawowym, że nie wyobrażam sobie innej pracy (w przypadku interfejsu). W Sketchu pracujemy również na krzywych i jeżeli pracowaliście już na wektorach, to doskonale poradzicie sobie również tutaj. Ciekawym udogodnieniem są Bezier handles, które pomagają kontrolować edytowanie krzywych (a przynajmniej trochę łatwiej nad nimi zapanować). W prosty sposób stworzycie więc niestandardowe kształty, jak choćby zestawy ikon.
Obsługa gridów
W Sketchu dla każdej strony możemy przypisać gridy. Jeżeli robimy na jednej stronie smartfona, na drugiej desktop, to jest to fajne rozwiązanie. Jednak skorzystaniu z bardzo elastycznych gridów w Figmie, jestem zdania, że Sketch jest trochę do tyłu. Niemniej jednak w codziennej pracy, zwykle gridy powinny wystarczyć, zwłaszcza, że wspomagane są klasycznymi liniami pomocnicznymi i linijkami, które spotkacie w większości programów.
A oprócz tego?
W Sketchu mamy dodatkowo funkcję Cloud, gdzie po zapisaniu plików, będziemy mogli podzielić się nimi na przykład z klientem. Jeżeli potrzebujecie zatem zebrać feedback odnośnie poszczególnych ekranów, to może się okazać wygodnym narzędziem.
Sam proces pracy bardzo mi zresztą odpowiada. Mam wrażenie, że twórcy programu solidnie przyłożyli się do zadania, dzięki czemu stworzyli narzędzie cieszące się dużym uznaniem wśród projektantów UI.
Ułatwienie eksportu wybranych ekranów, proste zarządzanie stworzonymi stylami i symbolami, czy wbudowane szablony (templates) zawierające edytowalne elementy interfejsu w stylu Material Design to tylko garstka niespodzianek, które na Was czekają.
Czegoś jeszcze brakuje?
Spokojnie, pewnie jest od tego plugin. Sketch umożliwia instalację dodatkowych pluginów, które rozszerzają funkcje programu. Jeżeli czytaliście poprzednie recenzje UI Tools, to wiecie, że choćby Principle wypuścił plugin umożliwiający eksport projektu sketchowego do animacji interfejsu. Jest ich całkiem sporo, a rosnąca społeczność użytkowników tworzy kolejne udogodnienia. Z ciekawostek warto zerknąć na takie dodatki jak:
– Color Contrast Analyser, który pomoże w projektach zgodnych z WCAG;
– Send to Slack, RealtimeBoard Plugin czy Jira Cloud for Sketch, które pozwalają na sprawne wysyłanie projektów przez te kanały;
– 7 Columns Calendar Creator, który wygeneruje kalendarze (ten, kto je tworzył od zera, wie ile to dłubaniny),
– Avocode Sketch Plugin lub Zeplin, które pomogą nam w pracy z developerami
i wieeeeele innych
$99 rocznie lub… jednorazowo
Kupując Sketcha zapewniamy sobie roczne aktualizacje wersji w cenie, z których możemy korzystać dożywotnio. Co to oznacza? A to, że po roku, jeśli wyjdzie nowa aktualizacja, którą będziemy chcieli zainstalować, zmuszeni jesteśmy zapłacić kolejne 69 dolców za odnowienie licencji. Możemy też ją olać i pracować na nieaktualizowanym programie – kwestia wyboru. Warto jednak zwrócić uwagę, że wciąż to mniej niż opłata za samego Photoshopa w wersji CC – cenowo wypada więc bardzo atrakcyjnie. Jeżeli jesteście uczniami, studentami lub pracownikami uczelni możecie Sketcha dostać z 50% zniżką.
Podsumowując
Sketch jest jednym z lepszych narzędzi do projektowania UI, z których miałam okazję korzystać, o ile nie najlepszym. Poważną wadą jest ograniczenie względem platformy i czekam na wiadomość wieszczącą jednak stworzenie wersji pod PC. I choć teraz nie używam Sketcha zbyt często (ze względu na potrzebę dopasowania się oprogramowaniem do zespołu, z którym pracuję), niewątpliwie będę do niego wracać.
Z dotychczasowych narzędzi, w których miałam okazję pracować, Figma wydaje się być goniącym Sketcha konkurentem.
Zainteresowani Sketchem?
Jeżeli Sketch Was zaciekawił to gorąco zachęcam Was do zerknięcia na kurs eduweb.pl poświęcony właśnie Sketchowi. Nie tylko poznacie w nim obsługę interfejsu programu – który jest dość rozbudowany w porównaniu do poprzedników, ale również poznacie proces projektowania interfejsu aplikacji. Poza technikaliami, przyjrzycie się praktycznej pracy projektanta – dobieraniu kolorów, zbieraniu inspiracji, a także wybieraniu fontów do projektu.
