Your UX team is struggling with mobile design wireframes. What tools can you use to help them?

For me, it helps me to get ideas down on paper and organize them in a way that allows me to see the product from a holistic perspective, which allows me to understand the flows well and discover small issues and details before diving into the actual design.

I find that getting outside feedback from people that are not directly involved in UX design inspires vision and creativity. It starts the creative process of thinking outside the box. I like creating original and unusual work, and this is a process that helps me succeed with that.

Escolher a melhor ferramenta dependerá das necessidades específicas do projeto, e com isso temos que pensar que a parte colaborativa vai contar muito para a equipe. O Figma é a principal ferramenta para trabalhar com a equipe, pela sua opção de trabalho em conjunto em tempo real.

So many wireframe tools online, you agree also right? but it's not just about the tool here, we are talking about people that are struggling to do some certain task and that's the mobile wireframe, so what can be done and what to consider when choosing tool? You have to make sure the tool you want to choose is a tool that everyone will agree to and you have to make sure the tool is collaborative so everyone on the team can work together in the wireframe. So in my own opinion, whimsical, figjam and balsamiq can be used collaboratively or possibly use a white boarding platforms.

In choosing the best mobile design wireframes, there are some factors to consider to ensure the tools meet the team’s needs. -Ease of Use -Scalability -The collaboration capabilities -Cost -Functionality

UX tools are trendier than cat memes, so don't let anyone tell you must live and breathe Figma. Remember that the goal is to communicate your design in the best way possible. During new product development, your tools will likely change as the design matures. For early concepts, I'd strongly suggest hand-drawn illustrations using a drawing tablet or a digital whiteboard. Iterate that way as long as possible. Once you switch to a higher fidelity, both you and your stakeholders become more reluctant to discard a design when major changes are needed. Commit to a single design platform at your own risk. "Oh, you know, it's a toolbox. I don't care, you put the tools in for the job, that's all." - Robert DiNero in Ronin

The most effective approach is to begin with hand-drawn sketches for brainstorming and clarifying ideas before transitioning to digital tools. Hand-drawing offers flexibility, enabling immediate adjustments and iterations without the constraints of software layers and shapes. Once you've reached a clear understanding, around 30% developed, transitioning to a wireframing tool like Figma is ideal. Figma's collaborative features make it especially advantageous, facilitating teamwork and seamless communication throughout the design process.

The tool doesn’t matter at all. Paper and pen is fine. Omnigraffle is fine. Anything is fine. What’s important isn’t the tool. It’s going through the pain of thinking through what should go where to provide a good user experience. Only if a PM can figure this out and go through the pain of multiple iterations of design ideas can a great user experience be achieved.

Choosing the right tools for mobile design wireframes is like picking the perfect tool for a DIY project—it's all about matching the complexity of your app, ensuring smooth collaboration, considering ease of use, and staying within budget. Think of it as finding the right paintbrush for your masterpiece.

When picking the right tools for making mobile design plans, think about how big and complicated your project is. If it's a big project, you'll need a tool that can handle lots of details. Also, consider if your team works from different places and needs to share work easily. It's important to choose a tool that everyone can learn to use quickly and doesn't cost too much. And make sure the tool fits well with the other tools your team already uses. This way, everyone can work together smoothly and get the job done right.

In my experience, the best tools are those that can adapt as the design matures. My ideal tool would manage hand-drawn sketches, low-fidelity wireframes, high-fidelity comps, basic navigation prototypes, and advanced dynamic prototypes. It could handle the design of anything with a screen: mobile app, web app, desktop app, firmware, and so on. Until that glorious day, pick the right tool for the job. Balsamiq is great for minimalist wireframes. Sketch is great for higher-fidelity illustrations. Figma or XD are great for prototyping web apps. If your design includes compound actions on a single screen (such as a menu that opens into multiple tiers and the selected option affects something on the same screen), then your best choice is Axure.

Embarking on the journey of wireframing tools reveals a realm of creative potential! From trusted options like Balsamiq, Sketch, and Adobe XD to collaborative platforms like Figma, each tool offers unique features tailored to different needs. It's akin to assembling a personalized toolbox, ensuring you have the perfect fit to transform your design vision into reality. So, whether you crave simplicity, versatility, or collaborative magic, there's a wireframing tool waiting to bring your ideas to life in style.

When considering tools for creating mobile design wireframes, Figma stands out as a top choice. Its collaborative features, such as real-time editing and commenting, make it ideal for remote teams. Figma's versatility and ease of use, combined with its robust design capabilities, make it a popular option among designers for creating sleek and interactive wireframes. Additionally, Figma's ability to seamlessly integrate with other design tools and platforms further enhances its value for creating modern and efficient wireframe designs.

1. Figma: Figma stands out for its collaborative features, allowing multiple team members to work on wireframes simultaneously in real-time. Its cloud-based platform facilitates seamless sharing and feedback, streamlining the design process. 2. Sketch: Sketch is renowned for its extensive plugin ecosystem, offering customizable options to enhance productivity and streamline workflows. Its intuitive interface and robust vector editing capabilities make it a popular choice among designers. 3. Adobe XD: It provides a comprehensive set of tools for wireframing, prototyping, & designing user interfaces. Its integration with other Adobe Creative Cloud applications simplifies asset management and enables smooth transitions between design stages.

While these wireframe kits are undoubtedly easy, time-saving, and offer numerous benefits, I still believe that the traditional method of hand-drawing screens for creating wireframes is more efficient and creative. - People tend to forget the main purpose of creating wireframes, which is to lay out the user flow or navigation and establish the 'raw' structure/schema of the screen, including functionalities, features, and their placements. - When you create wireframes from scratch, you engage in brainstorming ideas instead of simply using predefined templates. This brainstorming activity enhances creativity and unlocks new possibilities. - Hand-drawn doesn't have to be literally with 'Pen & Paper'; it can also be done digitally.

