Portfoliohacket, der får alle til at ønske at ansætte dig

Sådan bygger du de smukkeste projekter til din portefølje

Et smukt sketch-design, som du kunne bygge for at få din portefølje til at skille sig ud

Hvis du er en softwareudvikler, der ansøger om at få dit første job, bør det at være en fremragende portefølje være en af ​​dine hovedprioriteter.

Selvom dit cv er absolut vigtigt og vil være den første ting, som arbejdsgivere vil se på, vil din portefølje være dit hemmelige våben til at skille sig ud og vise kompleksiteten i de projekter, du har arbejdet på.

Selv hvis du har bygget nogle virkelig komplekse projekter, hvis du ikke kan vise dem på en måde, der får arbejdsgiverens opmærksomhed, vil al din indsats være forgæves.

For at sige det i enkle ord, hvis din portefølje ikke ser godt ud, ser du ikke godt ud i arbejdsgiverens øjne.

Jeg ved dette, fordi jeg hjælper folk fra hele verden med at blive webudviklere og få deres første fjernjob. Hver dag ser jeg den enorme indflydelse, at have en stærk portefølje, på deres chancer for at lande deres første job.

Dette er især vigtigt, hvis du ønsker at få et job som en front-end eller full-stack webudvikler. Dine HTML- og CSS-færdigheder er vigtige, men du skal i sidste ende bygge en stor UI / UX.

I et rigtigt job er der sandsynligvis en designer i dit team, der tager sig af at designe UI / UX. Du skal dog vise, at du kan bygge smukke produkter baseret på designernes specifikationer.

Hvordan gør du det, hvis du ikke har en designer, der hjælper dig med din portefølje?

Her er den ikke-så-hemmelighed-mere hack, som vi beder vores studerende om at bruge.

Hacken: Byg et par fuldspecificerede projekter ved hjælp af en andens design

Hvis du vil have din portefølje til at skille sig ud, skal du opbygge et par smukke frontend-projekter, der kommunikerer din opmærksomhed på detaljer og kærlighed til stor UI / UX.

Du kan bare kopiere ethvert websted, du kan lide (f.eks. Pinterest). Det vil dog give et meget bedre indtryk, hvis du bygger noget smukt, som ikke mange mennesker ved om.

Én tilgang er at besøge dribbble.com og finde et par konceptwebsteder, som du kan bygge. Mange designere tager sig tid til at forestille sig hvordan bestemte websteder ville se ud, hvis de blev bygget fra bunden. Imidlertid implementeres disse designs ofte ikke. Her er hvor du kommer ind: bare vælg en og bygg den fra bunden. Her er et par eksempler - og husk at linke til den originale designer, hvis du følger denne idé.

Et par konceptwebsteder findes på Dribbble

Problemet med denne tilgang er imidlertid, at de fleste af disse designs har visuelle aktiver (for eksempel baggrundsbilleder), som du ikke kan eksportere til at inkludere i din implementering. Som juniorudvikler er du sandsynligvis ikke stor endnu med at være opmærksom på alle de små detaljer, som designeren tænkte på (f.eks. Marginer, polstring, skrifttypestørrelser osv.).

Her er en alternativ tilgang, der får dine porteføljeprojekter til at se så fantastiske ud som de originale design. Find gratis skisseskabeloner, eksporter dem til Zeplin, og bygg dem baseret på detaljerede specifikationer.

Lad os analysere denne tilgang trin for trin:

Trin # 1: Download en gratis skitseskabelon

Sketch er et af de mest populære designværktøjer, der anvendes af produktdesignere i dag. Bare gå til Google og søg efter gratis skittskabeloners websted. Åbn et par af disse resultater, og find et webstedsdesign, som du vil bygge. Her er en stor, jeg netop fandt ved hjælp af denne tilgang.

En anden skisseskabelon, som du kan bruge til at opbygge et utroligt godt designet projekt til din portefølje

Download og installer nu Sketch (der er en gratis 30-dages prøveperiode), og åbn den sketch-skabelon, du downloadede i det forrige trin med det. Desværre er Sketch kun tilgængelig til Mac. Hvis du er en Windows-bruger, kan du prøve Lunacy i stedet.

Sørg for, at designet er komplet, og at det er noget, du vil bygge. Når du har fundet et design, du kan lide, skal du gå videre til næste trin.

Trin # 2: Eksporter designet til Zeplin

Zeplin er et andet fantastisk værktøj bygget til at hjælpe designere og udviklere med at samarbejde mere effektivt med hinanden.

Designere uploader deres designs til Zeplin, og Zeplin viser alle skrifttypestørrelser, marginer og polstringer, så udviklere let kan få disse detaljer uden at have nogen designkendskab. Zeplin genererer endda CSS-koden for mange af disse komponenter til dig. Endelig giver det dig også mulighed for at eksportere alle billeder fra den originale Sketch-fil, så du nemt kan bruge dem, når du bygger webstedet.

