Diseño simplificado de wireframe de alta fidelidad

MarilinCabirta
2 min readJun 27, 2022

--

Un wireframe es una guía visual que representa el marco esquemático de una web. Sirve para organizar los elementos de la página o app, y actúa como conexión entre la arquitectura de la información y el diseño visual posterior.

Es importante siempre que estemos en una etapa de diseño recrear wireframes de baja/media fidelidad, ya que los que nos interesa a priori es crear el esquema principal y no tanto dotar a los elementos de color, tipografia, estética y otros elementos que pueden distraer la atención de la estructura metálica principal. Esto nos supone un ahorro de tiempo y esfuerzo, para centrarnos más en las funcionalidades que en la estética.

A continuación vamos a mostrar un ejemplo de wireframes de alta fidelidad de Coinbase, plataforma de trading de las criptomonedas más utilizadas.

En este ejercicio, lo que vamos a hacer es simplificar los wireframes, quitando todos los elementos que puedan requerir mucho tiempo de trabajo, y centrarnos en aquellos principales, los cuales nos van permitir entender la estructura lógica de los elementos en la app/web.

Para realizar los wireframes he utilizado Figma, y he prescindido de color, nombres, e imagenes.

Me pareció importante a la hora de realizar los wireframes estructurar bien todos los elementos para una vez en fase de prototipado, poder dotarlos de interacción.

--

--

MarilinCabirta

Argentina con corazon gallego. me encanta viajar y todo lo que sume experiencias de vida. En constante aprendizaje de UX/UI.