Change to:   

---

FunFace

This is a page make you smile!!! FunFace was built with Html, CSS, and JS, also designed and prototypes on Figma.    

      App details:

Randomly:

In the application, features were implemented to change randomly, such as:

• Background color:   the CSS background-color property represented in its rgb value was modified using Javascript.
• Emoji   established by the app with Javascript, sets a random number that corresponds to the index of the emoji in the list.

Functionalities:

Dropdown:

Displays a menu with emoji options.

Button:

1. Get random face: Show a random emoji on the page every time it is clicked.
   

2. Update: Sets the previously selected emoji in the selector menu.
   

Background:

Changes randomly when the emoji on the screen also change.

Design:

        Colors:

Color palette:

The color palette used in the project includes bright colors to generate emotions and energy.

Color variations were used for color palette creation.

Color details:

Information shown in the design system to maintain the visual coherence of the app.

• Category: Shows the color category and general name.
• Color sample: it is a visual representation of the corresponding color.
• Color hex value: it’s the code name of the color in hexadecimal nomenclature.
• Color naming: represents the naming conventions used in the design system of the project.

go back to design section

        Typography:

Typography family used in the app.

Typography documentation in the design system.

The typography information shown in the design system includes font-family, font-weight, font-size and letter-spacing. This is the same information used in web development.

go back to design section

        Components:

Get Random face button documentation shown in the design system.

go back to design section

        Wireframes:

Wireframes are prototypes that serve as a visual guide that represents the skeletal framework of the game.

FunFace application:

mobile prototype

Details:

1.     Emoji image: it is the image displayed in the application.
2.     Botón Get Random face: allows the user to change the shown image randomly.
3.     Menú desplegable: displays available image options.
4.     Botón de Update: Sets the selected option in the dropdown menu as the current image.

Moile layout design

Wireframe in high fidelity:

go back to design section

---

Tablet prototype

Details:

1.     Emoji image: it is the image displayed in the application.
2.     Botón Get Random face: allows the user to change the shown image randomly.
3.     Menú desplegable: displays available image options.
4.     Botón de Update: Sets the selected option in the dropdown menu as the current image.

Tablet layout design

Wireframe in high fidelity:

go back to design section

---

Desktop prototype

Details:

1.     Emoji image: it is the image displayed in the application.
2.     Botón Get Random face: allows the user to change the shown image randomly.
3.     Menú desplegable: displays available image options.
4.     Botón de Update: Sets the selected option in the dropdown menu as the current image.

Desktop layout design

Wireframe in high fidelity:

go back to design section

---

Interactive prototype:

Click the image and try the prototype of the game made in Figma.     👆

Languages and tools:

Used for the project development:

           

Employed in the project design:

Professionals:

---

© Mariangelica Rodriguez