Proyecto Cipher

Elegí el proyecto de cipher porqué me encantó la idea de poder crear mensajes cifrados y se me ocurrieron muchas temáticas para implementar la app. Pensando en la temática para la app.

Tuve la idea general que hacer una app que sirva para la creación de claves secretas, pero la verdad me parecía que esa idea no tenía vida, no tenía historia… Por lo que se me ocurrió la siguiente idea. Principalmente, se desea que los usuarios tomen la iniciativa de enviar mensajes lindos de nuevo, pero con ayuda de la app, lograrán crear mensajes cifrados y enviar a sus enamorados a la misma app para que descifren los mismos. En definitiva, la app está envuelta en una esencia amorosa y un tanto divertida.

Colores

Como bien sabemos los colores que nos rodean, influyen en como percibimos nuestro alrededor, en como los sentimos y nuestras decisiones, muchas veces de manera inconsciente.

La idea era que los usuarios al ver la app sonrieran con lo bonito de los colores y sintieran que si se trataba de mensajes de amor. Utilizamos como color principal, el lila en distintas tonalidades:

• #CEA5EF
• #9756F4

“El color lila se ha asociado con la tranquilidad, la dulzura, la calidez, la mesura y el poco impacto. No suele relacionarse con conductas negativas, por el contrario, se asocia a la sensibilidad, la empatía, la amabilidad, el equilibrio y la madurez.”

¿Qué significa el color lila en Psicología?

utilizamos de complementos colores como grises muy claros o muy oscuros. Se usaron para letras y fondos, con la intención de mantener la suavidad que de las tonalidades de lilas nos brindaban.

• #F4F0F7
• #313133

No desee agregar de complemento colores como el blanco o negro, ya que harían contraste fuerte con mi temática y la verdad deseaba que todo se viera lo más armonioso posible.

“Unas veces puede parecer claro, y otras oscuro, pero siempre está buscando la adaptación, y no en su propia tonalidad, sino en función de los colores que lo rodean,”

El color gris

formas

Quise agregar 2 formas (piezas graficas realizadas en Illustrator) las cuales representan muy bien la temática de mensajes de amor. Una es un sobre con una carta (la encontramos en el banner) y la otra (que se repite en el banner de la app y en el fondo) es un avioncito de papel.

Tipografías

Utilicé 2 tipografían distintas una para el banner y otra para el contenido escrito de la app (bienvenida y pasos).

• Pangolin
• acologica-round_slab

Son tipografías tipo Sans Serif/Rounded:

Expresan modernidad, cercanía y son legibles en distintos tamaños.

Las tipografías y su personalidad

prototipo

funcionamiento

Los usuarios usarían la app para codificar mensajes, que luego enviarán por cualquier medio a sus enamorados. Se espera que envíen junto con el mensaje, una pregunta retórica que solo ellos y sus receptores sepan la repuesta. La respuesta debe ser un número (fecha del primer beso, del primer mensajes del día en el que se conocieron) ese es el número que la persona que reciba el mensaje encriptado, colocará en el desplazamiento, para poder descifrar su mensaje.

Interacción con el usuario

• Banner con el nombre de la app.
• Bienvenida con una frase linda y explicación breve de la intención de la app.
• Pasos de funcionamiento.
• Input de desplazamiento.
• Área de texto con su botón de cifrar.
• Área de texto con su botón de descifrar.

Objetivos de aprendizajes personales

Tengo que reforzar todos los conocimientos básicos en: HTML CSS y JAVASCRIPT, ya que si bien en la semana de preadmisión aprendí mucho, por la premura hubieron muchas cosas que aprendí a medias.

Deseo avanzar primordialmente con la estructura básica de HTML semántico y selectores básicos de CSS. Para luego enfocarme de aprender JS, desde cero, hay muchos conceptos que se me han olvidado y otros que no entiendo. Deseo tomarme el tiempo de entender cada paso que voy dando.

Objetivos de aprendizaje que deseo alcanzar

• Diseñar la aplicación pensando y entendiendo al usuario.
• Crear prototipos para obtener feedback e iterar
• Aplicar los principios de diseño visual (contraste, alineación, jerarquía).
• Uso de HTML semántico
• Uso de selectores de CSS.
• Construir tu aplicación respetando el diseño realizado (maquetación).
• Uso de selectores del DOM.
• Manejo de eventos del DOM.
• Manipulación de strings.
• Uso de condicionales if-else.
• Uso de bucle for.
• Organizar y dividir el código en módulos (Modularización).
• Uso de identificadores descriptivos (Nomenclatura | Semántica).
• Uso de linter (ESLINT).
• Git, GitHub [Uso de comandos de git (add | commit | pull | status | push).
• Git y GitBuh: Manejo de repositorios de GitHub (clone | fork | gh-pages).