BCN --:--
06 / 06Primer projecte del màster · Landing page

Travel Beyond

Una landing page per a una empresa que ven viatges a l’espai — el meu primer projecte d’UX/UI, redissenyat dos anys després per veure fins on he arribat.

Rol
Dissenyadora UX/UI
Durada
Des. 2023 · Redisseny 2026
Context
Màster en Disseny d’Experiències Digitals, BAU
Tipus
Acadèmic · Landing page
Eines
Figma · Photoshop · VS Code
Final redesign hero: Earth at the centre, upcoming launches and experience cards, one orange button
01 — On va començar

El meu primer projecte d’UX/UI.

Travel Beyond va ser el primer projecte de disseny del meu Màster en Disseny d’Experiències Digitals a BAU Barcelona. L’encàrrec: una landing page per a escriptori i mòbil per a una empresa que promet viatges a l’espai en un màxim de tres anys.

L’objectiu no era només informar — era fer sentir l’atracció de l’espai i que la gent deixés les seves dades per formar-ne part.

02 — El procés del 2023

D’una guia de prioritats al codi.

Vaig ordenar el que havia de dir la pàgina — proposta de valor, beneficis, testimonis, registre, peu — ho vaig esbossar en paper, ho vaig refinar en wireframes de fidelitat mitjana a Figma, vaig crear un petit sistema de disseny i un prototip navegable, i finalment ho vaig programar en HTML, CSS i JavaScript.

  1. Guia de prioritats
  2. Esbossos en paper
  3. Wireframes mid-fi
  4. Sistema de disseny
  5. Hi-fi + prototip
  6. HTML · CSS · JS
Paper sketches of the desktop and mobile landing page
Mid-fidelity wireframes in Figma
Esbossos en paper i després wireframes de fidelitat mitjana a Figma
Design system: brown, orange, night blue, Ethnocentric and Rubik
Marró, taronja i blau nit · Ethnocentric + Rubik
03 — Dos anys després

Redissenyat per veure fins on he arribat.

El 2026 hi vaig tornar amb tot el que he après des d’aleshores — recerca, sistemes de disseny i construir productes reals. El mateix encàrrec, les mateixes fonts — Ethnocentric i Rubik — i els mateixos textos i fotos com a punt de partida.

El que ha canviat és com pren decisions la pàgina — i l’atmosfera: d’un cartell sèpia a un escenari fosc i tranquil on parlen el planeta i una sola crida a l’acció.

2023 hero: centred title and button over the planet scene
2023 — Original
Final redesign hero: Earth at the centre, upcoming launches and experience cards, one orange button
2026 — Redisseny
04 — Què ha canviat

Menys coses, dites més fort.

  1. 01
    Una portada que ven el viatgeEl planeta ocupa el centre amb un sol botó taronja, els propers llançaments a un costat i les experiències a l’altre — la pàgina respon «on puc anar i quan?» abans de fer scroll.
  2. 02
    Negre, amb un taronja que vol dir alguna cosaEl marró i el blau nit deixen pas a panells gairebé negres. El taronja queda per al que es pot fer: el botó, l’estat actiu, les dates i els números.
  3. 03
    Seccions numeradesCada secció és un panell arrodonit amb una sola funció i un número, perquè la pàgina es llegeixi com un viatge del 01 al 05.
  4. 04
    Una veu cada vegadaEls testimonis són ara una llista de noms al costat d’una sola cita i un retrat grans, en lloc de tres columnes petites que competeixen per l’atenció.
  5. 05
    Un formulari que demana menysDues columnes de camps suaus, un sol botó clar — i cap «Cancel·lar» en una landing page.
2023 testimonials: three small columns
2023 — Tres columnes
Final redesign testimonials: list of names, portrait and one large quote
2026 — Una veu cada vegada
2023 sign-up form with boxed fields and a Cancel button
2023 — Camps en caixa i Cancel·lar
Final redesign sign-up: two columns of fields and one orange button
2026 — Un sol botó clar
05 — Mòbil

Pensat també per al polze.

Al mòbil la portada només manté el planeta, el títol i el botó; els llançaments i les experiències passen al seu propi panell, els beneficis es converteixen en una fila que es llisca i el formulari en una sola columna.

Final redesign hero on mobile
Launches and experience cards on mobile
Sign-up form on mobile
Redisseny 2026 — mòbil 390
06 — Iteracions

El primer redisseny es va quedar més a prop de l’original.

La primera versió mantenia el marró, el taronja i el blau nit i l’escena original del planeta, i arreglava l’estructura. Funcionava — però encara semblava del 2023. Portar-la a un escenari negre i més tranquil és el que va fer que el redisseny se sentís nou.

2026 hero: full-screen scene, left-aligned title, info row and slide controls
Iteració 1 — escena càlida a pantalla completa
Final redesign hero: Earth at the centre, upcoming launches and experience cards, one orange button
Iteració 2 — final
07 — Resultat

Què em va ensenyar el redisseny.

La pàgina del 2023 seguia el procés pas a pas. La del 2026 pren decisions: què mostrar primer, què treure i quina és l’única cosa que demana.

Posar-les una al costat de l’altra és la mesura més clara que tinc de com han canviat la meva mirada — i el meu criteri — des del primer projecte.

2
anys entre versions
2
iteracions del redisseny
1
crida a l’acció
Següent projecte — 01 / 06Venu