Najlepsze portfolio UX/UI samo w sobie jest testem UX. Odwiedzającym jest rekruter lub klient, a zadaniem jest „zrozumieć projektanta w mniej niż dwie minuty”, a strona albo przechodzi test, albo nie.
Projektanci, którym udaje się zdobyć zaproszenie na rozmowę kwalifikacyjną, rzadko mają najbardziej olśniewającą stronę. Mają tę najjaśniejszą: rola określona w linii, dwa lub trzy studia przypadku, które prowadzą od problemu do rezultatu, oraz układ, który nie przeszkadza w pracy.
Poniżej znajduje się osiem portfolio UX i UI stworzonych przez pracujących projektantów Pixpa, pogrupowane według ostrości i wybrane z szerszej galerii Przykłady portfolio UI/UX.
Każdy z nich charakteryzuje się wzornictwem, kolorem i czcionką wartymi uwagi, a także jedną decyzją wartą pożyczenia.
Co tworzy silne portfolio UX/UI
Silny Portfolio UI/UX w jednym wierszu mówi, jakim jesteś projektantem, a następnie pokazuje dwa lub trzy studia przypadku, które przechodzą od problemu do rezultatu.
Utrzymuje interfejs w ciszy, dzięki czemu praca na stronie przebiega sprawnie. Szybko się ładuje i można go czytać na telefonie.
Każda z poniższych stron zdobyła swoje miejsce dzięki czterem cechom: temu, jak dobrze projekt odpowiada zadaniu, jak przejrzyście ustrukturyzowane są studia przypadków, czy strona faktycznie spełnia swoje zadanie, czyli zdobywania roli lub klienta, oraz temu, jak sprawdza się na urządzeniach mobilnych.
Portfolio projektantów UI/UX
Te cztery to portfolio UX/UI wykonane przez indywidualnych projektantów: jeden projektant, kilka studiów przypadku i układ dostosowany do szybkiego rozpoczęcia pracy przez menedżera ds. rekrutacji.
Elizabeth Lodvikov
Projektowanie UI/UX. Nowy Jork.
Elizabeth Lodvikov rozpoczyna się na ciepłym kremowym tle, a jej rola przedstawiona jest jedną grafitową linią i wyciętym w łuk portretem po prawej stronie.
Paleta barw jest celowo stonowana: kremowy kolor, grafitowy tekst i pojedynczy, stonowany terakotowy akcent na przycisku „Powiedz cześć”.
To ciepło wydaje się o wiele bardziej ludzkie niż domyślny tryb ciemny, a czysta, geometryczna czcionka Sans skupia się na tym, po co przyszedł użytkownik.
Gaelle Monin
Projektowanie UX/UI. Londyn.
Gaelle Monin sprawia, że strona główna to prawdziwa praca. Pod cienkim, zwiewnym logotypem i tagiem „UX/UI Design” podkreślonym ręcznie narysowanym brzoskwiniowym markerem, strona przechodzi bezpośrednio do siatki projektu, bez żadnej biografii, którą można by przewinąć.
Paleta barw pozostaje niemal biała, więc kolor pochodzi z samej pracy: panel finansowy z kółkiem wydatków, aplikacja z przepisami kulinarnymi z funkcją importowania, ekrany mobilne w makietach urządzeń. Jeden ciepły akcent sprawia, że siatka nie wydaje się sztywna.
Sasank Anipeddi
Projektowanie UX/UI. Maryland.
Sasank Anipeddi prowadzi mroczną, redakcyjną witrynę w czcionce szeryfowej, co jest rzadkością w branży, w której domyślnie używane są czcionki bezszeryfowe.
Prawie czarne tło, biały tekst i zielone podświetlenie jego nazwiska nadają mu spokojny, pewny siebie ton, bardziej przypominający magazyn niż szablon.
Nawigacja dzieli studia przypadków, blog i GitHub do oddzielnych miejsc docelowych, a każde studium przypadku zawiera tagi metody (badania użytkowników, analiza konkurencji, testowanie użyteczności), dzięki czemu kształt pracy jest widoczny jeszcze przed jej otwarciem.
Matthew Park
Projekt UX i grafika koncepcyjna. Sunnyvale.
Matthew Park Zmienia stronę główną w galerię z blokami kolorów. Każdy projekt znajduje się na osobnym kafelku o innym nasyconym kolorze: niebieskim, turkusowym, magenta, indygo, beżowym, a każdy z nich zawiera makietę laptopa lub telefonu z produktem.
Jest głośny w dobrym tego słowa znaczeniu, ponieważ kolor wskazuje drogę, a praca za tym stojąca to prawdziwy SaaS: Lacework, Endgame, XonaZnak słowny składa się z cichych wielkich liter Sans, które pozwalają kafelkom krzyczeć.
Projektanci produktów i liderzy projektowania
Role związane z produktem i strategią sprzedają zarówno osąd, jak i rzemiosło, dlatego te dwie role mają jasno określone zadania i własny punkt widzenia.
Marcin Spiewak
Projektowanie produktu. Berlin.
Marcin Spiewak Książka rozpoczyna się od wyrazistego, pogrubionego bohatera na ciemnografitowym tle, który wymienia wszystkie role, jakie pełnił: grafika, web, interfejs użytkownika, doświadczenie użytkownika (UX), a następnie przekreśla każdą z nich, aż do „projektanta produktu” z zaznaczonym na zielono „Berlinem”. To jednozdaniowa historia kariery opowiedziana drukiem.
Całostronicowe, spontaniczne zdjęcie na polu ociepla ciemną paletę barw, a kafelki projektu prowadzą do Figma dla każdego, kto chce poznać całą głębię.
Michael Collins
Projektowanie i strategia produktu.
Michael Collins prowadzi minimalistyczną, wyśrodkowaną stronę w czystym, bezszeryfowym stylu na kremowym tle, z ciemnoczerwonym logo jako jedynym akcentem kolorystycznym. Ta powściągliwość ma charakter strategiczny.
Siatka projektu to pełnowymiarowa fotografia z nałożonymi rozpoznawalnymi nazwami klientów, Silvertree, ExxonMobil, lululemon, więc wiarygodność wynika z logo, a nie z układu. Mała ikona kłódki oznacza studia przypadków objęte ochroną, co jest cichym sygnałem, że firma pracuje w ramach NDA.
Projektanci multidyscyplinarni
Gdy praktyka obejmuje kilka dyscyplin, istnieje ryzyko, że strona będzie wyglądać jak kilka połączonych ze sobą portfolio. Ta strona zachowuje spójność.
Forest
Projektowanie multimediów i interfejsów użytkownika.
Forest angażuje się w ogromny, czcionkowy bohater „Cześć, jestem Forest!”, umieszczony w ogromnym, pogrubionym czarnym kolorze na jasnoszarym tle, z poziomym paskiem przewijającym jego dyscypliny: projektowanie interfejsów użytkownika, grafika ruchowa, projektowanie graficzne, edycja wideo.
Monochromatyczna paleta barw zapobiega rozproszeniu szerokiego zakresu praktyk, a sygnały tickera nie są przeładowane siatką umiejętności. Interfejs użytkownika (UI) współgra z ruchem i grafiką, zamiast deklarować skupienie wyłącznie na UX, a strona jest w tym szczera.
Isabella Zelasko
Projektowanie UX/UI i sztuki mediów. Phoenix.
Isabella Zelasko zajmuje się UX/UI, badaniami UX, projektowaniem gier i mediami interaktywnymi, a strona przedstawia to wszystko na płótnie o głębokim śliwkowym kolorze z czcionką szeryfową w kolorze kremowym, która przypomina bardziej galerię niż szablon.
Projekty są wyświetlane pojedynczo, każdy oznaczony etykietą określającą dyscypliny i narzędzia, z których się składa (projektowanie gier + projektowanie interfejsu użytkownika lub projektowanie stron internetowych, HTML i CSS), a sześciokartowa siatka umiejętności przekształca szeroko zakrojoną praktykę w obszary możliwości, które można przeskanować.
To praca z wczesnego etapu kariery, makiety interfejsu użytkownika gry i projektu internetowego na studiach licencjackich, ale całość cechuje się przejrzystością, której brakuje większości młodszych prac.
Co łączy najlepsze portfolio UX/UI
Przyjrzyj się wszystkim ośmiu, a wciąż pojawia się ta sama garstka decyzji. Żadna nie dotyczy gustu. Chodzi o to, żeby szybko wprowadzić gościa w pracę.
- Rola jest określona w jednym wierszu. Lodvikov oraz Sasank Anipeddi obaj w pierwszym zdaniu podają, czym się zajmują, więc nikt nie musi zgadywać, czy są odpowiednimi projektantami.
- Na stronie głównej znajduje się praca, a nie biografia. Gaelle Monin trafia bezpośrednio do siatki projektu i Matthew Park bloki kolorów, więc pierwszą rzeczą, jaką widzisz, jest praca.
- Studia przypadków pokazują metodę, nie tylko ekrany. Sasank Anipeddiznaczniki metody i Marcin Spiewakjest połączony Figma Akta dowodzą, że za pikselami kryje się myślenie, a właśnie to kupuje rekruter.
- Nazwana praca ma siłę przekonywania. Michael Collins prowadzi z ExxonMobil oraz lululemon, Matthew Park z prawdziwymi produktami SaaS, ponieważ rozpoznawalna praca zdobywa zaufanie szybciej, niż jakikolwiek układ.
- Jeden pomysł wizualny, utrzymany. Każda silna strona internetowa opowiada się za jedną paletą barw i systemem czcionek, zamiast mieszać trzy estetyki i interpretować to jako niezdecydowanie.
- Prędkość i mobilność nie są opcjonalne. Większość pierwszych recenzji przeprowadza się w przerwach między spotkaniami, więc ściana zrzutów ekranu z pulpitu jest nieczytelna w miejscach, w których jest to najbardziej potrzebne.
Jak ustrukturyzować swoje portfolio według celu
Portfolio stworzone w celu zdobycia pełnoetatowej pracy jest inaczej skonstruowane niż gonienie klientów freelancerów. Zdecyduj, do czego ma służyć witryna, a następnie ją rozbuduj.
Pixpa's Szablony portfolio UI/UX są zbudowane wokół studiów przypadków i siatek projektów, więc wiersz, który wybierzesz powyżej, zależy głównie od tego, które sekcje włączysz.
Typowe błędy w portfolio UX/UI, których należy unikać
Pięć błędów, które łatwo przeoczyć, ale szybko naprawić, gdy już je zauważysz.
- Blokada hasłem w każdym studium przypadku. Umowy o poufności są realne, ale portfolio, w którym nic nie można zobaczyć bez wcześniejszego wysłania maila, traci odwiedzającego, który miał trzydzieści sekund. Utrzymuj przynajmniej jeden projekt w pełni publiczny.
- Pisanie studium przypadku w formie pamiętnika. „Najpierw przeprowadziłem analizę, potem persony, a potem makiety” – to lista zadań. Zacznij od problemu i rezultatu, a proces niech będzie dowodem.
- Prowadzenie działalności przy użyciu artefaktów procesowych. Otwarcie na ścianie karteczek samoprzylepnych i map podróży zaciera sedno sprawy. Najpierw pokaż wynik; badania są dowodem, a nie nagłówkiem.
- Zapomnienie o portfolio samo w sobie jest testem UX. Powolne ładowanie, drobne elementy docelowe, hamburger ukrywający dwie najważniejsze strony. Przeprowadź audyt UX swojego portfolio tak jak zrobiłbyś to z klientem.
- Inna estetyka dla strony głównej, inna dla studiów przypadku. Niespójność typu i koloru między powłoką a dziełem sprawia wrażenie, że miejsce to zostało zbudowane na podstawie szablonów, a nie zaprojektowane.
Jak zbudować własne portfolio UX/UI
Nie musisz pisać kodu ani zatrudniać programisty. Proces jest krótki.
- Zacznij za darmo bezpłatny okres próbny, nie potrzebujesz karty kredytowej.
- Wybierz szablon stworzony dla projektantów UI/UX.
- Dodaj dwa lub trzy studia przypadków, najpierw opisując każde z nich w formie pisemnej. Jeśli nie wiesz, co pokazać, zacznij od tych. Pomysły na projekty UX/UI.
- Ustaw jeden kolor akcentujący i jeden system czcionek, a nawigację ogranicz do tego, co ważne.
- Podłącz swoją domenę, sprawdź ją na swoim telefonie i opublikuj.
Bottom Line
Portfolio UX/UI ocenia się w taki sam sposób, w jaki ocenia się każdy inny interfejs: czy pomaga użytkownikowi szybko wykonać jego zadanie.
Określ swoją rolę w tekście, pokaż najpierw dwa lub trzy studia przypadku, zadbaj o to, by praca była widoczna, a projekt nie był na widoku. Każda z powyższych stron dobrze rozwiązuje jeden z tych problemów. Pożycz decyzję, a nie wygląd.
Zdobądź dla swojej pracy portfolio, na jakie zasługuje, za darmo przez 15 dni.
Najczęściej zadawane pytania dotyczące portfolio UX/UI
Ile projektów powinno zawierać portfolio UX/UI?
Od dwóch do czterech. Głębia bije na głowę szerokość: jedno kompleksowe studium przypadku, które pokazuje, że Twoje myślenie jest warte więcej niż sześć płytkich galerii projektów.
Recenzenci oceniają, czy potrafisz uzasadnić problem, a nie liczą zgłoszeń.
Czy studia przypadków UX powinny być chronione hasłem?
Tylko wtedy, gdy wymaga tego umowa o zachowaniu poufności, a nawet wtedy zachowaj przynajmniej jeden projekt w pełni publiczny. Portfolio, w którym nic nie jest widoczne bez wcześniejszego kontaktu z Tobą, traci odwiedzającego, który miał kilka sekund.
Jeśli większość twojej pracy objęta jest umową o poufności, stwórz jeden projekt, który sam zainicjujesz i będziesz mógł pokazać publicznie.
Co powinna zawierać strona główna portfolio UX?
Jedna informacja o tym, kim jesteś i na czym się koncentrujesz, jeden sygnał wiarygodności, linki do dwóch lub trzech studiów przypadku i jedno jasne działanie kontaktowe.
Pomiń oświadczenie o misji. Pełniejsza lista znajduje się tutaj. elementy do uwzględnienia w portfolio jeśli tego chcesz, ale zadaniem strony głównej jest szybkie skierowanie użytkownika do pracy.
Czy muszę umieć kodować, aby mieć portfolio UX?
Nie. Większość mocnych portfolio UX/UI opiera się na kreatorze stron internetowych i nie ma to żadnego znaczenia dla menedżera ds. rekrutacji.
Lepiej spożytkować czas na pisanie szczegółowych studiów przypadku niż na debugowaniu CSS.
Jaka jest różnica pomiędzy portfolio UX a portfolio UI?
Portfolio UX kładzie nacisk na proces i rezultaty: problem, badania, decyzje i mierzalny rezultat. Portfolio UI opiera się na elemencie wizualnym: układzie, czcionce, kolorze i dopracowaniu interfejsu.
Większość pracujących projektantów prezentuje obydwa typy osobowości, zależnie od tego, na czym koncentruje się ich rola.
Ile kosztuje strona internetowa typu portfolio?
PixpaPlany zaczynają się od 5.40 USD miesięcznie w ramach rocznego planu podstawowego, a każdy plan obejmuje 15-dniowy bezpłatny okres próbny bez karty kredytowej i 30-dniową gwarancję zwrotu pieniędzy. najnowsze ceny planów jest podzielony według poziomów.
Jaka platforma jest najlepsza dla portfolio UX/UI?
Nie ma jednej najlepszej platformy. Pixpa dla projektantów, którzy chcą mieć portfolio, wbudowanego bloga i przejrzysty system szablonów w jednym miejscu, z bezpośrednim wsparciem człowieka.
Jeśli chcesz rozważyć opcje, to zestawienie najlepsze kreatory stron internetowych dla projektantów UI/UX porównuje je obok siebie.
Czy powinienem pokazać projekty niezamówione czy koncepcyjne?
Tak, zwłaszcza na początku kariery lub podczas zmiany. Dobrze przemyślany i samodzielnie zainicjowany projekt dowodzi, że potrafisz przemyśleć problem, gdy nie masz jeszcze gotowej, uznanej pracy, na którą możesz się powołać.
Oznacz to wyraźnie jako koncepcję.