De beste UX/UI-portfolio's zijn in feite zelf een UX-test. De bezoeker is een recruiter of een klant, de opdracht is "begrijp deze ontwerper in minder dan twee minuten", en de website slaagt of faalt.
De ontwerpers die worden uitgenodigd voor een sollicitatiegesprek hebben zelden de meest flitsende website. Ze hebben er juist een die heel overzichtelijk is: de rol duidelijk omschreven, twee of drie casestudy's die het probleem van begin tot eind illustreren, en een lay-out die de aandacht niet afleidt van het werk.
Hieronder staan acht UX- en UI-portfolio's gemaakt door professionele ontwerpers. Pixpa, gegroepeerd op focus en afkomstig uit een bredere galerij van UI/UX portfolio voorbeelden.
Elk exemplaar biedt ontwerp-, kleur- en lettertypekeuzes die het bestuderen waard zijn, en één beslissing die het overnemen waard is.
Wat maakt een sterk UX/UI-portfolio?
Een sterke UI/UX-portfolio Beschrijf in één zin wat voor soort ontwerper je bent en laat twee of drie casestudies zien die de weg van het probleem naar de oplossing bewandelen.
Het houdt de interface rustig, zodat de inhoud van de pagina optimaal tot zijn recht komt. Het laadt snel en is goed leesbaar op een telefoon.
Elke website hieronder heeft zijn plek verdiend op basis van vier criteria: hoe goed het ontwerp het werk ondersteunt, hoe duidelijk de casestudy's zijn gestructureerd, of de website zijn doel bereikt door een opdracht of klant binnen te halen, en hoe goed de website presteert op mobiele apparaten.
Portfolio's van UI/UX-designers
Deze vier voorbeelden zijn UX/UI-portfolio's van individuele bijdragers: één van een ontwerper, een aantal casestudy's en een lay-out die is geoptimaliseerd om een potentiële werkgever snel inzicht te geven in het werk.
Elizabeth Lodvikov
UI/UX-ontwerp. New York.
Elizabeth Lodvikov De scène opent tegen een warme crèmekleurige achtergrond, met haar rol aangegeven in één houtskoolgrijze regel en een boogvormig uitgesneden portret rechts ervan.
Het kleurenpalet is bewust zacht: crème, antracietkleurige tekst en een subtiel terracotta accent op de "Say Hello"-knop.
Die warme uitstraling is veel menselijker dan de standaard donkere modus, en het strakke, geometrische schreefloze lettertype zorgt ervoor dat de aandacht blijft uitgaan naar waar de bezoeker voor komt.
Gaelle Monin
UX/UI-ontwerp. Londen.
Gaelle Monin De homepage is het belangrijkste onderdeel van het project. Onder een dun, luchtig woordmerk en een "UX/UI Design"-label, onderstreept met een handgetekende perzikkleurige markeerstift, duikt de pagina direct op in een projectraster, zonder dat er een biografie is om langs te scrollen.
Het kleurenpalet blijft overwegend wit, waardoor de kleur afkomstig is van het werk zelf: een financieel dashboard met een uitgavencirkel, een recepten-app met een importproces, mobiele schermen in apparaatmockups. Een warm accent zorgt ervoor dat het raster niet steriel oogt.
Sasank Anipeddi
UX/UI-ontwerp. Maryland.
Sasank Anipeddi beheert een donkere, redactionele website, opgemaakt in een schreeflettertype, wat zeldzaam is in een vakgebied waar schreefloos lettertype de standaard is.
De bijna zwarte achtergrond, de witte tekst en de groene markering op zijn naam geven het een kalme, zelfverzekerde uitstraling, die meer aan een tijdschrift doet denken dan aan een sjabloon.
De navigatie is onderverdeeld in Casestudies, Blog en GitHub in aparte bestemmingen, en elke casestudy is voorzien van methodelabels (Gebruikersonderzoek, Concurrentieanalyse, Gebruiksvriendelijkheidstesten), zodat de structuur van het werk al zichtbaar is voordat je het opent.
Matthew Park
UX-ontwerp en conceptuele kunst. Sunnyvale.
Matthew Park De homepage wordt omgetoverd tot een galerij met kleurvlakken. Elk project staat in een eigen tegel die de volledige pagina vult, in een andere verzadigde kleur: blauw, turquoise, magenta, indigo, beige. Elke tegel toont een mockup van het product op een laptop of telefoon.
Het is opvallend op de juiste manier, omdat de kleur de wegwijzer is en het werk erachter echte SaaS is: Lacework, Endgame, XonaHet woordmerk is een ingetogen, in hoofdletters geschreven schreefloos lettertype, waardoor de tegels voor zich spreken.
Productontwerpers en ontwerpmanagers
Functies op het gebied van productontwikkeling en strategie vereisen zowel oordeelsvermogen als vakmanschap, dus deze twee functies staan centraal met concrete projecten en een uitgesproken visie.
Marcin Spiewak
Productontwerp. Berlijn.
Marcin Spiewak Het begint met een dikke, vette koptekst op een donkere, antracietkleurige achtergrond, waarin alle functies die hij heeft bekleed worden opgesomd: Grafisch ontwerper, Webdesigner, UI, UX. Vervolgens worden ze allemaal doorgestreept tot "Productdesigner", waarbij "Berlijn" groen is gemarkeerd. Het is een carrièreverhaal in één regel, verteld in tekst.
Een paginagrote, spontane foto van hem in het veld fleurt het donkere kleurenpalet op, en projecttegels linken door naar Figma Voor iedereen die de volledige diepgang wil.
Michael Collins
Productontwerp en -strategie.
Michael Collins De website heeft een gecentreerde, minimalistische vormgeving in een strak schreefloos lettertype op een gebroken witte achtergrond, met een donkerrood logo als enige kleuraccent. Deze terughoudendheid is strategisch.
Het projectraster bestaat uit paginavullende foto's met herkenbare klantnamen eroverheen geplaatst. Silvertree, ExxonMobil, lululemonDe geloofwaardigheid komt dus van de logo's, niet van de lay-out. Een klein slotje markeert de afgeschermde casestudy's, een subtiel signaal dat er sprake is van een geheimhoudingsverplichting binnen de organisatie.
Multidisciplinaire ontwerpers
Wanneer een praktijk meerdere disciplines omvat, bestaat het risico dat de website eruitziet als een verzameling losse portfolio's. Deze website zorgt voor een samenhangend geheel.
Forest
Multimedia- en UI-ontwerp.
Forest Hij kiest voor een uitvergrote, tekstgerichte hero-tekst: "Hallo, ik ben Forest!", enorm groot in vetgedrukt zwart op lichtgrijs, met een horizontale ticker die zijn vakgebieden voorbij laat scrollen: UI Design, Motion Graphics, Grafisch Ontwerp, Videobewerking.
Het monochrome kleurenpalet zorgt ervoor dat de uiteenlopende praktijk niet onsamenhangend overkomt, en de tickersignalen geven een gevarieerd beeld zonder een rommelig vaardighedenoverzicht. De UI staat naast animatie en grafisch ontwerp, in plaats van een pure UX-focus te claimen, en de website is daar eerlijk over.
Isabella Zelasko
UX/UI- en media-kunstontwerp. Phoenix.
Isabella Zelasko Het bedrijf is actief op het gebied van UX/UI, UX-onderzoek, game-ontwerp en interactieve media, en de website presenteert dit alles in een dieppaarse kleurstelling met een crèmekleurig schreeflettertype dat meer aan een galerij dan aan een sjabloon doet denken.
De projecten worden één voor één getoond, elk voorzien van een label met de disciplines en tools die eraan ten grondslag liggen (bijvoorbeeld Game Design + UI Design, of Web Design, HTML en CSS). Een raster met zes kaarten vertaalt een breed scala aan expertisegebieden naar overzichtelijke competenties.
Het werk is afkomstig uit een vroeg stadium van mijn carrière, een mockup van een game-UI en een webproject voor mijn bacheloropleiding, maar het is helder gepresenteerd, iets wat in de meeste portfolio's van beginnende studenten ontbreekt.
Wat de beste UX/UI-portfolio's gemeen hebben
Als je alle acht voorbeelden bekijkt, zie je steeds dezelfde paar beslissingen terugkomen. Geen enkele gaat over smaak. Het gaat erom dat een bezoeker snel het werk kan bewonderen.
- De rol wordt in één zin omschreven. Lodvikov en Sasank Anipeddi Ze benoemen allebei in de eerste zin wat ze doen, zodat niemand hoeft te raden of ze wel het juiste type ontwerper zijn.
- De homepage begint met werk, niet met een biografie. Gaelle Monin wordt direct in een projectraster geplaatst en Matthew Park Hij gebruikt kleurvlakken, waardoor het werk het eerste is wat je ziet.
- Casestudies tonen de methode aan, niet alleen de schermen. Sasank Anipeddi's methodetags en Marcin Spiewak's gekoppeld Figma De bestanden bewijzen dat er nagedacht is over de pixels, en dat is precies waar een recruiter naar op zoek is.
- Het noemen van een concreet werk overtuigt. Michael Collins leidt met ExxonMobil en lululemonen Matthew Park met echte SaaS-producten, want herkenbaar werk wekt sneller vertrouwen dan welke lay-out dan ook.
- Eén visueel idee, behouden. Elke sterke website hier kiest voor één consistent kleurenpalet en lettertype, in plaats van drie verschillende stijlen te combineren en daardoor een onbesliste indruk te wekken.
- Snelheid en mobiel zijn geen optie, maar een noodzaak. De meeste eerste beoordelingen vinden plaats op een telefoon tussen vergaderingen door, waardoor een muur vol schermafbeeldingen van het bureaublad onleesbaar is op de plekken waar het er het meest toe doet.
Hoe structureer je je portfolio op basis van doelstellingen?
Een portfolio dat is opgebouwd om een vaste baan te bemachtigen, is anders gestructureerd dan een portfolio dat is ontworpen om een vaste baan te vinden. freelance klanten wervenBepaal waar de website voor bedoeld is en bouw daar vervolgens omheen.
Pixpa's UI/UX-portfolio-sjablonen Ze zijn opgebouwd rond casestudies en projectoverzichten, dus de rij die je hierboven kiest, hangt vooral af van welke onderdelen je inschakelt.
Veelvoorkomende fouten in UX/UI-portfolio's die je moet vermijden
Vijf fouten die je gemakkelijk over het hoofd ziet, maar die je snel kunt corrigeren zodra je ze ontdekt.
- Elke casestudy beveiligen met een wachtwoord. Geheimhoudingsverklaringen zijn belangrijk, maar een portfolio waar niets te zien is zonder eerst een e-mail te sturen, jaagt de bezoeker die slechts dertig seconden de tijd had, weg. Zorg ervoor dat minstens één project volledig openbaar is.
- Het casestudyverslag in dagboekvorm schrijven. "Eerst deed ik de inventarisatie, toen de persona's, daarna de wireframes" is een takenlijst. Begin met het probleem en het gewenste resultaat, en laat het proces daaronder dienen als bewijs.
- Beginnen met procesartefacten. Een opening die begint met een muur vol post-it-briefjes en routekaarten verhult de kern van de zaak. Laat eerst het resultaat zien; het onderzoek is het bewijs, niet de kop.
- Het vergeten van het portfolio is op zich al een UX-test. Trage laadtijden, minuscule aanraakgebieden, een hamburgermenu dat de enige twee belangrijke pagina's verbergt. Evalueer de gebruikerservaring (UX) van je eigen portfolio. Op dezelfde manier als je dat bij een klant zou doen.
- Een andere stijl voor de homepage dan voor de casestudies. De inconsistentie in lettertype en kleur tussen de vormgeving en de inhoud van de website wekt de indruk dat de site is samengesteld uit sjablonen in plaats van dat deze bewust is ontworpen.
Hoe bouw je je eigen UX/UI-portfolio op?
Je hoeft niet te programmeren of een ontwikkelaar in te huren. Het proces is kort.
- Start een gratis proefperiode, geen creditcard nodig.
- Kies een Template gemaakt voor UI/UX-ontwerpers.
- Voeg twee of drie casestudies toe, waarbij je elke keer eerst een schriftelijk probleem beschrijft. Als je niet zeker weet wat je moet laten zien, begin dan met deze voorbeelden. UX/UI-projectideeën.
- Kies één accentkleur en één lettertypesysteem en beperk de navigatie tot de belangrijkste elementen.
- Koppel je domein, controleer het op je telefoon en publiceer.
The Bottom Line
Een UX/UI-portfolio wordt op dezelfde manier beoordeeld als elke andere interface: helpt het de bezoeker om zijn of haar werk snel te doen?
Beschrijf je rol in één zin, toon twee of drie casestudy's, leg het probleem eerst uit, houd het werk zichtbaar en laat het ontwerp op de achtergrond blijven. Elke website hierboven lost een deel van dat probleem goed op. Neem de oplossing over, niet de vormgeving.
Geef je werk het portfolio dat het verdient, 15 dagen lang gratis.
Veelgestelde vragen over UX/UI-portfolio's
Hoeveel projecten moet een UX/UI-portfolio bevatten?
Twee tot vier. Diepgang wint het van breedte: één grondige, complete casestudy die uw denkwijze laat zien, is meer waard dan zes oppervlakkige projectgalerijen.
De beoordelaars kijken of je in staat bent om problemen te beredeneren, niet of je inzendingen telt.
Moeten UX-casestudies met een wachtwoord worden beveiligd?
Alleen wanneer een geheimhoudingsovereenkomst dit vereist, en zelfs dan moet minstens één project volledig openbaar zijn. Een portfolio waar niets te zien is zonder eerst contact met je op te nemen, jaagt de bezoeker die slechts een paar seconden de tijd had, weg.
Als het grootste deel van je werk onder een geheimhoudingsverklaring valt, ontwikkel dan één zelfstandig project dat je openlijk kunt laten zien.
Wat moet een homepage van een UX-portfolio bevatten?
Een korte beschrijving van wie je bent en waar je je op richt, een signaal dat je geloofwaardigheid aantoont, links naar twee of drie casestudy's en een duidelijke actie voor contact.
Sla de missieomschrijving over. Er is een uitgebreidere lijst beschikbaar. elementen die je in je portfolio kunt opnemen Als je dat wilt, kan dat, maar de taak van de homepage is om een bezoeker snel naar het betreffende werk te leiden.
Moet ik kunnen programmeren om een UX-portfolio te hebben?
Nee. De meeste sterke UX/UI-portfolio's worden gemaakt met een websitebuilder, en dat maakt voor een recruiter geen verschil.
Je kunt je tijd beter besteden aan het schrijven van gedegen casestudies dan aan het debuggen van CSS.
Wat is het verschil tussen een UX-portfolio en een UI-portfolio?
Een UX-portfolio legt de nadruk op proces en resultaat: het probleem, onderzoek, beslissingen en meetbaar resultaat. Een UI-portfolio richt zich op visuele vormgeving: lay-out, typografie, kleurgebruik en de afwerking van de interface.
De meeste werkende ontwerpers tonen beide aspecten, waarbij de nadruk ligt op datgene waar hun rol zich op richt.
Wat kost een portfolio-website?
PixpaDe abonnementen van beginnen bij $5.40 per maand voor een jaarabonnement op het Basic-pakket. Elk abonnement wordt geleverd met een gratis proefperiode van 15 dagen zonder creditcard en een geld-terug-garantie van 30 dagen. meest recente abonnementsprijzen is onderverdeeld per niveau.
Wat is het beste platform voor een UX/UI-portfolio?
Er bestaat niet één beste platform. Pixpa Geschikt voor ontwerpers die een portfolio, een ingebouwde blog en een overzichtelijk sjabloonsysteem op één plek willen, met live ondersteuning van een medewerker.
Als je de opties wilt afwegen, dan is dit overzicht van de beste websitebouwers voor UI/UX-ontwerpers vergelijkt ze naast elkaar.
Moet ik ongevraagde projecten of conceptprojecten laten zien?
Ja, vooral aan het begin van je carrière of bij een overstap. Een goed gestructureerd, zelfgeïnitieerd herontwerp bewijst dat je een probleem kunt doorgronden, zelfs als je nog geen gepubliceerd, erkend werk hebt om naar te verwijzen.
Benoem het duidelijk als een concept.