Cambiar a:
Esta página es para hacerte sonreír!!! FunFace fué desarrollada con Html, CSS, y JS. También diseñada y prototipada en Figma.
Detalles de la app:
en la app se implementaron características para cambiar de forma aleatoria como son:
- Color de fondo: modificado a través de javascript la propiedad background-color representado en rgb.
- Emoji establecido por la app con javascript, establece un número aleatorio que corresponde al índice del emoji en la lista.
Despliega un menú con las opciones de emoji.
- Get random face: Muestra un emoji aleatorio en la página, cada vez que se le hace click.
- Update: Establece el emoji previamente seleccionado en el menú desplegable.
Cambia al cambiar el emoji que se muestra en pantalla.
Colores:
La paleta de colores usada en el proyecto incluye colores brillantes para generar emoción y energía.
Variaciones de color usadas para crear la paleta de colores.
Informacion mostrada en el sistema de diseño para mantener la coherencia visual de la aplicación.
- Category: muestra la categoría y/o nombre general del color.
- Color sample: es la representación visual que corresponde al color.
- Color hex value: es el nombre del color en nomenclatura hexadecimal.
- Color naming: representa la convención usada para nombrar colores en el sistema de diseño del proyecto.
Tipografía:
familia tipográfica usada en la app.
Documentación de familias tipográficas en el sistema de diseño.
Información de las familias tipográficas mostrada en el sistema de diseño incluyen: font-family, font-weight, font-size y letter-spacing. Esta es la misma información usada en la maquetación de la app.
Componentes:
Especificaciones del botón de "Get Random face" en el sistema de diseño.
Wireframes:
Los Wireframes son prototipos de baja fidelidad (poco detalle) que sirven cómo guía visual y representan el esqueleto de una página y/o componente.
1. Imagen de emoji: es la imagen mostrada en la aplicación.
2. Botón Get Random face: permite cambiar la imagen mostrada aleatoriamente.
3. Menú desplegable: contiene las opciones de imagen disponibles.
4. Botón de Update: establece como imagen la opción seleccionada en el menú desplegable.
Diseño de prototipo de móvil
1. Imagen de emoji: es la imagen mostrada en la aplicación.
2. Botón Get Random face: permite cambiar la imagen mostrada aleatoriamente.
3. Menú desplegable: contiene las opciones de imagen disponibles.
4. Botón de Update: establece como imagen la opción seleccionada en el menú desplegable.
Diseño de prototipo de tablet
1. Imagen de emoji: es la imagen mostrada en la aplicación.
2. Botón Get Random face: permite cambiar la imagen mostrada aleatoriamente.
3. Menú desplegable: contiene las opciones de imagen disponibles.
4. Botón de Update: establece como imagen la opción seleccionada en el menú desplegable.
Diseño de prototipo de pc
Haz click en la imagen para probar el prototipo interactivo en Figma. 👆
Usados en el desarrollo del proyecto:
Empleados en el diseño del proyecto:
© Mariangelica Rodriguez
