Estilo visual
Última actualización
¿Te fue útil?
Última actualización
¿Te fue útil?
Una vez terminado la parte más enfocada al UX, era el momento de decidir un estilo visual para poder empezar a plasmar mis ideas, por tiempo no pude desarrollar esta parte todo lo que me hubiera gustado y como me hubiera gustado, pero como la idea de Lean es, falla rápido, falla barato, opté por lo más sencillo, partir del estilo visual de la página de 2gether () y crear lo que podría ser una rama de la propia empresa.
Para el naming cogí los dos pilares más importantes de mi producto (concentración y trader) y así cree Focus on trading, para el logo tampoco le di muchas vueltas, ya habría tiempo si el producto tenía buen resultado.
La idea del logo también era que con simple vistazo la relacionaras con 2gether por lo que directamente la mencione como parte del logo, aunque podría funcionar por sí misma.
Para las tipografías, tanto para el logo como para el resto de productos que crearía use la Exo 2 y la Roboto con sus variantes, al igual que lo hacía 2gether.
Para los colores también me fijé como los trabajaba 2gether, poca gama de colores, contrastados y saturados. Y aquí es donde decidí realizar una diferenciación entre mi aplicación y la suya. De manera que si las veías juntas serian parecidas en cuanto a estilos y tipografías pero no generarían las mismas sensaciones.
Para ello decidí elegir una gama cromática más moderada, sin saturación y que transmitiera calma y profundidad. Un degradado, un color primario, un color de contraste serian los colores principales para la landing y la aplicación junto con otros pocos tonos que conformarían todo el estilo visual:
En cuanto a iconografía también decidí ser lo más productivo posible por lo que para la landing use la misma iconografía que usa 2gether:
Y para la aplicación me ayudaría del sistema de diseño de Google Material Design.
Para la parte de ilustración o imagen, decidí que lo mejor seria no abusar estas, por lo que para la andina solo usaría imágenes de un móvil genérico y para añadir un poco de atractivo usaría "burbujas de color" para que la landing fuera más visual:
En cuanto al layout, decidí usar la documentación de Bootstrap, ya que el objetivo era crear la landing en Wordpress mediante Avada y Elementor en poco tiempo. Ya que todos estos componentes trabajan bajo las mismas layout me permitían ir mucho más rápido a la hora de realizar el proyecto.
Para la grid en móvil, decidí usar una grid de 8px, lo que me permitiría ajustar cada elemento mediante pixel perfect. La grid de 8px no funciona para todos los móviles, pero para elegir esta grid tuve en cuenta que el dispositivo del que partiría sería un móvil Android de 360px de ancho, de ahí también el elegir el sistema de diseño Material Design de Google.
Para el tono de comunicación o UX Writing elegí una comunicación quizás un poco más compleja en cuanto a contenido y simple en cuanto a forma, ya que según el estudio que había leído sobre el tipo de usuario de 2gether la mayoría tenían un nivel educativo alto.
A continuación podéis encontrar la guía de estilo que estoy desarrollando para la aplicación:
