Aprendiendo mates

Aprendiendo mates es una página web de internet para que los niños y adolescentes puedan practicar matemáticas de una forma más divertida.

PUNTO DE PARTIDA

Aprendiendomates.com es un trabajo de diseño AI impulsado por la asignatura de diseño de interfaces multimedia por la UOC.

EL PROBLEMA

El ejercicio de esta asignatura consistía en mejorar de forma visual el diseño de la página web de aprendiendomates.com.

Captura original

HERRAMIENTAS UTILIZADAS

Herramientas:

Ilustrator

Tareas:

Personas, Guía de estilo: retícula, tipografía, gama cromática, elementos de interacción, iconos.

PROCESO DE DISEÑO

En el proceso de diseño se empezó por crear a las personas para saber que tipo de usuario utilizará la web. Estas personas nos ayudarán a crear una guía de estilo acorde a al publico al que nos dirigiremos.

Salieron 3 personas:

Persona 1

Persona 2

Persona 3

Una vez hechas las personas continué con diseñar la guía de estilo para construir una imagen sólida. Dos aspectos en los que trabajé desde el principio antes de empezar a diseñar nada fue la selección de una paleta de colores y la de la familia tipográfica que constituirían el diseño, ya que ambos aspectos son clave a la hora de dar una personalidad al proyecto.

El hecho de tomar decisiones claves de diseño antes de comenzar a arrastrar elementos dentro del lienzo en blanco comporta que todo tenga un motivo y una coherencia, al tiempo que evita tener que hacer cambios radicales durante el proceso. Naturalmente siempre hay de cambios, pero una buena planificación hará que estos no sean tan radicales como para tener que dar 10 pasos atrás.

LOGO

Era imposible presentar una propuesta gráfica con cara y ojos utilizando el logotipo de la página original. Por esta razón se optó por hacer un rediseño y hacer una versión más actual.

El Tangram es un rompecabezas de origen chino formado por 7 piezas. Es un juego que requiere ingenio, imaginación y paciencia, y supone un estímulo para la creatividad que puede aprovecharse en el aprendizaje de las matemáticas para introducir conceptos de geometría plana y para promover el desarrollo de capacidades psicomotrices e intelectuales, ya que permite ligar de manera lúdica la manipulación concreta de materiales con la formación de ideas abstractas.

Es por esta relación entre el juego y la matemática que se consideró que era la opción perfecta para representar un sitio web en el que los niños aprenden matemáticas a través del juego.

Logo aprendiendo mates

RETÍCULA

Se optó por una retícula de 12 columnas, ya que es un formato que permite mucha flexibilidad. Por otra parte actualmente es casi un Standard, ya que los frameworks de Front-End más utilizados como Bootstrap o Foundation, están basados en el sistema de 12 columnas.
Es un tipo de parrilla con la que se obtiene un orden muy sutil ya que una sección de la web puede ocupar tres bloques, la siguiente cuatro bloques de tres columnas y luego mostrar elementos en dos columnas (6 y 6) pero mantener gradualmente una coherencia Se puede ver un ejemplo a continuación:

Retícula

TIPOGRAFÍA

Tipografía

COLORES

Colores

BOTONES

Botones

AVATARES

Avatares

ICONOS

Iconos

PROPUESTA FINAL WEB

Aprendiendo mates

Aprendiendo mates

PROPUESTA FINAL MÓVIL

Prototipos móvil

Volver arriba