I migliori portfolio UX/UI sono di per sé un test UX. Il visitatore è un responsabile delle assunzioni o un cliente, il compito è "capire questo designer in meno di due minuti" e il sito o supera il test o non lo supera.
I designer che ottengono un colloquio raramente hanno il sito più appariscente. Hanno piuttosto il sito più chiaro: il ruolo è indicato in una sola riga, ci sono due o tre casi di studio che illustrano il percorso dal problema alla soluzione e un layout che non intralcia il lavoro.
Di seguito sono riportati otto portfolio UX e UI realizzati da designer professionisti su Pixpa, raggruppati per argomento e tratti da una galleria più ampia di Esempi di portfolio UI/UX.
Ciascuno offre opzioni di design, colore e tipologia degne di studio, e una decisione da cui varrebbe la pena prendere spunto.
Cosa rende un portfolio UX/UI efficace?
Un forte Portafoglio UI/UX Descrive in una sola frase che tipo di designer sei e presenta due o tre casi studio che illustrano il percorso dal problema al risultato.
Mantiene l'interfaccia silenziosa, permettendo al contenuto di risaltare sulla pagina. Si carica velocemente e si legge su un telefono.
Ciascun sito qui di seguito si è guadagnato un posto in base a quattro criteri: l'efficacia del design nel supportare il lavoro, la chiarezza della struttura dei casi di studio, la capacità del sito di raggiungere il suo obiettivo principale di trovare un lavoro o un cliente e la sua fruibilità su dispositivi mobili.
Portfolio di designer UI/UX
Questi quattro sono portfolio UX/UI di singoli professionisti: un designer, alcuni case study e un layout ottimizzato per permettere a un responsabile delle assunzioni di entrare subito nel vivo del lavoro.
Elizabeth Lodvikov
Progettazione UI/UX. New York.
Elizabeth Lodvikov L'immagine si apre su uno sfondo color crema caldo, con il suo ruolo indicato da una riga grigio antracite e un ritratto arcuato sulla destra.
La palette di colori è volutamente delicata: crema, testo color antracite e un unico accento color terracotta tenue sul pulsante "Say Hello".
Quel calore risulta molto più umano rispetto all'impostazione predefinita della modalità scura, e il pulito carattere sans serif geometrico mantiene l'attenzione su ciò che il visitatore sta cercando.
Gaelle Monin
Progettazione UX/UI. Londra.
Gaelle Monin Trasforma la homepage in un'opera d'arte. Sotto un logo sottile e arioso e un tag "UX/UI Design" sottolineato da un tratto di evidenziatore color pesca disegnato a mano, la pagina si apre direttamente su una griglia di progetti, senza alcuna biografia da scorrere.
La palette di colori rimane prevalentemente bianca, quindi il colore proviene dal lavoro stesso: una dashboard finanziaria con un grafico a ciambella delle spese, un'app di ricette con un flusso di importazione, schermate di dispositivi mobili all'interno di mockup di dispositivi. Un accento caldo e luminoso impedisce alla griglia di risultare asettica.
Sasank Anipeddi
Progettazione UX/UI. Maryland.
Sasank Anipeddi Il sito web, dall'atmosfera cupa e editoriale, è realizzato con un carattere serif, una rarità in un settore dove di solito si prediligono i caratteri sans serif.
Lo sfondo quasi nero, il testo bianco e l'evidenziazione verde del suo nome conferiscono all'immagine un tono calmo e sicuro, più simile a quello di una rivista che a quello di un modello predefinito.
La navigazione divide i casi di studio, il blog e GitHub in destinazioni separate, e ogni caso di studio è accompagnato da tag metodologici (Ricerca sugli utenti, Analisi della concorrenza, Test di usabilità) in modo che la struttura del lavoro sia visibile prima ancora di aprirlo.
Matthew Park
Progettazione UX e concept art. Sunnyvale.
Matthew Park Trasforma la homepage in una galleria a blocchi di colore. Ogni progetto è presentato in un riquadro a tutta pagina di un diverso colore saturo: blu, verde acqua, magenta, indaco, beige, ognuno con un'anteprima del prodotto su laptop o telefono.
È appariscente nel modo giusto, perché il colore funge da segnaletica e il lavoro che c'è dietro è un vero SaaS: Lacework, Endgame, XonaIl logo testuale è un discreto carattere sans serif maiuscolo che lascia che siano le tessere a catturare l'attenzione.
Progettisti di prodotto e responsabili del design
I ruoli di prodotto e strategia richiedono tanto giudizio quanto competenza, quindi queste due figure si distinguono per la presentazione di progetti concreti e un punto di vista ben definito.
Marcin Spiewak
Design del prodotto. Berlino.
Marcin Spiewak Il documento si apre con un'imponente scritta in grassetto su uno sfondo grigio antracite scuro che elenca tutti i ruoli ricoperti dal designer: grafico, web designer, UI designer, UX designer, per poi barrarli uno ad uno fino ad arrivare a "Product Designer", con "Berlino" evidenziato in verde. È la storia della sua carriera raccontata in una sola riga, attraverso la tipografia.
Una foto spontanea a tutta larghezza di lui nel campo riscalda la tavolozza scura e le tessere del progetto si collegano a Figma per chiunque desideri approfondirne appieno le potenzialità.
Michael Collins
Progettazione e strategia di prodotto.
Michael Collins Il sito web è centrato e minimalista, con un carattere sans serif pulito su uno sfondo bianco sporco e un logo testuale rosso scuro come unica nota di colore. La sobrietà è strategica.
La griglia del progetto è composta da fotografie a tutta pagina con i nomi riconoscibili dei clienti sovrapposti, Silvertree, ExxonMobil, lululemonPertanto, la credibilità deriva dai loghi, non dal layout. Una piccola icona a forma di lucchetto contrassegna i casi di studio ad accesso limitato, un segnale discreto di lavoro coperto da accordi di riservatezza aziendali.
Progettisti multidisciplinari
Quando uno studio professionale abbraccia diverse discipline, il rischio è che il sito web appaia come una raccolta di portfolio assemblati alla rinfusa. Questo sito, invece, mantiene la coerenza.
Forest
Progettazione multimediale e dell'interfaccia utente.
Forest Punta su un eroe di grandi dimensioni e dal carattere prominente, "Ciao, sono Forest!" scritto in caratteri enormi e in grassetto nero su sfondo grigio chiaro, con un ticker orizzontale che scorre le sue discipline: UI Design, Motion Graphics, Graphic Design, Video Editing.
La palette monocromatica impedisce che un'attività così diversificata risulti dispersiva, e il ticker segnala la varietà delle competenze senza creare una griglia confusionaria. L'interfaccia utente si integra con animazioni e grafica, anziché puntare esclusivamente sull'esperienza utente, e il sito lo dichiara apertamente.
Isabella Zelasko
Progettazione UX/UI e di arti multimediali. Phoenix.
Isabella Zelasko Lavora in diversi ambiti, tra cui UX/UI, ricerca UX, game design e media interattivi, e il sito web presenta tutto questo su una base color prugna intenso con un carattere tipografico serif color crema che lo fa sembrare più una galleria che un template.
I progetti vengono mostrati uno alla volta, ciascuno etichettato con le discipline e gli strumenti utilizzati (Game Design + UI Design, oppure Web Design, HTML e CSS), e una griglia di sei schede sulle competenze trasforma un'ampia area di pratica in aree di capacità facilmente individuabili.
Si tratta di un lavoro agli inizi della carriera, un mockup dell'interfaccia utente di un videogioco e un progetto web universitario, ma è presentato con una chiarezza che manca alla maggior parte dei portfolio dei giovani professionisti.
Cosa hanno in comune i migliori portfolio UX/UI
Esaminando tutte e otto le opere, si nota che le stesse poche decisioni continuano a ripresentarsi. Nessuna riguarda il gusto. Riguarda la necessità di far entrare rapidamente il visitatore nell'opera.
- Il ruolo è descritto in una sola riga. Lodvikov and Sasank Anipeddi Entrambi specificano cosa fanno nella prima frase, quindi nessuno deve indovinare se sono il tipo di designer giusto.
- La homepage mette in evidenza i lavori, non la biografia. Gaelle Monin si inserisce direttamente in una griglia di progetto e Matthew Park I suoi blocchi di colore sono così che l'opera è la prima cosa che si nota.
- Gli studi di caso dimostrano il metodo, non solo le schermate. Sasank Anipedditag del metodo e Marcin Spiewakcollegato Figma I file dimostrano che dietro i pixel c'era un ragionamento, ed è proprio questo che un responsabile delle assunzioni sta cercando.
- Il lavoro nominato è quello che persuade. Michael Collins conduce con ExxonMobil and lululemone Matthew Park con veri prodotti SaaS, perché un lavoro riconoscibile guadagna fiducia più velocemente di qualsiasi layout.
- Un'idea visiva, tenuta in mano. Tutti i siti web di successo qui presentati si attengono a un'unica palette di colori e a un unico sistema tipografico, anziché mescolare tre estetiche diverse e risultare indecisi.
- Velocità e mobilità non sono opzionali. Nella maggior parte dei casi, le prime revisioni avvengono al telefono tra una riunione e l'altra, quindi una serie di schermate del desktop risultano illeggibili proprio dove contano di più.
Come strutturare il tuo portfolio in base agli obiettivi
Un portfolio costruito per ottenere un ruolo a tempo pieno è strutturato in modo diverso da uno inseguire clienti freelance. Decidi qual è lo scopo del sito, poi costruiscilo attorno a quello.
Pixpa's Template di portfolio UI/UX sono strutturati attorno a casi di studio e griglie di progetto, quindi la riga che scegli qui sopra dipende principalmente dalle sezioni che decidi di attivare.
Errori comuni da evitare nei portfolio UX/UI
Cinque errori facili da non notare e rapidi da correggere una volta individuati.
- Protezione tramite password per ogni caso di studio. Gli accordi di non divulgazione (NDA) sono reali, ma un portfolio in cui non è possibile visualizzare nulla senza prima inviare un'email fa perdere il visitatore che aveva trenta secondi a disposizione. Mantieni almeno un progetto completamente pubblico.
- Redigere il caso di studio sotto forma di diario. "Prima ho fatto la fase di analisi, poi ho creato le personas e infine i wireframe" è un elenco di attività. Iniziate con il problema e il risultato atteso, e lasciate che il processo rimanga in secondo piano come prova.
- Partire dall'utilizzo di artefatti di processo. Iniziare la storia mostrando una parete ricoperta di post-it e mappe di viaggio significa nascondere il punto cruciale. Mostrate prima il risultato; la ricerca è la prova, non il titolo.
- Dimenticare il portfolio è di per sé un test UX. Caricamento lento, aree di interazione minuscole, un menu a tendina che nasconde le uniche due pagine importanti. Analizza l'esperienza utente del tuo portfolio. come faresti con un cliente.
- Un'estetica per la homepage, un'altra per i casi di studio. La disomogeneità di tipografia e colore tra l'involucro e l'opera dà l'impressione di un sito assemblato con modelli preconfezionati piuttosto che progettato.
Come creare il proprio portfolio UX/UI
Non è necessario saper programmare o assumere uno sviluppatore. La procedura è breve.
- Inizia una prova gratuita, non è richiesta alcuna carta di credito.
- Scegli una Modello pensato per i designer UI/UX.
- Aggiungi due o tre casi di studio, ciascuno con un problema scritto per primo. Se non sei sicuro di cosa mostrare, inizia da questi idee per progetti UX/UI.
- Imposta un unico colore di accento e un unico sistema di caratteri, e mantieni la navigazione focalizzata sugli elementi essenziali.
- Collega il tuo dominio, controllalo sul tuo telefono e pubblica.
Conclusione
Un portfolio UX/UI viene valutato come si valuta qualsiasi interfaccia: aiuta il visitatore a svolgere il proprio lavoro rapidamente?
Descrivi brevemente il tuo ruolo, mostra prima due o tre casi studio che illustrano il problema, mantieni il lavoro visibile e lascia che il design non intralci. Ciascuno dei siti sopra elencati risolve bene almeno un aspetto di questo processo. Prendi spunto dalla decisione, non dall'aspetto.
Dai al tuo lavoro il portfolio che merita, gratis per 15 giorni.
Domande frequenti sul portfolio UX/UI
Quanti progetti dovrebbe contenere un portfolio UX/UI?
Da due a quattro. La profondità è più importante dell'ampiezza: un caso di studio completo e approfondito che dimostri che il tuo ragionamento vale più di sei gallerie di progetti superficiali.
I revisori valutano la tua capacità di ragionare sui problemi, non il numero di risposte fornite.
Gli studi di caso sull'esperienza utente (UX) dovrebbero essere protetti da password?
Solo quando richiesto da un accordo di riservatezza, e anche in tal caso, mantieni almeno un progetto completamente pubblico. Un portfolio in cui nulla è visualizzabile senza prima contattarti perde il visitatore che aveva a disposizione pochi secondi.
Se la maggior parte del tuo lavoro è vincolata da un accordo di riservatezza, realizza un progetto personale che puoi mostrare apertamente.
Cosa dovrebbe includere la homepage di un portfolio UX?
Una breve descrizione di chi sei e di cosa ti occupi, un segnale di credibilità, link a due o tre casi di studio e un'azione di contatto chiara.
Saltate la dichiarazione di intenti. C'è un elenco più completo di elementi da includere nel tuo portfolio se lo desideri, ma il compito della homepage è quello di indirizzare rapidamente il visitatore al lavoro.
Devo saper programmare per avere un portfolio UX?
No. La maggior parte dei portfolio UX/UI di alto livello sono realizzati con un website builder e per chi assume personale questo non fa alcuna differenza.
È meglio dedicare il proprio tempo alla stesura di studi di caso precisi piuttosto che al debug del CSS.
Qual è la differenza tra un portfolio UX e un portfolio UI?
Un portfolio UX pone l'accento su processi e risultati: il problema, la ricerca, le decisioni e il risultato misurabile. Un portfolio UI si concentra sull'aspetto visivo: layout, tipografia, colore e rifinitura dell'interfaccia.
La maggior parte dei designer professionisti mostra entrambe le caratteristiche, privilegiando quella su cui si concentra il loro ruolo.
Quanto costa un sito web portfolio?
PixpaI piani di partono da 5.40 dollari al mese con un piano Base annuale e ogni piano include una prova gratuita di 15 giorni senza carta di credito e una garanzia di rimborso di 30 giorni. Prezzi del piano più recente è suddiviso per livello.
Qual è la piattaforma migliore per un portfolio UX/UI?
Non esiste un'unica piattaforma migliore. Pixpa Ideale per i designer che desiderano un portfolio, un blog integrato e un sistema di modelli intuitivo, tutto in un'unica piattaforma, con assistenza clienti in tempo reale.
Se vuoi valutare le opzioni, questa suddivisione delle I migliori strumenti per la creazione di siti web per designer UI/UX li confronta fianco a fianco.
Dovrei presentare progetti non richiesti o progetti concettuali?
Sì, soprattutto all'inizio della carriera o quando si cambia ruolo. Una riprogettazione ben strutturata e avviata autonomamente dimostra la capacità di analizzare un problema anche in assenza di lavori pubblicati e accreditati da poter presentare.
Definiscilo chiaramente come un concetto.