Hi ha pàgines web que semblen targetes de visita ampliades: una fotografia, quatre frases sobre qui ets i un formulari de contacte que pràcticament has de cercar amb lupa. I després hi ha aquestes altres webs que, en qüestió de segons, aconsegueixen transmetre la personalitat d'algú sense necessitat que t'expliqui massa.
No sempre són les més espectaculars. Algunes amb prou feines utilitzen dos colors i una tipografia senzilla. Altres són plenes de moviment, fotografies enormes o petits detalls que conviden a explorar. El més interessant és que totes parteixen d'una idea: una pàgina personal t'hauria d'ajudar a mostrar qui ets, què fas i per què val la pena conèixer-te.
Si cerqueu exemples de pàgines web personals per crear la vostra, probablement ja teniu algunes referències desades. Potser us agrada el minimalisme d'una web d'arquitectura, les galeries d'un fotògraf o la manera com un escriptor presenta els seus llibres. El problema apareix quan intentes barrejar-ho tot i acabes amb una pàgina que té una mica de cada estil, però cap personalitat reconeixible.
Per evitar-ho, hem seleccionat 15 webs reals descriptors, dissenyadors, fotògrafs, professionals i creatius. No ens limitarem a ensenyar-te pàgines boniques: analitzarem què funciona a cadascuna, quines decisions de disseny resulten interessants i què podries aprofitar per al teu propi projecte.
Perquè la inspiració serveix per aprendre a prendre decisions, no per copiar la web del veí canviant-li el logotip.
Abans d'entrar a la nostra selecció, convé aclarir que no hi ha un únic model de pàgina personal que funcioni per a tothom.
Un escriptor necessita presentar les seves publicacions i facilitar que els lectors descobreixin els llibres. Un fotògraf ha de donar protagonisme a les imatges. I un consultor necessita explicar els seus serveis , transmetre credibilitat i facilitar que els visitants hi contactin.
Per això hem organitzat aquests 15 exemples de pàgines web personals per perfils professionals. Les pàgines i els enllaços shan contrastat amb els seus llocs oficials, encara que el seu disseny pot canviar amb el temps.
Els 15 exemples d'aquesta guia
| escriptors | Brandon Sanderson, Elizabeth Gilbert, Neil Gaiman |
| Dissenyadors i creatius | Adham Dannaway, Anton & Irene, Tobias Ahlin, Alice Lee |
| fotògrafs | Jessica Chou, Chris Burkard, Peter McKinnon |
| marca personal | Marie Forleo, Ann Handley, Ali Abdaal |
| originals | Bruno Simon, Dennis Snellenberg |
Les pàgines web descriptors tenen una particularitat: el veritable protagonista no hauria de ser únicament lautor, sinó també la seva obra.
Una bona web d'autor permet conèixer els seus llibres, identificar on començar a llegir, trobar novetats i establir una relació amb els qui segueixen la seva feina. I tot això sense esdevenir un catàleg desordenat de portades.
En lloc de limitar-se a reunir les seves novel·les, el web de Brandon Sanderson organitza diferents universos i sagues literàries, incorpora notícies i ofereix una cosa especialment interessant: indicadors del progrés dels projectes d'escriptura. Per a una comunitat que segueix de prop cada nova publicació, aquesta informació aporta un motiu per tornar.
Què podem aprendre: si tens una audiència fidel, la teva web no hauria de ser només un aparador estàtic. Pots incorporar novetats, avenços de projectes o continguts exclusius que animin els lectors a visitar-la periòdicament.
2. Elizabeth Gilbert — Quan un llançament marca el disseny
Al lloc d'Elizabeth Gilbert, l'obra destacada ocupa un lloc protagonista i s'acompanya d'informació editorial, ressenyes i possibilitats de compra diferents. L?autora compta amb una trajectòria àmplia, però la portada aprofita aquesta notorietat per dirigir l?atenció cap a una publicació concreta.
Què podem aprendre: no cal que tots els teus projectes rebin exactament el mateix protagonisme. Si esteu llançant un llibre, una exposició o un nou servei, podeu reorganitzar temporalment la portada per acompanyar aquest objectiu.
3. Neil Gaiman — El valor d'un fitxer ben organitzat
La web de Neil Gaiman n'és un exemple diferent. El seu principal atractiu no és perseguir les últimes tendències visuals, sinó reunir un catàleg extens de llibres, historietes i altres treballs mitjançant seccions diferenciades. El seu apartat bibliogràfic funciona com a referència per descobrir obres i explorar una carrera literària molt diversa.
Què podem aprendre: si teniu molts anys de trajectòria, l'arquitectura de continguts importa tant com l'estètica. Una organització clara per obres, categories o etapes professionals pot ser més útil que una portada espectacular que dificulti trobar informació.
Aquests tres exemples demostren que el disseny web per a escriptors pot respondre a objectius molt diferents: mantenir una comunitat, promocionar un llançament o documentar una trajectòria.
Aquí les regles canvien una mica. Quan algú contracta un dissenyador, il·lustrador o desenvolupador creatiu, la pròpia pàgina web forma part de la carta de presentació.
No n'hi ha prou amb afirmar que tens sensibilitat estètica o saps crear experiències digitals. El teu portfoli hauria de demostrar-ho.
Això sí, demostrar creativitat no significa utilitzar animacions a cada cantonada. Un bon portfoli creatiu necessita equilibri entre personalitat, claredat i facilitat per descobrir els projectes.
Adham Dannaway combina disseny de producte i desenvolupament frontend. La seva coneguda presentació visual divideix aquestes dues facetes i permet entendre ràpidament el perfil professional. La web enllaça a més projectes, recursos i continguts relacionats amb la seva feina.
Què podem aprendre: quan ofereixes serveis diferents, no necessites amagar-los sota una descripció genèrica. Podeu utilitzar la composició visual per explicar com es complementen. Una bona portada respon ràpidament a la pregunta «què fas exactament?».
5. Anton & Irene — Els projectes expliquen millor que els adjectius
Tot i que és un estudi format per dos professionals, la seva web és una referència interessant per als que volen desenvolupar una marca creativa. Presenta treballs per a diferents clients i connecta aquests projectes amb disciplines com a estratègia, disseny d'interfícies, direcció d'art i desenvolupament. El vostre portfoli evita dependre exclusivament d'una llista d'habilitats.
Què podem aprendre: ensenyar projectes concrets sol transmetre més que descriure't com a «innovador, apassionat i creatiu». Si afegeixes el problema inicial, les decisions preses i el resultat del treball, ajudes a comprendre com penses i què hi pots aportar.
6. Tobias Ahlin — Ensenyar també pot ser una manera de demostrar experiència
Tobias Ahlin presenta la seva activitat al voltant de tres idees: dissenyar, experimentar i ensenyar. La seva pàgina reuneix articles, tutorials i projectes com ara SpinKit o Moving Letters, petites eines que permeten apreciar directament els seus coneixements tècnics.
Què podem aprendre: el teu portfoli no ha de limitar-se a treballs realitzats per a clients. Publicar recursos propis, experiments o tutorials també permet demostrar competències, generar confiança i atraure visitants interessats a la teva especialitat.
El web d'Alice Lee presenta il·lustracions, murals, ceràmiques i projectes comercials. Les imatges tenen un protagonisme evident i el seu treball manté una personalitat gràfica reconeixible, encara que utilitzi tècniques i suports diferents. El lloc també separa categories i facilita les consultes professionals.
Què podem aprendre: una identitat visual sòlida no consisteix a fer servir sempre la mateixa plantilla. Consisteix a mantenir una coherència reconeixible a través del color, les formes, les il·lustracions i el to de comunicació.
Aquests exemples de portfolis web mostren quatre maneres de construir autoritat creativa: explicar una especialització, documentar projectes, compartir coneixements i desenvolupar un llenguatge visual propi.
I cap d'aquests objectius no exigeix necessàriament utilitzar una web complicada.
En un web de fotografia, les imatges han de parlar. Però això no vol dir que tota la resta hagi de desaparèixer.
Una bona galeria necessita ritme, jerarquia i organització. No és el mateix mostrar vint-i-cinc fotografies en una quadrícula que construir una selecció on cada imatge tingui espai per respirar.
Els exemples següents mostren enfocaments diferents.
8. Jessica Chou — Deixar que la feina ocupi el primer pla
La pàgina de Jessica Chou presenta una gran selecció de retrats editorials i projectes fotogràfics. Les imatges apareixen acompanyades per títols i referències a les seves publicacions, permetent que el visitant descobreixi tant l'estil de la fotògrafa com el context professional dels encàrrecs.
Què en podem aprendre: un fotògraf no necessita omplir la portada d'explicacions. Una selecció ben organitzada, amb informació sobre els projectes i una via clara de contacte, pot presentar la feina amb molta més força que diversos paràgrafs d'autopromoció.
9. Chris Burkard — Convertir una especialitat en una identitat professional
Chris Burkard desenvolupa la seva feina al voltant de la fotografia de natura, aventura, viatges i surf. La seva pàgina integra aquesta especialització amb la seva trajectòria com a director creatiu, autor i conferenciant. La identitat professional no només depèn d'una fotografia espectacular, sinó d'un territori temàtic reconeixible.
Què podem aprendre: no necessites mostrar absolutament tot allò que saps fotografiar. Si vols posicionar-te en una especialitat, una selecció coherent pot comunicar millor la teva proposta que una galeria on conviuen feines sense relació aparent.
10. Peter McKinnon — Una galeria que evita distraccions
El web de Peter McKinnon presenta un portfoli fotogràfic on les imatges ocupen pràcticament tota latenció. La seva navegació permet explorar categories com ara retrats i fotografia lifestyle, reduint la necessitat d'introduir elements decoratius que competeixin amb el contingut.
Què en podem aprendre: en determinades disciplines, el disseny ha de saber retirar-se a temps. Una estructura neta, bons espais i fotografies ben seleccionades solen funcionar millor que no pas una col·lecció d'efectes visuals.
No totes les pàgines personals necessiten funcionar com a portfolis artístics. Per a consultors, formadors, escriptors especialitzats i professionals independents, la prioritat sol ser diferent: explicar qui ajuden, demostrar experiència i facilitar el pas següent.
Aquí el disseny web per a marca personal ha de combinar personalitat i claredat comercial. Una portada pot ser preciosa, però si el visitant no entén què ofereixes, per a qui treballes o com contractar-te, probablement no compleixi la seva funció.
11. Marie Forleo — Una marca personal construïda al voltant dels seus productes
Marie Forleo combina la faceta d'autora i comunicadora amb programes formatius, vídeos, recursos i continguts de negoci. El web articula diferents línies d'activitat sota una identitat reconeixible i ofereix al visitant diverses maneres de començar a conèixer la seva feina.
Què podem aprendre: quan el teu negoci creix i comences a oferir diferents serveis o productes, necessites una arquitectura que els relacioni. Una marca personal no ha de quedar limitada per sempre a una biografia i una pàgina de contacte.
El web d'Ann Handley concedeix una posició destacada al seu newsletter, Total Annarchy, mentre presenta la seva trajectòria com a escriptora i conferenciant. És una decisió interessant: en lloc de tractar el correu electrònic com a element secundari, l'utilitza com una via principal per connectar amb la seva audiència.
Què podem aprendre: si la teva estratègia depèn de compartir coneixements i construir una comunitat, la newsletter pot tenir un protagonisme semblant al dels teus serveis. No tot s'ha d'acabar en un botó de «Sol·licitar pressupost».
13. Ali Abdaal — Organitzar una marca personal amb diferents públics
El web d'Ali Abdaal integra vídeos, articles, recursos, llibres i productes formatius. Una característica interessant és que orienta els visitants segons el que volen aconseguir: aprendre sobre productivitat, desenvolupar un negoci o millorar determinades habilitats.
Què podem aprendre: quan tens públics amb interessos diferents, no sempre n'hi ha prou amb organitzar el menú per formats com ara «blog», «vídeos» i «cursos». També podeu estructurar la navegació al voltant de les necessitats dels usuaris.
Aquests tres casos mostren que una bona web de marca personal no es construeix únicament al voltant de l'aspecte físic, la biografia o els èxits de qui la protagonitza. També cal pensar en la persona que la visita.
Cerca informació? Voleu contractar un servei? Necessiteu conèixer la vostra experiència? Està interessada en un curs?
Com més aviat pugui trobar el seu camí, més útil resultarà la web.
Acabem la selecció amb dos projectes que demostren fins on pot arribar la creativitat digital quan la pròpia experiència forma part del que un professional vol ensenyar.
Són webs sorprenents, però convé analitzar-los amb perspectiva. Una navegació experimental pot ser extraordinària per a un desenvolupador creatiu i completament innecessària per a una assessoria.
14. Bruno Simon — Un portfoli que es converteix en una experiència interactiva
La cartera de Bruno Simon permet recórrer un escenari tridimensional conduint un petit vehicle. En lloc de presentar els vostres coneixements de programació mitjançant una llista de tecnologies, els demostra directament amb una experiència desenvolupada utilitzant Three.js i altres eines.
Què podem aprendre: quan la teva especialitat és crear experiències digitals, la teva pròpia pàgina es pot convertir en una demostració del que saps fer. Això sí, la creativitat s'ha d'acompanyar de consideracions sobre el rendiment, l'accessibilitat i la facilitat d'ús.
15. Dennis Snellenberg — Quan les animacions formen part de la teva identitat
El portfoli de Dennis Snellenberg demostra que no cal convertir una pàgina web en un videojoc per aconseguir una experiència memorable. El seu disseny combina una fotografia de grans dimensions, tipografia protagonista, transicions cuidades i petites animacions que acompanyen el visitant mentre descobreix els seus projectes.
L'interessant és que aquests recursos no hi són únicament per decorar. Dennis s'especialitza precisament en disseny i desenvolupament d'experiències digitals, per la qual cosa la seva web funciona com una demostració de les seves capacitats. A més, permet explorar projectes reals i accedir fàcilment a la vostra informació professional i de contacte.
Què podem aprendre: les animacions i les microinteraccions poden aportar personalitat a una web quan tenen sentit amb la feina que volem mostrar. El secret és utilitzar-les per reforçar l'experiència, sense sacrificar la llegibilitat, l'accessibilitat ni la facilitat de navegació.
Els dos darrers exemples, Bruno Simon i Dennis Snellenberg, mostren dues maneres diferents de convertir una pàgina personal en una demostració de talent. El primer aposta per una experiència tridimensional sorprenent; el segon utilitza el moviment, la composició i les transicions per transmetre el domini del disseny interactiu.
Això no vol dir que hagis d'omplir la teva web d'animacions. Significa que el disseny pot demostrar el que saps fer fins i tot abans que algú llegeixi el teu currículum.
I aquesta és una de les millors lliçons que podem extreure d'aquests portfolis: l'originalitat funciona quan està connectada amb la teva identitat professional, no quan només s'utilitza per cridar l'atenció.
Després de veure quinze exemples tan diferents, podria semblar que no hi ha cap regla compartida. Uns fan servir fotografia, altres textos, alguns aposten per dissenys sobris i d'altres converteixen la navegació en una experiència interactiva.
Tot i això, les millors pàgines web personals solen resoldre tres necessitats: tenir una identitat reconeixible, presentar la feina de manera comprensible i facilitar que el visitant trobi el que busca.
La identitat visual no és simplement triar els teus colors preferits i utilitzar-los a tots els botons.
És la combinació de tipografies, imatges, composició, colors i to de comunicació que ajuda a fer que la teva pàgina resulti coherent amb la teva activitat.
Un fotògraf darquitectura pot necessitar una presentació sòbria i espais amplis. Una il·lustradora infantil podria fer servir un univers visual molt més expressiu. Cap opció no és millor per si mateixa: l'important és que encaixi amb la personalitat professional que volem transmetre.
En el disseny web de marca personal convé evitar un error habitual: escollir una plantilla perquè sembla moderna sense preguntar-nos si realment representa la feina que fem.
No necessites incloure tots els projectes que has realitzat des que vas començar a treballar.
Un portfoli ben seleccionat sol resultar més convincent que un recull interminable on conviuen treballs actuals amb altres que ja no representen el teu nivell professional.
Sempre que puguis, contextualitza allò que mostres. Explica breument què necessitava el client, quina va ser la teva aportació i què vas lliurar. Si disposeu de resultats comprovables i teniu permís per compartir-los, també podeu incorporar-los.
Això ajuda a demostrar experiència sense dependre exclusivament d'afirmacions com «sóc creatiu», «ofereixo solucions innovadores» o «m'apassiona la meva feina».
Un web personal hauria de permetre respondre ràpidament tres preguntes: qui ets, què fas i com es poden posar en contacte amb tu.
No totes necessiten el mateix menú, però sí una organització entenedora. En molts casos n'hi haurà prou amb una portada, una presentació professional, projectes o serveis i una pàgina de contacte.
També convé tenir cura de la versió mòbil, el contrast dels textos, la mida dels botons i la velocitat de càrrega.
Una animació pot resultar espectacular en un ordinador potent i esdevenir un obstacle des d'un telèfon amb una connexió limitada.
Per això, l'originalitat visual mai no s'hauria d'utilitzar com a excusa per descuidar l'experiència d'usuari.
Després de guardar-ne diversos exemples, arriba el moment de prendre decisions. I aquí convé començar per una pregunta força menys emocionant que triar colors: què vols aconseguir amb la teva web?
Si ets escriptor, potser necessites presentar els teus llibres i mantenir informats els teus lectors. Si treballes com a fotògraf, probablement la teva prioritat és ensenyar projectes i aconseguir nous encàrrecs. I si ets consultor, la teva web haurà d'explicar quins serveis ofereixes i facilitar que els possibles clients contactin amb tu.
El disseny ha de respondre a aquest objectiu, no a l'inrevés.
Tipus de pàgina personal | Estil que pot encaixar | Què hauria de destacar |
|---|---|---|
Escriptor o autor | Editorial | Llibres, biografia i novetats |
dissenyador gràfic | Creatiu o minimalista | Projectes i identitat visual |
Fotògraf | Visual i immersiu | Galeries i treballs seleccionats |
Consultor o professional | Clar i corporatiu | Experiència, serveis i contacte |
Il·lustrador o artista | Expressiu i artístic | Obres i estil propi |
Desenvolupador creatiu | Experimental | Competències i projectes interactius |
Aquests estils no són categories tancades. Un escriptor pot apostar per un web minimalista i un consultor pot tenir una identitat visual molt creativa.
El que és important és que les decisions estètiques no dificultin la comprensió del contingut.
També hauries de valorar quant de temps podràs dedicar al manteniment. Una pàgina plena d'animacions, efectes i funcionalitats personalitzades pot requerir més atenció que un portfoli ben estructurat.
A Zudro Digital Media desenvolupem pàgines web amb WordPress , adaptant la seva estructura i disseny a les necessitats de cada projecte. Un web personal t'hauria de permetre créixer, actualitzar els teus continguts i modificar la presentació dels teus serveis sense haver de començar des de zero cada vegada que evoluciona la teva activitat.
Depèn de la teva activitat, però normalment convé incorporar una presentació clara, informació sobre la teva experiència, una selecció de projectes o serveis i alguna manera senzilla de contactar.
També podeu afegir publicacions, testimonis verificables, recursos descarregables o una newsletter quan tinguin sentit per als vostres objectius.
No necessites omplir el menú de seccions només perquè la web sembli més completa. És preferible presentar pocs continguts útils que publicar pàgines buides o repetitives.
No són opcions incompatibles.
Un portfoli online se centra principalment a presentar treballs i projectes. Un web personal pot tenir un abast més gran i incloure serveis, biografia, articles, productes, recursos i altres formes de relació amb l'audiència.
Per a un dissenyador o fotògraf, el portfoli pot ser el centre de la pàgina personal. Per a un consultor, probablement tingui més sentit donar protagonisme als serveis i utilitzar els casos dèxit com a suport.
Hi ha diferents opcions, entre elles WordPress, Webflow, Framer, Wix i Squarespace.
L'elecció depèn del tipus de projecte, els teus coneixements, el nivell de personalització i la facilitat amb què vulguis actualitzar la web.
Per a una pàgina senzilla, un constructor visual pot ser suficient. Si necessiteu una estructura de continguts més àmplia, integracions específiques o funcionalitats personalitzades, convé estudiar una solució que permeti evolucionar el projecte sense limitacions innecessàries.
No hi ha una plataforma universalment millor per a tots els casos.
Els millors exemples de pàgines web personals no sempre són els que fan servir més animacions, fotografies espectaculars o efectes sorprenents.
Són aquells que aconsegueixen transmetre una identitat reconeixible i faciliten que el visitant comprengui què fa la persona que hi ha al darrere.
Al llarg d'aquests quinze exemples hem vist maneres molt diferents d'aconseguir-ho: escriptors que converteixen les seves webs en espais per a lectors, fotògrafs que deixen parlar les seves imatges, professionals que organitzen els seus coneixements i creatius que utilitzen la navegació per demostrar les seves habilitats.
La lliçó no consisteix a triar quina pàgina voleu copiar.
Consisteix a descobrir què necessites comunicar, a qui vols arribar i quines decisions de disseny et poden ajudar a aconseguir-ho.
Perquè la teva pàgina personal no ha d'assemblar-se a un professional famós. Ha de representar la teva feina, resultar útil per als que et visiten i evolucionar amb tu.
A Zudro Digital Media entenem el disseny web com una combinació didentitat, contingut i experiència dusuari. Una bona web pot ser visualment atractiva, però també ha de ser clara, funcional i respondre a un objectiu concret.
I aquesta probablement és la millor inspiració que podem extreure de tots aquests exemples: no necessites la pàgina més extravagant d'Internet. Necessites una pàgina que tingui sentit per a tu i per a les persones que vols atreure.
Entrades Relacionades
