SlideShare ist ein Scribd-Unternehmen logo
1 von 3
Downloaden Sie, um offline zu lesen
Wireframing
¿Qué es?
Modelo que representa un diseño de un sistema con “baja fidelidad”.
Trata de mostrar de manera esquemática:
La principal información y contenido (Que).
La disposición y estructura de la información (Donde).
Una descripción y una visualización básica de la interacción del usuario con el sistema.
(Como).
Deberían de ser rápidos y fáciles de crear.
Se centraran en la representación del sistema pero no en el diseño (colores, estética,
materiales…) incluirán las partes mínimas del funcionamiento y apariencia del sistema para ser
representativos de este pero sin entrar en detalles que lleve demasiado tiempo representar.
En una frase:Representación esquemática de un sistema centrado en la información mínima
relevante, la estructura mínima representativa y la iteración principal del usuario.
Palabras Clave:Dummy, preliminar, estático, blanco y negro, rápido de crear…
Escenarios de uso
Creación y/o diseño de una idea o producto. El hacer un wireframe nos ayuda a
pensar, aclarar conceptos, visualizar y contextualizar las ideas…
Comunicación interna para el equipo de desarrollo. Es una gran herramienta para que
todos los participantes en el desarrollo de un producto/proyecto tengan una visión
general del sistema y de esquema básico de este.
Herramientas
Mockingbird
Mockflow
Framebox
Lovely Charts
Me gustaría añadir una que utilizamos en mi trabajo (utilizamos tecnologías Winforms, WPF y
Silverlight) y que es especialmente útil para las dos últimas. SketchFlowque forma parte
deMicrosoftExpressionBlend (Ahora simplemente Expresión) de que hablare más adelante.
Tiene la ventaja de que para la creación del wireframe dispone de controles que presenta una
mínima iteración (controles que se ocultan al pulsar botones …) .
Mockup
¿Qué es?
Representación de fidelidad media-alta del diseño de un sistema.
Representa la estructura de la información, visualización de contenido y muestra las
funcionalidades básicas de manera estática.
Un mockup trata de mostrar el diseño final del sistema (maqueta, aplicación o web simple).
Mientras que un wireframe se centra en el esqueleto de un sistema el Mockup lo hace más en
el diseño (aunque no sea final) de este.
El diseño no tiene por qué referirse a diseño físico ni grafico un ejemplo que utilizo en mí día a
día son mockups de servicios distribuidos (El UI y el BS son realizados por diferentes equipos).
Si estoy programando/diseñando un interfaz de usuario cuya lógica de negocio viene de un
servicio (por ejemplo un servicio web) utilizamos un servicio que aunque ofrece todas las
funciones realmente no hace nada solo devuelve datos estáticos.
De esta manera se puede desarrollar utilizando las llamadas reales pero sin tener que
configurar, acceder etc al servicio y sin depender del estado de finalización de este.
Escenarios de uso
Demostraciones del producto/sistema a posibles clientes potenciales.
Evaluación por parte del equipo de desarrollo o de clientes.
Aunque no presente funcionalidad como representan bastante fidedignamente (o totalmente)
el diseño del sistema es una muy buena herramienta para estos dos escenarios.
Herramientas
En mi investigación para este caso me he encontrado con que las herramientas recomendadas
para crear mockups son prácticamente las mismas que para wireframes.
Estos son así en algún caso por la confusión entre los dos casos (que a veces se pueden
solapar).
Y porque muchas de ellas permiten además de crear un esqueleto añadir una mínima iteración
y navegabilidad.
Dicho esto añadiré algún ejemplo centrado en mi campo (software) que considero que se
acerca más fidedignamente:
Visual Studio, Eclipse, Xamarin. Aunque son entornos de desarrollo con una mínima
idea de programación se pueden hacer aplicaciones “tontas” pero que incluyan
navegabilidad (pulsar botones que muestren cosas,menús,grids de datos).
App inventor para Android. Permite crear aplicaciones Android sin saber programar,
también es muy útil para crear mocukps de estas.
En el caso de productos físicos (y como ya se comentó en la teoría de este tema) una
impresora 3d permitiría crear maquetas.
MicrosoftExpressionBlend De la que hablare en el siguiente apartado.

