Los mejores recursos para dibujar wireframes basados en cuadrícula
El proceso de diseñando una interfaz siempre comienza con Generación de ideas. Esto incluye la visualización, la investigación de otros sitios y la creación rápida de prototipos. Esta primera fase de la idea es crucial para entender el diseño y la experiencia del usuario tienes la intención de construir. Entonces, ¿cómo se debe realizar realmente el trabajo de cableado en un nuevo proyecto??
Soy fanático del papel y el lápiz tradicionales con herramientas adicionales, según sea necesario. Pero wireframes digitales También es grande, y es una opción viable para los diseñadores modernos. En este artículo, me gustaría compartir los mejores recursos para ambas técnicas para ayudarlo a crear su propio estructuras de interfaz de usuario basadas en la red.
Conceptualización temprana de UI / UX
Empecemos por aclarar las diferencias entre un estructura metálica y un prototipo. Estas dos palabras a menudo se usan indistintamente porque se relacionan con el mismo proceso.
UNA estructura metálica es un solo bosquejo estático de la interfaz de usuario de una página web o una aplicación. Puede tener llamadas para explicar el texto de los botones, los márgenes, los tamaños de los elementos o incluso las animaciones. Pero los wireframes son solo borradores de páginas individuales.
Del mismo modo, un prototipo es como un Diagrama de flujo que muestra cómo se enlazan las diferentes páginas. Por lo tanto, un prototipo conecta los esquemas para mostrar cómo los diferentes botones o enlaces deberían llevar a otras páginas..
Estas definiciones no están grabadas en piedra, algunos diseñadores pueden tener su propia terminología y pueden estar en desacuerdo con mi redacción exacta. Pero así es como comúnmente los he descrito y cómo muchos diseñadores entienden mejor estos términos..
Entonces, ¿qué se supone que debes hacer exactamente con estas piezas conceptuales tempranas? ¿Son realmente necesarios? Yo diría que la creación de prototipos no siempre es necesaria, pero es una muy buena idea, especialmente para diseñar aplicaciones con interacciones complejas.
Pero wireframing siempre es una buena idea para cada nuevo proyecto. Esto te ayuda centrarse en el panorama general Sin preocuparse por los detalles. Usted tiene una idea de cómo se presenta la página general, y esto es invaluable cuando está diseñando un diseño concreto.
Objetivos Para Wireframing
Cada vez que comiences un nuevo proyecto deberías contemplar lo que estas tratando de resolver. Cada sitio está construido con un objetivo específico en mente. Muchos sitios incluso tienen múltiples objetivos donde algunos objetivos son más importantes que otros.
Use wireframing como una guía para ayudarlo a encontrar la mejor estrategia para capturar la (s) meta (s) de un sitio web. Esto probablemente no sucederá en la primera estructura alámbrica, así que prepárate para dibuja muchas ideas diferentes.
Busque otros sitios web similares y anote sus mejores características. Analiza cómo se organiza el contenido y cómo te mueves a través de cada página..
Piense en los esquemas de una punto de vista interactivo. Estas no son solo imágenes bonitas. Son representaciones de interfaces digitales, y usted desea esbozar sus ideas con eso en mente..
Tener recursos basados en la red a mano, ya sean de papel o digitales, puede ayudar mucho en el boceto rápido. Ahora vamos a ver los mejores recursos para crear wireframes.
Cuadros cuadriculados
Siempre puede comenzar con bocetos básicos en miniatura en papel de impresora solo para trazar ideas en bruto. Personalmente, generalmente comienzo a trabajar en papel de impresora, porque de esta manera me preocupan menos las cuadrículas y más sobre generando ideas.
Cuadros de puntos de cuadrícula son la mejor manera de ir si quieres limpiar una idea, Y dale mas estructura. La rejilla te ayuda estimar distancias entre elementos en la página, y crea una especie de simetria en la estructura metálica.
Hay muchos productos geniales por ahí si quieres iniciar wireframing en papel, Por ejemplo, el Rhodia Dot Pad viene en varios tamaños para uso diario. Solo viene con 80 páginas, pero esto es bastante típico de la mayoría de los cuadernos de bocetos de cuadrícula.
Otro producto muy bueno y personalizable es Dotgrid. Todos los artículos de Dotgrid son más caros que los libros de Rhodia, pero vienen con más materiales y diseños de portadas personalizados..
Dotgrid incluso acepta pedidos personalizados que le permiten diseña tu propio bloc de dibujo personalizado. Cada libro contiene poco menos de 100 hojas, por lo que al incluir la parte delantera y trasera, obtiene aproximadamente 200 páginas para dibujar cuadrículas.
Un par de otros cuadernos de dibujo de cuadrícula de puntos que quiero mencionar incluyen la cuadrícula de puntos de Behance, que es de tapa dura y encuadernación en espiral, aunque solo contiene 50 hojas de papel.
El Cuaderno de Dibujo de Diseño Responsivo es uno de los mejores recursos para los diseñadores web. Ningún otro diseñador de productos necesitaría un cuaderno de bocetos de diseño responsivo, pero los diseñadores web se benefician enormemente de la libertad de generar ideas en diferentes anchos de dispositivo en la parte superior de un diseño de cuadrícula.
Estas almohadillas de diseño receptivo también tienen 50 hojas con un total de 100 páginas, pero cada página tiene cuatro diferentes rejillas de respuesta Representando diferentes puntos de ruptura en el diseño responsivo: computadora de escritorio, computadora portátil, tableta y teléfono inteligente.
Aunque el diseño es insípido en comparación con los libros de Dotgrid, nadie más ha considerado los cuadernos de bocetos de respuesta para los diseñadores web. Si te gusta ese tipo de cosas, entonces vale la pena pedir una para una prueba de manejo..
Si realmente te gustan las cosas hechas a mano y no quieres gastar dinero, también puedes imprime tus propias páginas de cuadrícula con el bosquejo de la interfaz. Este sitio gratuito ofrece diferentes plantillas de cuadrícula que puede imprimir, y utilizar para wireframes dibujados a mano.
Las cuadrículas vienen en tamaños de carta A4 y US para diferentes estilos de papel de impresora. Puede elegir entre muchas opciones, como plantillas para un navegador web completo o diferentes pantallas de iPhone.
Todas estas opciones son excelentes, y vale la pena explorarlas si te gusta dibujo a lápiz. El papel es uno de los medios más fáciles para desechar nuevas ideas rápidamente, por lo que a menudo es la opción preferida incluso por los diseñadores de IU..
Herramientas digitales y aplicaciones web
Existen tantos programas geniales de cableado que casi no se pueden cubrir sin correr el riesgo de análisis de parálisis, así que por ahora concentrémonos en algunas de las mejores opciones para estructura de alambre basada en rejilla.
Primero, me gustaría mencionar que puede usar herramientas de Adobe como Illustrator para crea tus propios wireframes. Esto no es parte del flujo de trabajo de todos e Illustrator ciertamente no es gratis. Pero si ya trabaja con Adobe Creative Cloud, puede ser un buen lugar para comenzar..
1. Moqups
Moqups es una de las mejores herramientas en línea para alambrado. Trabaja con un editor visual y una biblioteca de recursos para arrastrar y soltar en toda la página..
Cada nuevo proyecto de Moqups tiene un cuadrícula predefinida, y usa líneas púrpuras brillantes para ayudarte a ajustar los elementos en alineación. Es una gran herramienta web que facilita mucho el diseño con una cuadrícula.
El sitio opera de forma predeterminada en un plan gratuito que limita al usuario a objetos de 300 páginas. El sitio tiene opciones premium, pero pagar una tarifa mensual puede ser más molesto que simplemente ir con las herramientas de Adobe, o comprar Sketch una sola vez..
2. Grid Papr
La aplicación web Grid Papr es completamente gratuita y ofrece cuentas públicas y privadas para sus wireframes. Crea un nombre para su proyecto y obtiene su propia URL única para el alámbrico que puede editar desde cualquier computadora.
Cada nueva estructura de alambre viene con una rejilla que le permite realizar snap-to-grid en todos los elementos. Las características son simples, pero son suficientes para crear un wireframe lo-fi en minutos. Simplemente arrastre lo que desee a la página y siga la cuadrícula para crear una estructura alámbrica estelar.
3. Wireframe.cc
Wireframe.cc es una de las herramientas más simples y mínimas que puede usar para armar con alambre. Cuenta con un interfaz libre de desorden con un cuadrícula pre-construida y barras de herramientas organizadas. Simplemente haga clic y arrastre para crear nuevos elementos en el lienzo. También puedes guardar y compartir tu trabajo..
Esta es otra herramienta que se ofrece de forma gratuita con planes premium opcionales. Cada plan se factura mensualmente, por lo que es muy similar a Moqups en la estructura de precios. La herramienta gratuita se puede utilizar desde cualquier computadora sin cuenta.
4. Mockingbird
Mockingbird es otra gran opción, que ofrece muchas más funciones que la mayoría de las herramientas de cableado. Puede comenzar de forma gratuita, pero la versión de prueba está limitada a 7 días. Esto puede ser una molestia para algunos usuarios, pero la herramienta es realmente increíble y se ejecuta en todos los navegadores.
Mockingbird tiene una biblioteca interminable de elementos de la interfaz de usuario como pestañas, acordeones, menús desplegables, reproductores de video y enlaces de texto simples. La cuadrícula predeterminada utiliza el sistema de cuadrícula de 960gs, pero puede elegir 12, 16 y 24 columnas.
Ultimas palabras
No importa si usted elige wireframing tradicional o digital, siempre se trata de la calidad de salida. Hay mucho que aprender al hacer este tipo de trabajo, así que encuentre la herramienta que le resulte más cómoda..
Avanzar lo mejor que se puede hacer es acaba de comenzar wireframing. Sienta lo que más le guste (en papel o digital) y hágalo suyo. Los recursos en este artículo deberían darle más que suficiente para comenzar a armar con alambre sus propias interfaces digitales.
(Foto de portada por Oykun Yilmaz)
