Cómo + Por qué usar una plantilla de estructura de sitio web
Wireframing es uno de esos procesos de diseño que ocurre de manera orgánica e intencional. ¿Cuántas veces has bosquejado una idea durante una reunión? ¿Cuántas veces ha creado una estructura metálica presentable para una reunión de clientes?
Ambos tipos de estructuras alámbricas son partes igualmente importantes del proceso de diseño e iteración.
Esto último requiere un poco más de esfuerzo para crear, y ahí es donde entra en juego una plantilla de estructura metálica. Aquí está todo lo que necesita saber sobre cómo usarlas de manera efectiva y cómo pueden ayudarlo a ahorrar tiempo, mejorar la calidad de sus estructuras metálicas y ayudarlo pon tus ideas en un formato físico.
Explore las maquetas de sitios web
¿Qué es una plantilla de estructura metálica de sitio web?
Una estructura metálica es una ilustración básica del concepto de diseño de un sitio web. Cada tipo de página puede tener su propia estructura alámbrica. Estos diseños a menudo comienzan en forma de bocetos y eventualmente pueden evolucionar en maquetas o prototipos.
Una plantilla de estructura de alambre del sitio web es un kit de pseudo-UI con elementos de estructura de alambre en lugar de componentes de interfaz de usuario. Muchas plantillas usan "kit de interfaz de usuario de estructura alámbrica" en el nombre, aunque eso no es exactamente lo que son. (Pero se entiende la idea.)
Una plantilla de estructura metálica podría ser para Sketch o Adobe XD o Photoshop. La plantilla que elija debe corresponder a sus herramientas y flujo de trabajo.
Una buena plantilla de estructura alámbrica tiene elementos para diferentes tipos de páginas, elementos, y no es demasiado elegante. Los bloques de imágenes, bloques de texto, bloques de botones y elementos en el lienzo (escritorio, móvil) que necesita son piezas comunes.
Lo que no necesita es algo que parezca un diseño terminado. Opta por una estructura alámbrica en blanco y negro. Cualquier cosa que sea de alta fidelidad o que incluya colores e imágenes puede confundir a los clientes, haciéndoles pensar que están viendo un concepto de diseño real. (Y no quieres eso en la etapa de enmarcado de un proyecto).
5 razones por las que usar una plantilla de estructura alámbrica
Si aún no se ha vendido en wireframing, puede ser una gran herramienta en el proceso de diseño. Las plantillas simplemente aceleran todo.
- Las plantillas de estructura metálica ahorran tiempo, lo que le ayuda a idear rápidamente de una manera presentable.
- Wireframes lo ayuda a detectar fallas de diseño y problemas de usabilidad desde el principio.
- Las plantillas de estructura metálica lo ayudan a pensar en diferentes tipos de páginas y elementos de página para que no omita nada.
- Wireframes crea una base sólida de diseño.
- Las plantillas de estructura alámbrica pueden ahorrarle dinero a largo plazo como una forma de ayudar a los clientes a comprender un diseño sin invertir en una maqueta completa.
Cómo usar una plantilla de estructura alámbrica
La mayoría de las plantillas de estructura alámbrica funcionan como kits de interfaz de usuario con elementos que puede mover en el software que elija.
El uso exacto depende de su herramienta.
La mayoría de las plantillas de estructura alámbrica vienen con páginas que generalmente están bien construidas, por lo que solo tiene que hacer cambios simples en el diseño general de su proyecto.
Tiendo a gustarme una opción de arrastrar y soltar. Los archivos de capa de Photoshop también son agradables. Pero, de nuevo, mucho depende de las preferencias personales y el flujo de trabajo.
La clave para usar una plantilla de estructura alámbrica de manera efectiva es elegir algo que refleje su flujo de trabajo, que sea compatible con el software que desea usar y que pueda seguir con usted durante el proceso. Muchas herramientas le permiten desarrollar y evolucionar wireframes en maquetas de alta fidelidad. Si esto es parte de su flujo de trabajo planificado, elija una plantilla en consecuencia.
Cómo obtener una plantilla de estructura alámbrica
Cuando se trata de utilizar una plantilla de estructura de sitio web, tiene dos opciones:
- Construye tu propio
- Descargar una plantilla prefabricada
La primera puede darle la solución más personalizada, pero puede llevar mucho tiempo.
Este último ofrece una amplia gama de diferentes tipos de plantillas, con opciones gratuitas y premium disponibles para elegir.
La opción que elija probablemente dependerá del tiempo y la rapidez con que necesite una plantilla para trabajar. El uso de una plantilla prefabricada suele ser la ruta de inicio rápido. La parte más difícil podría ser buscar en todo lo disponible para encontrar la opción correcta.
5 plantillas de estructura alámbrica para probar
¿Listo para comenzar con una plantilla de estructura metálica de sitio web? Aquí hay cinco plantillas diferentes que puede probar para ver cómo se siente al usarlas para sus proyectos.
Kit de interfaz de usuario limpio para bocetos en bruto
Esta plantilla de estructura metálica mínima está repleta de piezas intercambiables que tienen un estilo casi esbozado para diseños rápidos.
Kit de estructura alámbrica Flow iOS
Esta plantilla de estructura de boceto es un gran comienzo para los conceptos de aplicaciones o sitios web móviles. Los elementos de estructura metálica son simples y prácticos.
Wirey Wireframe Kit
Wirey incluye plantillas de Photoshop y Sketch, que le brindan cierta flexibilidad de estructura de alambre. La plantilla incluye más de 200 componentes y 1, 000 elementos, por lo que todo lo que necesita está aquí.
Kit de estructura alámbrica sensible
Esta plantilla de estructura de alambre para Figma y Sketch está diseñada para llevarlo desde la estructura de alambre temprana hasta la creación de prototipos. Incluye toneladas de bloques y plantillas para tamaños de escritorio, dispositivos móviles y tabletas para ayudar a enfocar su proceso de pensamiento receptivo.
UX Workflow Wireframe y Sitemap Creator
Esta plantilla de estructura metálica está repleta de opciones con páginas y mapas del sitio que están listos para usar. Una plantilla como esta puede ayudarlo a planificar proyectos si necesita un poco de ayuda para comenzar.
Conclusión
Las plantillas de estructura de alambre del sitio web son uno de esos atajos que pueden facilitar el diseño.
Soy un wireframer de boceto en papel, pero eso no está listo para el cliente. Por lo tanto, uso plantillas para convertir mi desorden de lápiz en algo que se vea presentable. Las plantillas hacen que esto sea mucho más rápido y fácil y hacen que una tarea de la que no soy fanático sea mucho más manejable.
Si no ha intentado usar una plantilla de estructura alámbrica, lo recomiendo encarecidamente por este motivo. Tome uno de los ejemplos anteriores o incluso considere crear uno propio que pueda usar y reutilizar.
