W niniejszym artykule chciałbym pokazać na czym polega atomic design w praktyce i jak go wdrożyć. Zanim przejdziemy jednak do sedna, pokażę Ci, jak sprawdzić, ile stosujecie na swojej stronie unikalnych kolorów dla tekstu i tła, jaką ilość rozmiarów i rodzajów fontów używacie.

Jeśli interesuje Cię, jak poradzić sobie z problemem braku spójności albo po prostu chcesz zobaczyć, jak źle radzą sobie najgorętsze polskie serwisy, to czytaj dalej. Od tego ostatniego tematu zacznę swoją opowieść.

Na początek złe wieści

Lista przedstawiająca polskie popularne serwisy pod względem typowych problemów ze spójnością:

Pssst, serwis wp.pl ma takie błędy w CSSie, że nie da się sprawdzić 🙂

Jak widać, nawet najwięksi robią to tak samo źle jak ta parka poniżej 😉

Czy projektanci i frontend developerzy z tvn24 wiedzą, jakich mają używać kolorów? Czy czarny kolor dla tekstu to: #000, #333, #3e3e3e, #313131, #152539, #1b262c, #262626, #111, black (mają tego dużo więcej)? Po co tyle kolorów, wielkości i rodzin fontów? Czy naprawdę nikt tam nie wie o Object Oriented CSS (OOCSS), Scalable and Modular Architecture for CSS (SMACSS), Don’t Repeat Yourself CSS (DRY CSS), czy o Block, Element, Modifier (BEM)? Przecież aby zachować spójność wystarczy zdefiniować w jednym miejscu czarny kolor i potem się do niego odwoływać.

Nie piszę tego, żeby się pośmiać ludzi tam pracujących, tylko by zwrócić uwagę na problem, jakim jest brak zdefiniowanych styli. O korzyściach wynikających z zastosowania spójności pisałem w poprzednim artykule.

Zanim zaczniesz projektować

Proponuję, żebyś teraz przekonał się, ile Twoja firma ma niepotrzebnych styli. Skorzystaj z serwisu: cssstats.com.
Jeśli po obejrzeniu statystyk będziesz wyglądał tak…

…to warto zakasać rękawy i ujednolicić style!

Jak się do tego zabrać?

Potrzebny Ci plan!

1. Przede wszystkim omów temat w grupie osób decyzyjnych. Nie daj się zbyć: „Nie mamy na to czasu”. Brad Frost mówi, że nawet jeśli szef się nie zgodzi, to i tak trzeba to zrobić: lepiej prosić o wybaczenie, niż o zgodę. Wyznaczcie osobę, które będzie odpowiadała za spójność. Designer pewnie nie będzie zaskoczony 😉

2. Należy sporządzić listę kluczowych elementów interfejsu (interface inventory), zrobić printscreeny i wkleić je do dokumentu. Chodzi o elementy takie jak: przyciski, formularze, logo, itp. Przykładowy szablon takiej listy możesz ściągnąć klikając tutaj. Myślę, że będzie to dla Ciebie pomocne.

3. Po tym zrób zebranie ze wszystkimi osobami decyzyjnymi i przedstaw im problem. Warto, żebyście wspólnie ograniczyli liczbę kolorów do np. 10. Może znajdziecie 20 styli dla przycisków i uzgodnicie, że potrzebujecie tylko czterech, itp. Możecie pokazać też liczbę unikalnych kolorów, które zdobędziecie z serwisu cssstats.com, ale weźcie poprawkę, że nie wszyscy będą chcieli brać udział w decyzjach dotyczących wybrania konkretnego odcieni szarości dla inputów formularzy 😉 Pamiętajcie, by myśleć o użytkownikach, którzy nie chcą ładować napuchniętych plików CSS i gubić się w gąszczu różnych elementów. Ważne, aby takie spotkanie zakończyło się konkretnymi decyzjami i zgodą na dalsze prace.

4. Gdy projektant ma zgodę, może w końcu zabrać się za projektowanie Style guide, ujednolicając przy okazji elementy interfejsu, które znalazły się w „inwentarzu interfejsu”.

Czas na projektowanie – czyli żegnaj Photoshopie

