Tutoriales de croquis

"Blockframing" y 31 diseños gratuitos listos para bocetos usando Auto Layout by Anima App

Sí, puedes descargarlos. Si, gratis.

Nota de Jon: hay un archivo gratuito que puedes descargar cerca del final de esta publicación, pero si puedes dedicar 7 minutos (según Medium), ¡creo que aprenderás una o dos cosas! ¡Disfrutar!

Charla honesta

La única vez que creo tramas de alambre "reales" es cuando intento mostrar un buen proceso en Dribbble ...

... y nunca muestro buenas tomas de proceso en Dribbble.

¡Chicos, no soy bueno con los wireframes!

Siempre me emociono y termino agregando demasiados detalles, y lo que se suponía que era un alambre rápido termina siendo seis horas de nitpixeling ™ para un relleno perfecto, márgenes magníficos y tipografía de libros de texto.

Así que no ... en realidad no soy tan bueno con los wireframes.

Pero en lo que soy bueno es enmarcar en bloque.

Honestamente, sin embargo, esto mejora cada vuelta.

Bloque ... ¿enmarcado?

Mi mentor de diseño me contó una historia sobre un profesor que tenía en la escuela que solía quitarse las gafas cuando evaluaba sus diseños. Dijo que le ayudó a tener una mejor idea del diseño y la armonía visual de sus diseños.

Adivina esa aplicación!

La verdad es que puedes contar una historia bastante convincente con esta maqueta borrosa. Es una forma rápida de examinar un diseño sin necesidad de diseñarlo todo.

Al identificar las regiones de color más grandes arriba, aquí se representa Facebook como un marco de bloques:

Te garantizo que el 99% de ustedes podrían haberme dicho qué aplicación era sin ninguna pista. El otro 1% de ustedes tiene 87 años.

Con el increíble complemento de diseño automático de Anima App, incluso puedo mostrarle cómo debe comportarse el contenido de la página cuando se cambia el tamaño del navegador ... lo que se soluciona ... lo que es fluido ... y lo que está flotando:

El contenedor central de Facebook permanece en un ancho fijo y flota en el centro, mientras que la secuencia de chat se mantiene a la derecha.

Cuándo usar Blockframing

La ventaja del blockframing es que puede hacerlo durante cada fase del proceso de diseño del producto:

  1. Antes (diseño inicial)
  2. Durante (Nuevas características)
  3. Después (Revelación del concepto)

Antes del diseño (diseño inicial)

La estructura en bloque no reemplaza la estructura metálica convencional. Wireframing simplemente no encaja en mi flujo de trabajo. Mi equipo de diseño colabora tanto en la pizarra con el cliente que cualquier cosa más que eso es, para mí, una pérdida de tiempo.

La estructura en bloque no reemplaza la estructura metálica convencional.

Personalmente, creo que las estructuras de alambre detalladas con texto ficticio, bordes de un píxel e imágenes de marcador de posición "X" me distraen. Y si los encuentro distrayendo (como alguien que sabe leerlos), entonces el cliente también podría hacerlo.

Usando un marco de bloques, describo áreas enteras de contenido en lugar de quedar atrapado en los detalles. Esto me proporciona información más que suficiente para transmitir una idea o comenzar a contar una historia.

Por lo general, enviaré algo como esto al cliente a través de Slack o por correo electrónico para examinar rápidamente una idea para una nueva pantalla. Hablamos de las diferentes áreas, movemos las cosas y comenzamos a jugar con el color y el contraste. Es una excelente manera de ser ágil y flexible con el diseño antes de sumergirse en la alta fidelidad, y los clientes siempre están encantados de ser parte del proceso.

Esto también ahorra tiempo porque el cliente no dividirá los pelos sobre cada pequeño detalle en la página. En mi experiencia, el encuadre en bloque con el cliente o la parte interesada aumenta drásticamente su tasa de éxito al mostrar los diseños finales porque el cliente ya sabe lo que vendrá.

Durante el diseño (nuevas características)

Supongamos que ya ha enviado el producto y que está diseñando nuevas funciones. En este punto, hay docenas de patrones bien establecidos, y el estilo visual está muy bien definido. ¡Incluso podría tener un marco de diseño completo como UX Power Tools en su lugar!

Encuentro el blockframing particularmente útil durante esta fase porque puedo crear algo que se verá mucho más cerca del diseño real. Los colores que uso terminan siendo bastante cercanos (si no idénticos) a los del diseño final.

Aquí hay un par de aplicaciones familiares que solo tardaron unos minutos en bloquear el marco:

Esto puede haber tomado solo 10 minutos, pero aún podría encontrar una manera de perder 7 horas viendo videos de gatos.Sin relación: siempre pienso en Cinnabon ™ cuando escucho la palabra kanban. Ugh, que delicioso.¿Quién está abajo por 19 episodios consecutivos de Parques y Recreación?

Es posible que haga un marco de alambre ligero además de los fotogramas de bloque que se muestran arriba, pero de lo contrario estoy listo para comenzar a diseñar en alta fidelidad.