Gå videre og tilmeld dig Zeplin. Du kan bruge deres gratis konto, der er gyldig til 1 projekt (det er alt hvad du har brug for). Genstart nu Sketch og gå til menuen Plugins. Hvis du ser en indstilling der kaldes Zeplin, er du god til at gå. Hvis du ikke kan se muligheden, skal du følge disse instruktioner for manuelt at installere plugin.

Når Zeplin-pluginet er installeret i Sketch, skal du gå til Plugins> Zeplin og klikke på Export Expected Selected Artboards. Det sketch-design, du har downloadet, kan have flere tegnebræt, der hver svarer til en anden visning af appen / webstedet.

Sådan bruges Sketch-eksport af designet til Zeplin

Følg instruktionerne, og upload alle tegnebræt, du vil implementere, til Zeplin.

Trin # 3: Byg designet på baggrund af dets detaljerede specifikationer

Åbn dine nyligt uploadede designs i Zeplin, og bemærk, hvor mange detaljer du får, når du holder musepekeren på hvert element i designet. Da designet er organiseret ved hjælp af lag i Sketch, kan Zeplin differentiere hvert element og vise dig specifikationer såsom skrifttypestørrelser og mellemrum mellem elementer.

Et sketch-design, der eksporteres til Zeplin, hvor du kan se alle specifikationerne og endda den genererede CSS-kode

Hvis du vil eksportere et billede, skal du klikke på billedet i Zeplin og se efter muligheden for at downloade PNG-billedet i højre menu.

Sådan downloades visuelle aktiver fra Zeplin

Hvis du ikke kan se denne mulighed, skal du gå tilbage til Sketch, klikke på det billede, du vil gøre eksportbart, og klikke på den indstilling, der siger Make Exportable. Efter dette skal du bare uploade tegnebrætne til Zeplin og prøve igen.

Valgmulighed i Sketch for at gøre billeder, der kan eksporteres i Zeplin

Endelig skal du bare bruge alle disse detaljerede specifikationer og aktiver af høj kvalitet til at oprette webstedet. Og husk, at store UI'er er lavet af hundreder af små detaljer. Selvom du måske ikke sætter pris på disse detaljer individuelt, skal du implementere hver enkelt af dem omhyggeligt ved hjælp af specifikationerne fra Zeplin, og du vil se, hvordan det endelige resultat ser smukkere ud end noget, du nogensinde har bygget før.

Tilføjelse af efterbehandlingen

Ved at følge denne tilgang hjælper du ikke bare med at have en stor portefølje, der fanger opmærksomhed fra potentielle arbejdsgivere. Det vil også hjælpe dig med at værdsætte den store indsats bag designernes arbejde, og det vil gøre dig meget bedre til at arbejde med designere på dit team. Dette er i sig selv også en stor læringsoplevelse, som arbejdsgivere vil sætte pris på.

Du kan følge denne samme tilgang til at finde eksisterende porteføljedesign til at opbygge din aktuelle porteføljeside. Du behøver ikke at designe din portefølje fra bunden for at den skal være unik, du har bare brug for indholdet i det for at være autentisk.

Husk at tilføje alle dine tidligere projekter til din portefølje, også de bagvedliggende projekter. For dem kan du prøve at bruge kort, der viser projektets titel med en smule skrifttype over en ensfarvet eller bare et lille stykke af projektets brugergrænseflade. Det vil gøre designen af ​​din portefølje konsistent.

Hvert projekt bør liste over de anvendte teknologier og endda en lille beskrivelse. Mere vigtigt er det, at du skal linke til den live version af disse projekter (det er her dine nye front-end-projekter vil lyse) og til GitHub-reposerne, der indeholder koden til dine projekter.

Til sidst skal du ikke glemme at medtage dine kontaktoplysninger, et link til din GitHub-profil og en liste over andre ting, der vil gøre din portefølje unik (f.eks. Open source-bidrag, artikler, du har skrevet og noget andet unikt om dig) .

Afslutter

At opbygge en iøjnefaldende portefølje er et virkelig magtfuldt hack, men glem ikke, at du i sidste ende bliver nødt til at bestå tekniske og adfærdsmæssige interviews for at vise, at du kan få gjort arbejdet og få jobbet.

Hos Microverse beder vi vores studerende om at dedikere næsten 180 timer af vores træningsprogram til kodning af strukturer og algoritmer og at forberede sig til interviewene. Sørg for også at forberede dig på det næste trin.

Hvis du har spørgsmål om den porteføljemetode, der er forklaret i denne artikel, eller om at få et job generelt, er du velkommen til at følge mig på Twitter og stille mig ethvert spørgsmål, du har.