SlideShare une entreprise Scribd logo
1  sur  8
SKETCHES, WI
REFRAMES Y
PROTOTIPOS
ABRIL 2012
DILEMA
Muchos diseñadores prefieren pasar de idea a prototipo, la
intención es llegar a probar la premisa más rápido. Sin
embargo en el camino se pierde mucha comunicación y el
proceso puede terminar siendo más tardado.


Cada diseñador encuentra el workflow más efectivo.
Encuentra el tuyo y trabaja en ese sentido.
SKETCHES
La intención del sketch es separar el diseño del proceso de
creación.
El ejercicio de sketching es flexible y permite ir formando
una idea de cómo queremos que sea nuestro sitio pero no
intenta establecer cómo será gráficamente al estar
terminado.
SKETCHES
Tus sketches deben ser:
•   Rápidos
•   Bajo demanda
•   Baratos, con el material que tengas a la mano.
•   Desechables
•   Abundantes, que no existan aislados
•   Claros y con vocabulario común
•   Fluidos
•   Con poco detalle, conceptuales
•   Claros al comunicar su intención
•   Exploraciones, más como un ejercicio de experimentación
•   Ambiguos, no te preocupes por el detalle
WIREFRAMES
Un wireframe es una guía visual que sugiere cierta estructura
al sitio, así como la relación entre unas páginas y otras.
Su propósito es comunicar y explorar los conceptos que
salen del proceso de sketching. Aquí se establecen los
conceptos que queremos mantener durante el diseño de la
interfaz.


“For me, wireframes act as a form of thinking device for the
setting and exploration of a given problem space”
Will Evans, UXMAG
PROTOTIPOS
Los diseños no son finales, pero contienen el grupo de ideas
que queremos lograr. Al hacer prototipos comenzamos a
refinar y ejemplificar.


Con el refinamiento de los wirefames obtenemos más
claridad en los requerimientos y restricciones al proyecto. Al
generar un prototipo podemos comenzar a probar las ideas
que tenemos de manera abstracta en nuestros sketches y
wireframes.
PROTOTIPOS
Nuestros prototipos deben ser:
• Rápidos, que sólo requieran un esfuerzo mínimo de
  desarrollo
• Baratos
• Claros y con un vocabulario común
• Detallados, deben incluir contenido e interactividad.
• Refinados lo apropiado, casi como la aplicación real
• Validados, aunque aún requiere ajustes, un prototipo debe
  ser la presentación de la idea de manera práctica.
WORKFLOW

Contenu connexe

Similaire à Diseño web sketches, wireframes y prototipos

Principios de diseño de código orientado a objetos SOLID
Principios de diseño de código orientado a objetos SOLIDPrincipios de diseño de código orientado a objetos SOLID
Principios de diseño de código orientado a objetos SOLIDLuis Alexander Aldazabal Gil
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeJorge Galindo Cruces
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframebetabeers
 
Patrones de diseño
Patrones de diseñoPatrones de diseño
Patrones de diseñoaleja0940
 
Dos gatos en el saco
Dos gatos en el sacoDos gatos en el saco
Dos gatos en el sacoLizette Heres
 
01. Prototipado rápido: teoría
01. Prototipado rápido: teoría01. Prototipado rápido: teoría
01. Prototipado rápido: teoríaAnalía Basualdo
 
Taller UX: Prototipado rápido
Taller UX: Prototipado rápidoTaller UX: Prototipado rápido
Taller UX: Prototipado rápidoIxDA Mendoza
 
Usabilidad y Experiencia de Usuario
Usabilidad y Experiencia de UsuarioUsabilidad y Experiencia de Usuario
Usabilidad y Experiencia de UsuarioWorkshop Digital
 
Introducción a los patrones de diseño
Introducción a los patrones de diseñoIntroducción a los patrones de diseño
Introducción a los patrones de diseñoSoftware Guru
 
Sesion02_DW.pdf
Sesion02_DW.pdfSesion02_DW.pdf
Sesion02_DW.pdfUSAT
 
Sesion02_DW.pdf
Sesion02_DW.pdfSesion02_DW.pdf
Sesion02_DW.pdfUSAT
 
12-150203140754-conversion-gate02.pptx
12-150203140754-conversion-gate02.pptx12-150203140754-conversion-gate02.pptx
12-150203140754-conversion-gate02.pptxGonzaloMartinezSilve
 
Diseño de aplicaciones para desarrolladores
Diseño de aplicaciones para desarrolladoresDiseño de aplicaciones para desarrolladores
Diseño de aplicaciones para desarrolladoresJavier Gala
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveAntonRoMX
 
Prototipado
PrototipadoPrototipado
Prototipadokamui002
 

Similaire à Diseño web sketches, wireframes y prototipos (20)

