Términos generales de diseño de interfaces

7/10

Lectura

  • ¿Qué es UX y qué es UI?

La UX o “Experiencia de Usuario’’ y la UI o “Interfaz de Usuario” son dos conceptos susceptibles de ser confundidos, ya que están muy relacionados. Sin embargo, significan cosas diferentes, y debemos tener claro su significado.

Por una parte, en el ámbito digital, la UI se refiere a aquellos objetos que permiten a los seres humanos interactuar con una máquina. Estos objetos pueden ser, por ejemplo, los botones de una pantalla, el menú de navegación, las imágenes o los sonidos.

Por otra parte, la experiencia de usuario se refiere a la percepción y a la opinión que tienen los usuarios sobre la UI. Es decir, ¿los usuarios tienen una experiencia positiva o negativa al interactuar con el producto?

Por tanto, para que los usuarios tengan una experiencia positiva con el producto debemos realizar un buen diseño de UI. En este sentido, es muy importante que nuestra página web sea usable y accesible. Veamos, a continuación, qué es la usabilidad y la accesibilidad.

  • ¿Qué es la usabilidad?

La usabilidad hace referencia a la facilidad de uso que tiene nuestro producto. Por ejemplo, cómo de fácil les resulta a los usuarios encontrar el número de contacto de una empresa en su página web.

  • ¿Qué es la accesibilidad?

La accesibilidad hace referencia al hecho de que una persona con cualquier tipo de discapacidad pueda utilizar el producto sin encontrarse con barreras. Sin embargo, es importante destacar que no solo las personas con discapacidad pueden experimentar problemas de accesibilidad, sino que cualquier persona puede experimentarlos, aunque sea de forma temporal.****

Por ejemplo, una persona recién operada de la vista puede tener las mismas necesidades que una persona con discapacidad visual permanente. Igualmente, es posible que una persona que no disponga de auriculares en un lugar concurrido tenga las mismas necesidades que una persona con discapacidad auditiva permanente.

  • ¿Qué es un wireframe?

Un wireframe es una representación visual sencilla de la estructura de un producto digital. Representa los elementos que va a tener, pero en lo que a diseño visual se refiere, es una representación muy sencilla, ya que no incluye colores, tipografías ni otros elementos visuales. Todo lo contrario, se realiza en una escala de grises. Por tanto, suele emplearse en las etapas más iniciales del diseño.

  • ¿Qué es un mockup?

En español ‘maqueta’, es una representación visual (estática) del producto digital. Permite ver cómo será el diseño visual en realidad, pues ya incluye elementos visuales como el color, las tipografías y las sombras.

  • ¿Qué es un prototipo?

Un prototipo es una representación funcional de un producto digital, ya listo para conocer cómo van a interaccionar los usuarios con él y si dicha interacción le va a resultar en una experiencia positiva o negativa.

En definitiva, el wireframe define la estructura del producto, el mockup define el diseño visual, y el prototipo define su funcionalidad.

Conclusión:

  • UI y UX son conceptos distintos.
  • Para que los usuarios tengan una experiencia positiva con la interfaz,
  • El wireframe define la estructura del producto, el mockup define el diseño visual, y el prototipo define su funcionalidad.

Reto:

  • Crea un wireframe para una página web para tu marca personal. Puedes realizarlo de forma digital o con papel y lápiz.

Aportes 29

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Aquí dejo un wireframe profesional para que se den una idea de como puede en celulares, tabletas y computadoras.

Un pequeño aporte visual para entender mejor el proceso de un diseño de interfaz c: Espero les sirva

RETO
Clase 7

Este es mi wireframe pensado para laptops/pc y celulares, se trata de un blog/pagina de ilustración donde se vendan productos del mismo ilustrador, se muestre sus colecciones y los recursos que aportaría a su comunidad, nunca había hecho esto pero si me enfocara en esta área me iría más profundo, me gustó hacerlo pero pensé mucho que podría hacer y pense en lo que más me gusta (la ilustración) aunque no encontre ni di con muchas referencias para lo que queria…
lo hice en photoshop.

Este diseño está inspirado para un website sobre trabajos en drywall ya que tenemos cuenta de instagram pero no es suficiente para hacernos conocer.

Este es un wireframe que hice para una página de conciertos online ficticia en un ejercicio de la universidad.

Con Miro, podrás realizar Wireframe de tus proyectos.

Reto clase 7
Aquí dejo mi wireframe de pagina web.


reto wireframe, lo hice con papel y lápiz, y trata de una pagina web para vender artículos de moda

Este es mi wireframe el cual hice a mano y despues lo represente en un mockup , saque la idea de Zara

Excelente clase…

Este es una propuesta que se me ocurrió para presentar un portfolio digital en una pagina web. lo divido por el contenido que se desee revisar. lo hice muy básico pero se entiende.

Tomado de la web…

wireframe sobre paracaidismo

Reto Wireframe para página web:

my wireframe.thankyou by class

Saludos dejo mi aporte

 

Reto del Wireframe 😃

Reto 7