Maquetas de sitios web: 4 enfoques populares para explorar

Maquetas de sitios web

Las maquetas de sitios web se pueden crear de muchas formas diferentes. Es cierto que no existe el 'mejor' enfoque, pero dependiendo de los estilos y preferencias de ciertos diseñadores de UI y UX (y el proceso de diseño), algunos funcionarán mejor que otros.

En este artículo, veremos los pros y los contras de cuatro de las opciones más populares: herramientas de UX de extremo a extremo, herramientas de maquetas, herramientas de diseño gráfico, así como diseños codificados que comienzan a difuminar las líneas entre las maquetas de sitios web. y prototipos.

Si buscas herramientas de wireframing específicamente, mira esta publicación en el mejores herramientas de estructura metálica , o para una colección más amplia, echa un vistazo a nuestro mega resumen de los mejores herramientas de diseño web .



GenerateJS banner

Haga clic en la imagen para obtener más información y recoger sus boletos(Crédito de la imagen: Future / Toa Heftiba, Unsplash)

No cometa el error de pensar que todas las maquetas de sitios web son iguales. Las decisiones simples sobre plataformas, fidelidad y codificación producirán resultados significativamente diferentes. Sepa lo que quiere y cuáles son sus objetivos incluso antes de comenzar el proceso de diseño; si desea una herramienta que admita las tres fases, es mejor comenzar a usarla que cambiar a la mitad. Del mismo modo, si necesita una maqueta estelar y completamente realista, tenga en cuenta que utilizará un editor de diseño gráfico en algún momento.

01. Herramientas UX de un extremo a otro

En el nivel más alto se encuentran las herramientas de un extremo a otro que tienen como objetivo satisfacer todo el flujo de trabajo: maquetas, prototipos, documentación, transferencias de desarrolladores y sistemas de diseño. UXPin ha estado satisfaciendo esta necesidad desde principios de la década de 2010, pero varias otras marcas, como Adobe e InVision, ahora también están tratando de crear 'una herramienta para gobernarlas a todas'.

UXPin

UXPin cuenta con prototipos robustos, maquetas, documentación y transferencias de desarrolladores

Entonces, ¿cómo se acumulan estas herramientas para la creación de maquetas? Pueden abordarlos sin ningún problema, y ​​más. Con UXPin, por ejemplo, puede crear maquetas con múltiples estados e interacciones. Incluso imita algunas características de Photoshop y Sketch al incluir una herramienta Pluma.

Por otro lado, Estudio de InVision , permite una edición de animación bastante ingeniosa; mientras Adobe XD le permite abrir archivos de Photoshop y Sketch dentro de sus diseños XD y aplicar colores, símbolos, degradados lineales y estilos de caracteres.

Estudio InVision

Studio by InVision tiene como objetivo crear un flujo de trabajo de un extremo a otro

Lo más importante es que las herramientas de un extremo a otro ahora ofrecen sistemas de diseño para garantizar la coherencia de las maquetas en todos los proyectos. Los sistemas de diseño brindan a todos una fuente única de verdad para los activos y principios de diseño en todas las herramientas. Si planea crear muchas maquetas, esta característica se vuelve casi obligatoria.

Al seleccionar una herramienta integral para crear la maqueta de su sitio web, vale la pena considerar los siguientes aspectos:

  • Fidelidad : ¿Qué tan poderosa es la herramienta para el diseño visual y de interacción?
  • Consistencia : ¿Qué características garantizan la coherencia del diseño en su trabajo?
  • Precisión : ¿Los elementos con los que está trabajando reflejan la 'fuente de la verdad' en su organización?
  • Colaboración : ¿Puede colaborar con las partes interesadas u otros diseñadores?
  • Traspaso del desarrollador : ¿Cómo genera la herramienta especificaciones y activos para los desarrolladores?

02. Herramientas de maquetas dedicadas

Soluciones menos robustas como Principio , Framer , Moqups o Balsamiq aún puede proporcionarle todo lo que necesita para construir su maqueta; simplemente perderá el flujo de trabajo adicional y las funciones de coherencia del diseño. Estas herramientas están diseñadas para hacer que el proceso de creación sea lo más fácil posible, para que pueda concentrarse más en decisiones estilísticas y menos en cómo manipular el programa.

Las herramientas de maquetas dedicadas tienen claras ventajas: los principiantes se benefician de su facilidad de uso, mientras que los expertos aprecian los diseños diseñados específicamente para sus necesidades avanzadas. En el extremo más avanzado, herramientas como Framer y Principle se especializan en animaciones e interacciones para maquetas.

Framer

Herramientas como Framer se especializan en interacciones

