Los 24 mejores wireframes de sitios web gratuitos
Publicado: 2019-01-09Los wireframes son diseños de bocetos aproximados de una página web o móvil. Permiten a los diseñadores estructurar el contenido de una página web y trazar exactamente cómo funcionará esta estructura. Cada diseñador sigue un conjunto de pautas y sistemas para crear una estructura alámbrica. Algunos prefieren esbozar sus ideas en una hoja de papel, mientras que otros suelen encontrar más útiles las herramientas digitales. De cualquier manera, se consideran efectivos cuando son intuitivos y fáciles de usar. Echemos un vistazo a algunos wireframes bien diseñados por diferentes diseñadores de la industria.
1. Fuentes globales
Este es un ejemplo típico de una estructura alámbrica. Contiene varias páginas. Los productos se pueden mostrar en un orden claro y están rodeados de contenedores de texto que pueden mostrar los detalles del producto. Puedes descargar el archivo aquí.
2. EDX
Este wireframe fue diseñado para empresas orientadas a la educación. Incluye páginas para cursos, programas, socios, acerca de, inicio y cursos y tutoriales en línea. Puedes descargar el archivo aquí.
3. EstiloXEstilo
Esta es una estructura alámbrica orientada a la moda/estilo. Incluye páginas básicas como inicio de sesión, perfil, organización benéfica, hogar, etc. Las páginas están bien diseñadas y los elementos se colocan de manera ordenada. Puedes descargar el archivo aquí.
4. Servicio de valet
Esta estructura alámbrica se diseñó para incluir interacciones de desplazamiento. Puedes descargar el archivo aquí.
5. Fadena
Este es un esquema de gestión escolar. Viene con funciones como horario, asistencia, PTS, comunicaciones y más. También está diseñado para incluir páginas de inicio de sesión, formularios de registro, contacto, etc. Puede descargar el archivo aquí.
6. Los ingenieros de valor
Esta estructura metálica es ideal para empresas que prestan mucha atención a la marca. Las páginas principales del wireframe incluyen inicio, sobre nosotros, detalles de contacto, etc. Puede descargar el archivo aquí.
7. Estructuras alámbricas de Brandon Wimberly
Brandon Wimberly usa una plantilla en papel punteado para construir estructuras alámbricas y las alinea para construir una estructura alámbrica muy uniforme y precisa para probar sus ideas.
8. Codificar
La estructura alámbrica se creó para una aplicación educativa llamada Encode. El diseño es simple y claro. Tiene una página principal larga para que el usuario pueda ver la información simplemente deslizando la pantalla.
9. Concepto de perfil de usuario
La estructura metálica fue diseñada por Tomasz Sochacki. Puedes descargar el archivo aquí.
10. tictac
Esta es una estructura alámbrica para una poderosa aplicación de administración de tareas. Esto viene con un gran tutorial animado. Esto está diseñado para adoptar una forma de interactuar con los usuarios y agregar una interfaz de teléfono móvil real para guiarlos.
11. Contabilidad del sur de Devon
Esta estructura alámbrica se adapta mejor a los servicios de contabilidad y negocios. El diseño es simple y claro. Se puede combinar con mock plus directamente para construir el menú. Puedes descargar el archivo aquí.
12. Aplicación del tiempo
Esta estructura alámbrica fue diseñada en Illustrator y Photoshop fue diseñado por Matt Sclarandis. Ha diseñado una colección de wireframes para computadoras de escritorio y iPhones.
13. Estructuras alámbricas de Andre Picard
Andre Picard crea estructuras alámbricas en una pizarra. Esto le permite hacer ediciones y revisiones rápidas. Esto también permite una fácil retroalimentación y colaboración en la oficina.
14. Estructura alámbrica de Melody Rose
Melody crea formas, tamaños y contenedores cohesivos que parecen coherentes en toda la estructura alámbrica. La paleta de estructura alámbrica cae dentro del esquema de color gris.
15. Nubes de colores
Esta es una estructura alámbrica para una hermosa aplicación meteorológica que puede predecir con precisión las condiciones climáticas futuras. Está diseñado para tener una ilustración en la página de inicio e incluye páginas para inicio de sesión, clima local, ciudad, centro de ayuda, configuración, etc.
16. WeUI
Este es un ejemplo de una estructura alámbrica comunitaria. Las características clave incluyen error de formulario, notificación, carga, la operación se realiza correctamente. El archivo se puede descargar aquí
17. Modo de vida
Esta aplicación está diseñada para registrar y administrar tu vida. Esta estructura alámbrica viene con una increíble variedad de características.
18. Kit de marco de alambre móvil
El kit te permite crear maquetas y viene con más de 90 pantallas móviles y cientos de otros elementos. Tiene diagramas de flujo, plantillas, flujos de UX y presentaciones. Cada capa individual es nombrada y ordenada. El archivo se puede descargar aquí.
19. Golpes
Esta estructura alámbrica preconstruida lo ayuda a registrar cosas para mejorar la eficiencia. Consiste en una página de inicio de sesión/registro junto con otras páginas.
20. Sosterio
Esta es una estructura simple que se construye alrededor de una agradable experiencia web de música. Contiene páginas de inicio, búsqueda y preguntas frecuentes. También puede enviar música simplemente haciendo clic en el botón de música.
21. Caza
Este esquema está diseñado para sitios web de listados de propiedades. Es limpio, intuitivo y receptivo. Las capas están claramente definidas y el usuario puede entender el flujo fácilmente. Este archivo se puede descargar aquí.
22. Estructura alámbrica de fidelidad media del sitio web de Morphomics
Esta estructura alámbrica está diseñada por Lauren League. Está diseñado para resolver problemas complejos de visualización de datos. Es una plantilla bien estructurada llena de cuadros de contenido, formas y contenedores.
23. Estructura alámbrica exploratoria de Shopify
Estos wireframes de alta fidelidad fueron creados por Janna Hagan. Como puede ver, ella ha introducido imágenes en esta etapa y el diseño está bellamente diseñado.
24. Esbozando un nuevo proyecto por Tim Knight
El diseñador encuentra útil crear wireframes simples y de alta velocidad. Esto es útil cuando se trazan ideas para un cliente y en las primeras etapas del diseño.
- Esta estructura alámbrica de Bitesize Chef diseñada por James Baross. Al hacer clic en diferentes botones, el usuario puede ver el flujo general de usuarios.
- Grant Helton diseñó esta aplicación. Esta estructura alámbrica muestra al usuario cómo pasa de una pantalla a otra. Con la ayuda de un pie de página flotante, puede guiar al usuario y hacerle ver dónde se encuentra en su flujo. Usó la aplicación Invision para construir este prototipo.
- Esta estructura alámbrica fue diseñada por Julio Castellano: muestra el flujo de usuario para una identificación de peligro de realidad virtual. Esto se utiliza para educar a los nuevos empleados sobre su necesidad de trabajar en lugares con peligros.
