Prototipos

67 %
33 %
Information about Prototipos
Design

Published on May 1, 2014

Author: gemafuente

Source: slideshare.net

Prototipos 2014 1 gemafuentesanchez@gmail.com

Prototipos 2014gemafuentesanchez@gmail.com 2

Prototipos 2014gemafuentesanchez@gmail.com 3 Representación esquemática que muestra el contenido y comportamiento de un sitio web. Herramienta de comunicación, discusión y test. Focalizada en la AI Permite testar e introducir mejoras en fases tempranas.

C O M U N I C A C I Ó N D I S E Ñ O T E S T gemafuentesanchez@gmail.com 2014 4 Objetivos

Comunicación 2014gemafuentesanchez@gmail.com 5

Comunicación 2014gemafuentesanchez@gmail.com 6 Entre todo el equipo Con los clientes Ideas abstractas sean concretas, visibles y testables. Fomentan la iteratividad. Mejoran la calidad, claridad y la completitud de las especificaciones funcionales del sistema.

Diseño / desarrollo 2014gemafuentesanchez@gmail.com 7

Diseño y desarrollo 2014gemafuentesanchez@gmail.com 8 Definir funcionalidad, estructura y contenidos antes de empezar a programar y de crear el diseño visual. Dan soporte a los diseñadores a la hora de escoger entre varias alternativas. Permiten a los diseñadores explorar diversos conceptos del diseño antes de establecer los definitivos

Diseño y desarrollo 2014gemafuentesanchez@gmail.com 9 Dispositivos

Test 2014gemafuentesanchez@gmail.com 10

Test 2014gemafuentesanchez@gmail.com 11 Integrar activamente a los usuarios en el desarrollo. Evaluar el sistema desde las primeras fases del desarrollo (+ barato).

S K E T C H I N G W I R E F R A M E S M O K U P S S T O R Y B O A R D P R O T O T I P O F U N C I O N A L gemafuentesanchez@gmail.com 2014 12 Métodos de trabajo

Sketching 2014gemafuentesanchez@gmail.com 13

Sketching 2014gemafuentesanchez@gmail.com 14

Sketching 2014gemafuentesanchez@gmail.com 15 Boceto rápido e informal que se realiza en papel para transmitir una idea o concepto con rapidez y claridad.

Wireframe 2014gemafuentesanchez@gmail.com 16

Wireframe 2014gemafuentesanchez@gmail.com 17

Wireframe 2014gemafuentesanchez@gmail.com 18 Esquema visual de una página web, definiendo al detalle el contenido y estructura.

¿Qué información debe contener un Wireframe? 2014gemafuentesanchez@gmail.com 19 • Inventario de contenido. • Elementos de la página. • Etiquetado. • Layout. • Comportamiento.

Consejos 2014gemafuentesanchez@gmail.com 20 • No utilizar color (excepto links) • Textos (especificar caracteres max/min, que sea legible) • Poner el foco en la estabilidad y jerarquía • RIA • Explicarlos en persona

StoryBoard 2014gemafuentesanchez@gmail.com 21

StoryBoard 2014gemafuentesanchez@gmail.com 22 Secuencia de wireframes que muestran cómo se realiza una tarea.

MockUp 2014gemafuentesanchez@gmail.com 23

MockUp 2014gemafuentesanchez@gmail.com 24

MockUp 2014gemafuentesanchez@gmail.com 25 Prototipo de Alta Fidelidad destinado a comunicar/testar un aspecto concreto de la aplicación (diseño / funcionalidad)

Prototipo funcional 2014gemafuentesanchez@gmail.com 26

Prototipo funcional 2014gemafuentesanchez@gmail.com 27 Puede ser de alta o baja fidelidad pero su objetivo es mostrar /testar la funcionalidad del sistema

Alta fidelidad 2014gemafuentesanchez@gmail.com 28

S O F T W A R E P L A N T I L L A S gemafuentesanchez@gmail.com 2014 29 Herramientas

Software 2014gemafuentesanchez@gmail.com 30 Los profesionales • www.axure.com • www.omnigroup.com/omniGraffle/ Los apañaos (con versión gratis) • balsamiq.com/ • https://moqups.com/ • http://www.gliffy.com/ • http://www.mockflow.com/ • https://app.uxpin.com/ Específicos • https://popapp.in/ (móvil) • http://stripgenerator.com/strip/create (storyboards)

Plantillas 2014gemafuentesanchez@gmail.com 31 • http://konigi.com/tools/graph-paper • http://speckyboy.com/2013/04/29/30-wireframe- templates-and-toolkits/ • http://www.hachemuda.com/2012/01/5-cuadernos-de- papel-perfectos-para-prototipado-diseno-web-y-de- interfaces-de-usuario/ • http://developer.yahoo.com/ypatterns/about/stencils/

gemafuentesanchez@gmail.com 2014 32 Bibliografía W W W

www 2014gemafuentesanchez@gmail.com 33 Artículos • http://www.sidar.org/recur/desdi/traduc/es/visitable/maner/Prototipado.htm • http://olgacarreras.blogspot.com.es/2007/02/wireframes.html • http://designshack.net/articles/inspiration/close-photoshop-and-grab-a-pencil-the-lost-art- of-thumbnail-sketches/ • http://www.slideshare.net/rots/taller-de-wireframes-5540204 Recursos • http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/ • http://wireframes.tumblr.com/ • http://wireframes.linowski.ca/ Ejemplos • http://www.jeff.io/posts/sketches-wireframes-css Un Juego • http://dedesigntheweb.com/

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Prototipo - Wikipedia, la enciclopedia libre

Desarrollo Orientado a Prototipos. Un prototipo en software es un modelo del comportamiento del sistema que puede ser usado para entenderlo completamente o ...
Read more

UNDO PROTOTIPOS

Undo Prototipos cuenta con un equipo humano que tiene una amplia experiencia de más de 25 años en la fabricación de prototipos rápidos en diferentes ...
Read more

ABEL ESTEVEZ - PROTOTIPOS - ZIRCONIO | XING

XING ist Deutschlands größtes berufliches Netzwerk: Mit XING finden Sie Ihren Traumjob, knüpfen wertvolle Kontakte, tauschen Wissen aus – und haben ...
Read more

prototipos kai | food prototypes

pure cooking | Oliver Edelmann Christine M. Korner bilder | veranstaltungen
Read more

Sport prototipo - Wikipedia, la enciclopedia libre

Reglamentos de sport prototipos Antiguos. Grupo C, posteriormente renombrado como Prototipos de Gran Turismo o GTP para el Campeonato IMSA GT hasta 1992.
Read more

Prototipos - ElectroHobby

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...
Read more

Undo Prototipos - unser Angebot - Additively - your access ...

Undo Prototipos bietet folgende Services im 3D-Druck/AM an: Binder Jetting, Fused Deposition Modeling, Laser Sintering, Photopolymer Jetting, Stereolithography
Read more

Prototipos E2 RFEdA o SuperCrossCar

Información acerca de Prototipos E2 RFEdA o SuperCrossCar, turismos con motor de moto y propulsión a las ruedas traseras
Read more

PROTOTIPADO - SIDAR: Accesibilidad y adaptabilidad en la ...

Los prototipos son fácilmente modificables y prescindibles El prototipado mejora la relación entre desarrolladores y usuarios Los usuarios obtienen ...
Read more

Esteban Flores Arques - Prototipos - Frape Behr | XING

XING ist Deutschlands größtes berufliches Netzwerk: Mit XING finden Sie Ihren Traumjob, knüpfen wertvolle Kontakte, tauschen Wissen aus – und haben ...
Read more