Saltar al contenido

Que es un wireframe

diciembre 23, 2021
Que es un wireframe

qué es un wireframe para un sitio web

Un wireframe es una ilustración bidimensional de la interfaz de una página que se centra específicamente en la distribución del espacio y la priorización del contenido, las funcionalidades disponibles y los comportamientos previstos. Por estas razones, los wireframes no suelen incluir ningún estilo, color o gráfico. Los wireframes también ayudan a establecer relaciones entre las distintas plantillas de un sitio web.

Es importante tener en cuenta que los wireframes son guías sobre dónde van a aparecer los principales elementos de navegación y contenido de su sitio en la página.    Como el objetivo de las ilustraciones no es representar el diseño visual, hay que mantener la sencillez.

Dado que los wireframes son bidimensionales, es importante recordar que no sirven para mostrar las características interactivas de la interfaz, como los desplegables, los estados hover, los acordeones que implementan la funcionalidad de mostrar-ocultar o los carruseles que giran automáticamente.

Los wireframes pueden variar tanto en su producción, desde bocetos en papel hasta imágenes dibujadas por ordenador, como en la cantidad de detalles que transmiten. Los términos baja y alta fidelidad se utilizan para identificar el nivel de producción o funcionalidad de los wireframes.

cómo crear wireframes

Una página web atractiva es la única manera de captar más atención de los usuarios cuando se trata de marketing de negocios o de cualquier aplicación. Pero si tu anuncio no ha ganado mucha importancia, ¿qué harás entonces? Bueno, usted comenzará a encontrar defectos con el diseño de la página web para arreglar los problemas para que pueda atraer a una multitud mucho más grande.

Inicialmente, Wireframe significaba un retrato o representación visual de un objeto 3D en el diseño y desarrollo de varios productos. Hoy en día, el término implica sobre todo el desarrollo y el diseño de aplicaciones móviles, páginas web en 2D, y la animación por ordenador para el modelado en 3D.

El crecimiento es una de las partes vitales del ciclo de vida del desarrollo de una aplicación o diseño web. Debes asegurarte de que el prototipo ha cubierto todos los requisitos enumerados en el documento recogido del cliente. En estos casos, puedes elaborar un Wireframe y hacer un seguimiento de la fase de desarrollo.

Hay que ver si se han cumplido todos los requisitos. El Wireframing también ayuda a los desarrolladores a realizar ajustes según la conveniencia para ajustarse a los criterios. Así que el Wireframing hace que el desarrollo sea mucho más eficiente.

ejemplo de wireframe

La misma pantalla puede construirse de muchas maneras diferentes, pero sólo algunas de ellas transmitirán su mensaje correctamente y darán como resultado un software o sitio web fácil de usar. Definir una buena estructura de interfaz es posiblemente la parte más importante del diseño de software.

Hacer este trabajo ahora, antes de escribir cualquier código y antes de finalizar el diseño visual, le ahorrará mucho tiempo y un doloroso trabajo de ajuste más tarde. Para obtener más información acerca de por qué la gente decide hacer un wireframe, lea sobre Las dos fases del wireframe, o vea nuestro detallado video Wireframing for Newbies o el resumen rápido a continuación.

Nadie podría confundir un wireframe con el aspecto final de su aplicación. La baja fidelidad y los pocos colores le obligan a centrarse en la estructura por encima de los detalles. Habrá mucho tiempo para el diseño visual una vez que la estructura esté finalizada.

La sensación de rudeza fomenta el debate. Lo llamamos un aspecto que nadie teme criticar. Los wireframes son realmente rápidos de hacer, así que no seas tímido a la hora de dar tu opinión. Probablemente, cada pantalla sólo te haya llevado unos minutos; no te preocupes, a su autor no le importará volver a hacerlas desde cero. Lo que más importa en este momento es la facilidad de uso final, por lo que es normal y esperable que se realicen algunas iteraciones.

herramientas de wireframe gratuitas

DiseñoCómo hacer tu primer wireframe (+ video!)4 min readWill Fanguy – Nov 19, 2019Link copied to clipboardUpdated 11/19/2019: Hemos añadido un video tutorial para ayudar a suavizar tu trabajo de wireframing. ¡Mira y aprende!

Tanto si eres nuevo en el diseño de la experiencia del usuario como si llevas años en este campo, sin duda has oído hablar de los wireframes. Los wireframes son un paso esencial a la hora de hacer realidad una idea para un producto digital.

Pero, ¿qué lugar ocupa el wireframe en el proceso de diseño del producto? Si nunca lo has hecho, ¿cómo sabes qué hacer, dónde hacerlo y qué pasos dar? ¿Y cuál es la diferencia entre un boceto y un wireframe? ¿Y qué hay de las maquetas o los prototipos?

Por suerte para usted, nuestro equipo de InVision conoce este proceso a la perfección y queremos compartir con usted nuestra experiencia como expertos. Así que coge un bolígrafo y un papel (¡no es sólo para tomar notas!) y ponte el sombrero de la lluvia de ideas (tienes uno de esos, ¿verdad?). Vamos a hacer un wireframe.

Los wireframes son un punto intermedio entre los bocetos en papel y el primer prototipo. Te ayudan a planificar el diseño y los patrones de interacción de tus usuarios sin detalles que te distraigan, como los colores o los textos. El recorrido propuesto por el usuario debe ser claro, sin necesidad de colores, sombreados o menús extravagantes.

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad