Portfólió weboldal készítése, amely munkát hoz

Ahhoz, hogy egy portfólió weboldal munkát hozzon, válaszd ki a négy-nyolc legjobb projektedet a célközönségednek, mutasd be mindegyiket rövid történetként — a probléma, amit megoldottál, mit csináltál, és az eredmény —, és tegyél minden oldalról könnyen elérhetővé. Tartsd gyorsan, különösen ha sok a kép, és tedd a saját neveddel ellátott domainre. Az eszköz kevésbé fontos, mint a kiválogatás és az írás.

Kezdd azzal, kik néznek

A portfólió egy értékesítő oldal, ahol a munkád a termék. Mielőtt elrendezést választanál, döntsd el, kinek kell felvennie téged, és mit kell látnia:

Ha két nagyon különböző közönséget szolgálsz ki — mondjuk termékdizájn állásokat és freelance illusztrációt —, fontold meg külön szekciókat, vagy akár külön weboldalakat, hogy egyik közönségnek se kelljen kutatnia.

Mit tartalmazzon

A munka

Válassz kevesebb, de jobb projektet. Vedd ki azt, amit nem szeretnél újra elvégezni. A legerősebb, legrelevánsabb darabot tedd elsőnek; sok látogató nem görget tovább az első sornál.

A designerek és fejlesztők legjobb projektjei esettanulmánnyá válnak. Hasznos szerkezet:

1. A probléma — egy-két mondat a helyzetről és arról, kit érintett.
2. A szereped — mit csináltál, és mit csináltak mások. Legyél pontos; a túlzást egy interjúban könnyű észrevenni.
3. A folyamat — néhány kulcsdöntés, vázlatokkal, drótvázakkal vagy kódrészletekkel.
4. Az eredmény — mi lett szállítva, és bármilyen kimenetel, amelyet őszintén ki tudsz mondani. Ha nem oszthatsz meg számokat, írd le a változást minőségileg.

Fotósoknak és illusztrátoroknak a képek végzik a munka nagy részét. Csoportosítsd őket egyértelmű sorozatokba (esküvők, termék, szerkesztőségi), tarts rövid képaláírásokat, és hagyd lélegezni a rácsot.

Rólam és kapcsolat

A rólam szekcióban legyen ott, ki vagy, mit csinálsz, kinek, és hol vagy, vagy hogy távolról dolgozol-e. Egy valódi fotó segít. A kapcsolatfelvételi út legyen nyilvánvaló minden oldalról: egy rövid űrlap, egy e-mail-cím, vagy egy link egy hívás foglalásához. Ha foglalásokat fogadsz, írd le, hogyan.

Opcionális oldalak

• Szolgáltatások és díjak — hasznos szabadúszóknak, ha ki akarod szűrni a rossz illeszkedésű megkereséseket.
• Önéletrajz vagy CV — hasznos állást keresőknek; gyakori egy letölthető PDF plusz egy oldalon lévő változat.
• Írások vagy jegyzetek — csak akkor érdemes, ha rendszeresen frissíted. Egy évekkel ezelőtt elhagyott blog jobban árt, mint egy hiányzó blog.
• Ajánlások — csak valódiak, engedéllyel.

Döntések és kompromisszumok

Statikus oldal vagy alkalmazás? A legtöbb portfólió egyszerű, tartalomvezérelt oldal, és nincs szüksége adatbázisra. Csak akkor adj hozzá egyet, ha van rá ok: egy kapcsolatfelvételi űrlap, amely érdeklődéseket ment, egy galéria, amelyet gyakran frissítesz egy admin oldalon, vagy ügyfél-kiválogatás, ahol az emberek fotókat választanak.

Hol élnek a képek. A nagy képek a lassú portfóliók fő oka. Méretezd át és tömörítsd feltöltés előtt, szolgálj modern formátumokat, és töltsd a képeket lazán, ahogy a látogató görget. Nagy vagy gyakran változó galériához a képeket megfelelő fájltárolóban tartsd, ne a kódba csomagold.

Hogyan fogod frissíteni. Légy őszinte ezzel. Ha havonta adsz hozzá munkát, kell egy könnyű mód rá — egy egyszerű admin oldal, egy CMS, vagy egy építő, amelyben kényelmesen szerkesztesz. Ha évente kétszer frissítesz, az oldal közvetlen szerkesztése is jó.

Keresési láthatóság. Ha azt akarod, hogy az emberek a neved plusz a szakmád és a városod keresésével megtaláljanak, az oldalnak valódi szöveg kell, megfelelő címsorok, egyedi oldalcímek és leírások, és leíró alt szöveg a képeken. Lásd: SEO AI-val épített weboldalakhoz.

Első prompt egy AI-építőnek

A jó prompt megnevezi a közönséget, az oldalakat, a munkát és a stílust:

Építs portfólió weboldalt Lena Parknak, termékdesignernek, aki vezető belső pozíciókat keres SaaS-cégeknél. Oldalak: Főoldal rövid bemutatkozással és öt esettanulmány rácsával; egy esettanulmány-oldal sablon szekciókkal a problémára, a szerepemre, a folyamatra (képgalériával) és az eredményre; Rólam fotóval, rövid életrajzzal és CV-letöltéssel; Kapcsolat egy egyszerű űrlappal (név, e-mail, üzenet), amely adatbázisba mentődik és köszönő üzenetet mutat. Stílus: nyugodt és minimalista, sok fehér tér, egy kiemelő szín, nagy, olvasható betűk. Jól működjön telefonon. Használj egyértelműen jelölt helyőrző projekteket, amelyeket egyesével cserélhetek.

