You need to create wireframes and mockups for your next project. How do you choose the right tools?

Before jumping into wireframes you absolutely need to understand the project and problem, the domain, and what stakeholder's expectations are. You also want to have a firm grasp of what your stakeholders will need so your team can achieve the coveted sign-off, and what your developers will need to execute on what your design is intending. You're not *just* designing for users. You also design for anyone who will consume and interact with your design artifacts. Remember them, too.

When diving into wireframing and mockups, I prioritize goal alignment over tool selection. Beginning with pen and paper allows for uninhibited creativity, tapping into the designer's intuition to generate innovative ideas. Sketching fosters a liberating environment where ideas flow freely, unencumbered by digital constraints. Ultimately, it's the realization of project objectives that defines success, regardless of the tools employed.

Choosing the right tools for wireframing and mockups depends on your preferences and project requirements. Popular options include Sketch, Figma, Adobe XD, and InVision. Consider factors like collaboration features, ease of use, and compatibility with your workflow. Experiment with a few tools to find the one that aligns best with your design process and team collaboration needs.

A escolha da ferramenta vem depois do objetivo do wireframe. O que você precisa demonstrar e testar com o wireframe, qual é sua fidelidade, quem irá utilizar? Ele irá evoluir para um protótipo? Servirá de base para desenvolvimento (pulando mockups de alta fidelidade)? Qual é a maturidade da equipe e do cliente? Cada ferramenta de wireframe serve para um objetivo diferente, desde uma folha de papel até uma interface navegável no Axure.

Absolutely, defining your goals and scope is crucial when creating wireframes and mockups. Consider the specific elements you want to convey – whether it's the overall layout, content structure, functionality, or interaction details. Tailoring the level of fidelity to match your project's complexity will help streamline the design process and ensure effective communication with stakeholders.

In my workflow, seamless collaboration, feedback loops, and integration with other tools are crucial. As a UX designer, I often work closely with team members and stakeholders, requiring efficient communication for wireframes and mockups. Integration with project management systems, design tools, and code editors is essential for streamlining our workflow. Adhering to standards and guidelines ensures consistency and quality in our designs. Therefore, the tools I use must offer robust collaboration features, seamless integrations, and support for various formats to meet our team's needs effectively.

Indeed, seamless collaboration is key. Assess your team dynamics and stakeholder involvement – choose tools that facilitate easy sharing and feedback incorporation. Integration with other essential tools in your workflow, adherence to standards, guidelines, and conventions can enhance efficiency. Tailoring your tools to fit seamlessly within your team's processes ensures a smooth and productive design collaboration.

Being punctual is key for effective teamwork. Open communication and quick issue resolution enhance efficiency. Integrating tools with project management ensures easy accessibility, fostering a cohesive and productive workflow for the team.

In your team and workflow, consider collaboration needs for wireframes and mockups. Tools should facilitate sharing and feedback. Integration with project management software, design systems, or code editors can enhance efficiency. Adherence to standards or guidelines may be necessary. Choose tools with the right features and integrations to improve design process efficiency and ensure alignment with project goals, accommodating the diverse needs of your team and stakeholders.

En mi opinión un Wireframe o dise?o final, carece de sentido y productividad sin como mínimo 1 ronda de Design Critique o validación de funcionalidad. Nosotros lo centralizamos todo entre Figma y Jira. Todas las fases del proceso tienen su tarea/ticket en Jira y nos es muy útil para estimar y cuantificar el proyecto de forma más fiable.

Budget and time are crucial in choosing wireframe and mockup tools. Assess if you need a subscription, license, or one-time purchase. Consider the learning curve of new tools versus using familiar ones. Factor in the need for regular updates or maintenance. Your choices should align with financial and time constraints, opting for cost-effective and efficient tools that meet project needs without exceeding resources.

Absolutely, budget and time constraints are crucial factors. Evaluate the cost structure – whether it's a subscription, license, or one-time fee. Consider the learning curve and compatibility with existing tools to minimize disruptions. Factor in potential maintenance and update requirements. Choosing tools that align with your budget and time resources ensures a cost-effective and efficient design process.

Navigating time and budget is crucial for any designer. When choosing tools, consider the financial aspect and learning curve. Prioritize options that align with your budget and require minimal training. Finding the right balance between cost and functionality is key. Invest time upfront to understand a tool's features, ensuring smooth integration into your workflow. This proactive approach optimizes both time and budget, ultimately enhancing the overall design experience.