Principios de diseño de código orientado a objetos SOLID
Principios de diseño de código orientado a objetos SOLIDPrincipios de diseño de código orientado a objetos SOLID
Principios de diseño de código orientado a objetos SOLID
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframe
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframe
 
Pixel Perfect Web Design.
Pixel Perfect Web Design.Pixel Perfect Web Design.
Pixel Perfect Web Design.
 
Patrones de diseño
Patrones de diseñoPatrones de diseño
Patrones de diseño
 
Dos gatos en el saco
Dos gatos en el sacoDos gatos en el saco
Dos gatos en el saco
 
01. Prototipado rápido: teoría
01. Prototipado rápido: teoría01. Prototipado rápido: teoría
01. Prototipado rápido: teoría
 
Taller UX: Prototipado rápido
Taller UX: Prototipado rápidoTaller UX: Prototipado rápido
Taller UX: Prototipado rápido
 
Day01
Day01Day01
Day01
 
00 Sketching
00 Sketching00 Sketching
00 Sketching
 
U5.pptx
U5.pptxU5.pptx
U5.pptx
 
Usabilidad y Experiencia de Usuario
Usabilidad y Experiencia de UsuarioUsabilidad y Experiencia de Usuario
Usabilidad y Experiencia de Usuario
 
Introducción a los patrones de diseño
Introducción a los patrones de diseñoIntroducción a los patrones de diseño
Introducción a los patrones de diseño
 
Sesion02_DW.pdf
Sesion02_DW.pdfSesion02_DW.pdf
Sesion02_DW.pdf
 
Sesion02_DW.pdf
Sesion02_DW.pdfSesion02_DW.pdf
Sesion02_DW.pdf
 
12-150203140754-conversion-gate02.pptx
12-150203140754-conversion-gate02.pptx12-150203140754-conversion-gate02.pptx
12-150203140754-conversion-gate02.pptx
 
Diseño de aplicaciones para desarrolladores
Diseño de aplicaciones para desarrolladoresDiseño de aplicaciones para desarrolladores
Diseño de aplicaciones para desarrolladores
 
12.diseño basado en patrones
12.diseño basado en patrones12.diseño basado en patrones
12.diseño basado en patrones
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web Responsive
 
Prototipado
PrototipadoPrototipado
Prototipado
 

Plus de Celeste North

[Design Ignite] MX + NL = <3
[Design Ignite] MX + NL = <3[Design Ignite] MX + NL = <3
[Design Ignite] MX + NL = <3Celeste North
 
Women Entrepreneurship Day Spain 2016
Women Entrepreneurship Day Spain 2016Women Entrepreneurship Day Spain 2016
Women Entrepreneurship Day Spain 2016Celeste North
 
Cómo hacer un buen pitch
Cómo hacer un buen pitchCómo hacer un buen pitch
Cómo hacer un buen pitchCeleste North
 
Emprender como una forma de vida
Emprender como una forma de vidaEmprender como una forma de vida
Emprender como una forma de vidaCeleste North
 
Introduction to Chile
Introduction to ChileIntroduction to Chile
Introduction to ChileCeleste North
 
Tener una idea es fácil, ejecutar es el reto
Tener una idea es fácil, ejecutar es el retoTener una idea es fácil, ejecutar es el reto
Tener una idea es fácil, ejecutar es el retoCeleste North
 
Conectando los puntos, creando empresas de innovación
Conectando los puntos, creando empresas de innovaciónConectando los puntos, creando empresas de innovación
Conectando los puntos, creando empresas de innovaciónCeleste North
 
Nuflick en The Next Web
Nuflick en The Next WebNuflick en The Next Web
Nuflick en The Next WebCeleste North
 
De idea a startup, lecciones aprendidas
De idea a startup, lecciones aprendidasDe idea a startup, lecciones aprendidas
De idea a startup, lecciones aprendidasCeleste North
 
Search engine optimization
Search engine optimizationSearch engine optimization
Search engine optimizationCeleste North
 
Lean Startup: Construye, mide, aprende.
Lean Startup: Construye, mide, aprende.Lean Startup: Construye, mide, aprende.
Lean Startup: Construye, mide, aprende.Celeste North
 
Así que quieres un startup
Así que quieres un startupAsí que quieres un startup
Así que quieres un startupCeleste North
 
Sesion 11 - Customer Development
Sesion 11 - Customer DevelopmentSesion 11 - Customer Development
Sesion 11 - Customer DevelopmentCeleste North
 
[Ignige] Cine Guerrillero
[Ignige] Cine Guerrillero[Ignige] Cine Guerrillero
[Ignige] Cine GuerrilleroCeleste North
 

Plus de Celeste North (20)

