3Mayo2023 Taller construcción de Prototipos.pptx

Bienvenidos
Tecnólogo en Análisis y Desarrollo de Software
FICHA 2591669
Instructora: Lina Jaramillo
Fecha: 3 de mayo 2023
Hora: 8:00 pm

Agenda
• Saludo
• Orientación Evidencias
• Taller sobre construcción
del prototipo del software
de acuerdo al análisis de
las características
funcionales y de calidad
• Dudas e inquietudes

Fase Planeación
Evidencia de conocimiento:
GA5-220501095-AA1-EV01 –
Taller sobre construcción del
prototipo del software de
acuerdo al análisis de las
características funcionales y de
calidad
EVIDENCIAS A TRABAJAR

Evidencia de conocimiento: GA5-220501095-AA1-EV01 –
Taller sobre construcción del prototipo del software de acuerdo al análisis de las
características funcionales y de calidad
Con base en los requerimientos funcionales del sistema y de calidad, en esta actividad se
proponen aspectos clave que se deben tener en cuenta para la construcción de
prototipos, también el aprendiz deberá utilizar algunas herramientas para apoyarse en la
elaboración del esquema de la funcionalidad. Adicionalmente, se introduce el tema de
calidad para lo cual deberá realizar una investigación corta respondiendo algunos
lineamientos establecidos en esta actividad.
Orientación Evidencia 1: Taller sobre construcción del prototipo
del software de acuerdo al análisis de las características funcionales y de calidad

Sección 1 - Taller Teniendo en cuenta las siguientes funcionalidades, elaborar el
diagrama de la funcionalidad, establecer colores y componentes a utilizar:
• Se desea elaborar una pantalla que permita validar la autenticidad de un
usuario.
• Se desea elaborar una pantalla que permita ingresar nombres, apellidos, cédula,
fecha de nacimiento de un usuario.
• Se desea dibujar una pantalla en donde se informe de posibles errores a un
usuario.
• Proponer la paleta de colores de los componentes anteriores utilizando como
máximo la combinación de tres colores: https://www.useit.es/blog/6-paletas-
de-colores-para-diseno-web

Sección 2 – Taller
Elabore una investigación corta usando los materiales disponibles en la biblioteca o
internet respecto a los
fundamentos de calidad de software seleccionando, al menos, tres fuentes que le
permitan resolver los siguientes
conceptos:
• Definición de calidad de software.
• ¿Cuál es el concepto de usabilidad en software?
• ¿Cuáles son los estándares de calidad de software?
• ¿Qué tecnologías existen para implementar calidad?

Fase Planeación
Evidencia de conocimiento:
GA5-220501095-AA1-EV02 -
Nociones de reglas de
usabilidad y accesibilidad en
aplicaciones independientes,
web
EVIDENCIAS A TRABAJAR

Leer detenidamente los conceptos y características definidas en el
componente formativo “Diseño y construcción de frontend”.
● Se deben conocer las reglas de usabilidad y accesibilidad.
● Describir cada una de las reglas.
● Diferenciar entre una aplicación independiente y una aplicación web.
● Describir las características de cada tipo de aplicación.
Actividad
Orientación Evidencia 2: Nociones de reglas de usabilidad y
accesibilidad en aplicaciones independientes, web

UX o experiencia de usuario (User experience )
• La experiencia que obtiene el usuario cuando interactúa con un
producto en condiciones particulares.
• «el conjunto de ideas, sensaciones y valoraciones del usuario
resultado de la interacción con un producto; es resultado de los
objetivos del usuario, las variables culturales y el diseño del interfaz».

Se trata de una disciplina que se enfoca en entender y mejorar la calidad de la
experiencia que tiene el usuario al utilizar un producto o servicio, incluyendo
aspectos como la facilidad de uso, la accesibilidad, la satisfacción, la eficiencia,
entre otros.
La experiencia de usuario se considera cada vez más importante en el
desarrollo de productos y servicios, ya que una buena experiencia puede
aumentar la satisfacción del usuario y la fidelidad a la marca, mientras que una
mala experiencia puede generar frustración y pérdida de clientes.
UX o experiencia de usuario (User experience )

Fases de desarrollo de un sitio web o aplicación
• En el desarrollo de productos y/o aplicaciones, ya sean para la web , como otro
tipo de aplicaciones informáticas, hay una serie de fases que conviene seguir,
aunque muchos profesionales, en función del tipo de proyecto pueden obviar
alguna o pueden hacer más o menos hincapié en alguna fase. De forma general
los pasos a seguir serán:
• Realización de un sketch
• Creación de un wireframe
• Un mockup
• y finalmente realizar un prototipo

Tipologías
Sketch: Dibujo a mano alzada con los elementos e ideas
básicas del diseño. Conceptos.
Wireframe: Ajuste de las composición básica del diseño
(reticula con formas básicas y espaciado). Layout.
Mockup: Incluye detalles relacionados con la apariencia
del producto final (color, tipografía, y elementos visuales
de diseño) aplicando guías de estilos.
———
Prototipado: Cualquier representación del producto para
pruebas. Puede tener diferentes formas de acabado
(papel/funcional…) [UXPinMockup]

¿Qué es un Sketch?
• Pensemos en el Sketch como un primer boceto que realizamos para un proyecto
digital que queremos crear. Son nuestros primeros trazos sobre una hoja de
papel.
• Actualmente pasamos buena parte de nuestro tiempo frente a un monitor, sin
embargo en medio de esta era digital, los mejores aliados de un diseñador de
páginas web o aplicaciones son herramientas mucho más sencillas y comunes,
nos referimos al lápiz y papel, una parte del proceso creativo que otros
diseñadores «no digitales» han estado utilizando desde siempre, dibujar.
• La clave para los buenos bocetos es simplemente dejarse llevar, jugar con
elementos del diseño como la forma en que los menús podrían aparecer, o cómo
hacer que aparezca una característica para una parte en particular del contenido.
Si hablamos con distintos diseñadores, la mayoría de ellos te dirán que una parte
enorme de su flujo de trabajo es esbozar en primer lugar cualquier idea que
puedan tener. Este proceso no tiene un trabajo conceptual muy extenso, prima la
creatividad, la experiencia y el deseo del diseñador.

¿Qué es un Sketch?
• El Sketch tiene que reflejar las ideas generales sobre el proyecto, debe de
responder entre otras cuestiones a :
• Donde pondremos los elementos más característicos como logos, etc.
• Dónde estará la zona de navegación
• Dónde se cargan los sistemas de ayuda para usuarios
• Se agregarán servicios de redes sociales
• Qué áreas de contenidos y que servicio queremos presentar en el proyecto

Wireframe
Diseño de alambre (en escala grises). Centrarse en espacios y organización
(layout low-fidelity). Aproximación para:
• Contenido: qué se quiere mostrar
• Cómo organizar la información: agrupación, espacios y distribución
• Identificar los elementos visuales más destacados
Posee los tamaños exactos del diseño, pero no se aplica apariencia final.
Estilo a lápiz y papel (como boceto), plantillas, o con herramientas (diseño
gráfico, de prototipado, presentación)
[UXPinWire]
Seminario: Prototipado. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu

Algunos consejos a la hora de crear un Wireframe
• Es importante tener en cuenta que los wireframes son guías de los principales elementos de navegación y
contenido de su página o aplicación y que el objetivo no es representar el diseño visual, por tanto;
• No utilizar colores. Se recomienda usar distintos tonos de grises si queremos hacer distinciones entre distintos
elementos.
• No utilizar imágenes ni iconografía. Las imágenes distraen de la tarea para la que sirve un wireframe, por
ejemplo, para indicar dónde se va a colocar una imagen y su tamaño, se suele poner una caja con una cruz
que lo cruce con el tamaño y la posición donde queremos situar la imagen
• Utilizar sólo una tipografía genérica, aunque se puede jugar con distintos tamaños para indicar diversas
cabeceras y los cambios en la jerarquía de la información de los textos de la página.
• Aunque wireframes difieren de unos a otros, los siguientes elementos suelen ser habituales cuando estamos
creando un wireframe para una página web.
• Logo
• Campo de búsqueda
• Cabeceras, incluyendo título de la página como el H1 y H2, subtítulos…
• Los sistemas de navegación, incluyendo navegación global y navegación local
• Contenido del cuerpo
• Botones de compartir
• Información de contacto
• Pie de página

Diagrama de Bloques. Nivel básico de información
de la estructura de alambre (uso de espacios y
organización general).
Caja gris. En grises para definir espacios.
Texto completado con “lorem ipsum” para
ajustar tamaños.
Hi-Fi Media. Incluye los elementos de contenido
(texto e imágenes)
Hi-Fi interacción. Incluye navegación entre
bocetos
[UXPinWire]