Me gustaría añadir tres experiencias personales en este ámbito:
Microsoft ExpressionBlend
MicrosoftExpressionBlend junto con SketchFlowpermite hacer wireframes primero después
darles diseño real y navegabilidad con Blend.
Esta herramienta de hecho está pensada para que los diseñadores gráficos desarrollen un
interfaz que luego se conectara con la implementación de este, la idea es separar las labores
de diseño de las de programación. De hecho no está orientada a programadores sino a
diseñadores.
Raspberry pi y Arduino
Con un concepto parecido a arduino está la raspberry pi.
Es básicamente un mini-ordenador de bajo coste creado para educación pero utilizado
ampliamente en muchos tipos de proyectos. De hecho muchas veces se utiliza en combinación
con arduino usando este para control de dispositivos hardware y el primero para software de
más alto nivel.
Bibliografía:
http://en.wikipedia.org/wiki/Mockup
http://en.wikipedia.org/wiki/Website_wireframe
http://creately.com/diagram-type/article/have-you-confused-wireframes-mockups
http://designmodo.com/wireframing-prototyping-mockuping/
http://itbaf.com/blog/2013/02/18/wireframes-prototipos-mock-ups-cual-es-la-diferencia/

Weitere ähnliche Inhalte

Andere mochten auch (20)

Metodologías01
Metodologías01Metodologías01
Metodologías01
 
Prototipado
PrototipadoPrototipado
Prototipado
 
Grupo e product backlog
Grupo e   product backlog Grupo e   product backlog
Grupo e product backlog
 
Destrucción de la estrella de la muerte
Destrucción de la estrella de la muerteDestrucción de la estrella de la muerte
Destrucción de la estrella de la muerte
 
Priorizacion2
Priorizacion2Priorizacion2
Priorizacion2
 
Como las metodologías agiles surgen de manera natural
Como las metodologías agiles surgen de manera naturalComo las metodologías agiles surgen de manera natural
Como las metodologías agiles surgen de manera natural
 
Tecnicas de modelado y metodologias para aplicaciones Web
Tecnicas de modelado y metodologias para aplicaciones WebTecnicas de modelado y metodologias para aplicaciones Web
Tecnicas de modelado y metodologias para aplicaciones Web
 
PDPR
PDPRPDPR
PDPR
 
Encuesta
EncuestaEncuesta
Encuesta
 
Entregable
EntregableEntregable
Entregable
 
Viaje
ViajeViaje
Viaje
 
Lean
LeanLean
Lean
 
Metodologías01
Metodologías01Metodologías01
Metodologías01
 
Pbc #surfdesign
Pbc #surfdesignPbc #surfdesign
Pbc #surfdesign
 
Priorizacion
PriorizacionPriorizacion
Priorizacion
 
Análisis y diseño de aplicaciones web con un caso de uso
Análisis y diseño de aplicaciones web con un caso de usoAnálisis y diseño de aplicaciones web con un caso de uso
Análisis y diseño de aplicaciones web con un caso de uso
 
Modelo entidad relación extendido
Modelo entidad relación extendidoModelo entidad relación extendido
Modelo entidad relación extendido
 
Ficha persona
Ficha personaFicha persona
Ficha persona
 
ANÁLISIS Y DISEÑO DE APLICACIONES WEB CON UN CASO DE USO
ANÁLISIS Y DISEÑO DE APLICACIONES WEB CON UN CASO DE USOANÁLISIS Y DISEÑO DE APLICACIONES WEB CON UN CASO DE USO
ANÁLISIS Y DISEÑO DE APLICACIONES WEB CON UN CASO DE USO
 
Modelado y metodologias para aplicaciones web
Modelado y metodologias para aplicaciones webModelado y metodologias para aplicaciones web
Modelado y metodologias para aplicaciones web
 

Ähnlich wie Wireframing y mockup

La arquitectura de 41 vistas
La arquitectura de 41 vistasLa arquitectura de 41 vistas
La arquitectura de 41 vistaszurda21
 
2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcción2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcciónkamui002
 
Curso de creación de Dashboards Open Source
Curso de creación de Dashboards Open SourceCurso de creación de Dashboards Open Source
Curso de creación de Dashboards Open SourceStratebi
 
Manual Simulación con Arena.
Manual Simulación con Arena.Manual Simulación con Arena.
Manual Simulación con Arena.Roberto Dominguez
 
