Diseño web usable y accesible

Nivel Intermedio Unidad 1

Arquitectura de información

LECTURA

Wireframes

Los wireframes son maquetas gráficas que muestran cómo vamos organizar los
contenidos, menús, e información general dentro de una interfaz. Nos sirve para
visualizar cuál es la mejor forma de organización de la información en las interfaces
del producto digital siguiendo los objetivos planteados para el proyecto. Pueden
hacerse en papel, aplicaciones web o software especializado.

Ejemplo wireframe en papel:

Contenido desarrollado por Colnodo para el proyecto JuvenTIC.

Este material cuenta con licenciamiento para el uso de sus contenidos del tipo
Creative Commons Attribution-NonCommercial-Share Alike 2.5 Colombia
Diseño web usable y accesible
Nivel Intermedio Unidad 1
Arquitectura de información

LECTURA

Ejemplo wireframes diseñado en software:

Recursos
A continuación se presenta un listado de algunas aplicaciones o programas que se
pueden usar para diseñar wireframes. Con algunos también se pueden diseñar
mapas del sitio y prototipos funcionales.

https://wireframe.cc/ https://proto.io/
https://balsamiq.com/ https://www.fluidui.com/
https://www.axure.com/ https://pidoco.com/
https://moqups.com/ * https://gomockingbird.com/ *
https://mockflow.com/ https://www.sketchapp.com/
https://www.mockplus.com/ https://www.invisionapp.com/studi
https://marvelapp.com/ o

Contenido desarrollado por Colnodo para el proyecto JuvenTIC.

Este material cuenta con licenciamiento para el uso de sus contenidos del tipo
Creative Commons Attribution-NonCommercial-Share Alike 2.5 Colombia