Herramientas para crear wireframes
• Gliffi Programa de dibujo online que tiene una utilidad para hacer wireframes,
tiene una ventaja y es que permite el trabajo colaborativo online y además
hace posible también realizar esquemas para crear los mapas web
• Cacoo es una herramienta de dibujo en línea fácil de usar que te permite
crear una variedad de diagramas, como mapas de sitio, wireframes y gráficos
de la red.
• Mockingbird También es un software basado en web para crear, y compartir
wireframes un sitio web o una aplicación. Este software está más especifico
para la creación de wireframes y permite el uso de rejillas de 960px
• Lumzy También basado en edición web, tiene la posibilidad de cargar
librerías, además permite crear acciones para botones y algunos otros
elementos.
• Framebox Se trata también de una herramienta web muy sencilla
• RWD Wireframes Interesante herramienta que permite hacer wireframes
sencillos pudiendo trabajar con ellos para crear web responsive

¿Qué es un MockUp?
• El Mockup o maqueta en castellano es una representación
más avanzada del diseño gráfico y comunicativo (desde una
visión de navegación y AI) de un proyecto.
• Hay dos escuelas de pensamiento que se diferencian en
como conciben la forma de crear un MockUp, aquellos que
creen que la maqueta debe representar el producto final
exactamente (alta fidelidad), y aquellos que ven la fase de
maqueta como más transitorio y no debe tomar demasiado
tiempo (media fidelidad).

• Podríamos decir que generalmente es, una composición gráfica
completa que ha utilizado el wireframe como plantilla
introduciendo todos los elementos gráficos y visuales,
convirtiéndose así en un modelo a escala de un producto que se
utiliza para demostrar y probar un diseño.
• El mockup es un medio de representación de la apariencia del
producto, y muestra los fundamentos de su funcionalidad. Los
MockUp incluyen los detalles visuales, tales como colores,
tipografía, etc., y son generalmente estáticas.
• Al observar un mockup, se debe tener una buena idea de cómo se
verá el producto final y una idea aproximada de cómo podría
funcionar (incluso si las funciones aún no se han desarrollado).

• Es importante distinguir un Mockup de un prototipo. Un
prototipo está destinado a funcionar, aunque sea
parcialmente, mientras que los Mockup no funcionan.
• Se componen de las imágenes en pantallas estáticas, sólo
«parecen» la interfaz de usuario real.

Herramientas para realizar MockUps
• Algunas webs donde podemos encontrar este tipo de recursos son:
• Freebiesbug– excelente recurso de elementos de interfaz de usuario y kits gratuitos para Photoshop e Ilustrador
• com +de 60 MockUps gratuitos
• La web com tiene una serie de interesantes recursos y consejos para esta herramienta.
• En Uxpin.com podemos encontrar Kit de interfaz de usuarioy iOS 8 Kit de interfaz de usuario (funciona para
Photoshop y Sketch).
• Línea 25– podemos encontrar una lista de los 35 sitios que ofrecen plantillas, patrones y kits de interfaz de
usuario para Photoshop
• com Aunque es un recurso para la creación de wireframes, merece la pena tenerlo en cuenta si vamos a usar
una herramienta de este tipo
• com de la misma forma que el recurso anterior, en este caso nos proporcionan plantillas para descargar que nos
permiten crear rejillas para diseños 960×12 en Photoshop, ilustrador, etc.
• I ♥ wireframes Página con multitud de recursos para wireframe y MockUps
• Otras herramientas
• https://placeit.net Web que te permite incluir la imagen de tu mockup en distintas pantallas,
móviles, tablets, etc., interesante para presentaciones

Prototipos
• Mientras que los wireframes son un «esbozo» , los
MockUps muestran la «sensación», la textura del diseño, es
el prototipo el que da vida a la «experiencia» detrás «de la
experiencia del usuario».

¿Qué es un prototipo?
• Un prototipo es un modelo (representación, demostración o
simulación) fácilmente ampliable y modificable de un sistema
planificado, probablemente incluyendo su interfaz y su
funcionalidad de entradas y salidas.
• El prototipo es una representación de alto detalle de un proyecto
digital. En ella se puede identificar y operar:
• Sistemas de navegación
• Paleta de colores aplicada
• Iconografía
• Experiencia de usuario
• Servicios de ayuda, búsqueda, interacción.
• Otros elementos del proyecto

• Los prototipos son navegables, por lo que sirven para testear
elementos de interacción como estados «encima» de
botones, validación de formularios, iconos, o cualquier
elemento con el que el usuario interactúe. A través de la
creación de prototipos, identificamos y solucionamos
problemas UX como pueden ser la transición desde la página
principal a los resultados de búsqueda sin recargar al usuario
con demasiada información. Nos sirve como modelo del
comportamiento del sistema que puede ser usado para
entenderlo completamente o ciertos aspectos de él y así
clarificar los requerimientos.

