Dziś praktycznie – subiektywny przegląd narzędzi. Ten materiał dedykuję twórcom, którzy stoją właśnie przed stworzeniem swojego pierwszego portfolio UX (i nie tylko) i wysyłaniem go w rekrutacjach.
Własna strona www
Pytanie, które widzę czasami na grupach to – Czy portfolio musi przyjąć formę własnej strony internetowej? Według mnie własna strona nie jest konieczna, ale jest całkiem wygodnym wyborem, pod warunkiem, że będziemy potrafili nad nią zapanować.
Stronę można zrobić na kilka sposobów – zaczynając od tego, że po prostu ją zaprojektujemy, a potem zakodujemy. To wymaga oczywiście umiejętności kodowania, albo przynajmniej chęci i czasu, żeby się tego nauczyć. Możecie też zdecydować się na współpracę z kimś, kto wam to zaprogramuje. To jednak dodatkowy koszt, który trzeba wziąć pod uwagę i czas potrzebny na znalezienie odpowiedniej osoby.
Projekt i kod po naszej stronie
Na potrzeby portfolio (zwłaszcza UX), nie będziemy potrzebować żadnych szaleństw. Chyba, że taką macie koncepcję na swoją stronę – ale co do zasady, to będą teksty, obrazy, nawigacja, trochę linków. Do stworzenia tak prostej strony wystarczy Wam zwykły HTML i CSS. HTML i CSS to taka podstawa – pozwoli wam zapoznać się z tym w jaki sposób konstruuje się kod strony i jak to się w ogóle dzieje, że ta strona się wyświetla. To świetna okazja do zrozumienia jak pracują programiści (no w takim małym wycinku tego co robią). Nie wspominając o tym, że warto sobie tę wiedzę dopisać do CV – taka, nawet podstawowa znajomość, może pomóc w późniejszej pracy z programistami.
Ale kod to jedno. Trzeba jeszcze zrobić projekt. No i tu zaczynają się schody dla osób, które są mocne w projektowaniu koncepcji, architekturze informacji, badaniach, a niekoniecznie warstwie wizualnej (UI design). Jeżeli nie zadbacie o czytelność treści, dobry rozkład, wielkość dołączonych zdjęć czy wizualizacje, możecie łatwo zepsuć pierwsze wrażenie. Dlatego projektując portfolio koniecznie zadbajcie o nie tak, jak gdybyście projektowali coś dla klienta.
Mówi się, że najtrudniej projektuje się dla siebie i jestem tego idealnym przykładem. Nie wyobrażacie sobie ile razy siadałam do projektu nowej wersji bloga, swojego portfolio czy sklepu. Jeśli więc macie podobny problem i niespecjalnie lubicie zabierać się za projekty na własne potrzeby, to czeka was mozolna przeprawa z projektem graficznym i późniejszym wdrożeniem.
Podsumowując:
- Najbardziej czasochłonne z podejść, pozwalające jednocześnie na pełną kontrolę nad formą portfolio
- Ograniczające jeśli nie potrafimy jeszcze kodować
- Ograniczające jeśli nie czujemy się dobrze w projekcie warstwy wizualnej
- Trzeba pamiętać o kosztach hostingu – czyli miejscu, gdzie będziemy przechowywać odpłatnie pliki i domeny (choć ta nie jest koniecznością)
- Idealna okazja, żeby nauczyć się jak właściwie wdraża się prosty projekt ?
WordPress
Kolejnym rozwiązaniem jest zastosowanie jakiegoś systemu, na bazie, którego można postawić stronę. Tu świetnym przykładem jest WordPress, który ma ogromną społeczność, mnóstwo darmowych i płatnych szablonów i całą masę wtyczek. WordPress jako podstawa portfolio UX to w moim odczuciu przerost formy nad treścią – ale jeśli planujecie zakładać sklep lub prowadzić bloga, to taki WordPress może być bazą do strony, którą będziecie stopniowo rozbudowywać.
Zaletą WordPressa jest przede wszystkim ogromna społeczność skupiona wokół tego CMSa. Wiele kursów, które uczą jak robić własne sklepy i strony, opiera się właśnie o WordPressa. Jeśli zdecydujecie się na naukę tego narzędzia, znajdziecie masę dokładnie (i w prosty sposób) opisanych treści, video kursów i grup na FB, gdzie są grupy wsparcia. Do tego dochodzi całe mnóstwo szablonów – i tych zupełnie darmowych i tych, które można kupić. Potrafią mieć różnorodne style, układy treści oraz wbudowane buildery – czyli narzędzia pozwalające samodzielnie układać klocki i przestawiać typy treści (kolumny, zdjęcia, akapity teksty, nagłówki).
Podejścia w pracy z WordPressem mogą być dwa – albo zaczynacie od projektu graficznego i do niego tworzycie szablon lub znajdziecie szablon, który po prostu wam odpowiada i ewentualnie trochę go odpicujecie pod swoje potrzeby (zdecydowanie szybsze rozwiązanie).
Warto jednak pamiętać, że nieaktualizowany WordPress, jego wtyczki i szablony, potrafią szybko stać się celem ataku, więc nie jest idealnym rozwiązaniem. W dodatku – chyba nigdy nie widziałam szablonu, którego nie trzeba chociaż trochę poprawiać. Wybierając gotowy szablon zwróćcie uwagę jak wygląda w wersji mobilnej, czy kolumny tekstu nie są zbyt szerokie w wersji desktopowej, a fonty zbyt małe i jasne. Jeśli jednak odpowiednio o niego zadbacie, będzie służył wam dobrze i długo.
WordPress nie jest jedynym takim systemem, ale nie korzystałam z innych od wielu, wielu lat, więc nie mogę polecić nic konkretnego.
Przykładowe portfolio UX zrobione na WordPressie znajdziecie np. tutaj:
Podsumowując:
- Czasochłonność – choć WordPress ma sporą społeczność, przekopanie się przez kursy i treści wymaga sporo czasu
- Duża społeczność – łatwo znaleźć odpowiedź na pytania i sposoby rozwiązania problemów
- Tu również trzeba pamiętać o hostingu – czyli miejscu, gdzie będziemy przechowywać odpłatnie pliki oraz domenie (która nie jest konieczna)
- Po naszej stronie stoi też zadbanie o bezpieczeństwo i aktualizację (np. wtyczek)
- Podstawowa wiedza o HTML i CSS przydaje się przy drobnych zmianach w szablonach
- Idealna okazja, żeby nauczyć się jak właściwie wdraża się projekt ?
Współpraca z osobami od programowania
Oba powyższe przypadki można trochę uprościć i zatrudnić kogoś, kto przejmie zadanie wdrożenia projektu. Po naszej stronie zostaje wtedy głównie projekt graficzny i znalezienie odpowiedniej osoby.
Można obserwować teraz pewien trend, który do branży IT przyciąga wiele osób. I jak to w projektowaniu (i w sumie wszędzie) – znajdziecie osoby utalentowane, z pasją, które doskonale znają się na swojej robocie i takie, które tych umiejętności mają trochę mniej. To widać zwłaszcza przy stronach stawianych na WordPressie. Jeśli traficie na nieodpowiednią osobę, skończycie z prostą wizualnie stroną, pod którą jest cała masa wtyczek, zbędnego kodu i dziwnych sposobów obejścia problemów, które profesjonalne programistki i programiści załatwiliby w prostszy sposób. W efekcie lądujecie z ciężką, wolno ładującą się stroną, podatną na ataki.
Dlatego wybierając osobę do współpracy zwróćcie uwagę na dorobek (spytajcie o ostatnie realizacje i obejrzyjcie je min. na urządzeniach mobilnych) i sprawdźcie, czy w ogóle jesteście w stanie dogadać się z taką osobą. Bo to właśnie tej drugiej stronie powinno zależeć na dobrej komunikacji. Pamiętajcie też o umowie, w której dokładnie opisany będzie zakres działań, termin realizacji i jak wygląda (o ile jest) wsparcie po wdrożeniu – np. jeśli pojawią się jakieś błędy, czy zostaniecie przeszkoleni i co gdy chcielibyście dodać kolejne usprawnienia.
Gdzie szukać takich osób? Jest całkiem sporo grup na Facebooku, które zbierają specjalistki i specjalistów od programowania, tworzenia stron czy samego WordPressa. Ale zaczęłabym od starego, dobrego polecenia – być może ktoś ze znajomych już współpracował z takimi osobami i może kogoś polecić?
Podsumowując:
- Znalezienie właściwej osoby, wbrew pozorom jest dużym wyzwaniem
- Koniecznie zabezpieczcie się umową (powinno na niej zależeć obu stronom)
- Koszty – poza kosztami usługi, pamiętajcie, że tu także trzeba wziąć pod uwagę hosting i ewentualną domenę (za które płacimy co rok)
- Projekt graficzny wciąż jest po waszej stronie, choć są specjalistki i specjaliści, którym wystarczy makieta (bo świetnie czują się też w warstwie graficznej)
Kreatory stron
Jeśli chcemy mieć stronę, ale niekoniecznie chcemy zajmować się tym całym hostingiem, aktualizacjami i tym co za nią stoi, mamy jeszcze web buildery. To takie kreatory stron internetowych, które w większości przypadków polegają na wyklikiwaniu treści strony i jej układu (coś co można osiągnąć również w WordPressie). Tu spotkacie się z całą masą narzędzi, które potrafią znacznie różnić się między sobą. Wśród polecanych najczęściej traficie pewnie na Wix, Squarespace i Webflow (mają teraz dość intensywne kampanie reklamowe wśród projektantów z różnych stron świata).
Tak jak mają wielu przeciwników, tak znajdziecie grupy osób, które mówią wprost – te rozwiązania to przyszłość tworzenia stron internetowych. Czy tak faktycznie jest? Nie wiem i póki co, traktuję je jako ciekawostkę, testując jeden z nich – Webflow.
Kreatory to ukłon w stronę osób, które nie kodują i prawdopodobnie niespecjalnie mają ochotę się tym zająć. W kilku kliknięciach pozwalają postawić prosty serwis, a czasami dodać zaawansowane interakcje, animacje i inne bajery. Mogą mieć wbudowane CMSy czy systemy sklepowe – choć te najczęściej dostępne są za dodatkową opłatą. No i tu pojawia się jedna z wad – kreator pozwoli wam na tyle ile chce. Nie wszystkie będą dawały możliwość zintegrowania się z zewnętrznymi narzędziami, wklejaniem własnych kawałków kodu lub będą wymagać do tego dodatkowej zapłaty.
W tym scenariuszu wasza strona wisi na hostingu dostarczonym przez taki kreator (choć Webflow ma możliwość przeniesienia go na własny serwer), a to oznacza też pełną zależność (w kwestiach np. awarii czy polityki cenowej).
I choć powyższe akapity mogą brzmieć krytycznie – dla stworzenia prostego portfolio, zwłaszcza na początku swojej drogi, wydają się być idealne. Odchodzi wam bowiem z głowy cała masa decyzji i problemów, związana z budowaniem własnej strony od zera. Podstawowe opcje takich kreatorów są często dostępne za darmo, więc oprócz czasu, można oszczędzić tu trochę kasy.
Osoby tworzące swoje portfolio UX powinny zwłaszcza zerknąć w stronę UXfol.io – który, jak nazwa wskazuje, jest kreatorem dedykowanym UXom. Ma nawet kilka ciekawych rozwiązań, które mają przyspieszyć pracę nad stawianiem takiej strony.
Przykładowe portfolio UX tworzone na builderach:
- www.aurorashao.com (Webflow)
- www.moritzoesterlau.de (Webflow)
- www.jamiejchoi.com (Squarespace)
- www.chenkatherine.com (Squarespace)
- www.uxfol.io/izadpanah.mina (UXfol.io)
Więcej szczegółów znajdziecie na stronach poszczególnych serwisów:
Podsumowując:
- Są świetne jeśli mamy mało czasu, a chcemy postawić prostą stronę
- Mają coraz więcej zaawansowanych narzędzi (choć nierzadko dodatkowo płatnych)
- Zbierają wokół siebie sporą społeczność, co ułatwia znalezienie odpowiedzi czy instrukcji
- Warto przetestować kreator przed postawieniem tam strony (większość z nich ma swoje darmowe wersje)
- Jesteśmy ograniczeni tym, na co pozwoli nam taki kreator (lub za ile $ nam na to pozwoli)
- Są super proste w obsłudze i nie wymagają wiedzy związanej z kodowaniem (choć Webflow jest tu małym wyjątkiem)
Wireframing, czyli… narzędzia do prototypowania
Figma, Adobe XD, a nawet Axure – na co dzień wykorzystujemy te narzędzia, żeby stworzyć interaktywne prototypy do testów, czy zaprezentować projekt członkom zespołu. W ten sam sposób możemy zaprojektować sobie również portfolio, a potem… wygenerować link do dzielenia się. I jakkolwiek może brzmieć to dla was jako dziwne rozwiązanie, to w rekrutacjach natykam się na nie coraz częściej.
W najpopularniejszych narzędziach do projektowania UI i prototypowania, znajdziecie przecież podstawowe typy interakcji, możliwość podpięcia elementów do paska przeglądarki, a nawet zrobienie prostych animacji.
Minusy takiego rozwiązania? Wygenerowany kod prototypu ma mnóstwo śmieci – a to ma wpływ przede wszystkim na czas ładowania projektów. Decydując się na takie rozwiązanie raczej unikałabym bogatych animacji i prototypów złożonych z więcej niż kilkunastu artboardów. Do tego dochodzi również kwestia responsywności i tego jak projekt będzie zachowywał się po wejściu z telefonu.
Stworzenie prototypu własnego portfolio wydaje się jednak szybką robotą – zwłaszcza jeśli pracujecie już w którymś z tych programów. Pomocy możecie szukać także w społecznościach – np. Figma community dysponuje masą gotowych szablonów prezentacji, do których można podpiąć interakcje i przejścia między stronami.
Nie podoba Wam się długi, wygenerowany z programu link? Można skorzystać ze skracaczy linków, które przekierują klikające osoby w dokładnie to miejsce, które chcemy. Przykłady skracaczy to bitly.com, ujeb.se, tinyurl.com i podobne.
Podsumowując:
- kod nie jest zbyt dobrze zoptymalizowany co może wpływać na czas ładowania prototypu
- mały prób wejścia – jeśli już z jakiegoś narzędzia korzystacie, zrobienie w nim interaktywnego prototypu zajmie mało czasu
- mała elastyczność – większość popularnych narzędzi pozwoli na podstawowe typy interakcji
- kwestie responsywnosci i dostępności mogą być poza naszym zasięgiem
Behance i inne serwisy dla projektantów
Behance powstał głównie na potrzeby prezentacji projektów graficznych – znajdziecie tu mnóstwo wspaniałych projektantek i projektantów graficznych, osoby zajmujące się brandingiem, ilustracją, wizualizacjami 3D. I takie wizualne projekty są zdecydowaną większością zasobów tego serwisu. Ale od jakiegoś czasu, pojawiają się tu portfolio agencji UX, software housów i freelancerów, którzy specjalizują się w projektowaniu interfejsów.
Powstała również kategoria Projekty UI/UX i nikogo nie dziwi już fakt, że Behance stał się dla wielu osób głównym portfolio. Niech nie zmylą was projekty, które składają się wyłącznie z wizualizacji, bo to co znajdzie się na takiej stronie, zależy przede wszystkim od was. Nie szukając długo, można znaleźć przykłady realizacji, w których znajdziecie więcej opisów, przykładowe persony, wyniki badań, mapy doświadczeń czy modele ścieżek użytkowników.
Zaletą Behance jest to, że jest bezpłatny. Nie ma tu ograniczeń co do liczby dodanych projektów czy wgranych obrazków. Ale warto się trochę ograniczać. Zdarzało mi się oglądać bardzo, bardzo długie prezentacje i w pewnym momencie zaczyna się po prostu bezmyślnie scrollować w dół. To też wpływa na czas załadowania tych obrazków i płynność działania, więc nie szalałabym zbytnio z całą masą wizualizacji.
Podsumowując:
- Obsługa jest naprawdę prosta, projekt tworzy się prostym builderem – po prostu dodaje się kolejne teksty i obrazki z drobną możliwością formatowania
- brak elastyczności – całość opiera się na schemacie obrazki i teksty, można osadzać inne formaty, np. video, ale ogólnie nie mamy wpływu na całą stronę tylko jej ograniczoną część
- Za darmo – nie płacimy za wgrywanie plików ani dodatkowe projekty
- Duża część interfejsu jest po polsku, czasami zdarzają się pojedyncze frazy nieprzetłumaczone
- Nie zawsze działają zbyt dobrze na urządzeniach dotykowych (przeglądanie Behance na telefonie polecam tylko bardzo wytrwałym) – obrazki się skalują (zmniejszają) i nie za bardzo można je powiększać, więc jeśli ktoś zdecyduje się oglądać wasz projekt na telefonie, to raczej się przemęczy
Narzędzia do prezentacji
Jednym z najpopularniejszych formatów, które podsyłają projektantki i projektanci w trakcie rekrutacji jest plik .pdf. Mam wrażenie, że to najszybszy sposób na stworzenie prostego portfolio. Wykorzystać w tym celu możemy popularne narzędzia do tworzenia prezentacji (jak Power Point, Keynote czy Google Slides), ale nic nie stoi na przeszkodzie, żeby stworzyć takie prezentacje w programach bardziej zaawansowanych (np. z pakietu Adobe).
Układanie treści na slajdach nie jest zbyt wymagającym zadaniem, ale uwierzcie mi, że można to spektakularnie zepsuć. Dlatego szalenie ważne będzie podejście do projektu slajdów, tak, jakbyśmy projektowali jakiś serwis czy aplikację. Zadbajcie koniecznie o odpowiednią hierarchię wizualną, warto narzucić jakieś stałe elementy slajdów, tak by przeglądając prezentację miało się poczucie, że wiemy co się dzieje na tym ekranie.
Można przyjąć prosty szablon – obrazek z lewej, tekst z prawej, duży tytuł i jakieś drobne podsumowanie liczbowe. Można oczywiście stworzyć bardziej wyszukane layouty, ale pamiętajcie, że osoby rekrutujące mają mało czasu na to żeby przejrzeć zgłoszenia i warto zadbać o ich doświadczenia.
Więc jeśli pozwolicie szybko przejrzeć portfolio, pokazać najważniejsze umiejętności i doświadczenie, a jeśli ktoś będzie miał ochotę doczytać, to również znajdzie więcej informacji – to super. Warto wyraźnie oddzielić część projektu samego portfolio, szablonu, od wizualizacji – tak, żeby jasnym było co jest projektem w ramach pracy, a co jest tylko dekoracją dookoła. Jeśli macie jakieś linki, maile, cokolwiek co sugeruje, że można w to kliknąć, to koniecznie zadbajcie, żeby te elementy były interaktywne – format .pdf na to pozwala. Jeśli portfolio jest długie albo ma jakiś spis treści, to również podepnijcie konkretne slajdy pod taki spi – to pozwoli szybciej docierać do projektów.
PDF oczywiście nie jest idealny – jest formatem dość ciężkim i mało responsywnym, ale z całą pewnością pozwoli Wam na szybkie tworzenie różnych wariantów portfolio. W narzędziu do prezentacji możecie stworzyć dużo różnych slajdów i eksportować tylko te, które uważacie, że będą odpowiednie dla konkretnego pracodawcy. Bo np. jedna firma szuka bardziej doświadczenia w e-commerce, a druga w aplikacjach mobilnych.
Podsumowując:
- Nie są zbyt wygodne do przeglądania, zwłaszcza na mniejszych urządzeniach
- Pozwalają na interaktywność – można dołączyć linki do innych serwisów jak Behance czy Dribbble
- Zbyt obszerne, długie, będą po prostu ciężkie (a to oznacza potencjalne problemy z załącznikami maili i przesyłaniem takiego portfolio)
- Warto zerknąć na wskazówki jak stworzyć bardziej dostępne pliki .pdfSą dość wygodne w obsłudze – obrazy i teksty można dowolnie układać i wprawiona osoba może stworzyć naprawdę schludne, estetyczne portfolio w ten sposób