[Design Ignite] MX + NL = <3
[Design Ignite] MX + NL = <3[Design Ignite] MX + NL = <3
[Design Ignite] MX + NL = <3
 
Women Entrepreneurship Day Spain 2016
Women Entrepreneurship Day Spain 2016Women Entrepreneurship Day Spain 2016
Women Entrepreneurship Day Spain 2016
 
Design Sprint
Design SprintDesign Sprint
Design Sprint
 
Design with purpose
Design with purposeDesign with purpose
Design with purpose
 
Cómo hacer un buen pitch
Cómo hacer un buen pitchCómo hacer un buen pitch
Cómo hacer un buen pitch
 
Emprender como una forma de vida
Emprender como una forma de vidaEmprender como una forma de vida
Emprender como una forma de vida
 
Introduction to Chile
Introduction to ChileIntroduction to Chile
Introduction to Chile
 
NuFlick
NuFlickNuFlick
NuFlick
 
Tener una idea es fácil, ejecutar es el reto
Tener una idea es fácil, ejecutar es el retoTener una idea es fácil, ejecutar es el reto
Tener una idea es fácil, ejecutar es el reto
 
Conectando los puntos, creando empresas de innovación
Conectando los puntos, creando empresas de innovaciónConectando los puntos, creando empresas de innovación
Conectando los puntos, creando empresas de innovación
 
Nuflick en The Next Web
Nuflick en The Next WebNuflick en The Next Web
Nuflick en The Next Web
 
Nuflick
NuflickNuflick
Nuflick
 
De idea a startup, lecciones aprendidas
De idea a startup, lecciones aprendidasDe idea a startup, lecciones aprendidas
De idea a startup, lecciones aprendidas
 
Search engine optimization
Search engine optimizationSearch engine optimization
Search engine optimization
 
Lean Startup: Construye, mide, aprende.
Lean Startup: Construye, mide, aprende.Lean Startup: Construye, mide, aprende.
Lean Startup: Construye, mide, aprende.
 
Benchmark
BenchmarkBenchmark
Benchmark
 
Así que quieres un startup
Así que quieres un startupAsí que quieres un startup
Así que quieres un startup
 
NuFlick
NuFlick NuFlick
NuFlick
 
Sesion 11 - Customer Development
Sesion 11 - Customer DevelopmentSesion 11 - Customer Development
Sesion 11 - Customer Development
 
[Ignige] Cine Guerrillero
[Ignige] Cine Guerrillero[Ignige] Cine Guerrillero
[Ignige] Cine Guerrillero
 

Diseño web sketches, wireframes y prototipos

  • 2. DILEMA Muchos diseñadores prefieren pasar de idea a prototipo, la intención es llegar a probar la premisa más rápido. Sin embargo en el camino se pierde mucha comunicación y el proceso puede terminar siendo más tardado. Cada diseñador encuentra el workflow más efectivo. Encuentra el tuyo y trabaja en ese sentido.
  • 3. SKETCHES La intención del sketch es separar el diseño del proceso de creación. El ejercicio de sketching es flexible y permite ir formando una idea de cómo queremos que sea nuestro sitio pero no intenta establecer cómo será gráficamente al estar terminado.
  • 4. SKETCHES Tus sketches deben ser: • Rápidos • Bajo demanda • Baratos, con el material que tengas a la mano. • Desechables • Abundantes, que no existan aislados • Claros y con vocabulario común • Fluidos • Con poco detalle, conceptuales • Claros al comunicar su intención • Exploraciones, más como un ejercicio de experimentación • Ambiguos, no te preocupes por el detalle
  • 5. WIREFRAMES Un wireframe es una guía visual que sugiere cierta estructura al sitio, así como la relación entre unas páginas y otras. Su propósito es comunicar y explorar los conceptos que salen del proceso de sketching. Aquí se establecen los conceptos que queremos mantener durante el diseño de la interfaz. “For me, wireframes act as a form of thinking device for the setting and exploration of a given problem space” Will Evans, UXMAG
  • 6. PROTOTIPOS Los diseños no son finales, pero contienen el grupo de ideas que queremos lograr. Al hacer prototipos comenzamos a refinar y ejemplificar. Con el refinamiento de los wirefames obtenemos más claridad en los requerimientos y restricciones al proyecto. Al generar un prototipo podemos comenzar a probar las ideas que tenemos de manera abstracta en nuestros sketches y wireframes.
  • 7. PROTOTIPOS Nuestros prototipos deben ser: • Rápidos, que sólo requieran un esfuerzo mínimo de desarrollo • Baratos • Claros y con un vocabulario común • Detallados, deben incluir contenido e interactividad. • Refinados lo apropiado, casi como la aplicación real • Validados, aunque aún requiere ajustes, un prototipo debe ser la presentación de la idea de manera práctica.