Tema 2.UML parte 1.ppt
Tema 2.UML parte 1.pptTema 2.UML parte 1.ppt
Tema 2.UML parte 1.pptRafaelAcedo2
 
210452 arquitectura-de-software-adrian-lasso
210452 arquitectura-de-software-adrian-lasso210452 arquitectura-de-software-adrian-lasso
210452 arquitectura-de-software-adrian-lassoEpmaps q
 
Patrones de diseño (tarea)
Patrones de diseño (tarea)Patrones de diseño (tarea)
Patrones de diseño (tarea)Javier Chávez
 
Diseño de Interfaz web
Diseño de Interfaz webDiseño de Interfaz web
Diseño de Interfaz webAlexis Morillo
 
Sotfware de prototipado para la arquitectura de la información: funcionalidad...
Sotfware de prototipado para la arquitectura de la información: funcionalidad...Sotfware de prototipado para la arquitectura de la información: funcionalidad...
Sotfware de prototipado para la arquitectura de la información: funcionalidad...Lluís Codina
 
Arquitecturas
ArquitecturasArquitecturas
Arquitecturasenlinea70
 
Software de diagramación
Software de diagramaciónSoftware de diagramación
Software de diagramaciónRonal Ricem
 

Ähnlich wie Wireframing y mockup (20)

La arquitectura de 41 vistas
La arquitectura de 41 vistasLa arquitectura de 41 vistas
La arquitectura de 41 vistas
 
2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcción2.1 Diseño, prototipo y construcción
2.1 Diseño, prototipo y construcción
 
Curso de creación de Dashboards Open Source
Curso de creación de Dashboards Open SourceCurso de creación de Dashboards Open Source
Curso de creación de Dashboards Open Source
 
Manual Simulación con Arena.
Manual Simulación con Arena.Manual Simulación con Arena.
Manual Simulación con Arena.
 
Tema 2.UML parte 1.ppt
Tema 2.UML parte 1.pptTema 2.UML parte 1.ppt
Tema 2.UML parte 1.ppt
 
210452 arquitectura-de-software-adrian-lasso
210452 arquitectura-de-software-adrian-lasso210452 arquitectura-de-software-adrian-lasso
210452 arquitectura-de-software-adrian-lasso
 
Patrones de diseño (tarea)
Patrones de diseño (tarea)Patrones de diseño (tarea)
Patrones de diseño (tarea)
 
9.diseño de la arquitectura
9.diseño de la arquitectura9.diseño de la arquitectura
9.diseño de la arquitectura
 
Diseño de Interfaz web
Diseño de Interfaz webDiseño de Interfaz web
Diseño de Interfaz web
 
Uml
UmlUml
Uml
 
Sistema distribuido
Sistema distribuido Sistema distribuido
Sistema distribuido
 
Deber analisis
Deber analisisDeber analisis
Deber analisis
 
Autocad
AutocadAutocad
Autocad
 
MVC.ppt
MVC.pptMVC.ppt
MVC.ppt
 
Framework
FrameworkFramework
Framework
 
Generalidades de visual basic 8
Generalidades de visual basic 8Generalidades de visual basic 8
Generalidades de visual basic 8
 
Introduccion a la ingenieria de software
Introduccion a la ingenieria de softwareIntroduccion a la ingenieria de software
Introduccion a la ingenieria de software
 
Sotfware de prototipado para la arquitectura de la información: funcionalidad...
Sotfware de prototipado para la arquitectura de la información: funcionalidad...Sotfware de prototipado para la arquitectura de la información: funcionalidad...
Sotfware de prototipado para la arquitectura de la información: funcionalidad...
 
Arquitecturas
ArquitecturasArquitecturas
Arquitecturas
 
Software de diagramación
Software de diagramaciónSoftware de diagramación
Software de diagramación
 

