Trabajos WhiteStone Technology

Trabajos WhiteStone Technology

Trabajos WhiteStone Technology

WhiteStone Technology

WhiteStone Technology

WhiteStone Technology

Descripción

Durante mi estancia en WhiteStone Technology realicé diversos trabajos dentro del equipo de Diseño y Marketing.



Entre ellos, mencionar:


  • Rediseño completo de su página web haciendo uso de Figma, Photoshop e Illustrator para la fase de diseño y WordPress para la posterior etapa de desarrollo.

  • Creación de diferentes vídeos haciendo uso de motion graphics con el fin de mostrar distintas funcionalidades de su producto estrella, Calibry. El software utilizado fue After Effects, Premiere, Photoshop e Illustrator.

  • Otras tareas relacionadas con diseño gráfico como la elaboración de brochures, personalización de ciertos elementos para diversos clientes y otros documentos corporativos.

Rediseño web

Para dar los primeros pasos de cara a abordar el rediseño de la web, se nos dijo que nos basáramos en el sistema de diseño de IBM para partir como base.


Tomar como referencia su estilo minimalista y con elementos limpios y bien estructurados fue un acierto, ya que encajaban muy bien con el carácter de la empresa y la imagen que se quería imprimir en su nueva página web.

Web antigua

La web de la que partimos tenía un diseño demasiado simple y se había quedado anticuada.

No se respetaban de una forma adecuada los espacios entre diferentes imágenes y textos y ciertos elementos tampoco estaban diseñados para funcionar correctamente de manera responsive.

La web carecía de iconos o pictogramas y constaba de muy pocas imágenes, por lo que se hacía poco amena a la hora de ir leyendo y visualizando los distintos textos y contenidos de ésta.

La web carecía de iconos o pictogramas y constaba de muy pocas imágenes, por lo que se hacía poco amena a la hora de ir leyendo y visualizando los distintos textos y contenidos de ésta.

Web nueva

Tomando como base el sistema de diseño de IBM, fuimos creando los diferentes componentes necesarios y replicando otros adaptándolos al estilo deseado.

Página de inicio

Página de inicio

Página de inicio

Propuse incluir imágenes para los hero de cada sección de la web que tuviesen un estilo conceptual y fuesen llamativos. También un rediseño del elemento de Calibry (un colibrí de tonalidades moradas) haciendo que adoptase un estilo tipo render 3D.


Implementamos elementos tales como la barra de navegación con apartados desplegables al pasar el ratón por encima, índices interactivos para navegar a lo largo de la web o carruseles con botones para poder hacer un scroll horizontal.

Sección de Procesos de Calibry

Sección de Procesos de Calibry

Sección de Procesos de Calibry

En el rediseño de la nueva web ya sí se incluyeron más imágenes, así como diferentes pictogramas e iconos en ciertos apartados.

Sección de Consultoría y de Soporte

Sección de Consultoría y de Soporte

Sección de Consultoría y de Soporte

Sección de Partners y de Contacto

Sección de Partners y de Contacto

Sección de Partners y de Contacto

También creamos un nuevo footer en el que destaca mejor cada apartado y se incluyó en él un selector de idioma para contar con la posibilidad de navegar a través de la web tanto en español como en inglés.

Formulario para pedir más detalles acerca de Calibry, sección Solicitar información

Formulario para pedir más detalles acerca de Calibry, sección Solicitar información

Formulario para pedir más detalles acerca de Calibry, sección Solicitar información

Hicimos que, al pulsar en el botón con el texto Solicitar información, ubicado en la barra de navegación y en otros lugares estratégicos, se accede a un formulario para preguntar por más detalles sobre Calibry.

Puedes entrar a la página web pulsando en el botón que se encuentra bajo este texto.