Wireframes

Clase 9 | 12-05-2021

Analisis Pour

Se aplica análisis POUR en el proyecto de evaluación módulo 2.

(plataforma comisaria virtual)

https://www.federico-toledo.com/charla-accesibilidad-en-aplicaciones-web-y-mobile-ixda-montevideo/principios-accesibilidad/

WCAG

Los criterios WCAG tienen como objetivo hacer que el contenido web sea más accesible para un público más amplio de personas con y sin discapacidad. Hay tres niveles de cumplimiento:

  • : Cubre los requerimientos básicos de accesibilidad.
  • AA : Es la mejor práctica internacional y suele ser el nivel requerido por la legislación.
  • AAA : Se considera como conformidad avanzada y a veces incluye elementos que son más difíciles de implementar.

Wiframes

Un wireframe o prototipo es un boceto donde se representa visualmente, de una forma muy sencilla y esquemática la estructura de una página web.

El objetivo es definir el contenido y la posición de los diversos bloques y elementos. Además, nos permite ver como interactuarán estos elementos entre sí.

En los wireframes no se utilizan ni colores, ni tipografías ni elemento gráficos. Lo importante es centrarse en la funcionalidad del sitio y la experiencia del usuario. La prioridad son los contenidos.

Al ser representaciones tan simples, te permiten crear múltiples versiones de un mismo proyecto de una forma rápida, así como aplicar cambios o nuevas ideas que aparezcan. Lo importante es tener clara la estructura de la web o aplicación antes de empezar con el HTML y el CSS para comprobar que no haya fallos importantes de base que luego podrían suponer muchas horas de trabajo subsanar.

Ejemplo:

https://webdesdecero.com/wireframes-que-son-y-como-crearlos/

Hay tres tipos de wireframes:

  • Baja fidelidad: Es un dibujo inicial sin muchos detalles. Suelen ser bocetos dibujados a mano o líneas y formas que representan una idea.
  • Fidelidad media: Muestra más detalles de los elementos y se centran en el diseño del contenido y la estructura general de la página.
  • Alta fidelidad: Representaciones de los componentes con mayor detalle y nivel superior, con características de comportamiento y un enfoque en el diseño del contenido.

Una forma muy sencilla de crear un wiframe es realizarlo a mano, solo con papel y lapiz,

Ejemplo:

Se pueden realizar wiframes en HTML, pero es una práctica no tan habitual, ya que demora más tiempo que utilizar una herramienta automatizada.

Herramientas para wireframes y prototipos:

Links de interés:

Conclusión

Un wiframe o un prototipo es una representación visual o boceto de una página web, mediante herramientas nos ayudan a definir el contenido y la posición de los diversos bloques, elementos e interacciones que tendrá la web que estamos realizando, esto nos facilitara el trabajo, ya que podremos testear cómo interactúan estos elementos entre sí y prevenir errores, además tener una visión más amplia del proyecto tanto para desarrolladores y diseñadores, así tener el punto de partida.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Crea tu sitio web con WordPress.com
Empieza ahora
A %d blogueros les gusta esto: