En la iglesia JRN buscaban modernizar su landing page. Ya contaban con un sitio web desplegado, pero tenía un diseño genérico, con componentes de WordPress que se repetían en muchos sitios. La página se sentía anticuada, así que un desarrollador de su comunidad decidió que podíamos hacerlo mejor.
El principal reto fue encontrar un balance entre diseño y desarrollo. Busqué líneas limpias y modernas sin dejar atrás la esencia de la iglesia.
JRN es una iglesia ubicada en Cali, Colombia. Buscaban tener presencia digital, así que evaluaron diferentes alternativas. Para una organización que no cuenta con un desarrollador, WordPress suele ser una opción práctica. Cumplía con el objetivo, pero el sitio podía mejorar.
Con esto en mente, surgió la idea de modernizar el sitio web junto con un colega de la universidad. Esta vez me desvincularía del desarrollo y me enfocaría por completo en el diseño de la interfaz.
Al diseñar una página para una iglesia, resulta sencillo caer en sitios genéricos que evocan un estilo antiguo, clásico o demasiado formal. Esa fue una de las primeras restricciones del proyecto: evitar que el sitio pareciera un museo.
La página debía transmitir una imagen moderna, con diseños y líneas limpias que reflejaran los valores actuales de la iglesia y atrajeran a todo tipo de público.
A partir de charlas, diseños de inspiración, prototipos y presentaciones nació la propuesta final. La página conservó las líneas de diseño que ya existían, pero incorporó una interfaz propia, evitando elementos genéricos. El diseño también buscó llamar a la acción e inspirar la idea de pertenecer a la comunidad.
Teníamos una línea de diseño más o menos clara y varias restricciones clave para el proyecto:
La principal herramienta de trabajo fue Figma. Desde allí creamos los diseños de baja y alta fidelidad, definimos los componentes y preparamos las versiones responsive utilizando Auto Layout.
El prototipado fue una parte fundamental del proceso antes de pasar al desarrollo. Trabajamos en dos fases: baja y alta fidelidad.
En la fase de baja fidelidad definimos la estructura, la navegación preliminar, los conceptos, las páginas que debíamos diseñar y una base para construir la propuesta. Después de aprobar esta primera versión, pasamos a los diseños de alta fidelidad, donde incorporamos colores, imágenes, medidas, estándares, copys y otros aspectos visuales.
La página adoptó un estilo más moderno y minimalista que respetaba los patrones de diseño que ya tenía la iglesia y los adaptaba a un entorno digital.
El proyecto ya desplegado puede verse en JRN Page
Como suele ocurrir en un proceso de desarrollo, existen algunas diferencias entre el diseño propuesto y el resultado final. Este proyecto no fue la excepción. Durante el desarrollo surgieron cambios que hicieron que el prototipo no coincidiera al 100 % con la página web desplegada.
Aun así, el prototipo proporcionó una buena base para el desarrollo y permitió definir con claridad la estructura y la dirección visual del proyecto.