Como en muchos campos del dise?o siempre puedes crearte un flujo de herramientas Free o Freemium. Pero sobretodo tener claro el tiempo que me vaya a ahorrar por tener X funcionalidades. Tu tiempo es muy valioso y cuenta igual que las horas de producción, desarrollo, mantenimiento etc.

Evaluate the pricing structure of different tools and consider whether they fit within your budget constraints. Keep in mind any subscription fees, licensing costs, or additional charges for premium features.

A maior vantagem em usar o Figma, é a possibilidade de executar as outras etapas do projeto dentro do mesmo ambiente. é possível desenvolver o esbo?o e o fluxo inicial com FigJam, depois criar wireframes com Figma e seguir com o projeto até a etapa de prototipagem. Além de ser uma ferramenta inicialmente gratuita e posteriormente cobrada de forma escalável, o Figma também facilita muito a comunica??o e integra??o com os devs.

There are some other interesting free tools like Miro and Mural that help you create wireframes, flow diagrams, and even codes. You can also add collaborators who can add in comments or questions all in one place, rather than tens of emails to and fro with stakeholders.

The most important factor here is the budget and time. One could use low-fi tools like balsamic or even hi-fi tools like Figma. All depends on how much time do you have to come up with the wireframes. Personally I like low-fi tools for wireframes as it facilitates agility and efficiency.

I factor overal ease of use and cost. However my top priority is working as a team. I care about the ways the app enables managing reusable assets, sharing and editing as team, as well as how the tool manages designer / develop flow and hand offs. I also care about how well the tool integrate with other frequently used tools such as Github, headless design systems and design tokens. I use a combination of Figma, Figjam, Figma Miror and some plugins to automate design token management flow.

Next, you need to identify key features you need in a wireframing/mockup tool. For instance, do you need support for responsive design, interactive prototypes, or integration with other design tools? Explore the wide range of wireframing and mockup tools available in the market such as Figma, Adobe XD, Balsamiq, Invision and the likes. Consider each tool's features, pricing plans, and user reviews to gauge their suitability for your project. If you're working with a team or need to collaborate with clients remotely, you might want to go with tools that offer robust collaboration features such as real-time editing, commenting, and version control.

A few criteria I have are: - What is the industry standard tool: This makes it easy for you to integrate even as you change organisations/ clients - Tools that are also versatile - where you can go from simple lo-fi wireframes to complex, nuanced animated hi-fis. - Tools that are affordable monetarily - Tools where you can collaborate easily. Including different levels of access like view, comment, edit, develop, etc - Tools that have longevity. For instance, Adobe XD was recently discontinued. So that makes it important to make sure the tools doing well in the market. Overall, Figma ticks all these boxes for me.

Identify project needs and requirements to compare and assess tools ??. Think about features, usability, cost, and compatibility with your team's workflow and preferences ????. Check customer reviews, ratings, and test free trials or demos to find the perfect fit for your needs ?????.

Collect team feedback on current tool experiences and pain points to improve them ??. Usability and feature gaps should be addressed. Explore upgrades or alternatives to meet these needs ??. Conduct user testing to verify changes' efficacy and iterate accordingly ???????. Continuously review and improve your toolkit to match shifting needs and boost productivity! ??

Considero que hay algunos puntos clave para mejorar, como probar nuevas herramientas en proyectos peque?os o simples, y siempre de la mano de la recopilación de hallazgos con personas usuarias que cubran diferentes perfiles. En la actualización o cambio de herramientas es muy importante que todas sean basadas en la voz de la persona usuaria y no solo de los objetivos del negocio.

La parte más crucial es entender el QUE por encima del COMO. Me explico: Cuanto tiempo puedo dedicarle a esta fase SI, pero antes entendiendo lo que quiero conseguir con estas pantallas que realizaré. Que hipótesis quiero verificar o que salgan nuevas posibilidades tanto de experimentos como posibles nuevas hipótesis. No tengas miedo a pedir feedback y poner tu dise?o en el escenario, siempre aclarando que tipo de feedback quieres obtener o que es lo que quieres validar. Explicar la fase del proyecto en la que estas y aclarar aquello que el stakeholder debe obviar o no tener en cuenta en la recogida de ese feedback.

Considero que nuestro conocimiento del proceso, alcance, tiempos o métricas son clave, sin embargo tener empatía y humanidad como estrella norte en cada parte de los procesos en proyectos, es algo que incluso como profesionales de UX podemos olvidarlo.