Herramientas para la creación de prototipos.
• Existen múltiples formas de crear un prototipo, como comentábamos anteriormente, dependerá mucho del tipo
de aplicación que estemos realizando, podemos desde crear una aplicación prácticamente funcional, usando
HTML, CSS, etc. si por ejemplo estamos creando una web, o también podemos usar alguna de las aplicaciones
que existen en el mercado para realizar un prototipo.
• A continuación podéis ver una lista de alguna de las aplicaciones más usadas
• Justinmind: Herramienta profesional para realizar un prototipo de sitios web, aplicaciones de software y
aplicaciones móviles. Puede trabajar con Windows o con Mac.
• Axure RP: Es una herramienta de realización de prototipos profesional que permite crear wireframes para hacer
el pre-diseño de una página web así como MockUps. Disponible tanto para plataforma Windows como Mac.
Puedes dibujar tanto wireframes estáticos como interactivos que simulan una experiencia de navegación del
usuario real..
• Balsamiq: Con ella puedes hacer prototipos interactivos de webs. Puedes usar esta herramienta como un
servicio web o bien descargarla en tu equipo.
• Protoshare Está basado en web, y tiene soporte para twitter bootstrap, además permite hacer simulaciones
sobre distinto dispositivos
• Jumpchart: es una aplicación de planificación de webs basadas en el navegador la cual posibilita esbozar el
contenido de la página web. Es posible crear wireframes tanto estático como interactivos que simulan la
navegación entre las páginas web de la maqueta.
• FlairBuilder: herramienta web que te permite hacer bocetos de tus webs y de tus Apps para iPhone. No tiene
posibilidad de colaborar con otras personas ni tampoco es posible exportar características.
• iPlotz: Esta herramienta permite hacer maquetas navegables de sitios web y de aplicaciones. Lo puedes
descargar en tu ordenador (Windows/ Mac) o bien puedes usar el servicio vía web.

Herramientas para la creación de
prototipos.
• MockFlow: Herramienta web muy sencilla de utilizar para diseñar sitios web y aplicaciones de software.
• Mockingbird: Se trata de un servicio web gratuito con el que se pueden hacen prototipos de páginas web.
• Si trabajas con el entorno de programación Eclipse, puedes usar también WireframeSketcher, que se
integra dentro del entorno a la perfección.
• Quartz composer Herramienta de diseño que incluye Apple en su paquete de aplicaciones para
desarrolladores.
• Origami Es una herramienta gratuita similar a Quartz creada por el equipo de Facebook, que usa Quartz
Composer.
• io te permite crear fácilmente prototipos totalmente interactivos muy fiables que se ven y funcionan
exactamente igual que la aplicación, no requiere saber programar
• Framerjstiene la ventaja de que te deja pasar del Photoshop a Framer. Coge las capas, las exporta y te
permite hacer interacciones usando javascript.
• FLINTO Es como POP pero te permite hacer más cosas, y animaciones más complejas, tanto paraiOS como
Android.
• Pixate Es más potente que FLINTO. Te permite animar independientemente cada parte de la interfaz.
También tiene plantillas para diferentes dispositivos a las que les puedes variar el tamaño.

Herramientas de creación de prototipos
Herramientas de prototipado:
• Pencil Project. Open Source GUI prototyping tool
http://pencil.evolus.vn
• Justinmind (Web & Mobile). http://www.justinmind.com
• Bocetos y wireframing (online) https://wireframe.com
https://wireframestogo.com/
• iPhone Mockup (online) http://iphonemockup.lkmc.ch
9
• Axure RP Pro (Win/Mac)
• Balsamiq mockup (Mac)
http://www.axure.com/
http://www.balsamiq.com/products/mockups
• UXPin https://www.uxpin.com
• MockFlow (Online) http://mockflow.com/
•Moqups (online- HTML5) https://moqups.com
•MS Visio (Win) http://office.microsoft.com/es-es/visio
• MS Expression:SketchFlow (Win) http://www.microsoft.com/expression/
[UXPinMockup]

3Mayo2023 Taller construcción de Prototipos.pptx

3Mayo2023 Taller construcción de Prototipos.pptx

Recomendados

Recomendados

Más contenido relacionado

Similar a 3Mayo2023 Taller construcción de Prototipos.pptx

Similar a 3Mayo2023 Taller construcción de Prototipos.pptx (20)

Último

Último (6)

3Mayo2023 Taller construcción de Prototipos.pptx