Harabi Planners

Diseño y desarrollo de página web de venta de producto físico en formato one-page con HTML, CSS y JavaScript

Mockup de web Harabi. Producto digital

RETO

Este proyecto para una empresa de venta de agendas personalizadas debía tener el foco en explicar las características de las mismas, las opciones a elegir por el cliente y cómo hacer el encargo.

Se propone una página web en formato one-page, con toda la información organizada con un menú de ancla. Está enteramente realizada con HTML, CSS y JavaScript (sin CMS).

Para completar la creación de la página se realiza una identidad de marca sencilla, que consta de logotipo, isotipo (usado para favicon) y gama de colores. La identidad y sus colores no debía ser muy invasiva a ojos del usuario para que la atención se centrara en los ejemplos de agendas y todas las opciones de éstas disponibles.

PROPUESTA

Poppins 300

Poppins 400

Poppins 500

Poppins 600

Puedes navegar la web y descubrirla tú mismo

Características y funcionalidades

  • Estructura one-page con menú de ancla (navegación vertical)
  • Realizado en Visual Studio Code con los lenguajes HTML, CSS y Javascript
  • Header sticky en la parte superior
  • Uso de media queries para adaptar a tamaños de pantalla
  • Tipografía enlazada desde Google Fonts
  • Galería modal con imágenes en blanco y negro que recuperan color en hover
  • Sección de 5 pasos con estructura de pestañas, donde al hacer clic cambia el contenido (evitamos alargar el scroll)
  • Efecto de acordeón para las Preguntas Frecuentes y subrayado de la pregunta en hover
  • Formulario totalmente funcional (la acción de envío se encuentra bloqueada al no disponer de backend)
  • Mensaje de error al enviar sin rellenar el e-mail
Mockup diseño web Harabi