DizzyFans
Diseño - Maquetación | 2023
Descripción General
DizzyFans es una nueva red social en la que todo el mundo puede publicar todo tipo de contenido, sin restricciones. Existen los creadores, un tipo de usuario especial, que pueden publicar contenido tanto para sus seguidores como para sus subscriptores exclusivamente.
El cliente, tras dos años de desarrollo sin llegar a buen puerto, decidió cambiar de empresa y confiar en nosotros para llevar a cabo su idea de negocio.
Este proyecto se llevó a cabo en un periodo de 5 meses, desde el diseño hasta el desarollo tanto front-end como back-end.
Posición en el proyecto
En este proyecto he realizado todas las tareas de diseño y maquetación, preparando los componentes y la estructura de las páginas.
Proceso de análisis e investigación
Durante el proceso de análisis del antiguo proyecto percibimos una gran cantidad de cosas incompletas y con un funcionamiento errático. Había una notable una falta de organización de los contenidos dificultando la navegación y el acceso a la información. Así como un estilo inconsistente e incompleto que desmejoraba la imagen de marca de DizzyFans.
Decidimos rehacer el proyecto en su totalidad, empezando por el diseño para otorgar a DizzyFans una identidad corporativa sólida y profesional.
Para realizar el nuevo diseño, en primer lugar, se llevó a cabo un análisis competitivo con el objetivo de crear una buena experiencia de usuario basándonos en las interfaces de otras redes sociales como Facebook, Twitter, Instagram, Only Fans o TikTok. Mantentiendo siempre un diálogo activo con el cliente para tener en cuenta en todo momento sus necesidades, sus objetivos y su idea de negocio.
Aspectos del diseño a mejorar
- 1) Branding e identidad corporativa de DizzyFans.
- 2) Uso coherente y jerarquizado de los colores y las tipografías.
- 3) Unificación del estilo de los iconos y otros elementos visuales.
- 4) Mejora de la Experiencia de Usuario (UX).
Aspecto a mejorar 1
Branding e identidad corporativa
Mediante el proceso creativo de aportar un nuevo diseño al proyecto de DizzyFans, busqué dar un aire de simplicidad, sencillez y modernidad, con un gran predominio del blanco, color que aporta nitidez y frescura, separando los elementos únicamente con una pequeña y sutil sombra consiguiendo un borde más ligero que usando un borde convencional.
El objetivo es conseguir que DizzyFans tenga una presencia y una coherencia visual sólida y profesional, que con tan solo ver ciertos elementos puedas reconocer a la marca sin necesidad de ver el logotipo.
Aspecto a mejorar 2
Uso coherente y jerarquizado de los colores y las tipografías
Una parte importante del branding es la paleta cromática, y un uso coherente de todos los colores que componen la identidad de marca. A su vez, es fundamental un uso correcto e intuitivo de las tipografías.
A partir del logotipo, se define que el color corporativo principal de DizzyFans es el naranja, y es éste color el que rompe con el blanco y acentúa los elementos de acción más importantes. Mediante el uso de un tercer color se le informa al usuario sobre cuáles son opciones y funcionalidades exclusivas para creadores de contenido facilitantole la comprensión sobre dónde está ubicado y qué puede realizar en la aplicación.
En DizzyFans constan dos tipografías distintas: Montserrat, heredada del logotipo, destinada casi en exclusividad a titulos; y Roboto, algo más sobria, destinada al resto del contenido textual.
Aspecto a mejorar 3
Unificación del estilo de los iconos y otros elementos visuales
Durante el proceso de análisis, se percibió una inconsistencia en estilo y temática iconográfica, así como un uso poco intuitivo de éstos y otros elementos visuales como por ejemplo elementos de carga.
Teniendo en cuenta el nuevo diseño, se determinó que, los UI icons de Flaticon tenían un diseño que encajaban perfectamente con el estilo visual actual de DizzyFans. Por lo tanto, se llevó a cabo un documento comparativo de los iconos utilizados originalmente junto a sus sustitutos, aclarando así, qué iconos se iban a utilizar, cuáles debían ser personalizados o modificados y, lo más importante, asegurabamos un uso coherente de éstos.
Aspecto a mejorar 4
Mejora de la Experiencia de Usuario (UX)
Teniendo en cuenta que DizzyFans es una red social y el uso mayoritario de éstas es mediante un dispositivo móvil, el diseño de experiencia de usuario se centró en 'Mobile First', asegurando el acceso intuitivo a todas las funcionalidades que componen este proyecto.
Nos centramos en un buen diseño responsive para que fuera lo más accesible posible y se pudiera utilizar desde cualquier tipo de dispositivo, adaptando el diseño y la navegabilidad a cada dispositivo.
Flujo de pantallas y arquitectura de la información
Guía de estilo
A continuación se detallan algunos elementos fundamentales que componen el diseño y el estilo de DizzyFans.
Logotipo
Colores
#FFC523
#FE7E00
#FE7E00
#283047
#5E19FF
#3600B5
#CACACA
#A8A8A8
#72716F
#FFFFFF
Botones
Diseño final
Herramientas
Estoy encantada de ayudarte con tus necesidades de diseño y desarrollo web.
Ponte en contacto conmigo y comencemos a hacer realidad tu proyecto.