Wireframing y mockup

  • 1. Wireframing ¿Qué es? Modelo que representa un diseño de un sistema con “baja fidelidad”. Trata de mostrar de manera esquemática: La principal información y contenido (Que). La disposición y estructura de la información (Donde). Una descripción y una visualización básica de la interacción del usuario con el sistema. (Como). Deberían de ser rápidos y fáciles de crear. Se centraran en la representación del sistema pero no en el diseño (colores, estética, materiales…) incluirán las partes mínimas del funcionamiento y apariencia del sistema para ser representativos de este pero sin entrar en detalles que lleve demasiado tiempo representar. En una frase:Representación esquemática de un sistema centrado en la información mínima relevante, la estructura mínima representativa y la iteración principal del usuario. Palabras Clave:Dummy, preliminar, estático, blanco y negro, rápido de crear… Escenarios de uso Creación y/o diseño de una idea o producto. El hacer un wireframe nos ayuda a pensar, aclarar conceptos, visualizar y contextualizar las ideas… Comunicación interna para el equipo de desarrollo. Es una gran herramienta para que todos los participantes en el desarrollo de un producto/proyecto tengan una visión general del sistema y de esquema básico de este. Herramientas Mockingbird Mockflow Framebox Lovely Charts Me gustaría añadir una que utilizamos en mi trabajo (utilizamos tecnologías Winforms, WPF y Silverlight) y que es especialmente útil para las dos últimas. SketchFlowque forma parte deMicrosoftExpressionBlend (Ahora simplemente Expresión) de que hablare más adelante. Tiene la ventaja de que para la creación del wireframe dispone de controles que presenta una mínima iteración (controles que se ocultan al pulsar botones …) . Mockup ¿Qué es? Representación de fidelidad media-alta del diseño de un sistema. Representa la estructura de la información, visualización de contenido y muestra las funcionalidades básicas de manera estática. Un mockup trata de mostrar el diseño final del sistema (maqueta, aplicación o web simple). Mientras que un wireframe se centra en el esqueleto de un sistema el Mockup lo hace más en el diseño (aunque no sea final) de este. El diseño no tiene por qué referirse a diseño físico ni grafico un ejemplo que utilizo en mí día a día son mockups de servicios distribuidos (El UI y el BS son realizados por diferentes equipos). Si estoy programando/diseñando un interfaz de usuario cuya lógica de negocio viene de un servicio (por ejemplo un servicio web) utilizamos un servicio que aunque ofrece todas las funciones realmente no hace nada solo devuelve datos estáticos.
  • 2. De esta manera se puede desarrollar utilizando las llamadas reales pero sin tener que configurar, acceder etc al servicio y sin depender del estado de finalización de este. Escenarios de uso Demostraciones del producto/sistema a posibles clientes potenciales. Evaluación por parte del equipo de desarrollo o de clientes. Aunque no presente funcionalidad como representan bastante fidedignamente (o totalmente) el diseño del sistema es una muy buena herramienta para estos dos escenarios. Herramientas En mi investigación para este caso me he encontrado con que las herramientas recomendadas para crear mockups son prácticamente las mismas que para wireframes. Estos son así en algún caso por la confusión entre los dos casos (que a veces se pueden solapar). Y porque muchas de ellas permiten además de crear un esqueleto añadir una mínima iteración y navegabilidad. Dicho esto añadiré algún ejemplo centrado en mi campo (software) que considero que se acerca más fidedignamente: Visual Studio, Eclipse, Xamarin. Aunque son entornos de desarrollo con una mínima idea de programación se pueden hacer aplicaciones “tontas” pero que incluyan navegabilidad (pulsar botones que muestren cosas,menús,grids de datos). App inventor para Android. Permite crear aplicaciones Android sin saber programar, también es muy útil para crear mocukps de estas. En el caso de productos físicos (y como ya se comentó en la teoría de este tema) una impresora 3d permitiría crear maquetas. MicrosoftExpressionBlend De la que hablare en el siguiente apartado. Me gustaría añadir tres experiencias personales en este ámbito: Microsoft ExpressionBlend MicrosoftExpressionBlend junto con SketchFlowpermite hacer wireframes primero después darles diseño real y navegabilidad con Blend. Esta herramienta de hecho está pensada para que los diseñadores gráficos desarrollen un interfaz que luego se conectara con la implementación de este, la idea es separar las labores de diseño de las de programación. De hecho no está orientada a programadores sino a diseñadores. Raspberry pi y Arduino Con un concepto parecido a arduino está la raspberry pi. Es básicamente un mini-ordenador de bajo coste creado para educación pero utilizado ampliamente en muchos tipos de proyectos. De hecho muchas veces se utiliza en combinación con arduino usando este para control de dispositivos hardware y el primero para software de más alto nivel.