Diseño

En esta página te explicaré todo sobre el diseño del proyecto.


Al comenzar el proyecto lo primero que hice fue crear un prototipo en Figma para tener una idea de como iba a ser la aplicación web. Mientras estructuraba en mi cabeza y tomaba apuntes sobre como iba a ser la aplicación web, iba creando el prototipo en Figma.

Diseño en Figma Si le das click a la imagen, podrás ver el diseño en Figma.

Como puedes ves el diseño no está terminado, esto se debe a que al empezar a programar la aplicación web, me di cuenta de que si quería respetar el diseño al 100% iba a tardar mucho más tiempo en desarrollar la aplicación web, así que decidí dejarlo como una guía y no como un diseño final.

Paleta de colores

Paleta de colores

Desde el principio tuve claro que quería usar el color verde como color principal, así que busqué en internet paletas verdes y diseños para inspirarme y decidí usar los siguientes colores:

Acento

  • Color de acento principal: #3AE000
  • Color de acento secundario: #4DA32F
  • Color de acento oscuro: #255116
  • Color de acento claro: #A3FFA3

Fondo

  • Color de fondo principal: #FFFFFF
  • Color de fondo (tema oscuro): #000000

Modo oscuro

El tema oscuro es algo que me gusta mucho, así que decidí añadirlo a la aplicación web.

Modo oscuro

Tipografía

Tipografía

Alt text

Logotipo

Logotipo

Ilustraciones

Iconos

Diseño de la interfaz de usuario

Responsive