¿Cuáles son algunas herramientas que usan todos en la industria de diseñadores web de Shopify?

1. Wireframe.cc -es una de las herramientas más básicas de estructura de alambre que los diseñadores y desarrolladores web pueden emplear en sus flujos de trabajo de diseño. Pero con una interfaz simple y un pequeño conjunto de características, los usuarios pueden concentrarse en la tarea en cuestión, creando estructuras de alambre efectivas.

Wireframe.cc: la interfaz WYSIWYG de la herramienta de estructura de alambre mínima y la solución basada en la web permite a los usuarios comenzar a diseñar inmediatamente los marcos de alambre sin crear una cuenta. Es la solución perfecta para que los principiantes comiencen a digitalizar sus diseños de estructura metálica de papel.

2. Mockflow: es otra gran solución para diseñadores web y desarrolladores que buscan agregar una herramienta de estructura de alambre a su flujo de trabajo de diseño, pero que pueden no estar familiarizados con las complejidades de una solución más sólida.

Para simplificar aún más los proyectos, Mockflow tiene una tienda llena de plantillas de terceros que los usuarios pueden explorar, y comprar plantillas de maquetas / wireframes, si están buscando inspiración.

3. Axure: – Si está buscando una herramienta de estructura de alambre con características y funcionalidades robustas, no busque más que Axure. Axure, una solución de nivel intermedio a avanzado para diseñadores y desarrolladores web, se basa en datos y permite a los usuarios validar completamente las ideas antes de escribir o implementar cualquier código.

Con la capacidad de incluir flujos condicionales, animaciones, contenido dinámico y otras herramientas una vez que los wireframes estén listos para convertirse en prototipos, Axure permite a los freelancers y agencias controlar todos los aspectos del diseño de sus productos, de principio a fin.

4. InVision: es una de las herramientas de creación de prototipos y marcos de alambre más conocidas en la industria. Es utilizado por empresas de todos los tamaños, y pone énfasis en crear entornos ideales para la colaboración, lo que resulta en productos y diseños excepcionales.

InVision se integra con Slack y Trello, y es ideal para diseñadores web y desarrolladores que buscan una solución que admita la estructura de alambre, así como la funcionalidad avanzada necesaria para crear prototipos hermosos.

5. MockPlus: se anuncia a sí mismo como la herramienta de creación de prototipos y de trama de alambre más rápida. Diseño más rápido, interacciones más rápidas y pruebas más rápidas.

Para respaldar su afirmación, MockPlus tiene una variedad de características que permiten a los diseñadores y desarrolladores web crear wireframes más rápidamente que si usaran herramientas tradicionales disponibles, como Sketch y / o InDesign. Estas características incluyen un editor WYSIWYG, componentes prediseñados, componentes de marcado, documentos maestros, códigos QR para pruebas de dispositivos y más.

La mayoría de las herramientas que usan los diseñadores web son exactamente las mismas que en cualquier otra industria.

No estoy seguro de si por diseñadores web te refieres a aquellos que solo diseñan o aquellos que desarrollan temas de Shopify también. Hay muchos tipos de magos de diseño + desarrollo. Entonces responderé por los dos.

Diseñadores web de Shopify

Para aquellos que diseñan, nuevamente, las herramientas son en su mayoría las mismas. Las dos herramientas más utilizadas por los diseñadores son Sketch App o Photoshop (o ambas). El primero le permite hacer de todo, desde maquetas hasta diseños completos, mientras que el segundo permite una manipulación precisa de gráficos de trama (basados ​​en píxeles).

Para compartir sus diseños con un equipo, a menudo usan Invisionapp . Eso es todo realmente. No se necesita mucho más para realizar y entregar diseños.

Diseñadores web + desarrolladores de Shopify

Para aquellos que avanzan en el proceso y realmente desarrollan sus diseños, existen otras herramientas. La mayoría de ellos son utilizados por desarrolladores en cualquier industria. Para editar el código, puede usar Sublime Text o Atom . Estos dos son muy populares en estos días. La mayoría prefiere GIT como su principal sistema de control de versiones. Puedes usar terminal / línea de comando o Git Tower .

Ahora, para herramientas de desarrollo específicas de Shopify … Shopify Theme Kit ha existido durante mucho tiempo y sigue siendo una de las herramientas más importantes para implementar / desarrollar / probar temas para Shopify. Se actualiza con bastante frecuencia y funciona bastante bien. Shopify ha desarrollado una herramienta completamente nueva recientemente llamada Slate . Es algo similar a Theme Kit pero con varias adiciones dulces. Sugiero probar ambos y ver cuál es mejor para su caso.

Es bastante difícil diseñar / desarrollar temas para Shopify cuando no hay una tienda de muestra disponible. Hay una buena herramienta para este caso y puede generar datos ficticios para su tienda Shopify: datos de muestra simples . Un clic y tienes productos, colecciones, pedidos, etc.

Hay algunas herramientas adicionales que pueden ayudar u ofrecer un ángulo diferente. Los chicos de Beanstalkapp, por ejemplo, comenzaron a ofrecer la implementación de su repositorio de temas a través de ellos.

Eso es todo.

Tres herramientas lo harán posible:

1 herramienta para diseñar -> 1 herramienta para desarrollar -> 1 herramienta para implementar

  • Colorzilla – Complemento Selector de color
  • Moqups – Para enmarcado
  • Hotjar: para ver cómo se comportan los visitantes en las páginas
  • Patrones de héroe: excelentes patrones para secciones y fondos
  • Referencia de CSS: porque no me gusta memorizar código
  • Screenfly: para ver cómo se ve una página en diferentes tamaños de pantalla
  • Browserstack: para pruebas más avanzadas en diferentes dispositivos
  • Coolors: para inspirarte con paletas de colores