Baja fidelidad
Pros: R谩pido (entre 30min a 1 hora), sin costo, produce acuerdos entre el equipo de desarrollo.
Contras: no es realista, no es detallado, la retroalimentaci贸n es parcial.
Mediana fidelidad
Pros: M谩s realista a lo digital, flexible porque se crea en digital, iteraci贸n r谩pida.
Contras: Requiero tiempo y curva de aprender la herramienta y no tiene interacciones. (Figma, Sketch)
Alta fidelidad
Pros: Es el fundamento t茅cnico del producto (como se va ver el producto final), diferentes plataformas, certero a la realidad del producto final (con interacciones).
Costras: Producci贸n lenta, por cada detalle se inhibe la creatividad, no es flexible.
Conceptos b谩sicos de prototipado
Qu茅 aprender谩s sobre dise帽o de prototipos m贸viles
Beneficios del Prototipado
Niveles de Fidelidad del Prototipado
T茅nicas para estructurar informaci贸n
Introducci贸n a Patrones de Dise帽o
Introducci贸n a UX Orientado a Objetos
Definici贸n de Flujos de Tareas
Prototipado de Baja Fidelidad
Bocetado R谩pido
Sistemas de Dise帽o
Principios de Atomic Design
Ventajas de Atomic Design
Prototipado de Mediana Fidelidad
Bocetado en Figma
Dise帽o de Wireframes (Mediana Fidelidad)
Librer铆as Compartidas de Componentes
Introducci贸n a Componentes
Creaci贸n de Componentes
Detallado de Componentes
Estilos de Componentes
Librer铆as de Componentes Compartidas
Prototipado de Alta Fidelidad
Dise帽o de Mockups de Alta Fidelidad en Figma
Construcci贸n de Prototipo Interactivo en Figma
Entregables de Dise帽o
Mejores pr谩cticas de Entregables para Desarrollo usando Overflow y Zeplin
Exportaci贸n de Assets a Zeplin
Cierre
Cierre
Contenido Bonus
Tips b谩sicos para prototipar una idea
C贸mo hacer prototipos funcionales de Apps iOS o Android
Crea un prototipo interactivo de tu aplicaci贸n
Mentor铆a expert
Los 10 pecados del Product Designer
Create an account or log in
Keep learning for free! Join and start boosting your career
Resources
What is low-fidelity prototyping and what are its advantages?
Low fidelity prototyping is the methodology you need when you are looking to quickly validate your design ideas. These prototypes are made on paper and are ideal for mobile or desktop applications in their early stages. Requiring no advanced technical skills or significant time investment, these prototypes allow you to quickly assess whether your users understand your project's workflow.
- Advantages:
- Speed: Paper prototyping allows you to create a complete flow in a matter of minutes.
- Cost: The investment is minimal, reduced only to the time needed to do it.
- Team participation: Facilitates early collaboration with developers by enabling agreements on functionality and technology recommendations.
- Disadvantages:
- Realism: Being mere sketches on paper, they do not accurately reflect how the application will look in production.
- Limited details: Does not provide detailed feedback, as users may have trouble imagining the full functionality.
When to use a medium fidelity prototype?
Medium fidelity prototyping is a step forward in the digital representation of your ideas. It is done using digital tools that allow you to make decisions about element hierarchies, sizes and distances. These prototypes offer a more accurate and flexible simulation than low-fidelity prototypes.
- Advantages:
- Enhanced realism: They begin to look more like a real product by including digital elements, such as buttons and filters.
- Ease of iteration: Changes are easier and faster in a digital environment.
- Disadvantages:
- More time and learning required: Requires knowledge of specific digital tools, which can be a learning curve.
What is involved in creating a high-fidelity prototype?
By increasing the level of detail, the high-fidelity prototype becomes a near-final version of your design, essential for the transition to full production. This type of prototype excels at including colors, typography and interaction details that closely replicate the end-user experience.
-
Advantages:
- Accuracy: It functions as the source of truth by showing how the final product will be built and look.
- Robust feedback: By providing a realistic version of the product, user feedback is more accurate.
-
Disadvantages:
- Slow production: Due to the attention to detail required, prototyping takes longer.
- Rigidity: Design constraints can limit creativity during the initial phases.
Why is it critical to start with a low-fidelity prototype?
Low-fidelity prototyping encourages creativity and agile thinking by allowing you to scrap and correct ideas quickly and inexpensively. As you progress through the design, you can increase the fidelity of the prototype without losing focus on the efficiency and effectiveness of the initial solution. Remember that starting with a simple model avoids the complexity of reworking code, thus minimizing the cost endemic in the development industry.
Recommended tools for digital prototyping
Today, there are numerous tools on the market to create digital prototypes, each with its advantages and disadvantages. Among the most popular are:
- Figma: Ideal for real-time collaboration.
- Sketch: Focus on intuitive interface design.
- Adobe XD: Offers complete integration with the Adobe ecosystem.
- InVision: Known for offering an agile and dynamic workflow.
Choose the tool that best suits your needs and possibilities, and explore its functionalities to optimize your design process.
Contributions 23
Questions 6
Sort by:
Niveles de fidelidad del prototipo
BAJA fidelidad, un bosquejo simple sin utilizaci贸n de color ni jerarqu铆a, donde se plasme una idea b谩sica del dise帽o que se quiere.
**PRO: **
r谩pido
sin costos
produce acuerdos
CONTRAS:
no es realista
no es detallado
la retroalimentaci贸n es parcial
MEDIA fidelidad, se comienza a construir los wireframes tomando decisiones en relaci贸n a la jerarqu铆a y posici贸n de los elementos, aunque sigue siendo una relaci贸n aproximada.
PRO:
m谩s realista
flexible
iteraci贸n r谩pida para los cambios a realizar en el caso de hacerlo en digital
CONTRA:
requiere tiempo
requiere curva de aprendizaje
no tiene interacciones entre las pantallas o botones
ALTA fidelidad, el prototipo ya es mucho m谩s detallado a c贸mo ser谩 el producto final, Se pueden ver detalles exactos como paleta de colores, tipograf铆a, tama帽os de fuente, iconos, patrones de dise帽o, entre otros.
PRO:
fundamentos t茅cnicos del producto
diferentes plataformas
certero a la realidad
CONTRA:
producci贸n lenta
puede inhibir creatividad
no es flexible
A menor nivel de fidelidad, los usuarios deben usar m谩s su imaginaci贸n.
Realmente no hab铆a entendido el gran valor de un prototipo de baja fidelidad. En lo personal, siempre inicio mis trabajas a partir de la mediana fidelidad.
En pr贸ximos proyectos voy a estar implement谩ndolo.
Gracias Misael 馃槃
Prefiero los prototipos de baja fidelidad porque da m谩s campo de acci贸n cuando se est茅 realizando el desarrollo real.
Os comparto una plantilla para prototipar en low-fidelity: https://drive.google.com/file/d/1vUxznxuwWNDHXDHQAgAtQ63dBBsCrbYM/view?usp=sharing
Me encanta con o explica!
Super recomendad: ver el curso de sistemas de dise帽o antes
Es uno de mis profesores favoritos!!
Esta muy cool y todo sobre las fidelidades, pero depende mucho el grado de madurez de ux de la empresa. Por lo general casi todos pasan directo el prototipo a alta fidelidad, (como dije antes depende de la madurez de la organizaci贸n) y muchas veces se recorta las pruebas de usabilidad. Es importante ser pioneros y aplicar todo el proceso.
Genial, siempre cre铆 que el prototipado no era necesario, ya que soy el encargado de dise帽o UI/UX y tambi茅n soy en desarrollador, entonces todo depende de mi.
1锔忊儯 Lo 煤nico que nosotros necesitamos validar con los wireframes de baja fidelidad, es que el usuario logre entender que es lo que est谩 pasando. No necesitamos ser detallistas y no necesitamos ver el flujo.
Niveles de Fidelidad
<h3>Baja</h3>Se realiza en papel y a mano y se usa principalmente para testear la idea y si los usuarios entienden la idea y como podr铆a llegar a ser (Es r谩pido pero el feedback es b谩sico por lo b谩sico del prototipo)
<h3>Media</h3>Ya puede realizarse en aplicaciones y tiene una apariencia m谩s similar a la final, no se testea la funcionalidad sino como el usuario ve la interfaz y corregir futuros errores (Puede necesitar conocimientos previos para la aplicaci贸n y es m谩s flexible y modificable que el prototipo en papel)
<h3>Alta</h3>Ya cuenta con colores y tipograf铆a, es la interfaz como ser谩 el desarrollo y se prueba funcionalidad (Tarda m谩s tiempo para ser desarrollado pero es fiel al producto por lo que las pruebas dan mayor informaci贸n)
Me gusta lo del dise帽o responsivo.
PROTOTIPO DE MEDIANA FIDELIDAD
PROTOTIPOS DE ALTA FIDELIDAD
Yo me ir铆a por un prototipo de baja fidelidad!
En lo que si me enfocaba siempre era en un dise帽o realista que sea posible dise帽ar y que tenga una estructura funcional.
Con los prototipos se evita el arreglar, rehacer y desechar c贸digo, lo cual es MUY costoso en la industria de desarrollo de software. He aqu铆 la enorme importancia del prototipado en el proceso de creaci贸n de productos digitales.
La explicaci贸n fue clara y al punto. Genial.
una pistola el prof
me encanta como explica el profesor !!
Want to see more contributions, questions and answers from the community?