¿Te gusta el diseño web? Te has preguntado alguna vez ¿cómo se ubican los elementos en una página de internet? Si tienes buenas ideas y te gusta el dibujo, puedes incursionar en esta faceta. Es un trabajo bien pagado y que no requiere de mucho esfuerzo, solo algunas horas.
En el comienzo, el término wireframe tenía que ver con la representación visual de elementos tridimensionales. Actualmente también se usa para el modelado 3D en animación. Es un recurso completo e interesante donde se pone en juego la interfaz y la experiencia del usuario.
Tabla de contenidos
Qué es el wireframe
El wireframe es un prototipo o boceto donde, visualmente y de manera sencilla, se diseña la estructura de un sitio web. Asimismo, es utilizado para la creación de aplicaciones, tanto móviles como para ordenadores, que impliquen interacción entre el hombre y un dispositivo. Está enfocado también en:
- La información que se publica.
- Las funciones que dispone.
- Las prioridades que se aplican.
- Las reglas sobre la divulgación de la información.
- El resultado en los diversos escenarios.
Primero define dos puntos importantes: el contenido y la posición de los bloques en la web. Inicialmente, no se utilizan elementos gráficos ni colores ni tipografías.
Tu enfoque es la funcionalidad del sitio. Ten en cuenta los objetos de la interfaz, el sistema de navegación y el contenido que se va a publicar.
Como el boceto es simple, te permite diseñar varios proyectos rápidamente. Puedes añadir las nuevas ideas o cambios según vas creando. Ten claro la estructura o aplicación antes de comenzar a programar.
Estarás liberándote de fallos importantes que luego te supone varias horas de trabajo para corregir.
Por qué utilizar el wireframe
Tiene el poder de conectar la arquitectura de la información con el diseño visual. Representando como resultado final una interfaz gráfica atractiva para el cliente. Conserva como propósitos principales:
- Cuestionar cómo se forma el sitio o la aplicación.
- Demandar cómo se va a usar.
- Averiguar cómo se organiza y presenta la información.
- Interrogar el contenido que se debe tener.
- Curiosear la interacción con el usuario.
Elementos que forman el wireframe
Los elementos son fundamentales para lograr una comprensión completa por parte de los usuarios. Es un método que aumenta la lealtad y satisfacción del cliente a través de la facilidad de uso y la interacción con el producto. Las interfaces cada vez son más elegantes gracias a la evolución del wireframe.
Contenido
Es la información que se publica en la web. A través de bloques de contenido organiza una jerarquía. Según la prioridad que tenga el contenido el usuario puede guiarse correctamente. Por eso, ordenar los elementos informativos en secuencia lógica refleja los objetivos y tareas del usuario.
Navegación
Son los elementos con los que interactúa el cliente. El menú, las opciones de pantalla y los grupos de enlace, permiten la movilidad por las diferentes secciones del sitio. Estos elementos proveen una visión global de la navegación y son necesarios a nivel de arquitectura de la página web.
Interfaz
Te permite establecer habilidades a las funciones en el ámbito de su provecho y utilización. Primero, piensa qué ofrece la página. Después analiza cómo el manejo y la eficiencia de la web es fácilmente posible. De esta manera, tendrás una mejor visión del trabajo final.
Cómo crear un wireframe de manera fácil
¿Recuerdas por qué decidiste revisar este artículo? Después de conocer algunos detalles para diseñar tus wireframe, llegó el momento de crear. ¿Cómo crearlo de una manera fácil? Aquí te recomiendo algunos consejos.
- Pon a volar tu imaginación y dibuja en tu mente cómo quieres que se vea. Piensa en el objetivo por el cual vas a crear el sitio web. Ten en cuenta la interacción de la interfaz con el usuario.
- Cuando ya vas a plasmar, ya sea en un papel o en un programa, el prototipo divide en tres partes el diseño. Primero, el encabezado: es la sección inicial que se visualiza en el inicio del sitio. Luego el cuerpo donde se publica todo el contenido y finalmente el pie de página.
- Analiza cómo sería la navegación. Adiciona los enlaces y botones que permitan la visita a las secciones que propongas en tu sitio web. Apóyate en otros diseños para tomar ideas y organizar las áreas de búsqueda, la divulgación de contenido y el inicio de sesión del usuario.
- Haz todas las anotaciones necesarias en tu wireframe para que todo esté claro y, posteriormente, sea más factible hacer cualquier arreglo.
Para comenzar a desarrollar todos estos aspectos puedes iniciar con un lápiz y un papel. Sin embargo, cuando llegues al punto número cuatro, en mi opinión, deberías apoyarte en una herramienta de diseño.
Herramientas para crear wireframes
El diseño de años atrás era basado en lápiz y papel. Actualmente, este método, sigue siendo una herramienta eficaz. Los wireframes pintados a mano son una manera divertida de pasar un rato y desconectas la vista del ordenador, eso también se agradece. Pero existen otros instrumentos que puedes emplear.
Lápiz y papel
Comencemos por el básico. No necesitas ser Picasso. Solo requieres hacer volar tu imaginación. Esta es una manera económica de crear wireframes. Si utilizas varios tamaños de papel podrás representar la web de manera que te ayude a dibujar un esquema que resulte finalmente.
Plantillas impresas
En internet puedes encontrar miles de diseños. Solo tienes que escoger alguno, imprimirlo y a partir de ahí crear tu propio estilo. Puedes decidirte con algunas de estas plantillas:
- Web sketching template: Para imprimir en A4 con una resolución de 1024×768.
- Paper Browser: Usa también la resolución 1024×768. Abarca objetos que permiten la creación de elementos y el ajuste del tamaño.
- Zurb Responsive Scketches: Estos son los más gustados y en un mismo paquete existen diversas plantillas que te permiten seleccionar la que gustes.
Softwares o aplicaciones
Existen diversos programas en el diseño de wireframes. Abarca objetos que permiten la creación de elementos y ajustar los tamaños. No son caras y quedarás complacido pues funcionan de maravilla.
Por ejemplo, Balsamiq tiene una aplicación que funciona en un iPad por lo que solo requieres de una pantalla táctil.
Estos programas contienen elementos predeterminados. Con arrastrarlo hasta su lugar, modificar el tamaño y editar los detalles, ya tienes casi creado el diseño.
¿Qué brinda cada aplicación? ¿Cómo elegir? Analiza estos criterios y luego escoge la herramienta que te guste y facilite tu labor.
- Interfaz para el usuario.
- Funcionabilidad.
- Arrastrar y soltar elementos.
- Retroalimentación.
- Elementos de intercambio.
- Herramientas de exposición.
- Versiones del programa.
- Relación entre precio y calidad.
Mockflow
Para usar esta aplicación necesitas: servicio de internet, un navegador web y una cuenta de usuario. Es una muy buena opción. Cuenta con una tienda de plantillas elaboradas. Tiene una versión gratuita con limitaciones. En sus versiones de pago solo tendrías que liquidar 14$ al mes.
Balsamiq Mockups
Esta es otra de las aplicaciones para diseñar tus wireframes. En mi opinión, es el programa por excelencia para este trabajo. Para usar la versión en Windows solo tienes que pagar 89$.
También por el mismo precio tienen una versión para Tablet y el uso online por el importe de 12$ al mes.
Wireframe.cc
Si eres principiante, esta es la mejor manera de familiarizarte con este tipo de herramientas. Su interfaz es muy sencilla. Puedes crearte una cuenta gratuita. Si deseas hacer diseños más personalizados con elementos más personales, las tarifas comienzan en 15$ por mes.
Axure
Para el diseño de wireframes es un instrumento más completo y complejo. Si ya posees un nivel intermedio avanzado esta es la recomendación. Aunque no es muy barata pues la licencia vitalicia cuesta casi 500$, puedes optar por la opción usuario donde debes pagar al mes 29.90$.
HotGloo
Es de las más avanzadas pues te permite la exportación y la implementación rápida de los wireframe en HTML. Facilita la colaboración con tu equipo de trabajo gracias a su maravillosa interfaz. Puedes utilizarla gratis por siete días y el pago por mes es de 12$.
NinjaMock
Tiene un aspecto bastante peculiar, pues los elementos que contiene parecen como si se dibujara a mano. Como ventaja te comento que es de fácil utilización. Se considera la indicada para iniciar un proyecto. Por solo 10$ mensuales puedes hacer uso de esta aplicación.
MockPlus
Esta herramienta es la más rápida del mercado a nivel mundial. Tiene una versión gratuita, pero no conseguirás implementar todos los recursos. Si quieres trabajar en la nube suscríbete por 129$ al año. Si optas por la versión para ordenador por con licencia ilimitada pagas un importe de 399$.
Canva
Conocida por los profesionales que trabajan en este negocio. De fácil utilización, permite crear imágenes para las publicaciones, realizar tarjetas de presentación, entre otros.
Aunque es un recurso muy versátil pocos conocen las posibilidades que brinda para crear wireframe. Gratis por 30 días y por 12$ dólares accedes a todas las utilidades que brinda.
InVisión
Esta herramienta comparada con las anteriores es totalmente gratuita. Por esa razón no deja de ser buena. Posee una bonita interfaz, con elementos interactivos y puedes hacer anotaciones que sean visibles a todo el equipo.
Tipos de wireframe
Anteriormente hablamos de las herramientas con las cuales podemos diseñar un wireframe. Lo ideal es que emplees un recurso y que obtengas un buen resultado de cara al cliente. Los tipos de prototipo varían desde el más simple, con modelos en blanco y negro, hasta algo más complejo como simular un producto.
Básicos
Es conocido como “representaciones de baja fidelidad”. Son esquemas de páginas web muy simples y escuetas. Casi siempre en blanco y negro.
Anotados
Aquí ya se agregan una amplia gama de detalles en correspondencia con el wireframe básico. Las anotaciones son breves y se ubican al lado o al final donde se describen los elementos que lo conforman. Por lo general, está separado el contenido y las funcionalidades.
Interactivos con alta definición
Con un toque, un click o un desplazamiento, se experimenta interacciones dentro o fuera de los wireframes. Si se agrega antes en los prototipos se ahorra trabajo al diseñador y al desarrollador. Este tipo de wireframe solo se realiza en presentaciones y diseño gráfico o en software de creación de prototipos.
Importancia del uso del wireframe
La creación de un sitio web es una manera de divulgar contenido importante y significativo. Pero esto no sería posible sin el uso del wireframe. La naturaleza abstracta del sitio es reemplazada a través de esta técnica. El sitio se vuelve más tangible y fácil de entender. De ahí la importancia de su uso:
- Garantiza que el proyecto se realice de acuerdo con el fin propuesto. El diseño de wireframe crea expectativas sobre cómo será utilizado. ¿Cómo funciona? ¿Dónde se ubica el contenido? ¿Qué beneficios ofrece? Son preguntas que debes formularte para centrarte y definir el propósito.
- Centrarse en las facilidades que ofrece te dará una mirada objetiva. La navegación, los enlaces y el uso te ayuda a identificar fallas.
- Al crear el sitio piensa en grande. Cuando el contenido comience a crecer tienes que estar preparado para que el impacto sea ínfimo. Por eso el diseño de wireframe revela importantes oportunidades de cómo adaptarse cuando el contenido comienza a expandirse.
- Cuando diseñas la funcionalidad del sitio, el uso de wireframe garantiza que se haga de forma independiente. Si durante el proceso de revisión necesitas hacer algún cambio no se convertirá en una tarea tediosa.
Ventajas del uso del wireframe
Si incorporas este prototipo a tu método de trabajo obtendrás muchas ventajas. Optimizas tu tiempo y agilizas el proceso. Generas un catálogo al que puedes recurrir ante nuevos proyectos. Sin lugar a dudas, estas razones son suficientes. No obstante, te comparto otros beneficios a continuación:
- Te funciona como un boceto: Son rápidos y su creación es barata. La calidad varía de acuerdo al proyecto y al cliente. Por eso el wireframe debe ser considerado durante todo el proceso de diseño del producto.
- Es útil en otros períodos de la creación: Ya viste la importancia de los wireframe en el diseño. Una vez aprobada la idea se comienza la creación. Comienza a trabajar con medidas exactas de dónde será ubicado todos los elementos. Mantén su uso durante todo el proceso.
- Prospera el trabajo en equipo: Como los wireframe son representaciones visuales, son perfectos para trabajar en equipo. Cada integrante puede presentar su idea y ser entendida por cualquiera de los otros compañeros. Una vez que está digitalizado, tanto diseñadores como desarrolladores, lo pueden utilizar.
- Permite que el proyecto sea entendido por el cliente: El crear wireframe sencillos, sin imágenes ni contenido, permite al cliente una perspectiva del trabajo. Al emplear el proyecto puedes realizar mejoras en el diseño, en la estructura del contenido y en la posición de los elementos.
- Mayores posibilidades: Cuando son expuestos a la usabilidad, te ayuda a resolver problemas que se pueden generar. No es recomendable improvisar sobre la marcha. Ahorras tiempo cuando la base del sitio, el wireframe, se diseña correctamente.