Ezután egyesével cseréld a helyőrzőket a valódi projektekre, ne egyetlen üzenetben illeszd be az egész tartalmat. Könnyebb ellenőrizni, és az AI minden oldalt helyesen fog kezelni.

Tovább promptmintákért lásd: hogyan írj promptokat AI alkalmazásépítőknek.

Építési lépések

1. Válaszd ki a közönséget és a projekteket még mielőtt bármilyen eszközhöz nyúlnál.
2. Írd meg a szöveget minden esettanulmányhoz először egy dokumentumban: probléma, szerep, folyamat, eredmény.
3. Készítsd elő a képeket — vágd, méretezd és tömörítsd őket. Adj értelmes fájlneveket.
4. Generálj vagy válassz kiinduló elrendezést. A portfólió-sablonok böngészése gyors módja annak, hogy lásd, melyik stílus illik a munkádhoz.
5. Építsd meg előbb a főoldalt és egy esettanulmányt, tedd rendbe őket, aztán ismételd a mintát.
6. Add hozzá a rólam és kapcsolat oldalakat. Teszteld az űrlapot végponttól végpontig.
7. Ellenőrizd telefonon. A portfóliók gyakran elromlanak kis képernyőn: szűk rácsok, óriási képek, apró képaláírások.
8. Add hozzá a keresési alapokat és egy megosztási képet, hogy a linkek jól nézzenek ki, amikor elküldöd őket.
9. Publikálj és kösd be a domaint. Lásd: hogyan csatlakoztass egyedi domaint.
10. Kérj meg két embert a célközönségedből, hogy harminc másodpercig nézzék meg, és mondják meg, mit csinálsz. Ha nem tudják, javítsd a főoldalt.

Gyakori hibák

• Mindent mutatni. A gyenge projektek hígítják az erősöket. Válogass.
• Képek kontextus nélkül. Tervezésnél és fejlesztésnél a képernyőkép probléma és a szereped nélkül keveset mond egy munkáltatónak.
• Lassú, nehéz oldalak. A tömörítetlen, teljes felbontású képek elromlottnak érzetik az oldalt mobiladaton.
• Okos navigáció. A szokatlan menük és görgetési effektek lehetnek szórakoztatók, de nem, ha a látogatók nem találják meg a munkádat vagy az e-mail-címedet.
• Elrejtett elérhetőség. Tegyél kapcsolatfelvételi linket minden oldal fejlécébe és láblécébe.
• Olyan ügyfélmunka megmutatása, amelyhez nincs engedélyed. Nézd meg a szerződéseket és a titoktartási megállapodásokat; szükség esetén anonimizáld vagy írd le a projektet.
• Soha nem frissíteni. A régi munkák és egy évekkel ezelőtti „legutóbbi projekt” rossz jelzést küld.

Költségek

Egy személyes portfólió futó költségei általában kicsik: egy évente megújított domain és a hosztolás. A képekben gazdag oldalak valamivel többe kerülnek, ha sok nagy fájlt tárolsz és szolgálsz ki. Az weboldal-építők gyakran havi előfizetést kérnek, amely tartalmazza a hosztolást; a saját építés olcsóbb lehet, de karbantartással jár. Ellenőrizd az aktuális árakat az egyes szolgáltatók oldalán, mert ezek változnak.

Amikor a kész termék a jobb választás

A portfólió-platformok és portfólió-sablonokat kínáló weboldal-építők jók, ha gyorsan szeretnél csiszolt eredményt, vizuális szerkesztőt szeretnél, és nincs szükséged semmi egyedire. A fotósok, akik nyomtatott képeket árulnak vagy ügyfél-galériákat szállítanak, jobban járhatnak egy dedikált fotós platformmal, amely már kezeli a kiválogatást és a nyomtatási eladásokat. Saját oldalt akkor építs, ha egyedi dizájnt akarsz, olyan funkciót, amelyet a platformok nem kínálnak, kódot vagy interaktív munkát szeretnél közvetlenül megmutatni, vagy egyszerűen birtokolni akarod az oldalt.

Építés a Mythexszel

A Mythex fel tud építeni portfóliót egy fenti promptnak megfelelő leírásból. Élő előnézetben látod telefonméretű kerettel, az elrendezést és a szöveget a chatben finomítod, és egy neved.mythex.app címre publikálsz. Ha olyan kapcsolatfelvételi űrlapot akarsz, amely érdeklődéseket ment, a Mythex adatbázist ad a projekthez; képgalériákhoz a projekt fájltárolóját használhatja, hogy a képek ne a kódba kerüljenek. Pro csomagban a Mythexben vásárolhatsz domaint, vagy csatlakoztathatsz egy meglévőt, és exportálhatod a kódot vagy szinkronizálhatod GitHubra, ha később máshol akarod hosztolni.

A dokumentáció ezt a portfólió használati esetben fedi le, és elmagyarázza a fájltárolást. Kiindulhatsz az AI portfólió weboldal-készítőből vagy egy konkrét stílusból, például a fejlesztői portfólióból vagy a fotós portfólióból sablonokból.

Kérdések