Sitio web corporativoEn línea
neptay.com
Nuestro sitio web corporativo: medios, tecnología y servicios para clientes en un solo sistema, en diez idiomas y dos modos de color.
Por dentro
Un vistazo al sistema.
La página de inicio en modo claro y oscuro, la paleta de la marca, la escala tipográfica y los diez idiomas en los que se publica el sitio.
Resumen
Nuestro sitio web es lo primero que ven clientes y socios. Presenta cada área de Neptay con el mismo estándar que aplicamos al trabajo para clientes.
El brief
- Problema
- Presentar una empresa de medios y tecnología (dos divisiones y un área de servicios para clientes) como una sola marca, clara y creíble.
- Restricción
- Diez idiomas, uno de ellos de derecha a izquierda, y dos modos de color.
- Solución
- Un sistema de diseño basado en tokens: una paleta, tipografía grande, paneles grises y un único marcador amarillo.
Neptay Media & Technology Services es una empresa de medios y tecnología. El sitio presenta dos divisiones y un área de servicios para clientes como una sola marca, clara y coherente.
El sistema de diseño parte de la paleta de la marca: dos neutros claros, dos tonos oscuros y un único acento amarillo. Un mismo conjunto de tokens controla el modo claro predeterminado y el modo oscuro, y cada interfaz del sitio está dibujada en código, así que evoluciona al mismo ritmo que el producto.
El sitio se publica en diez idiomas desde una sola capa de contenido, incluidos el japonés y el árabe, de derecha a izquierda. Los diseños usan propiedades lógicas, así que se reflejan con limpieza; el enrutamiento, los metadatos, hreflang y los datos estructurados se adaptan al idioma en cada página.
Enfoque
Tres principios, de inicio a fin.
La tipografía hace el trabajo
Titulares grandes y compactos, entradillas serenas y atenuadas. Un solo titular en dos tonos transmite la idea y su contexto. Ningún icono hace un trabajo que pueda hacer la tipografía.
Un acento, usado como marcador
El amarillo de la marca señala acciones y énfasis: un botón, una frase destacada, un pequeño cuadrado. Todo lo demás es tinta, paneles grises y líneas finas, tanto en modo claro como en oscuro.
El movimiento confirma, no se exhibe
El contenido se coloca en su sitio la primera vez que aparece, los mosaicos se elevan al pasar el cursor y todas las animaciones se detienen cuando el visitante prefiere reducir el movimiento.
Resultados
Lo que aporta.
Localización
10idiomas
Inglés, turco, alemán, español, francés, portugués, ruso, árabe, japonés y chino, con hreflang en cada página.
Maquetación
De izquierda a derecha y viceversa
El árabe refleja todo el diseño mediante propiedades lógicas, no con una hoja de estilos aparte.
Color
Una paleta, dos modos
Cinco colores de marca aplicados como tokens: un modo claro predeterminado y un modo oscuro, que se pueden alternar en cada página.
Sistema
Un solo conjunto de tokens
Todas las páginas, ambos modos de color y los diez idiomas comparten un mismo conjunto de tokens de diseño.
Tecnologías
- Next.js 15
- React 19
- TypeScript
- CSS design tokens
- Geist
- Vercel