Wireframe kits are great for rapid prototyping as they allow you to use a real, tested and working component instead of just drawing shapes

Wireframe kits can significantly streamline the mobile design wireframing process by offering ready-made elements, screens, and layouts that can be personalized to fit your app's requirements. These kits not only save time and effort but also ensure consistency and coherence across your designs. Available for various platforms, wireframe kits provide invaluable resources for designers, offering inspiration, guidance, and the flexibility to iterate on designs swiftly and effectively. By leveraging these kits, designers can enhance collaboration, maintain design system integrity, and ultimately accelerate the development of polished and user-friendly mobile applications.

¿Quieres explicarle a alguien tu idea? Tienes que tratar de hacerlo con imágenes que tengan sentido y continuidad. Para dale sentido tienen que tener un contexto y para que tengan continuidad tienen que simular las microinteracciones y posibles clics. En etapa de wireframe debemos explicar y validar la idea. El stakeholder no tiene porqué saber de dibujo técnico. El diseñador UX tiene el deber de ser empático en todas las partes del proceso.

Los kits de wireframes y plantillas de pantallas son verdaderamente útiles para acelerar el proceso de visualización y testeo de los requerimientos de UI o de UX en las pantallas de un proyecto. Por ejemplo, una pantalla de autenticación siempre tiene los mismos elementos mínimos, así que usar un kit ahorrará tiempo antes de la revisión con cliente, y permitirá identificar más fácilmente aquellos componentes o elementos que el proyecto necesita específicamente y que serán realmente el trabajo a realizar: identificar y usar los campos o componentes adicionales que requieren los usuarios finales de dicho proyecto.

Yes, feedback can be tricky because we need to discern what is important and filter out what is not. It's always better to provide a clear target for reviewers, focusing their attention on what needs review and what can be ignored. In my experience, the following statement helps set the stage before the session. Just use this template: I am presenting [Stage of work : mid-stage] work around [Context : enhancing user navigation within our app], and I’m looking for feedback specifically on [Feedback target : the clarity and intuitiveness of the wireframe layouts]. This approach ensures feedback is both relevant and focused, aiding in the refinement and progression of the project.

One of the best ways to improve is to look at the best. I’d suggest anyone struggling with mobile wireframes should deconstruct popular apps and turn them back into wireframes. This can be a great way to think through what’s relevant on the page. Step through each view and consider if it’s important or unique and map them out into a wire flow to get the full picture. The tool used isn’t so important—use what’s comfortable now and use what you’ve made to reconstruct with the preferred tool. This would be a great way to learn the small differences between design tools while not getting into making design decisions.

Getting feedback on your mobile design wireframes is crucial for refining your app's design and ensuring alignment with stakeholders and users. Start by clearly defining the purpose and scope of your wireframes to guide feedback effectively. Choose the appropriate format and platform for sharing your wireframes based on the type of feedback you're seeking. When soliciting feedback, ask specific and open-ended questions to encourage constructive and actionable insights from reviewers, ultimately leading to a more polished and user-centric app design.

To get feedback on your wireframes: 1. Share them with team members, stakeholders, and potential users via collaborative design tools or presentation platforms. 2. Clearly communicate the purpose and context of the wireframes to ensure feedback aligns with project goals. 3. Encourage specific, actionable feedback by asking targeted questions about usability, clarity, and functionality. 4. Conduct user testing sessions to gather insights on navigation, interaction flows, and overall user experience. 5. Document and prioritize feedback for iterative improvements, ensuring that wireframes evolve to meet user needs and project objectives.

- Definir usuarios claves para tener información relevante. - Tratar de recompilar la mayor cantidad de opiniones para poder tener más información cuantitativa. - Debemos estar perfectamente seguros de que queremos validar o mejorar. Para ello también debemos estar seguro de que nuestra idea se encuentre perfectamente dibujada con sentido y continuidad. - Preparar un entorno de pruebas, preguntas y tomar nota. - Estar preparados para recibir feedback constructivo y negativo.

Desde hace un tiempo que busco y analizo kits de wireframes gratuitos en Figma y otras herramientas de diseño de UX/UI, de modo que identifico en ellos los mejores componentes: aquellos que faciliten las tareas diarias del equipo (componentes que usan variables, por sus estados, por su flexibilidad, originalidad, etc.). Luego los traslado a un archivo que utilizamos como librería de componentes para propuestas rápidas. Esto nos ha permitido agilizar y optimizar continuamente el trabajo y entender las mejores formas de sacar provecho a las características técnicas de las herramientas de diseño.

If my UX team is struggling with mobile design wireframes, we can use Figma for collaborative and detailed wireframing, Balsamiq for quick and simple low-fidelity wireframes, or just pen and paper for quick sketches and brainstorming. Each option offers a different approach to tackle our challenges efficiently.

The tool is the last thing to worry about and depends on the level of detail/stage you need to communicate your idea(s) in. You have standards like Sketch & Figma (mid-hifi). To take it another step you can pair these with Principle, or another interaction tool to expand on the details. However, I feel initial wireframing should be done analog and prior to ever touching a computer, to diverge on concepts quickly and loosely—quantity over quality first. Not being hung up on pixel perfection. Asking yourself: Am I on target? Do these rough ideas make sense? Anything others can add that may take it up a notch? Can the engineers do this, or do they have a more efficient way? Once you’ve narrowed down on direction, then I would think of tools.

Wireframimg is very important in the design process, some tools I would recommend to my UX Team for wireframimg are: - Figma Wireframing Kit - Whimsical - Miro broad