Photoshop przez lata był moim ulubionym programem. Pamiętam, jak wiele lat temu pisałem artykuły i nagrywałem tutoriale dla magazynu „.psd”. Niestety, lata mijały, a Photoshop puchł o kolejne opcje, które niewiele wnosiły ciekawego dla UI Designerów. Wprowadzenie programu Sketch (nie mylić z dziwnym tworem Photoshop Sketch) rozwiązało wiele problemów przy projektowaniu i stało się powiewem świeżości. Sketch posiada bardzo dobry UX, ma wsparcie społeczności i dysponuje dużą ilością darmowych pluginów. Koszt Sketcha – $99 (za rok, o ile chcesz mieć aktualizacje). Poza tym świetnie sprawdza się z metodologią Atomic design.

Dla sporej części polskich projektantów, którzy są na dorobku (tak jak i ich pracodawcy), pewnie istotny będzie fakt, że Sketch jest tylko na Macbooki.

Atomowy design w Sketchu

Sketch w sam raz nadaje się do metodologii zaczerpniętej z Atomic Design. Program oferuje style graficzne i tekstowe, ale to, jak wiemy, ma także Photoshop.

Sketch posiada jednak możliwość tworzenia symboli i zagnieżdżonych symboli. Nic nie stoi na przeszkodzie, by tworzyć „reużywalne” komponenty. Szczególnie symbole są bardziej pomocne niż obiekty inteligentne używane w Photoshopie. Dodajmy jeszcze możliwość zmieniania wielkości modułów bez paskudnego rozciągania jak w przypadku Photoshopa i pozamiatane (wytłumaczę wszystko po kolei).

Pamiętajmy, że projektowanie style guide nie ma przebiegać powolutku, kroczek po kroczku od pierwszego poziomu atomów po piąty poziom stron. Pracując z tą metodologią możemy na raz wykorzystywać każdy z tych poziomów.

Liczy się styl, a nie fura

Zacznijmy od styli dla tekstów, a potem przejdziemy do styli dla elementów graficznych. Każdy tekst użyty w projekcie powinien mieć własny styl nadany przez designera. Łatwo to powiedzieć, ale specyfika pracy projektanta polega w dużym stopniu na generowaniu pomysłów, a te trzeba szybko wcielać w życie, bo mogą ulecieć. Poza tym nie sam designer decyduje, jak dany element ma wyglądać. Zmiany są chlebem powszednim projektanta. Designer powinien mieć czas na zrobienie porządku w pliku, gdy dostanie akcept na projekt, inaczej będzie powrót do bałaganu.

Frontendowiec i tak potem będzie musiał zdefiniować styl danego elementu w CSSie, więc designer również mógłby zwrócić na to uwagę. W Sketchu tworzenie nowego stylu jest bardzo proste, wystarczy zaznaczyć daną warstwę z tekstem i skorzystać z opcji Create New Style.

Rozbudowane projekty wymagają większej ilości odmian danego stylu. Mamy na przykład nagłówek pierwszego stopnia i jego odmiany: wycentrowany, do lewej, do prawej; kolory: szary lub w kontrze (czyli zazwyczaj będzie to biały kolor). Zwróćcie uwagę, że występuje tu głównie pierwszy poziom, czyli Atomy: kolor, wielkość, rodzina fontu itp. Atom po atomie buduje prostą molekułę, jaką jest np. styl naglówka H1.

Warto pogrupować style dla tekstów w następujące „kategorie”:
1. Headers
2. Subheaders
3. Body
4. Links
5. Buttons, itp.
Dla potrzeb dokumentu ze Style guide warto też stworzyć kategorię dotyczącą opisów, np. „0. Desc” lub „0. Spec”.

Aby uzyskać pogrupowanie styli, jak na obrazku powyżej, trzeba wstawić odpowiednio zmodyfikowaną nazwę, na zasadzie: nazwa, ukośnik (czyli “/”) oraz dalszy ciąg nazwy.
Przykładowo:
„1. HEADERS /

/ Desktop / Grey Left”.

Jakie atomy możemy tu zmieniać? Typeface, weight, kolor, rozmiar, wyrównanie, przezroczystość, line-height, spacing, a nawet takie bajery jak cień czy rozmycie.
Style dla tekstu bardzo przydają się do poziomu 4, czyli Templates. Zachęcam do zadbania o właściwą typografię, ułatwiajmy życie użytkownikom, niech teksty będą łatwe do przeczytania. Jest dużo więcej fontów niż Roboto, Open Sans i Lato.

Style dla elementów graficznych

