Från Figma till publicerad portfolio, Del 3: Leverera den (och varför klart slår perfekt)

Del 3: från Figma till live portfolio. Plattformsval, designprocess och varför klart slår perfekt.

Du har gjort researchen. Nu är det dags att bygga din designportfolio och faktiskt leverera den. Du har skrivit case studies. Du har en visuell riktning och en tydlig känsla för vad din portfolio behöver kommunicera. Nu behöver du faktiskt bygga och publicera den.

Det här är Del 3 av portfolioserien. Om du börjar här, gå tillbaka till Del 1 (vad du bör inkludera) och Del 2 (skriva case studies) först.

Ironin i att bygga en portfolio just nu

Här är något jag tycker är genuint intressant med det här ögonblicket: samma AI-verktyg som får folk att ifrågasätta om designers behövs gör det också enklare än någonsin för designers att bygga sina egna portfolios.

Vibe coding-verktyg, no-code-plattformar, AI-assisterad utveckling, du har fler möjligheter att bygga en designportfolio än vid någon annan tidpunkt i historien. Men här är haken: verktygen kan bygga det du beskriver, men de kan inte avgöra vad som borde existera. Layoutbesluten, informationshierarkin, det responsiva beteendet, interaktionsmönstren, det är designbeslut som behöver en designers hjärna.

Så även handlingen att bygga din portfolio är en designövning. Verktyget är bara verktyget.

Hur du bygger en designportfolio

Jag rekommenderar medvetet inte ett specifikt verktyg för det rätta valet beror på din situation. Men här är faktorerna som faktiskt spelar roll:

Hur mycket kontroll behöver du?

Om du vill ha pixelperfekt kontroll över varje detalj behöver du antingen kod (custom build) eller ett design-till-webb-verktyg som ger dig finkornig layoutkontroll. Om du bara behöver något rent och professionellt snabbt fungerar en mallbaserad plattform bra.

Kan du underhålla den?

Den bästa portfolion är en du faktiskt uppdaterar. Om byggprocessen var så smärtsam att du aldrig vill röra den igen är det ett problem. Välj något du realistiskt kan lägga till nya projekt i utan att bäva.

Behöver du visa tekniska färdigheter?

Om en del av din positionering är att du kan bygga lika väl som designa, som det är för mig, demonstrerar en kodad portfolio det. Men bara om du har tid. En ofullkomlig portfolio som existerar är oändligt mer värd. Du kan bygga en designportfolio som är tillräckligt bra för att lansera och iterera på senare än en kodad portfolio du kommer att avsluta ”någon dag.”

Responsivt är inte förhandlingsbart

Enligt StatCounters mätning av plattformsfördelningen är över hälften av all webbtrafik mobil. Oavsett vad du väljer måste din portfolio fungera på mobil. Rekryterare och potentiella kunder kommer att titta på den på sina telefoner. Om dina case studies går sönder på en liten skärm är det ett designmisslyckande på din faktiska designportfolio, ingen bra look.

Designprocessen (ja, din portfolio får en också)

Behandla portfoliobygget precis som du skulle behandla ett klientprojekt. Det här är inte bara god praxis, det är också en metademonstration av dina färdigheter. Om din portfolios designprocess var genomtänkt och strukturerad lyser det igenom i resultatet.

Wireframe först

Innan någon visuell design, lägg ut strukturen. Gråa boxar, inga färger, inga typografival, bara informationshierarki och layout. Vilket innehåll hamnar var? Hur hänger sidorna ihop? Hur lång är varje case study-sida och hur navigerar någon genom den?

Det här är UX-fasen av din portfolio. Du löser strukturella problem före visuella, samma separation du skulle använda på vilket projekt som helst.

Sedan applicera den visuella riktningen

När strukturen fungerar, lägg på UI:n. Det är här den visuella researchen från Del 1 kommer in. Applicera färgpaletten, typografin, avstånden och den visuella personligheten på dina wireframes.

