Hacer wireframe es un paso importante al diseñar una página web.
¿Sabes qué es un wireframe y para qué sirve? Te lo contamos todo. ¡Incluso las mejores herramientas para crear un wireframe!
Vamos a ello.
Wireframe: qué es y para qué sirve
Un wireframe es un boceto web. Es decir, un esquema previo al diseño web que muestra cómo será la página.
¿Y qué incluye este boceto? Todos los elementos que tendrá la web y el orden en que estarán colocados.
¿Qué debes tener en cuenta para crearlo?
- Información más relevante que contendrá el site. En una página para un negocio incluirá la página de inicio, quienes somos, página de servicios o catálogo de productos, tienda online si lo requiere, tarifas, contacto y blog.
- Estructura de la web. Es decir, cómo se organizan los elementos y contenidos: fotografías, ilustraciones, textos, slides…
- La experiencia del usuario. Dónde irán los botones, llamadas a la acción, títulos…
- La arquitectura web. Es decir, qué páginas menús y submenús habrá y qué enlaces o linkeado habrá entre ellos.
La principal razón para hacer un boceto web es la rapidez y efectividad. Al saber qué incluir y dónde, el diseñador trabaja más rápido. Y sin tener que improvisar, minimizando así la probabilidad de cometer errores.
Además, si diseñas una web para un cliente podrás enseñarle el esquema previo. Y si le gusta y lo aprueba, proceder a su ejecución. De este modo no trabajarás inútilmente, así aprovecharás el tiempo y el esfuerzo realizados.
Hay diferentes formas de hacer wireframe. Puedes hacer un boceto sencillo y esquemático. Lo justo para anotar las ideas de qué va y dónde. Es decir, para que te sirva de guía al trabajar. O hacerlo más completo añadiendo colores, imágenes y tipografías, para esos clientes que necesitan tener una visión más clara y completa de las cosas antes de dar su visto bueno.
Resumiendo. Sus utilidades son:
- Poder organizar tus ideas antes de llevarlas a la práctica.
- Disponer de una guía una vez empiezas a trabajar en la construcción de una página web.
- Detectar posibles problemas, errores o ausencias antes de comenzar a trabajar.
- Minimizar el riesgo de errar y evitar la improvisación.
- Ahorrar tiempo y ser más productivo.
- Crear y ver dos o más bocetos para decidir cuál te gusta más (o enviar como ejemplos de wireframes al cliente para que dé el visto bueno al que más le guste) antes de comenzar.
- Te permiten condensar la información en poco espacio y de forma visual.
- Facilitan la creación de webs con buena funcionalidad y que permiten una buena experiencia de usuario ya que te permiten testear su usabilidad
5 herramientas o aplicaciones para crear wireframes
¿Puedes crear bocetos analógicos? Lógicamente, sí. El papel y el lápiz pueden ser suficientes en ocasiones o como primer paso. Pero no es equiparable a las ventajas que te proporcionan estas herramientas para crear wireframes visuales, completos y, sobre todo, muy prácticos.
Hay diferentes aplicaciones para hacer wireframes que puedes usar. Estas son 5 muy interesantes.
Puedes probar sus versiones gratuitas (algunas disponen también de versión de pago con mayores funcionalidades) y quedarte con la que te resulte más fácil de usar. O con la que mejor te proporcione el tipo de boceto web que deseas tener antes de comenzar a construir un site.
Free Online Photoshop
Permite hacer wireframes online. Puedes trabajar en distintas capas, lo que resulta muy práctico.
Al terminar el trabajo puedes guardarlo o exportar el documento bien en formato PNG, bien en PDF.
MockFlow
Es una de las herramientas más completas para esta función. Permite diferentes formatos. Y se puede usar desde escritorio, móvil o tablet.
Uno de sus puntos fuertes es que dispone de muchos elementos y prediseños para añadir. Esto facilita las cosas y permite crear fácilmente un boceto muy visual simplemente arrastrando los elementos y soltándolos.
Tiene vista previa. Esto siempre resulta interesante para ir viendo cómo está quedando.
Y puedes conectarlo a Adobe Photoshop para trabajar en ambos en conjunto.
Su versión básica es gratuita. Para mayores funcionalidades, disponen de versión de pago. Puede merecer la pena para profesionales.
JustinMind
Es una buena herramienta, mejor en su versión de pago que en la gratuita, que es más básica.
Entre sus funcionalidades destaca que permite crear un wireframe interactivo en el que se puede clicar y ver simulaciones funcionales.
Tiene una gran diversidad de interacciones, animaciones y transiciones y gestos móviles.
Todo ello hace que su diseño sea muy visual y permita hacerse una idea clara de cómo quedará la web terminada. Esto hace que sea muy interesante a la hora de presentar un proyecto a un cliente.
Canva
Si, también para esto puedes utilizar Canva.
En realidad no es una herramienta muy completa. Pero es muy sencilla de usar. Y más aún si estás familiarizado con ella o si ya dispones de cuenta de pago. Aunque puedes usarla gratis en su forma más básica.
Tiene plantillas temáticas muy prácticas en las que puedes añadir todo tipo de elementos gráficos: fuentes, colores, fotografías, textos…
Te ofrece la posibilidad de ver el wireframe a pantalla completa. Así te haces una mejor idea de cómo quedará y lo verán los usuarios. Además, así no te perderás detalle.
Y también te permite compartirlo a través del link. Así podrás enviarlo al cliente o trabajar en conjunto en él con otras personas.
Figma
Esta herramienta es especialmente interesante para trabajar en equipo. Si eres profesional del diseño web y trabajas con compañeros en proyectos conjuntos, te vendrá muy bien. Así podréis verla y hacer retoques incluso si no trabajáis en el mismo espacio, trabajando al mismo tiempo en el boceto web.
Permite crear prototipos interactivos sin trabajar con código. Su construcción es muy intuitiva, lo que facilita su rápida creación.
Uno de sus puntos fuertes es que es una herramienta optimizada para dispositivos móviles. Así puedes comprobar cómo quedaría de una forma más realista. Eso te ayuda a tomar mejores decisiones, por ser más cercanas a la realidad.
¿Prefieres delegar en profesionales? En Inboost Marketing lo hacemos por ti. Consúltanos sobre estos y otros servicios profesionales.