Działanie jest zbliżone do styli dla tekstów. Tutaj mamy atomy takie jak: kolor wypełnienia, kolor obrysu, grubość obrysu, zaokrąglenie, cień (wewnętrzny i zewnętrzny), rozmycie, przezroczystość, opcje mieszania. Nie możemy tutaj skorzystać z szerokości, wysokości czy pozycjonowania.

Style graficzne są niezmiernie przydatne dla spójności ikonek, które przy dużych zespołach mnożą się jak króliki z tą różnicą, że nie są do siebie podobne.

Symbole

W Sketchu możesz dowolny element graficzny zmienić w Symbol i używać go potem wielokrotnie. Mamy więc molekuły i organizmy.
Tworzenie symboli jest bajecznie proste, wystarczy zaznaczyć warstwy, które chcemy by stały się danym symbolem. Warto od razu nazywać odpowiednio symbole grupując je w kategorie, np.:
1. Buttons / Primary / Fill Default
1. Buttons / Primary / Fill Hover
1. Buttons / Primary / Fill Disabled
1. Buttons / Primary / Outline Default
1. Buttons / Primary / Outline Hover
1. Buttons / Primary / Outline Disabled.

Pamiętaj, że jak zmienisz np. kolor przycisku, to zmieni się on na każdej stronie czy artboardzie, gdzie została użyta instancja tego symbolu.

Pamiętam, jak kiedyś pracując w Photoshopie, musiałem trzymać osobny plik z wszystkimi ikonkami, czy powtarzalnymi elementami, których używałem w apce mobilnej. Każda zmiana była kłopotliwa. Sketch robi to automatycznie, gromadzi wszystkie użyte w danym pliku symbole na jednej stronie nazwanej „Symbols”.

Przydatną funkcją jest możliwość zmieniania treści symbolu przy jednoczesnym pozostawieniu wszystkich styli graficznych i tekstowych (do niedawna tylko Sketch to potrafił, teraz ma to też Affinity Designer, który jest alternatywą dla posiadaczy Pecetów).

Poniżej na obrazku przykład dla molekuły w postaci przycisku (ale w praktyce mogą to być nawet organizmy jak rozbudowane formularze z wieloma inputami).

Jest to duże ułatwienie dla „reużywalnych” elementów – projektanci apek mobilnych na pewno docenią tę funkcję projektując np. „navigation bar”, który używają np. w 100 artboardach. Klient poprosi o zmianę koloru tła? Nie ma problemu!

Dodatkowo możesz zmienić rozmiar symbolu, jeśli zajdzie tylko taka potrzeba. Mało tego, można zagnieżdżać w symbolach inne symbole. Mając np. ikonkę samolotu mogę z jej wykorzystaniem przygotować bardziej rozbudowane ilustracje czy infografiki. Jeśli w którymś momencie uznam, że warto zmienić tę ikonkę na ładniejszą, to zmieniając w jednym miejscu ikonkę samolotu, zmiana zajdzie we wszystkich użytych miejscach.

Smart resizing

Sketch oferuje możliwość zmiany wielkości modułów w zależności od wielkości ekranu, na jaki dany projekt jest przeznaczony. Warto odnotować następujące opcje:
– Stretch
– Pin to corner
– Resize object
– Float in place

Stretch to jest to co robi obecnie Photoshop, czyli rozciąga się lub ściaśnia w sposób destrukcyjny dla zawartości. W Sketchu można przykładowo zaprojektować header strony z logo ustawionym 20px od lewej krawędzi, 20px od loga menu, a po prawej stronie dwa przyciski 20px od prawej krawędzi ekranu. Tworzymy z tych wszystkich elementów symbol. Następnie każdy element definiujemy jako „Pin to corner”. Od tej pory możemy ten symbol rozciągać na danym artboardzie (tablet, desktop) i nie będzie efektu Stretch.
Jest to bardzo przydatna funkcja, szczególnie dla tych, którzy muszą zaprojektować rozbudowaną tabelkę.

Kto projektował tabelki, ten wie, jaki to koszmar w Photoshopie.
Więcej o Smart resize na stronie.

Pages i Artboards

W Sketchu oprócz typowego panelu z warstwami znanego z programów chociażby ze stajni Adobe, znajdziecie także panel ze stronami, czyli Pages, do których możecie dodawać Artboardy. Mamy więc tu do czynienia z poziomami z atomic design zwanymi: „Templates” i „Pages”.

Pozwala to na dużą elastyczność i wiele wersji w lekkim pliku Sketcha. Przykładowo mój plik ze stylami, który zawiera ponad 80 stron z wieloma artboardami waży zaledwie 66 MB. W page o nazwie Homepage możemy mieć artboardy z makietami low-fi: „Wireframe Mobile” (pierwszy artboard z myślą o mobile first), „Wireframe Tablet”, „Wireframe Desktop”, a także makiety wysokiej jakości: „Mockup Mobile”, „Mockup Tablet”, „Mockup Desktop”. Kolejne strony powinny mieć ten sam schemat.

Szybki Style guide

Duże firmy potrzebują dokumentacji, więc warto zainwestować czas na dokładne stworzenie Style guide. Ale jeśli firma jest niewielka i zamiast wielu produktów ma tylko prostą stronę www?

Mając Sketcha nic nie stoi na przeszkodzie, żeby przygotować style „automagicznie”.
Można do tego skorzystać z pluginów takich, jak np. Craft ze stajni InVision.
Na podstawie projektu powstaną wszystkie użyte przez Was style dla tekstów, paleta kolorów, a także informacja o wykorzystanych w projekcie fontach – nawet jeśli ich nie zdefiniowaliście w dokumencie!

Zaletą tego pluginu jest to, że można w prosty sposób wymienić dany styl na inny. Możemy np. łatwo zmienić w całym pliku za jednym razem font. Wystarczy zaznaczyć dany styl dla tekstu (powiedzmy, że Comic Sans z jakiegoś powodu przestał być trendy w oczach szefa), zmienić font na inny (np. na Roboto), a na końcu wcisnąć przycisk „Sync Styles”.

Alternatywą dla Crafta jest Style Inventory.

Natomiast, jeśli masz kilkuosobowy zespół projektantów, to możecie skorzystać z ciekawie zapowiadajacej się platformy dla designerów.
Jeśli chcemy mieć tylko palety kolorów do importu i eksportu to możemy użyć tego pluginu.

Po zaprojektowaniu Style guide

Bądźmy szczerzy – po zaprojektowaniu style guides czekają Cię zaszczyty i sława. Kobiety bardzo lubią, gdy mężczyzna ma styl. Zobacz jak się ucieszyła szefowa tego młodego designera:

Na koniec kilka porad

Zaczynając nowy projekt skorzystaj ze styli (dla tekstowych i graficznych), które posiadasz z innego projektu i dostosuj je, aby były „szyte na miarę”. W Sketchu możecie skorzystać z opcji File>New From Template>Webdesign.

Możesz też posiłkować się jakimś UI Kitem, który zawiera w sobie wiele graficznych elementów. Rzadko jednak w darmowych źródłach znajdziesz gotowe style. Ostatnio designerzy pracujący dla FB udostępnili plik z GUI do iOS 10 i kwestię styli w ogóle pominęli. Dla porównania projektant Tushar Merwanji podszedł do sprawy bardziej profesjonalnie niż cały zespól designerów Facebooka i udostępnił iOS 10 zwracając uwagę na style.

Przy tej okazji aż się prosi, żeby skierować parę słów w kierunku naszych projektantów – nie bądźcie zakompleksieni względem projektantów z innych państw. Designerzy pacujący dla Googla czy dla innych wielkich firm nie są bardziej uzdolnieni czy pracowici od Was. To są ludzie tacy jak Wy. Po prostu urodzili się w innym miejscu niż wy, bądź odważyli się wyjechać np. do USA. Dlatego zachęcam Was, żebyście odważyli się wyjść ze swojego polskiego podwórka i otworzyli się na rynki zagraniczne. Wy też możecie zarabiać więcej 🙂

Style guide warto wersjonować, więc korzystanie z Gita (możesz użyć tego pluginu) czy chociażby z Dropboxa jest dobrym pomysłem. Jeśli kilka osób pracuje nad style guide to warto uaktualniać opis zmian, które na pewno będą z czasem zachodzić. Pamiętaj, że style guide musi żyć.

Gdy uaktualnisz plik poinformuj resztę zespołu o zmianach. Najlepiej dodać o tym informację także w dokumencie. Zobacz jak to robi np. Zespół zajmujący się Material Design dla Google.

I to tyle, wybaczcie proszę tak krótki tekst. Jeśli podobał Ci się artykuł podziel się nim na Facebooku 🙂