Beneficio del marco de alambre en el diseño
Malos hábitos en el pasado, cuando adquiríamos nuevas ideas de proyectos y documentos de requisitos de usuario de nuestros clientes, tal vez esbozar algunas ideas y saltar al intrigante diseño de Photoshop.
Nuestro razonamiento para esa metodología fue golpear la puerta de diseño y ejecutarla de inmediato para dar tiempo a la revisión.
Después de un tiempo, nos dimos cuenta de que pasábamos mucho tiempo diseñando, ¿por qué? Las revisiones tomaron todo el tiempo. Las revisiones fueron complicadas; tuvimos que ajustar los diseños, los gráficos y la tipografía. Todo era frustrante, desastroso para los plazos de los proyectos, preocupante para los clientes y agotador para nosotros. Tomó un tiempo antes de darnos cuenta de que necesitamos un enfoque diferente. Decidimos volver al proceso inicial "Square One" que ignoramos anteriormente "Wire-framing". Comenzamos con las estructuras alámbricas de Gray-boxes, las incluimos en nuestro proceso de diseño, luego pasamos a otro proceso y las añadimos al proceso de diseño. nos ayudó a abordar los problemas antes. Por esa razón, voto por el cableado como la "primera puerta" en el proceso de diseño.
Diseños de experiencia de usuario de estructura de alambre
Quién sabe, en la etapa más temprana puede reconocer el desafío potencial de usabilidad en sus diseños. A veces, un gran concepto de proyecto con estrictos requisitos de usuario (URS) parece encajar durante el proceso inicial. De nuevo sucede algo peor cuando comenzamos a hacer planes para los papeles, "¿Qué pasó?" ignoramos el marco de alambre, que toma solo unos minutos para dibujar un plan que el colorido Photoshop. Mejor empezar a ajustar antes que tarde.
Wire-framing como herramienta de gestión del tiempo
La gestión del tiempo es una técnica importante para cada proyecto exitoso si un proyecto tiene un cronograma ajustado; podrías pensar "¿por qué perder mi tiempo enmarcando alambres, así que mejor paso a Photoshop colorido?". Inicialmente cometimos ese error, pero en su lugar terminamos revisando todo el concepto, lo cual requería mucho tiempo y una pérdida de recursos. Revisar Gray Boxes y bocetos es mucho más fácil que revisar diseños a todo color incorporados con varios elementos complejos.
La estructura alámbrica se utiliza para crear una dimensión real y correcta de una página. Una vez aprobado por el cliente, solo nos falta un remedio gráfico para potenciar su apariencia. El truco es que si los esquemas, los bocetos y las cajas grises están en orden, no tendremos tiempo para revisar. En su lugar, pasaremos a la siguiente parte "visual" del proceso.
Wire-framing para vinculación de clientes
El diseño de página con colores a veces resulta ser una distracción para nuestros clientes; tal vez un cliente detesta el color “púrpura" las emociones del cliente encuentran difícil concentrarse en el plan. Sus comentarios pueden ser negativos debido a sus sentimientos. Es posible que terminen pidiendo "Empezar de nuevo", los diseños pueden estar bien, pero lo único que irrita al cliente es el color "púrpura". Por lo tanto, usar cajas grises y bocetos es una forma efectiva, ya que eliminará las distracciones de los elementos.
Una estructura alámbrica ayudará a obtener comentarios sobre el tamaño y el diseño sin que el cliente se centre solo en la apariencia. El uso del enfoque de estructura alámbrica también nos ayuda a saber más sobre un cliente, ¿qué les gusta? Los estilos, la tipografía, etc., la presentación de estructura metálica, es como un momento de unión, su retroalimentación e interacción te hace saber sobre ellos y sus diseños y qué esperar en las fases futuras del proyecto. Cuando está esbozando un borrador en papel, el cliente seguirá comentando sobre íconos, botones, fuentes, etc. Terminará diciendo que prefiere botones más grandes que pequeños, etc. Eventualmente, un diseñador aprende de los clientes y comienza a observar retroalimente patrones y aprenda, tener conocimiento podría ahorrarle tiempo, energía y recursos.
7 cosas fascinantes sobre los wireframes
1 Impulsa la experiencia de trabajo en equipo
El proceso de enmarcado reúne a diferentes grupos de personas con diversas habilidades; todos son parte del proceso del proyecto. Los gerentes de proyecto, los diseñadores y los desarrolladores se unen para lograr un objetivo. Esto es valioso porque mejora el trabajo en equipo y hace que los compañeros se entiendan más. Con el modelo de "cascada", los proyectos se pueden dividir en realidad.
2 Comunicación transparente
Flujo de comunicación fluido, solíamos sufrir cuando algunos miembros del equipo, como los desarrolladores, no se incluían en la discusión del proyecto. Al incluir a cada persona en el proceso de estructuración de cables, el problema se soluciona. Un desarrollador puede detectar antes un problema que puede pasar desapercibido en correos electrónicos y chats. Por otro lado, las especificaciones son elegantes y hermosas pero más difíciles de visualizar.
3 Involucrar a los clientes
El diseño de página con colores a veces resulta ser una distracción para nuestros clientes; tal vez un cliente detesta el color “púrpura” las emociones del cliente encuentran difícil concentrarse en el plan. Sus comentarios pueden ser negativos debido a sus sentimientos. Es posible que terminen pidiendo "Empezar de nuevo", los diseños pueden estar bien, pero lo único que irrita al cliente es el color "púrpura". Por lo tanto, usar cajas grises y bocetos es una forma efectiva, ya que eliminará las distracciones de los elementos.
Una estructura alámbrica ayudará a obtener comentarios sobre el tamaño y el diseño sin que el cliente se centre solo en la apariencia. El uso del enfoque de estructura alámbrica también nos ayuda a saber más sobre un cliente, ¿qué les gusta? Los estilos, la tipografía, etc., la presentación de estructura metálica, es como un momento de unión, su retroalimentación e interacción te hace saber sobre ellos y sus diseños y qué esperar en las fases futuras del proyecto. Cuando está esbozando un borrador en papel, el cliente seguirá comentando sobre íconos, botones, fuentes, etc. Terminará diciendo que prefiere los botones más grandes que los más pequeños, etc. Eventualmente, un diseñador aprende de los clientes y comienza a observar. para patrones de retroalimentación y aprender, tener conocimiento podría ahorrarle tiempo, energía y recursos.
4 enfoques diferentes
La lluvia de ideas permite a las personas idear las diversas formas de abordar los proyectos. Son fáciles de producir y dibujar, especialmente en papel, todo lo que necesita es un lápiz y una hoja de papel, y abordamos los problemas desde diferentes ángulos y los dibujamos en una hoja de papel. Puede combinar y eliminar asignaciones hasta que tenga dos o cuatro que tengan sentido.
Varios enfoques incluyen Enfoque técnico: características tecnológicas nuevas y de tendencia, experiencia de los usuarios y prueba de usabilidad de cómo los usuarios lograrán un objetivo y una tarea rápidamente antes de aburrirse, lo que lleva al aborto de la tarea, nuevamente Enfoque ambiental: ¿quiénes son las partes interesadas? ¿A qué campos nos dirigimos? ¿Qué tipos de características son importantes que pueden encajar fácilmente con una parte interesada en particular y un campo específico?
5 Una base para la prueba
Con 3 o 5 prototipos, puede probar un boceto de proyecto con usuarios reales. Existe la percepción de que solo podemos probar usando un prototipo HTML completo, pero esto no es cierto. Además, los wireframes dibujados a mano se pueden utilizar para realizar pruebas. Puede solicitar la sugerencia del usuario sobre los botones en los que le gustaría hacer clic; también pueden obtener comentarios sobre las etiquetas de nombres y, finalmente, pueden ayudar a verificar si tienen la jerarquía visual correcta. Las pruebas a través de una estructura alámbrica ayudan a identificar los problemas antes.
6 Proyecto más rápido producido
Se necesita poco tiempo y dinero para hacer un prototipo de un proyecto basado en estructura metálica, esto se debe a que diferentes grupos de personas participaron en el proceso de estructura metálica. Por lo tanto, los errores imprevistos que pueden causar revisiones se tratan antes que el proyecto real. Una vez más, los clientes han visto el diseño del proyecto y, por lo tanto, se realiza la firma del diseño final. Esto reduce el tiempo para múltiples conceptos.
Wire-framing con Photoshop
Cuadros grises y bocetos con photoshop.
Paso 1: Reúna los requisitos adicionales de los clientes, luego "encienda" para colorear Photoshop completo y comience a enmarcar.
Paso 2: cree el documento basado en el sistema de cuadrículas 960 (1100 píxeles de ancho y 760 de alto). Puede aprender esto en "configuración de cuadrícula en Photoshop".
Paso 3: La herramienta Cubo de pintura (G) se utiliza para rellenar el fondo con un color gris claro para explicar que habrá un color o una imagen de fondo.
Paso 4: elija la herramienta Rectángulo de la barra de herramientas y dibuje un cuadro para simbolizar el área de contenido. Estamos utilizando el sistema de cuadrícula 960; mi cuadro dibujado tendrá 940 píxeles de ancho. Haga que el color de primer plano sea blanco con la "Herramienta Cubo de pintura" para que se vea contra nuestro fondo gris.
Paso 5: Para que el proceso sea mucho más rápido, simplemente (escriba la letra D) para configurar el primer plano en negro o cualquier color que le convenga y el fondo en blanco o cualquier color. Luego dibuje cuadros negros para representar las áreas de contenido. De nuevo, puede optar por cambiar la opacidad de los fondos para que aparezcan grises o de cualquier color.
Paso 6: dentro de la cuadrícula, agregue un rectángulo para representar cualquier cosa. En este caso, "botón de inicio de sesión", escriba el valor de opacidad ("30") para reducir la opacidad del rectángulo ("30") después de dibujar el rectángulo. Puede agregar texto usando la herramienta Tipo (T) en la barra de herramientas de tipo para agregar el texto "INICIAR SESIÓN" sobre el cuadro. Agregue otro rectángulo para crear el área de navegación, nuevamente, baje el valor de opacidad para que sea gris.
Paso 7: agregue rectángulos para crear las áreas de la columna de contenido. Use un diseño de dos columnas con una columna de contenido principal un poco más grande y una columna más pequeña para la imagen de la página de inicio. Establezca la opacidad al 10% para las columnas y también agregue otro rectángulo para representar el pie de página en la parte inferior de la página.
Página 8: En el área de contenido, agregue textos ficticios usando el comando Tipo > Pegar Lorem Ipsum de Photoshop.
Otras aplicaciones
Otra aplicación para wireframes que pueden usar los diseñadores no gráficos para construir wireframes interactivos y hermosos.
OmniGraffle
Es como Micro-Visio, tiene muy buenas plantillas que se pueden usar para el diseño de alta tecnología y las características son asombrosas. Esto es lo mejor.
simulacro de ninja
Mi favorito, de uso GRATUITO, tiene muy buenas características y plantillas que se pueden usar para construir un concepto de proyecto interactivo. Permite a los usuarios trabajar sin conexión y en línea.
Gráficos encantadores
Esto es bueno para principiantes, es GRATIS y las interfaces son fáciles de entender.
Balsamiq
Una forma rápida de transmitir conceptos de diseños a un cliente, tiene una demostración gratuita que permite a los usuarios guardar el producto final. Tiene todos los elementos necesarios para dibujar, así como un aspecto de dibujo a mano que es único.
Dibujo de la unidad de Google
Se puede usar para maquetas de pantalla, no es completamente de tipo estructura de alambre, pero tiene características como una buena herramienta de colaboración, rápida, gratuita y fácil de usar.
Gliffy
Gliffy es más fácil de usar, es más elegante y ofrece funciones de diagramas como diagramas de flujo y planos, tiene diagramas de Venn con procesos de red y UML que tiene exportaciones a SVG, PNG y JPEG.
Lumzy
Es una aplicación flash, proporciona una plataforma de colaboración, es gratuita, rápida y, por último, tiene diferentes tipos de controles que son fáciles de usar.
moqups
Gratis, rápido y fácil de usar, no necesito un complemento de navegador, la vinculación de la pantalla y el botón se realiza sin problemas para que una persona pueda publicar una demostración para que los clientes la vean y la usen. Se permite la exportación de imágenes de acuerdo con las especificaciones. Aparte de esto, se han integrado HTML5 y JavaScript estándar en Moqups.