Din portfolios visuella design kommunicerar vilken typ av designer du är innan någon läser ett ord. En ren, återhållsam design signalerar en annan typ av tänkande än en djärv, experimentell. Gör det medvetet.

Mockup i Figma innan du bygger

Designa hela portfolion i Figma innan du rör ditt byggverktyg. Varje sida, varje case study-layout, varje responsiv brytpunkt. Det verkar som extra arbete, men det sparar enormt med tid under bygget för du fattar inte design- och teknikbeslut samtidigt.

Det ger dig också en referens att kontrollera mot. När du är djupt inne i bygget och saker börjar driva från designen kan du alltid gå tillbaka till Figmafilen och påminna dig om hur det ska se ut.

Att bygga den

Börja med startsidan, inte en case study

Startsidan har mest variation, navigation, projektgrid, intro, footer. Om du kan få startsidan att fungera följer case study-sidorna mestadels samma mönster. Att få den svåraste sidan rätt först förebygger att du upptäcker strukturella problem sent.

Desktop först, sedan anpassa

Få allt att fungera och se rätt ut på desktop, sedan anpassa till tablet och mobil. Responsiv design är viktigt, men att försöka designa för alla brytpunkter samtidigt är ett recept för långsam progress och frustration.

Animationer: less is more

Subtila laddningsanimationer och hover-effekter ger polish. Tunga animationer på case study-sidor kan distrahera från innehållet. Case study-texten bör hålla uppmärksamheten, om du behöver flashiga animationer för att göra det intressant kanske texten behöver mer arbete.

Den svåraste delen: att publicera

Vid någon punkt behöver du trycka på publicera. Och det här är genuint den svåraste delen, för det kommer aldrig att kännas redo.

Du kommer att titta på den och tycka den inte är tillräckligt bra. Du kommer att jämföra den med portfolios från designers med tio års mer erfarenhet. Du kommer att vilja justera en sak till, ändra en marginal till, skriva om ett stycke till.

Här är vad jag har lärt mig: den ofullkomliga portfolion som är live ger dig uppdrag. Den perfekta portfolion som fortfarande är i Figma ger dig ingenting.

Publicera den. Den behöver inte vara perfekt. Den behöver existera. Du kan iterera efter att den är live, och det kommer du att göra, för inom några månader har du vuxit tillräckligt för att delar av den redan känns förlegade. Det är normalt. Det är tillväxt. Portfolion är en levande sak, inte en färdig produkt. Målet är att bygga din designportfolio en gång och sedan fortsätta förbättra den.

Efter publicering: portfolion är aldrig klar

Några praktiska saker att göra när den är live:

• Lägg till nya projekt när du avslutar dem. Sätt en påminnelse att uppdatera minst en gång per kvartal.
• Följ hur folk interagerar med den. Var klickar de? Hur långt scrollar de i case studies? Det här är UX-research på din egen produkt.
• Håll en löpande lista med förbättringar. Försök inte fixa allt på en gång. Notera vad som stör dig och batcha uppdateringarna.
• Dela den. Posta den på sociala medier. Inkludera den i din e-postsignatur. Skicka den till folk i ditt nätverk. En portfolio fungerar bara om folk ser den.

Den större bilden

Vi befinner oss i ett intressant ögonblick som designers. Verktygen utvecklas snabbt, gränsen mellan design och utveckling suddas ut, och frågan om vad som gör en designer värdefull ställs högljuddare än någonsin.

Jag tror svaret är precis det en bra portfolio visar: tydligt tänkande, medvetna beslut, förmågan att lösa problem för riktiga människor och en process som producerar konsekventa resultat. De färdigheterna blir inte mindre värdefulla för att AI kan skriva kod eller generera skärmar. De blir mer värdefulla, för de är det som AI inte kan ersätta.

Din portfolio är inte bara ett skyltfönster. Det är beviset för att du har något som verktygen inte har.

Så bygg den. Leverera den. Iterera på den. Och sedan gå och gör det arbete du vill göra.