Diseño Web
Actualmente la cantidad de jóvenes que no saben con claridad qué carrera profesional y laboral iniciar después de culminar sus estudios escolares es muy baja y según estudios alrededor del 70% de los estudiantes se gradúan de sus colegios sin recibir una adecuada orientación vocacional. Esta problemática es uno de los factores más influyentes en la deserción universitaria y existen muy pocas aplicaciones competentes que brinden una solución a la problemática planteada. Es por esta razón que nace Wissen, una aplicación móvil que brindará servicios integrales para la orientación y acompañamiento vocacional de jóvenes en los grados décimo y once de la ciudad de Bogotá.
Para la estructuración del sitio web se tuvo presente la disposición de colores corporativos de la marca, los
cuales trataron de desmarcarse con una propuesta de color adversa a las demás aplicaciones dentro del sector de
aplicaciones móviles enfocadas a educación. En base en ello se generó una disposición principal con una barra
de navegación, un entorno estructurado con diferentes scroll dentro de los bloques principales de información;
permitiendo maximizar lo dispuesto de manera dinámica y simple. Todo ello nos permitió presentar la información
de manera holística sin generar fricción dentro de las disposiciones de la información y los objetos presentados,
dentro de cada segmento.
Dentro de las disposiciones de la página se utilizó parámetros de justificación, paleta de colores y tipografía
homogéneos, los cuales nos permitieron tener una identidad y coherencia dentro del diseño de la web. Teniendo
presente a su vez la composición por bloques, con el cual se dispuso cada uno de los segmentos de información
y puntos de interacción con el usuario. Se tuvo presente la delimitación de los contenidos según la visualización
de los usuarios y los dispositivos utilizados para visualizar los contenidos; ya sean web, Tablet o smartphone.
La tipografía utilizada a lo largo de la página web es "Barlow, sans-serif". Una tipografía geométrica Sans-Serif
es decir sin serifa o de palo seco, que nos permite evocar un efecto de modernidad, minimalismo y profesionalidad.
Además de ser una tipografía adecuada para visualizar información, nos permite tener una fácil lectura de la información
y gracias a los dos intervalos dentro del peso de la tipografía podemos definir pautas dentro de cada sección, lo cual
permite una mejor compresión para el lector.
La estructura de la página web en su esencia esta compuesta por un enfoque netamente académico, donde el diseño y su
visualización de la información esta definido por la propuesta de valor de Wissen. Sin embargo, aunque la propuesta de
diseño se alinea con la visión y la misión, en este caso se da mayor relevancia a la información dentro del sitio web.
Para apoyar la información presente se realizaron algunos mockups que completen la imagen de la marca, donde lo dispuesto
dentro del diseño de la web, sea complementario con las muestras graficas que refuercen la visual de la marca dentro de
la página y a su vez generen nuevas dinámicas para presentar la información.
La segmentación de la información a lo largo del sitio web Wissen es uno de los componentes fundamentales, ya que la
información fue estructurada por segmentos funcionales donde el orden general fue respetado, la relevancia de la información
fue tomada según el posicionamiento funcional y los datos fueron unidos homogéneamente con los recursos visuales.
Ser diferenciador dentro del mercado y poseer características funcionales similares, fueron componentes base para la
estructuración de segmentos dentro del sitio Web; ya que la relevancia de cada componente dependía de la familiaridad
de los usuarios con los mecanismos dispuestos.
Dentro de los mecanismos creados para el sitio web se implementó la sección de “Pre-Beta”. La cual permitirá la
recepción de datos de contacto para ingresar a la Pre-Beta de la aplicación Wissen. El ingreso de datos por este
mecanismo será almacenado dentro de bases SQL en formatos de texto. Esta integración, aunque fue implementada en el
código mediante php y sus clases definidas para HTML5, depende en gran medida de la interfaz del cpanel con sus
herramientas y su respectiva conexión con la base datos.
Según lo planteado en la propuesta de diseño de la Web Wissen, podemos determinar que se estableció una ruta de
modelado del sitio donde se plasmó el Briefing de la marca, se analizó y modelo un prototipo UI del Web site y de la
aplicación mediante Adobe XD. Plasmando dentro de los dos modelos la identidad de la marca y a su vez realizando un
análisis a profundidad de la visión de negocio de Wissen como actor dentro del medio colombiano.
Recursos y Repositorios
© Michel Abello, Todos los derechos reservados | Diseñado por Michel.A