Nuevamente, en este punto del proceso (diseño medio), ya he diseñado un montón de pantallas y tengo muchos patrones de diseño en su lugar, por lo que esta es una gran preparación para comenzar. Y lo más probable es que termine usando estos contenedores en el diseño real en lugar de tirar las cosas como [a menudo] hago cuando trazo un alambre.

Después del diseño (Concept Reveal)

En mi agencia, siempre estábamos ajustando las técnicas de presentación de nuestros clientes para mostrar nuestro trabajo de la mejor manera posible. Después de miles de presentaciones, revisiones de diseño y revelaciones de conceptos con CEOs, inversores y jefes de producto, nos hemos vuelto bastante buenos al contar la historia correcta de la manera correcta, en el momento correcto.

Una vez que terminamos un diseño, creamos un marco de bloques directamente encima de él para que podamos revelar lentamente diferentes secciones del diseño. En nuestra experiencia, mostrar todo el diseño de una sola vez es SÚPER ABRIGO para el cliente, y comenzarán a hacerle todo tipo de preguntas para las que no está preparado.

Al enmarcar en bloque la interfaz de usuario, esencialmente estamos descubriendo un plato a la vez, como si estuviéramos organizando una cena de la época victoriana para nuestros amigos burgueses:

En mi casa, habría Twinkies y Hot Dogs debajo de esas cúpulas plateadas. Con clase, ¿verdad?

Así es como presentaríamos YouTube:

¡Blockframe completo! Todavía no mostramos ninguna alta fidelidad. Recién estamos comenzando nuestra historia.

Después de hacer un resumen rápido de las regiones de la página, comenzaremos a revelar la IU, sección por sección:

Lentamente, comenzamos a revelar secciones. Aquí haríamos una pausa y explicaremos la navegación global.

Solo mostramos una sección a la vez. Esto nos ayuda a dirigir la atención del cliente al único lugar en el que queremos que se concentre:

Aquí hacemos una pausa para abordar el área de video y los controles de reproducción. Podríamos quedarnos aquí por 15 minutos hablando de cómo funciona todo ... ¡y eso está bien! Un agradecimiento a Pablo Stanley y su increíble serie

Sigamos moviéndonos. Ahora estamos en los detalles del video. En este ejemplo particular, la página es bastante corta. En un escenario real, probablemente tendríamos una página más larga para mostrar la sección de comentarios.

¡Tus videos están muy bien, Pablo! Felicidades! Mira a todos esos suscriptores

Finalmente, llegamos a la sección y "Videos relacionados". En una conversación con un cliente, probablemente hablaríamos sobre cómo se completa esta lista, y cómo los videos sugeridos como estos ayudarán a llevar a los usuarios a BLACKHOLE OF YOUTUBE VIDEOS POR LAS PRÓXIMAS CINCO HORAS.

No es que eso me haya pasado ...

Miro muchos videos de comida de BuzzFeed, y ese chico Tiny Tim Bradbury hace algunos videos divertidos.

Solo después de que hayamos terminado de revelar cada sección, mostraremos toda la interfaz:

Tada! Apoyos para el equipo de diseño en YouTube. ¡Luciendo bien!

El cliente ha sido preparado y sus ojos compartimentarán instintivamente cada región de la página. Ahora tienen una comprensión perfecta de para qué sirve cada área de la página, y las conversaciones a partir de ahora serán mucho más productivas. Los clientes harán mejores preguntas, proporcionarán mejores comentarios y presentarán el diseño (por sí mismos) a las partes interesadas externas de manera mucho más inteligente que antes.

Uf, entonces, ¿dónde están las cosas gratis?

Bien bien.

El diseño automático es una herramienta increíble, y su nueva característica de "pilas" emula comportamientos de CSS flexbox dentro de Sketch.

Es droga.*

* Para los no estadounidenses, "droga" significa realmente genial.
La droga también significa heroína ... pero no en este caso. El diseño automático no es heroína.

Creé un montón de diseños de aplicaciones estándar para web y dispositivos móviles, y también bloqueé un montón de aplicaciones populares para que puedas ver cómo recrear su comportamiento de contenido.

Puedes obtener los más de 30 diseños FUH GRATIS hasta abajo. Le costará cero dólares a menos que quiera financiar un burrito de Chipotle ¯ \ _ (ツ) _ / ¯

(Relacionado: ¿Sabías que había un emoji de burrito? Es muy detallado).

Bien, pero de verdad esta vez, aquí está el archivo:

¡Vistazo!

Una última cosa…

Por último, recientemente actualicé UX Power Tools para trabajar con Auto Layout, ¡así que ahora es aún más rápido de usar! Creo que lo cavarás. Si está interesado, puede leer más sobre esto aquí.

Cuando no estoy escribiendo, estoy trabajando en herramientas de diseño de bocetos como UX Power Tools para hacerte un diseñador mejor y más eficiente. Lo están utilizando todos los mejores diseñadores y equipos de Sketch, y creo que también te puede gustar. ¡Míralo en Marvel!

Sigue a UX Power Tools en Twitter
Sigueme en Twitter