Analisis o problematica

Al pertenecer a una comunidad religiosa, la información es abundante, lo mismo ocurre con las aplicaciones móviles, excepto que no todos están en una sola aplicación o si la tienen como opciones, son redirigidos a sitios externos.

Mapa de sitio

Para tener una visión global de cuál será la navegación completa entre pantallas, se diseñó el siguiente mapa del sitio

Flujo de Usuarios

Continuando con la arquitectura del sitio web, se estableció el flujo de tareas que los miembros de la IASD seguiran en su interacción dentro de la aplicación.

Wireframe de baja fidelidad

El diseño de wireframes de baja fidelidad se llevó a cabo para tener una mejor visión de que lo investigado y estructurado estaban alineados.

Wireframe de mediana fidelidad

Al tener una mejor visión de como quedaban los primeros diseños, pasamos estos a un nivel de fidelidad media para estar un poco más cerca del objetivo que se quiere cumplir

Tipografia y colores

Para la tipografía se utilizó una que destaca en tamaño respecto a la básica ya que ayudaría con la lectura y para la parte de color, se pensó trabajar con las variantes de una que no afecte a la capacidad visual de los usuarios.

Sistema de grilla

Iconos

Al ser una aplicación para el IASD, los íconos están relacionados con el tema de la religión y los conceptos sobre la iglesia.

Componentes

Gracias a los wireframes de fidelidad media, fue posible encontrar secciones donde ciertos puntos eran repetitivos y tenían estados, por lo tanto, se crearon componentes que ayudaron a que el diseño sea más rápido y su desarrollo futuro más factible.

Prototipo de alta fidelidad

Una vez organizados y combinados componentes, colores, tipografía, imágenes, etc., se realizó el diseño final de cada pantalla.