Els millors dissenys web d’aquesta selecció per al 2027 tenen una cosa en comú: s’han pres la molèstia d’assemblar-se a si mateixos. Hi ha lletres que ocupen mitja pantalla, paisatges que es converteixen en una interfície, catàlegs amb personalitat i alguna portada que entra derrapant. També hi ha contingut, estructura i decisions de disseny que val la pena mirar a poc a poc.
Torna una de les sèries que més gaudeixo preparant en aquest blog. Si venies pels millors dissenys web del 2018 i el 2019 o per la selecció del 2020 i el 2021, ja saps de què va. Un passeig per pàgines que s’atreveixen a fer alguna cosa pròpia, amb comentaris sobre allò que funciona i allò que convé pensar abans de portar-ho a un altre projecte. Posa’t còmode. Hi ha material.
2027 és l’edició d’aquesta recopilació per inspirar projectes nous. Les referències estan documentades el 2025 i el 2026, i les dates apareixen als crèdits. He triat dotze webs d’Awwwards i n’he revisat els llocs: algunes són experiències de marca; d’altres han d’ordenar productes, serveis o informació cultural. Les captures conserven les versions presentades pels autors, que poden evolucionar amb el temps.
La teva empresa no necessita el pressupost d’una gran marca per treure’n alguna cosa. Una bona jerarquia, una idea gràfica ben triada o una manera més clara de mostrar el producte també són disseny. I de vegades fan més per una web que afegir-hi un altre efecte amb ganes de cridar l’atenció.
1 Lama Lama porta el seu caràcter a la pantalla
Lama Lama obre la selecció amb una aposta que no té gaires ganes de passar desapercebuda. El vermell de la presentació, les textures i el gran titular situen el to abans que hagis llegit la descripció de l’agència. Aquí la direcció d’art ja treballa a la primera pantalla.
La imatge de capçalera pertany a Lama Lama, referència documentada el 2026. Fitxa i crèdits de l’estudi.
La segona composició mostra una altra cara del mateix caràcter: un volum lluminós ocupa el centre, mentre el text i la navegació mantenen el seu espai. M’agrada la relació entre una imatge de gran presència i una estructura que continua deixant lloc al missatge. La tipografia no intenta competir en complexitat; respon amb mida i contundència.
El clip d’interacció hi afegeix una capa interessant: la imatge es transforma i fa visible una manera de tractar el contingut. L’efecte es relaciona amb l’univers de l’estudi. No sembla un complement comprat a última hora de la tarda perquè la portada tingui «alguna cosa».
De Lama Lama m’emportaria la manera de donar caràcter a una frase senzilla. El titular continua sent directe, fins i tot amb tot aquell espectacle al voltant. Per a una agència de serveis, provaria primer la portada amb el missatge i els treballs reals. Després decidiria quina transformació d’imatge pot expressar la seva manera de crear. Si la idea aguanta en una pàgina interior, hi ha matèria per animar-la. Si només tenim fum lluminós, encara falta la marca.
2 Son Daven dibuixa un lloc abans de visitar-lo
Son Daven presenta un projecte de resort i arquitectura als Carpats. La web de The First The Last, amb Maksym Stepenko i Ivan Chopei entre els crèdits, combina una paleta de terra amb lletres de gran escala i il·lustració. L’entrada té una mica de cartell i una mica de relat que comença a desplegar-se.
Fixa’t en la construcció per línies: el nom, els arbres, el relleu i els ocells semblen pertànyer a un mateix material gràfic. No és una col·lecció d’ornaments al voltant d’una fotografia bonica. Hi ha una manera de dibuixar que travessa la identitat de la pàgina i li dona un caràcter reconeixible.
Quan arribem a la localització, el mapa apareix sobre el mateix fons fosc i un bloc clar destaca el temps d’accés. La lletra amb serifes canvia el ritme respecte del nom dibuixat de l’entrada. El contrast permet passar del relat del lloc a la consulta de dades. Son Daven es presenta com un projecte de desenvolupament; les imatges arquitectòniques mostren una proposta, amb el calendari que comunica la promotora a la seva web.
Com a referència de disseny, m’interessa que el caràcter no desaparegui quan arriba la informació. En una web d’arquitectura, el repte acostuma a ser aquí: conservar la sensibilitat del projecte quan expliques superfícies, ubicació o procés. Son Daven té una veu que pots reconèixer tant en una portada com en un bloc de contingut. Veure la web del projecte.
3 Floema converteix el catàleg en disseny
Floema dissenya mobiliari i senyalització per a espais exteriors. Bürocratik presenta una web on la identitat, les imatges del producte i l’organització de les col·leccions comparteixen protagonisme. Bona notícia per a qui encara creu que un catàleg industrial està condemnat a semblar una carpeta de fitxes tècniques.
La gran F es converteix en un objecte de pedra i vegetació davant del nom Floema. A sota, el catàleg s’organitza per àmbits com Urban, Nature, RePlastic i Golf. És una decisió força més útil que deixar el mobiliari, la senyalització i els materials barrejats en un únic aparador. El símbol obre el món de la marca; els noms de les col·leccions permeten entrar-hi amb una intenció concreta.
La barreja de fons clars, accents de color, fotografies i textos breus evita que totes les pàgines semblin la mateixa fitxa amb una imatge diferent. Els blocs tenen tasques diferents: mostrar, explicar, ordenar o portar a una col·lecció. La varietat funciona millor quan hi ha una estructura que la sosté.
Per a una empresa que fabrica mobiliari, estudiaria l’entrada per context d’ús. Un arquitecte pot buscar equipament per a una plaça i un altre per a un recorregut en un espai natural. Després, la fitxa necessita mides, materials, variants i arxius del producte. La referència de Floema convida a treballar tots dos nivells: una col·lecció que es reconeix d’un cop d’ull i un detall que permet continuar amb el projecte. També hi ha força disseny a aconseguir que aquestes dades vinguin de gust.
4 Lando Norris construeix una identitat que corre
La web de Lando Norris, signada per OFF+BRAND. i documentada el 2025, porta la identitat esportiva al terreny digital amb força mala intenció gràfica, de la bona. Negre, verd intens, lletres contundents i un casc que pot funcionar gairebé com un emblema tridimensional.
Les aplicacions d’ordinador i mòbil mostren com aquest llenguatge es relaciona amb imatges, estadístiques, arxiu i botiga. La separació entre l’activitat dins i fora de la pista també dona estructura al contingut. Hi ha més que un gran retrat amb un botó de contacte a sota.
El casc és la peça estrella, però fixa’t també en el patró que viatja al fons i en les dues veus de la lletra. Els titulars inclinats d’ON TRACK tenen una energia diferent de les paraules amb serifes i de les dades petites. El verd cus la barreja. M’agrada perquè la identitat admet crit, gest i precisió dins d’una mateixa pàgina. No cal vestir les estadístiques com si fossin un altre pòster.
La lliçó per a una marca personal és concreta: el disseny pot ordenar facetes diferents d’una persona i fer-les conviure. Abans de triar una paleta cridanera, convé saber què ha de trobar cada visitant. Un aficionat, un col·laborador i algú que busca una peça de la botiga no arriben amb la mateixa intenció. Entrar a la web de Lando Norris.
5 Siena Film Foundation navega com una pel·lícula
Siena Film Foundation presenta el seu treball cinematogràfic amb una interfície que recull el llenguatge d’una tira de pel·lícula. La referència del 2025 acredita Niccolò Miranda, Federico i G-NS Studio. El negre, els fotogrames i la tipografia construeixen una entrada molt vinculada a allò que mirarem.
A la captura, la imatge ocupa gairebé tota la composició i el nom s’hi integra al damunt. El marc corbat i la repetició de bandes suggereixen una seqüència, no una targeta aïllada. La web fa servir aquella lògica per convertir el catàleg de pel·lícules en una experiència amb un ritme particular.
És un bon exemple de com el tema pot determinar la navegació. El cinema proporciona un material visual, una seqüència i una manera de passar d’una història a una altra. La interfície aprofita aquelles relacions en lloc de presentar un menú que podria pertànyer a qualsevol estudi.
L’entrada explica com arrossegar, com explorar una pel·lícula i com fer servir els menús laterals. El detall mereix atenció: la tira de cinema proposa un recorregut especial i la interfície també ofereix un accés ràpid. En un portfolio propi reservaria aquell joc per descobrir els treballs i mantindria visibles els noms, els crèdits i el contacte. La sorpresa funciona millor quan pots seguir-la perquè et ve de gust. Visitar Siena.
6 Dropbox fa que les normes convidin a jugar
El lloc de marca de Dropbox, desenvolupat amb Daybreak Studio i documentat el 2025, és una referència estupenda per a qui ha d’explicar un sistema visual. Els apartats reuneixen veu, logotip, tipografia, color, imatges i moviment. El contingut és una guia; el disseny deixa clar que aquella guia pot tenir vida pròpia.
Les targetes de colors representen diferents parts del sistema. Una retícula visible sosté la composició i els exemples donen a cada apartat una expressió reconeixible. La informació no arriba com un gran bloc de normes que cal llegir abans d’entendre què en pots fer.
En l’exemple de color, les targetes se superposen i deixen llegir noms i relacions. La norma comença a semblar un material que pots manipular. En altres parts del projecte hi ha demostracions de tipografia, moviment i icones. És l’encert d’una guia digital: quan el contingut tracta precisament d’escala, comportament o combinació, la interfície ho pot ensenyar al mateix lloc on ho explica.
En una empresa més petita, aquest criteri es pot aplicar a un catàleg, a una secció de processos o a una guia d’ús. Tria un exemple que respongui a un dubte real i dona-li una forma clara. Si el disseny ajuda a entendre i utilitzar la informació, la interacció té una feina per fer. Explorar les guies de Dropbox.
7 Terminal Industries dona presència a la logística
Terminal Industries és una referència de web corporativa que mereix entrar en aquesta llista per la presentació visual de la seva versió premiada el 2025. Awwwards acredita REJOUICE® i PROPAGANDE. A la imatge, un camió, un contenidor i una escena de llum càlida ocupen el centre de la composició.
La tria de l’objecte té sentit dins del sector. No necessitem una col·lecció de símbols tecnològics genèrics per entendre on se situa l’empresa. El vehicle i la càrrega donen una entrada visual concreta a un àmbit que després requereix explicacions sobre operacions i producte.
La navegació es concentra en una barra i el titular deixa aire a l’escena. La diferència d’escala ajuda a separar allò que ha de produir una primera impressió d’allò que serveix per moure’s. La web actual ha ampliat el contingut; aquí valoro la composició que va quedar documentada a la presentació del projecte.
Per a una empresa industrial, és una direcció interessant. Mostrar un objecte, un entorn o una operació pròpia pot donar una presència molt més específica a la portada. Després ha d’arribar la informació que permetrà valorar el servei. El disseny obre una porta; no hauria de deixar el visitant esperant al vestíbul mentre totes les dades importants són amagades. Consultar la web actual.
8 Montfort fa servir el paisatge com a sistema
Montfort, d’Immersive Garden, introdueix una companyia de matèries primeres i inversió mitjançant paisatges digitals. La versió documentada el 2025 situa una muntanya entre núvols i fa servir variacions d’ambient per presentar àrees diferents. El conjunt té una calma que contrasta amb les referències de color més explosiu.
La muntanya és una imatge central i també una manera de relacionar les divisions. Canvia la llum, canvia l’entorn i canvia el nom que veiem sobre l’escena. La composició manté un parentiu visual que permet entendre que som dins d’una organització amb diverses parts.
M’interessa l’ús del paisatge com a vocabulari. En lloc de buscar una fotografia diferent per a cada secció sense cap relació entre elles, la direcció d’art construeix una família. La navegació i el text ocupen un espai discret que deixa actuar la imatge.
Per a un grup amb diverses divisions, començaria per una pregunta concreta: quin recurs visual pot compartir el conjunt i què canvia quan entrem en cada activitat? Montfort fa servir la muntanya, la llum i l’entorn. Un altre projecte podria treballar una mateixa peça amb materials diferents o una sèrie fotogràfica amb un enquadrament comú. Mantenir el parentiu fa visible el canvi de divisió sense necessitar una presentació de marca nova en cada pantalla. Visitar Montfort.
9 Anime.js demostra allò que ven
Anime.js és una biblioteca d’animació per a la web. El seu lloc, acreditat a Julian Garnier i documentat a Awwwards el 2025, aprofita bé un avantatge: pot fer servir la seva especialitat per explicar què permet fer. La portada i les demostracions relacionen imatge, moviment i informació tècnica.
La metàfora del motor organitza una composició de peces i línies sobre fons fosc. Els noms de les funcions es relacionen amb aquell esquema, mentre petits accents de color hi donen un contrast precís. Hi ha detall, però la imatge conserva un ordre que permet mirar el conjunt.
La web també separa documentació, aprenentatge i exemples. És una decisió rellevant per a un producte adreçat a persones que l’han de fer servir, a més de descobrir-lo. Una demostració pot generar interès; el pas següent ha de permetre entendre com treballar amb l’eina.
La idea es pot portar a serveis menys tècnics. Si vens un procés, ensenya’l amb un exemple propi. Si fabriques un producte, mostra una transformació que ajudi a entendre’l. La demostració guanya força quan respon a una pregunta del visitant. I si estàs estudiant animació i 3D per a una web, comença per aquella pregunta abans de triar l’efecte. Explorar Anime.js.
10 Tracing Art converteix dades en una història
Tracing Art, de Getty i Resn, presenta històries sobre la procedència d’obres d’art a partir del Getty Provenance Index. La referència està documentada el 2025. El projecte té un contingut exigent: relacions, persones, obres i moviments al llarg del temps. El disseny troba una entrada visual per recórrer-lo.
La portada forma una corba amb petites imatges d’obres. Els títols queden a banda i banda, i el fons blanc permet llegir la figura amb claredat. La imatge suggereix una relació entre peces, que encaixa amb un contingut dedicat a seguir històries de propietat i col·leccionisme.
L’aplicació al mòbil passa d’una imatge protagonista a un camp de petites obres relacionades. Al lloc, els capítols permeten entrar-hi per preguntes diferents sobre pintura, artistes i col·leccionisme. La fotografia ens acosta a l’objecte i la visualització obre la relació entre objectes. Són dues escales de lectura que es necessiten. Em sembla una referència especialment interessant per a un arxiu que vulgui convidar a explorar sense buidar de contingut la recerca.
La recuperaria com a referència per a qualsevol organització amb un arxiu, una recerca o un contingut complex que vulgui obrir al públic. Cal triar una pregunta i construir el recorregut al seu voltant. La web pot ajudar a descobrir el material i oferir una porta cap a la font més àmplia. Aquí l’arxiu i l’experiència mantenen una relació explícita, que és part de l’interès del projecte.
11 Why Zero planteja una experiència amb argument
Why Zero, acreditada a Sindhur Dutta i Zero, és una experiència dedicada a presentar una proposta educativa. La referència del 2026 combina escenes tridimensionals, tipografia expressiva i una narració de scroll. Les captures tenen un aire deliberadament fantàstic, amb mans, paisatges i símbols que ocupen la pantalla.
M’interessa com la composició canvia de registre. El nom de la marca és senzill, mentre alguns missatges fan servir lletres amb serifes i escales diferents. Els objectes ajuden a construir escenes al voltant d’aquells missatges. Hi ha una intenció narrativa que va més enllà de col·locar un model 3D sobre el fons.
La proposta del servei i les seves promeses pertanyen a la marca; aquí ens interessa el disseny de la presentació. Una experiència d’aquest tipus té sentit quan hi ha una història que necessita desplegar-se i un públic disposat a recórrer-la.
Abans de portar-la a una web corporativa, definiria quina part del contingut ha de tenir accés directe i quina es pot descobrir mitjançant el recorregut. Una demostració immersiva i una pàgina d’informació resolen tasques diferents. La creativitat permet relacionar-les, però convé no obligar tothom a fer el mateix viatge per trobar una resposta. Entrar a Why Zero.
12 Shopify obre les portes d’una edició teatral
The Renaissance Edition és la presentació de Shopify Editions Winter 2026, documentada a Awwwards aquell any i acreditada a Shopify Design i al seu equip. La direcció d’art combina pintures generatives d’aire clàssic amb elements del comerç contemporani. El contrast és intencionat i forma part del concepte del lloc.
La portada reuneix personatges, paisatge i objectes actuals dins d’una escena que no pretén passar per una pintura històrica. Al damunt hi apareixen el títol de l’edició i els accessos a les àrees de producte. Hi ha una sorpresa visual, seguida d’una organització per trobar novetats concretes.
La pàgina d’error també rep direcció d’art. És un petit detall que demostra fins on arriba la idea: la personalitat del lloc pot ser present fins i tot quan algú arriba a un lloc que no existeix. L’accés per tornar manté la funció d’aquella pantalla.
El menú d’àrees de producte i la cerca acompanyen un univers visual que es podria haver menjat tota l’atenció. La convivència és la part que estudiaria per a un llançament: qui ve a passejar pot gaudir de l’escena, i qui busca una novetat té per on entrar. Amb més de 150 actualitzacions en aquesta edició, l’organització importa tant com l’unicorn. I mira que l’unicorn fa la seva feina. Veure Shopify Editions Winter 2026.
Què aprendre dels millors dissenys web per preparar el 2027
Després de veure dotze referències és fàcil voler-ho tot: les lletres de Son Daven, el moviment de Lama Lama i el catàleg de Floema. Barrejar-ho sense una idea pot acabar semblant una reunió on tothom parla alhora. La selecció serveix més quan triem quina decisió necessitem estudiar i per què.
Comença pel contingut que ha de trobar la gent
Imagina que prepares una web per a un estudi d’arquitectura. Tres visites importants serien veure una obra comparable, entendre què fa l’estudi i plantejar un projecte. Escriu què necessita trobar algú en cada recorregut: ubicació i fotografies del cas, abast del servei i una manera clara de contactar. La llista ajuda a repartir el contingut entre portada, projectes i serveis. L’efecte que triïs després tindrà un lloc on treballar.
Les referències mostren maneres diferents de resoldre-ho. Floema té famílies de producte; Dropbox divideix un sistema de marca; Getty proposa capítols. Comparteixen una selecció de contingut amb una lògica. És una decisió que pots treballar abans de produir una sola imatge.
Busca una idea visual que puguis mantenir
Prova una direcció en tres pantalles del mateix encàrrec: portada, fitxa de projecte i contacte. Per exemple, una tipografia amb molt de caràcter pot obrir la primera; a la fitxa ha de conviure amb localització, any i peus de foto. Si aquells detalls comencen a semblar incòmodes, ajusta l’escala i el ritme. Una bona idea visual té capacitat per als moments espectaculars i per a les dades petites que el visitant ha vingut a buscar.
En la meva feina de disseny web freelance a Barcelona, la relació amb la identitat ocupa un lloc important. Si el llenguatge de l’empresa encara s’ha de definir, convé treballar aquella base amb el sistema d’identitat corporativa. La web necessita recursos propis per expressar una personalitat pròpia.
Dona una funció concreta al moviment
L’animació pot explicar un canvi, mostrar una relació o portar la mirada cap a un detall. Decideix què ha d’entendre la persona quan la veu. Prepara també com es llegirà la informació quan el moviment es redueixi o quan una pantalla no pugui mostrar la mateixa experiència.
Un clip d’Awwwards permet estudiar una transició i la seva intenció gràfica. Per valorar-ne la implementació al teu projecte cal provar dispositius, navegació i càrrega reals. La demostració inspira una decisió; la revisió tècnica permetrà saber com sostenir-la. Són passos complementaris que convé reservar dins de la feina.
Dissenya també les pàgines on es fa la tasca
La portada acostuma a emportar-se les converses i els aplaudiments. La persona que vol comparar dos productes, revisar una obra o consultar condicions passa després a una altra pantalla. Dedica temps a aquelles pàgines: jerarquia, imatges útils, informació completa i accions comprensibles.
Per a la fitxa d’una obra, una imatge àmplia pot explicar l’espai i una seqüència de detalls pot mostrar materials o trobades constructives. Afegeix-hi peus que aportin informació i conserva els crèdits del projecte. Després comprova si s’entén la intervenció quan recorres la selecció al mòbil. Són decisions petites comparades amb una portada immersiva, però donen al visitant motius concrets per continuar mirant i valorar la feina.
Comprova mòbil, lectura i manteniment
Obre les pàgines principals en un mòbil i segueix els recorreguts que havies definit. Revisa si els títols conserven el sentit, si els botons es distingeixen i si trobes la informació sense dependre d’un gest difícil de descobrir. Una composició d’ordinador és només una part de l’experiència.
Fes una prova amb contingut que incomodi una mica la maqueta: un nom de projecte llarg, una fotografia vertical i una obra amb menys imatges. Mira què es perd quan els introdueixes. Si tot depèn que els títols mesurin el mateix, la composició demana una altra volta. Deixar resoltes aquelles variacions permet conservar la personalitat quan la web comença a créixer, que és just quan el disseny ha de demostrar que aguanta.
Si valores una renovació, l’article sobre què fa modern un disseny web permet continuar la reflexió des de l’estructura. I si el projecte necessita canviar d’organització, pots revisar l’enfocament de redisseny web abans de decidir què conservar i què tornar a plantejar.
Preguntes freqüents sobre els millors dissenys web 2027
Aquestes webs s’han publicat el 2027?
No. Aquesta selecció vol inspirar i preparar projectes del 2027, amb referències documentades el 2025 i el 2026. Cada crèdit conserva l’any corresponent. Quan una web canvia, la captura continua mostrant la versió presentada a la font. L’any del títol identifica l’edició de la recopilació.
L’ordre és una classificació oficial d’Awwwards?
No. La tria i l’ordre són editorials. Awwwards serveix de font de projectes, autories i demostracions; aquesta llista respon als aspectes que m’interessa estudiar i a la varietat de referències. No reproduïm una classificació del jurat ni donem un premi propi a una única web guanyadora.
Què tinc en compte quan trio una bona pàgina web?
Em fixo en la relació entre identitat, contingut, estructura i recursos visuals. Una pàgina pot destacar per la tipografia, per una demostració o per com organitza un catàleg. Després, el funcionament requereix una revisió específica de navegació, mòbil, accessibilitat i rendiment. La qualitat d’una captura no certifica per si sola tots aquests aspectes.
Una web d’empresa pot tenir aquest nivell de personalitat?
Sí. El caràcter pot aparèixer en decisions senzilles: una bona família de fotografies, una retícula pròpia, una il·lustració pertinent o una escala tipogràfica ben construïda. Primer defineix què ha de comunicar l’empresa i què necessita trobar el visitant. A partir d’aquí podràs triar quant de protagonisme tenen els recursos expressius.
He de fer servir 3D perquè el meu disseny web sigui actual?
No. Hi ha projectes on una escena tridimensional permet demostrar una idea i d’altres on una fotografia o un esquema seran més útils. La tria depèn del contingut, del públic i dels recursos per produir-lo i mantenir-lo. Una web pot tenir moltíssima personalitat amb tipografia, imatge i composició ben treballades.
Puc fer servir aquestes referències per encarregar la meva web?
Són un bon punt de conversa si expliques què t’interessa de cadascuna. Pot ser l’organització del catàleg, la manera de mostrar un projecte o l’equilibri entre imatge i text. Això permet parlar d’una direcció amb criteri. El pas següent serà dissenyar una solució pròpia per a la teva marca, el teu contingut i els teus visitants.
Com plantegem un projecte amb Jordi Ensenyat?
Podem començar per entendre el contingut, les prioritats i la feina que haurà de fer la web. Al diagnòstic revisem aquestes decisions abans de definir la direcció del projecte. Si ja tens una necessitat concreta, explica-me-la aquí i veiem com abordar-la.
La direcció visual d’una web també s’alimenta d’altres disciplines. Pots ampliar el recorregut amb els millors dissenys gràfics 2027 i les tendències en disseny gràfic 2027. Per veure com canvien les decisions quan canvia el sector, la selecció de dissenys web per a farmacèutiques 2027 posa el focus en ciència, catàleg i públics professionals.
Si aquestes referències t’han donat ganes de moure la teva web, podem treballar aquesta direcció en un projecte de disseny web freelance. Si també necessites publicar projectes, serveis o notícies amb el teu equip, el disseny WordPress a mida permet preparar tant la interfície com l’edició.
Selecció i comentaris editorials de Jordi Ensenyat Disseny per a l’edició 2027. Els projectes i els seus visuals pertanyen als autors i a les marques acreditats. Les imatges i els clips documenten les versions publicades a les fonts indicades; no atribuïm resultats comercials ni una auditoria tècnica a aquestes referències.