Share
Wireframing es un paso importante en cualquier proceso de diseño de pantalla. Principalmente, le permite definir la jerarquía de información de su diseño, facilitándole la planificación del diseño de acuerdo con la forma en que desea que su usuario procese la información. Si aún no has usado wireframing, es hora de que te mojes los pies.
Sin embargo, antes de comenzar, una pregunta rápida: ¿necesita una solución de sitio web profesional? Si es así, tenemos una serie de plantillas de sitios web bellamente diseñadas que pueden ajustarse a sus necesidades. Puede descargar plantillas ilimitadas y otros elementos para una única suscripción mensual baja.
Plantillas de sitios web sobre Envato ElementsDe lo contrario, vamos a entrar en este tutorial!
Es como un plano arquitectónico; necesita verlo en diagramas bidimensionales en blanco y negro antes de entender cómo construir la casa real. De manera similar, para un diseño de pantalla, no puede comenzar a crear capas de píxeles en Photoshop o escribir bloques de código sin saber a dónde irá la información..
A un nivel más profundo, un alámbrico también es muy útil para determinar cómo el usuario interactúa con la interfaz. Por ejemplo, los wireframes pueden contener varios estados de comportamiento de botones o menús.
Wireframing es importante porque le permite al diseñador planear el diseño y la interacción de una interfaz sin distraerse con los colores, las opciones de tipografía o incluso copiar. Me gustaría explicarle a mis clientes que si un usuario no puede averiguar a dónde ir en una estructura metálica en blanco y negro, no importa qué colores utilice finalmente. Un botón tiene que ser obvio, incluso si no es brillante o de colores brillantes.
Al igual que los cimientos de un edificio, tiene que ser fundamentalmente fuerte antes de decidir si le das una capa de pintura costosa..
Antes de entrar en más detalles, ya que una imagen puede pintar miles de palabras, eche un vistazo a I ♥ wirefames. Podrá obtener una descripción general rápida y una comprensión visual de cómo otros diseñadores están manejando su proceso de cableado.
Quizás también tome este ingenioso bookmarklet del navegador, Wirify, que le permite ver una versión "alámbrica" de cualquier sitio en vivo.
Si continuamente observa lo que otros diseñadores o sitios están haciendo por sus wireframes, lentamente obtendrá una imagen en su mente de cómo un wireframe ayuda a organizar la información para la pantalla..
El diseño es un proceso orgánico y, por lo tanto, diferentes diseñadores enfocan el cableado y su traducción a elementos visuales o códigos de diferentes maneras. Tienes que encontrar el proceso que saca tus propias fortalezas y te sientes más cómodo. A continuación se muestra un diagrama que muestra varios procesos típicos:
37signals es bien conocido por abogar por el uso de bocetos e ir directamente al código, aunque parece que algunos de sus diseñadores involucran también maquetas visuales en su proceso..
Para mí, he pasado por suficientes ciclos de diseño a código para tener un proceso un tanto simplificado. Este es un paso que algunas personas pueden no pensar, pero también considero cualquier marco HTML / CSS que usaría en el proyecto..
Por ejemplo, solía construir una tonelada de sitios en Blueprint, por lo tanto, establecería mis wireframes y Blueprint en la misma cuadrícula de 12 columnas. Esto acelera considerablemente el tiempo de desarrollo y creación de prototipos, ya que en lugar de tener que escribir el ancho de cada elemento en mi hoja de estilo css, ahora están predefinidos de una a doce columnas de ancho. Ahora uso cssgrid en lugar de su capacidad de respuesta de diseño, pero todavía está configurado como una cuadrícula de 12 columnas que puede descargar como una plantilla de photoshop.
Como he dicho, depende de usted decidir con qué proceso se siente cómodo, a veces es posible que lo haya intentado varias veces antes de darse cuenta de cuál es el proceso más eficaz. Algunas personas pueden ser muy buenas para hacer bocetos y pueden preferir no usar una herramienta de armado de alambre. Otros diseñadores pueden querer tener tantos pasos como sea posible para minimizar las desviaciones o permitirles pensar en cada iteración a medida que el diseño comienza a tomar forma y forma..
Eventualmente desarrollará su propio proceso preferido, pero por el bien del tutorial usaré mi proceso típico como ejemplo:
La razón por la que utilizo generalmente Illustrator como mi herramienta de wireframing es principalmente por tres razones:
Sin embargo, sí uso otras herramientas y depende del escenario del proyecto. En la próxima sección describiré brevemente algunas herramientas populares, sus fortalezas y sus debilidades..
Aquí hay algunas herramientas populares en ningún orden en particular:
Balsamiq se hizo popular, ya que los wireframes producidos con Balsamiq se asemejan a los bocetos, lo que hace que sea inmediatamente obvio que el wireframe no es un producto terminado sino un trabajo en progreso. Balsamiq también tiene una enorme biblioteca de componentes reutilizables que puede arrastrar y soltar muy fácilmente para diseñar sus estructuras alámbricas..
También puede usarlo en casi cualquier plataforma, con versiones de escritorio disponibles para Mac, Windows y Linux, y además hay una versión web si prefiere trabajar en la nube. Las aplicaciones de terceros como iMockups para iOS también son compatibles con los formatos de exportación de Balsamiq.
Omnigraffle, un viejo favorito de Mac, también cuenta con una biblioteca de componentes reutilizables contribuida ampliamente por el usuario; Graffletopia.
Dado que se desarrolló específicamente como una aplicación de diagramación, Omnigraffle también tiene características complejas como diseño automático, compatibilidad con estilos de objetos personalizados, guías inteligentes y herramientas gráficas. Algunas de estas funciones también están disponibles en la suite Adobe CS, pero si no tiene la suite CS, Omnigraffle tiene un buen valor (~ $ 100) para producir esquemas detallados..
Casi como el abuelo de las herramientas de armado de alambre, Axure fue una de las primeras herramientas de armado / prototipado de clase profesional. Hasta hace poco, solo estaba disponible en Windows. Personalmente, no tengo mucha experiencia con él, pero se sabe que es una herramienta muy utilizada entre los profesionales de la industria..
Un nuevo chico en el bloque, Flairbuilder tiene un apoyo muy fuerte para las interacciones.
También tiene una enorme biblioteca de componentes, admite páginas maestras y puede exportar el prototipo para verlo en línea.
Si el software de escritorio no es su taza de té, hay herramientas como mockflow, hotgloo y mockingbird.
Keynotopia "transforma su aplicación de presentación favorita en la mejor herramienta de creación rápida de prototipos para crear maquetas de aplicaciones móviles, web y de escritorio". Para los usuarios que no son Mac, no se preocupe, Keynotopia también ofrece plantillas de PowerPoint..
Personalmente, lo recomiendo encarecidamente si necesita cablear rápidamente o hacer prototipos de aplicaciones móviles rápidamente. Otra buena alternativa es Keynote Kungfu..
Para aquellos que ya están familiarizados con la suite de Adobe, Fireworks, Illustrator e Indesign son herramientas de cableado muy capaces con sus propias fortalezas y debilidades individuales..
Puede trabajar en todo el proceso de diseño en Fireworks, desde los wireframes básicos hasta la visualización completa. Fireworks admite páginas maestras (piense en ellas como plantillas reutilizables en las que se pueden aplicar todas las ediciones de la plantilla maestra a través de sus páginas secundarias), bibliotecas de elementos y puede crear prototipos interactivos con Fireworks con relativa rapidez..
Esta es una de mis herramientas favoritas porque ya estoy muy familiarizado con Illustrator y estoy seguro de que muchos diseñadores aquí también lo estarán. Utilizo Illustrator cuando estoy tratando de hacer wireframes rápidos pero complejos, sin necesidad de interactividad..
¿Qué lo hace un ganador? La capacidad de exportar como una PSD con capas editables, soporte de copia y pegado fuerte para Photoshop y controles de tipografía sólidos con estilos de tipos que puede guardar, editar y reutilizar, casi como CSS.
Fortalezas similares a Illustrator con controles de estilos tipográficos aún más fuertes, soporte de páginas maestras fuerte y la capacidad reciente para hacer prototipos interactivos.
Elijo Indesign cuando tengo que hacer prototipos interactivos de alta fidelidad de varias páginas. La única advertencia para mí es el débil soporte de exportación a Photoshop para el diseño de imágenes.
"La creación de prototipos de gran alcance hizo fácil". Versión 9 recientemente lanzada con una nueva paleta de wysiwyg. Vale la pena echarle un vistazo.
Hay mucha teoría con respecto a los sistemas de red, pero sin entrar demasiado en ella, la explicaré como "una forma estructurada y simple de diseñar elementos"..
Estoy usando Illustrator para este tutorial pero los pasos se pueden aplicar a cualquiera de sus herramientas.
En primer lugar, establecer un tamaño de documento. Utilicé 1280 x 900 porque utilizaré cssgrid que permitirá que mi sitio web pueda escalar entre resoluciones móviles hasta un máximo de 1140 píxeles fácilmente.
Coloque la plantilla descargada de cssgrid en su documento.
Hay un montón de plantillas de cuadrícula disponibles para descargar, pero si está interesado en personalizar su propia, eche un vistazo a responsify.it.
Comience dibujando cuadros en la cuadrícula. Piense en el orden de la información que le gustaría presentar a sus visitantes, de arriba a abajo es el más fácil, seguido de izquierda a derecha. A continuación se muestra un ejemplo de una estructura alámbrica que tiene un diseño comúnmente utilizado por las compañías de software en estos días:
A veces, dependiendo de su objetivo y la entidad para la que está diseñando, puede ser creativo con el diseño, aunque tenga en mente la jerarquía de la información. Este es un ejemplo real de uno de mis clientes en el que estuve saliendo de los diseños de sitios web de empresas de tecnología convencional:
Aquí hay un diseño para un blog, con contenedores publicitarios cuidadosamente colocados e instrucciones específicas para el cliente:
Una vez que esté satisfecho con la distribución de las cajas, comience a colocar fragmentos de su contenido para ver si la información está bien estructurada. La regla de oro es la misma: la información que desea entregar a su audiencia debe ser clara, incluso en una estructura alámbrica en blanco y negro..
El simple hecho de utilizar diferentes tamaños de fuente es una excelente manera de diferenciar los diferentes niveles de información..
No tengas miedo de experimentar en esta etapa. A veces, a medida que completa más detalles, puede darse cuenta de que el diseño original no funciona bien. Ese es el punto central del proceso de cableado; realizar tantas iteraciones como sea posible para reducir la mejor manera de representar la información que intenta comunicar.
En el siguiente ejemplo, decidí que quería que las capturas de pantalla tuvieran un mayor impacto y también comencé a usar cajas negras para definir cuáles son las áreas que tendrían importancia visual para este sitio web:
El uso de todo el espectro de escala de grises puede ayudarlo a determinar la fuerza visual de sus elementos sin tener que elegir una paleta de colores. De hecho, puede ayudarte durante el proceso de diseño visual más adelante.
Este es un paso opcional, pero si le gusta tomar cosas en incrementos, es posible que desee probarlo. Hacer una alta definición de una estructura alámbrica significa simplemente agregar más detalles, en la medida de lo posible, sin entrar en detalles granulares. Puede significar completar la copia real en la estructura alámbrica e intentar determinar los tamaños de fuente ideales:
También podría implicar colores:
La idea general es que en la etapa visual / de código desea estar en modo pulido y ya no en modo de dibujo o experimentación. Realizar los ciclos de iteración (retroalimentación <-> wireframing) lo más rápido posible en una aplicación de wireframing con la que se sienta cómodo, en lugar de mover capas y píxeles en photoshop.
Dicho esto, en ciertos escenarios puede ser más ideal omitir la definición de los detalles demasiado y pasar directamente a una etapa de creación de prototipos interactiva (ala 37signals). El argumento para esto es que ciertos detalles de interacción no se pueden comunicar completamente en una imagen plana.
Si trabajas con un equipo de desarrolladores, es posible que desees entregar los wireframes aprobados a los desarrolladores para que codifiquen el marco básico mientras trabajas en el campo visual..
Mencionado anteriormente, la razón por la cual tiendo a preferir el uso de Illustrator para wireframing es porque puedo exportarlo a .psd con la mayoría de las capas de tipo editables. Cuando esté en Photoshop no necesitaré editar tanto el tipo (Photoshop tiene herramientas de control de tipo inferior, aunque mucho mejoradas en CS6):
Aquí hay un ejemplo de un wireframe traducido a un visual. La columna vertebral de la estructura alámbrica está bastante intacta, aunque hay ajustes hechos visualmente. También puede ver este sitio web en vivo:
Así que aquí terminamos este tutorial. ¡Espero que te haya inspirado a empezar a experimentar! Al igual que con cualquier proceso de diseño, no tenga miedo de iterar, iterar y iterar.
Además, pase algún tiempo experimentando con diferentes herramientas y procesos. Encontrará que la inversión de tiempo vale la pena una vez que encuentre una aplicación que le resulte intuitiva..
Por favor, siéntase libre de hacer cualquier pregunta en los comentarios, gracias por leer!
Además, si necesita componentes de sitios web listos para usar, tenemos un montón de plantillas de sitios web bellamente diseñadas en Envato Elements. Puede descargar plantillas ilimitadas y otros elementos para una única suscripción mensual baja.
Si desea obtener más información sobre el cableado, puede consultar estos recursos..
Accentsconagua