Diseño de Interfaces

Ing. Alan Rodriguez Lopez

Diseño de Interfaces → Definiciones ARL | UAGRM

¿Qué es la Interfaz de Usuario?

La interfaz de usuario es el medio con que el usuario

puede comunicarse con una máquina, un equipo o una
computadora, y comprende todos los puntos de
contacto entre el usuario y el equipo.
Diseño de Interfaces → Definiciones ARL | UAGRM

Importancia del Diseño de Interfaz de Usuario

• Desde el punto de vista de la Ingeniería de Software, la interfaz
de usuario juega un papel en extremo importante en el
desarrollo y puesta en marcha de todo sistema.

• Es la carta de presentación del sistema y en ocasiones resulta

determinante para la aceptación o rechazo de todo un
proyecto

• En promedio, se estima que del 35% al 45% de los gastos

destinados a un proyecto son direccionados al diseño e
implementación de la interfaz
Diseño de Interfaces ARL | UAGRM

Herramientas
Para la creación del diseño de Interfaz se puede usar:
• Sketch
• Wireframe
• Mockup
• Prototipo
Diseño de Interfaces ARL | UAGRM

Definiciones

Sketch (Escena o Bosquejo).

Un sketch en teoría es un dibujo rápido o bosquejo de guía
general que no tiene porque tener muchos detalles y que
reproduce un concepto, idea, o generalidad de un proyecto de
una manera muy sencilla. Por generalidad se realiza a mano con
lápiz y borrador por su facilidad en el momento de plasmar una
base o punto de partida.

Es un bosquejo estático en baja calidad de un diseño

Wireframe (Esquema de Pagina o Plano de Pantalla)

Un Wireframe o Prototipo no es más que un boceto donde se
representa visualmente, de una forma muy sencilla y
esquemática la estructura de una página web.

Es una representación estática en baja calidad de un diseño.

Diseño de Interfaces ARL | UAGRM

Definiciones

Mockup (Maqueta o Bosquejo en Español).

Es un modelo a escala o tamaño real de un diseño o un dispositivo,
utilizado para la demostración, evaluación del diseño, promoción, y para
otros fines.

Prototipo
Representación navegable del producto final. La calidad pueda variar
entre media y alta.

Simula la interacción interfaz de usuario y debe permitir que el usuario:

– Experimente interactuando con la interfaz y contenido del proyecto.

– Pruebe las principales interacciones de una manera similar al producto final.

El entregable es un HTML, PPT, Animación o formato navegable.

Diseño de Interfaces ARL | UAGRM

Diferencia entre SKETCH, MOCKUP, WIREFRAME Y PROTOTIPO

Sketch: Es un bosquejo estático en baja Wireframe: Es una representación estática en baja

calidad de un diseño. calidad de un diseño. Considere a los Wireframes
Entregable en una imagen, o un papel. como la columna vertebral de su diseño.
Entregable en una imagen

Prototipo: Representación navegable del producto

Mockup: Representación estática de final. La calidad pueda variar entre media y alta.
un diseño en calidad media o alta. El entregable es un HTML, PPT, Animación o formato
Entregable en una imagen. navegable.
Diseño de Interfaces ARL | UAGRM

OJBETIVO
de los
SKETCH, MOCKUP, WIREFRAME Y PROTOTIPO

El objetivo de estos es definir el

contenido y la posición de los diversos
bloques de tu aplicación de escritorio o
web. Esto incluye menús de navegación,
bloques de contenido, etc.
Diseño de Interfaces ARL | UAGRM

Software

El software para el Diseño de Interfaces, puede ser de pago o gratis, a

continuación algunos ejemplos:

De pago Gratis

OmniGraffle Mockflow

Balsamiq Gliffy

InDesign Pencil Project

Axure Moqups
ARL | UAGRM