Skip to content

Gromarant/FunFace

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FunFaceApp banner title


FullPokeApp banner image


button to try the app


Change to:    es


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.

button to try the app


Functionalities:

Dropdown:

Displays a menu with emoji options.

Dropdown image


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.


botones


Background:

Changes randomly when the emoji on the screen also change.


button to try the app


Design:

        Colors:

Color palette:

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

Color variations (color palette)

Color variations were used for color palette creation.


Color details:

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


Design system's color documentation.


  • 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

Typography family used in the app.


Typography information

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

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.

mobile wireframe

Moile layout design


Wireframe in high fidelity:


mobile 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 wireframe

Tablet layout design


Wireframe in high fidelity:


tablet 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 wireframe

Desktop layout design


Wireframe in high fidelity:


desktop wireframe in high fidelity


go back to design section




Interactive prototype:


Interactive prototype


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


Languages and tools:

Used for the project development:

HTML     CSS     Javascript     Github


Employed in the project design:

Figma


Professionals:

Full Stack Developer | Mariangelica Rodriguez




© Mariangelica Rodriguez

Github     linkedIn     Email


Gromarant

About

Page with face expressions to select

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published