Briefing y Diseño web | Procesos previos al Desarrollo Web

En Girolabs hacemos Desarrollo de Software y Desarrollo Web. Como seguro te imaginás, nuestro día a día se trata de la personalización de funcionalidades tecnológicas de todo tipo de proyectos, pero no todo es desarrollo. Lo que pocos saben es que el desarrollo en código es fruto de un proceso previo (y a veces más importante que el producto en sí) dentro del proyecto.

Para que la programación se de con fluidez y evitar al máximo el “estanque”, nuestro equipo se toma muy en serio la etapa de contenido y el diseño UX / UI, ya sea que se trate de una sencilla Landing Page de una sola pantalla o de una App más compleja.

ETAPA #1: CONTENIDO

Antes incluso de empezar a diseñar y a programar, desarrollar un buen contenido es clave, y hay un proceso en particular que nos ayuda a poner sobre la mesa los objetivos del proyecto: estamos hablando del BRIEFING

Más adelante vamos a dedicarle un artículo completo a esta herramienta, pero por ahora, lo importante es que sepas que un Brief es un documento con preguntas claves, muy utilizado en el ámbito publicitario, que puede ser aplicado a todos los rubros donde la creatividad e innovación sean componentes esenciales.

En pocas palabras, el Brief ayuda a obtener contenido clave del Cliente y conocer más profundamente la marca. 

Un brief bien hecho nos ayuda a entender el desafío real del trabajo, más allá del “producto” entregado al final. Se desarrolla en una reunión de aproximadamente 90 minutos, en donde nos dedicamos a escuchar, a escuchar y a escuchar. Nos adentramos al Core de la marca y bajamos a tierra las expectativas iniciales del proyecto.

Como segundo paso en la etapa de contenido, tenemos la investigación. Llevamos adelante un análisis de toda la presencia digital de la marca (redes sociales, artículos, videos), y un research de estilos gráficos y de factibilidades tecnológicas. Dependiendo de la complejidad del proyecto, decidimos avanzar con lo ya descubierto, o utilizamos la metodología Design Sprint para seguir explorando a profundidad.

Para ir cerrando esta etapa, una vez realizado el brief y hecho el research, estamos listos para empezar a armar el Wireframe o arquitectura o estructura del sitio. Se trata de una diagramación (en papel, o en digital) que nos regala una primera aproximación del orden de las secciones según su relevancia y cuál creemos va a ser su disposición en la navegación de la Plataforma.

Esto solo es posible teniendo con anterioridad el material que que alimenta al Wireframe: las nociones generales de secciones más importantes, los recursos con lo que contamos (gráficos videos, fotos), y todo otro elemento que ayude al diseño.

ETAPA #2: DISEÑO EN FIGMA

FIGMA es una aplicación para el diseño UI/UX que cuenta con una excelente interfaz y funcionalidades para la creación de prototipos y generación de código.

Actualmente es la herramienta líder en la industria, y cuenta con características sólidas que respaldan a los equipos que trabajan en cada fase del proceso de diseño.

Hace mucho tiempo que incluimos a FIGMA como herramienta en nuestro stack de diseño. Nos gusta decir que FIGMA es nuestro “Google Drive” del Diseño, y quien trabaja en rubros de tecnología y comunicación sabe lo importante que son estas herramientas en el día a día.

Entre las principales funcionalidades de esta herramienta, podemos destacar:

  • Comentarios. Cualquiera que tenga acceso al proyecto puede dejar comentarios en el diseño, y es tan fácil como pinear y escribir. Esta funcionalidad ahorra mucho tiempo al Cliente a la hora de dar feedbacks, evitándole así la necesidad de escribir extensas y complicadas redacciones para dar a entender los puntos.
  • Diseño en tiempo real y en un único diseño. Todos los miembros del proyecto (incluido el cliente) pueden ver los avances en tiempo real en un único archivo en línea, evitando tener varios archivos versionados y evitando así muchas confusiones. Además, cuenta con un excelente “Control de Versiones” que nos permite regresar a versiones anteriores con mucha facilidad.
  • Colaboración. Figma está pensado para el trabajo colaborativo, muy útil en los casos de que sean varias las personas que estén participando del proyecto. También, permite realizar comentarios dirigidos, con la funcionalidad de “arrobar” a personas en los comentarios.
  • Componentes de Diseño: Como los elementos en un diseño tecnológico necesitan uniformidad en todas las pantallas, Figma tiene componentes o Plugins que son prácticos para la creación de botones, estilos de textos (títulos, textos), de colores, etc.
  • Prototipo funcional. Cuando tenemos un proyecto en Figma, el resultado final es “más que un diseño” ya que nos permite navegar con simples clics, uniendo diferentes pantallas y simulando la experiencia de un Sitio Web o de una App real, cuando en realidad solamente se trata de una maqueta. Esto ayuda a prototipar y probar el diseño, antes incluso de empezar a programar
  • Parámetros de Desarrollo. El desarrollador a cargo del proyecto tiene el trabajo más fácil, ya que puede obtener fácilmente información relevante para el Front-end: códigos hexadecimales de colores, el peso de la tipografía, las dimensiones, los márgenes y los espacios de los cuadros, y hasta inclusive permite exportar las imágenes y vectores escalados en SVG, PNG y JPG.

En este gráfico, te mostramos cómo era el proceso tradicional de Diseño y como es el nuevo flujo de trabajo utilizando una herramienta como Figma.

Con esto, estamos eliminando la necesidad de trabajar con otras aplicaciones de prototipado y recolección de feedbacks.

FIGMA cuenta con una membresía premium, pero para contarles la verdad, la versión gratuita es suficiente para equipos de trabajos pequeños.

Por todo esto que todos nuestros proyectos, ya sean páginas webs y Apps necesitan de diseño, primeramente pasan por FIGMA y por el cliente.

Luego de estas dos etapas estamos listos para comenzar el desarrollo de nuestra plataforma tecnológica.