En el extremo inferior, Moqups y Balsamiq brindan más funcionalidad que las herramientas que no son de diseño que a veces se usan para wireframes y maquetas (como Fundamental ), pero se limitan solo a diseños de baja fidelidad. Sin embargo, pueden ser bastante útiles si el objetivo es crear wireframes de baja fidelidad muy rápidamente.

Cuando se trata de herramientas de maquetas, debe decidir si una solución simple de estructura de alambre es suficiente o si necesita un diseño de pantalla más avanzado. Independientemente de la herramienta de maqueta que elija, solo asegúrese de estar dispuesto a aceptar la pérdida en el flujo de trabajo colaborativo y menos funciones de coherencia de diseño que ofrecen las herramientas de un extremo a otro.

03. Software de diseño gráfico

Algunos diseñadores confían en software como Photoshop CC , Boceto o Illustrator CC , especialmente aquellos particularmente capacitados o familiarizados con herramientas que ofrecen control hasta el píxel. Las plataformas de diseño gráfico funcionan mejor si su objetivo es el más alto nivel de realismo y fidelidad visual. Y como explicamos en nuestra guía de creación rápida de prototipos con Photoshop CC , Puede ser mas sencillo de lo que imaginas.

dibujo de una mano sosteniendo un lápiz

Photoshop CC

Photoshop brinda un control detallado, pero puede ser excesivo para maquetas simples

Trabajar en software de diseño gráfico le brinda acceso a una selección casi infinita de colores altamente definidos, por lo que si trabaja dentro de las restricciones de un esquema de color rígido y preestablecido, por ejemplo, bajo reglas de marca particulares, entonces estos programas pueden ser los mejores. opción. Más que opciones de color, estos programas ofrecen muchas más herramientas visuales, lo que le permite abordar las minucias de los detalles.

Sin embargo, el inconveniente de utilizar este tipo de software es que puede resultar difícil traducir cuando llega el momento de empezar a codificar el diseño. Lo que funcionó en Photoshop puede que no siempre funcione en código (elementos como fuentes, sombras, efectos de degradado, etc.), lo que puede traducirse en una pérdida de tiempo para encontrar soluciones para la fase de creación de prototipos.

Para las páginas con mucho estilo, puede ser útil definir los detalles visuales específicos durante la fase de maqueta, en cuyo caso Photoshop o Sketch le brindarán la mayor cantidad de opciones. Del mismo modo, si está tratando con un cliente quisquilloso o difícil de complacer, presentarle una maqueta hermosa e impresionante podría convencerlo más fácilmente.

las maquetas se pueden arrastrar a UXPin

Las maquetas creadas en Photoshop o Sketch se pueden arrastrar y soltar en UXPin

También vale la pena mencionar que las maquetas creadas en Photoshop o Sketch se pueden arrastrar y soltar en la fase de creación de prototipos con UXPin. Esto le permite animar fácilmente todas las capas (sin aplanar) con unos pocos clics, y garantiza que no necesite comenzar desde cero cuando sea el momento de crear un prototipo.

Si las imágenes no son su única prioridad, es posible que sea más eficiente utilizando una herramienta que le permita hacer el wireframing, las maquetas y la creación de prototipos en un solo lugar. El software de diseño gráfico puede ser más problemático de lo que vale para las maquetas, a menos que esté buscando una visualización óptima; definitivamente necesitará comunicarse regularmente con su desarrollador, ya que estas herramientas no están diseñadas para la colaboración.

04. Maquetas codificadas

Si eres principalmente un diseñador y no te sientes cómodo con la codificación, obviamente esta no es una opción. Como se discutió en La guía de maquetas , las maquetas codificadas no son la opción predeterminada.

La mayor parte de la codificación se puede posponer hasta la etapa de creación de prototipos (si está creando un prototipo de HTML / JavaScript) o incluso más tarde (si utiliza una herramienta de creación de prototipos). Pero a pesar de la complejidad y los obstáculos potenciales, hay muchos diseñadores respetables que abogan por introducir código en la fase de maqueta.

Si bien las mejoras en las herramientas y la tecnología significan que se abren más y más posibilidades en el diseño de maquetación, no todo es fácil (o incluso posible) de recrear en código. Comenzar en código le permite saber de inmediato lo que puede y no puede hacer. Si se siente cómodo con el código, también se puede argumentar que comenzar con esto es menos derrochador: la maqueta terminará en HTML / CSS de todos modos.

Pero como mencionamos antes, las maquetas con codificación no son una estrategia popular, por más razones que la dificultad de codificar. Comenzar a codificar demasiado pronto puede limitar su creatividad y disposición para experimentar, ya que es fácil preocuparse por la viabilidad de sus ideas en el código en lugar de por lo emocionantes que podrían verse.

Depende de usted cuándo introducir la codificación. Solo asegúrese de conocer los objetivos de su diseño y mantenga a los desarrolladores actualizados sobre cómo está priorizando las funciones.

Leer más: