Selección herramientas para prototipado.

Aprendiz:

Brenda Vanessa Suarez Ruiz

Catalina Arango Villegas

Oscar Andres Enriquez Zetina

Curso:

Análisis y Desarrollo de Software

GA6-220501096-AA3-EV01

Instructor:

ISRAEL CAMILO GAYON ACEV

Centro regional Antioqui

 Introducción

El presente trabajo tiene como objetivo explorar y analizar diferentes herramientas

de diseño y prototipado utilizadas en el campo del diseño de interfaces de usuario.

En un entorno digital cada vez más centrado en la experiencia del usuario, es

crucial contar con herramientas eficientes que permitan diseñar y desarrollar

interfaces intuitivas, atractivas y funcionales.

En este trabajo, se examinarán varias herramientas destacadas en el ámbito del

diseño y prototipado, incluyendo Adobe XD, Figma, Axure, InVision y Sketch. Se

proporcionarán descripciones detalladas de las características y funcionalidades

de cada una de estas herramientas, así como sus ventajas y desventajas.

Además, se ofrecerán guías básicas de uso para algunas de estas herramientas,

con el fin de familiarizarse con sus interfaces y capacidades principales. Estas

guías servirán como punto de partida para aquellos que deseen utilizar estas

herramientas y aprovechar al máximo sus potencialidades.

El objetivo final de este trabajo es proporcionar una visión general de las

herramientas de diseño y prototipado más relevantes en la actualidad, con el fin de

ayudar a los diseñadores a seleccionar la herramienta más adecuada para sus

necesidades específicas. Cada herramienta tiene sus propias fortalezas y

debilidades, y es importante comprenderlas para tomar decisiones informadas en

el proceso de diseño.
A lo largo de este trabajo, se explorarán las características, ventajas y desventajas

de estas herramientas, y se brindarán recomendaciones y sugerencias sobre su

uso. Con esta información, los diseñadores podrán seleccionar la herramienta que

mejor se adapte a sus flujos de trabajo, objetivos y requisitos específicos, y así

mejorar la eficiencia y calidad de sus diseños de interfaces de usuario.

1- Adobe XD: Diseñado desde el principio para conseguir un rendimiento

superior, te ayuda a crear prototipos casi idénticos a la versión real, para

que puedas comunicar tu idea de diseño y mantener la alineación del

equipo de forma eficaz. Adobe XD es una plataforma de diseño de

experiencias basada en vectores poderoso y fácil de usar que ofrece a los

equipos herramientas necesarias para crear las mejores experiencias del

mundo de forma colaborativa. XD está disponible para sistemas Mac y

Windows e integra a los miembros del equipo, independientemente del

lugar desde donde estén trabajando, gracias a la compatibilidad con

plataformas múltiples. es una herramienta de diseño y prototipado que

ofrece una variedad de características y funcionalidades. Aquí están

algunas de las características destacadas de Adobe XD:

 Diseño de interfaz de usuario (UI): Adobe XD proporciona una interfaz

intuitiva y fácil de usar para crear diseños de interfaces de usuario. Permite

la creación de diseños vectoriales y utiliza elementos de diseño como

formas, colores, tipografía y estilos para construir interfaces atractivas.

 Prototipado interactivo: Una de las fortalezas de Adobe XD es su capacidad

para crear prototipos interactivos. Puedes vincular diferentes pantallas,

crear transiciones y animaciones para simular la experiencia de uso real de

tu diseño. Esto facilita la visualización y prueba del flujo de usuario antes de

la implementación.

 Compartir y colaborar: Adobe XD permite compartir tus diseños y prototipos

con otros miembros del equipo o con clientes para recibir comentarios y
 colaborar en tiempo real. Puedes generar enlaces públicos o privados para

compartir y recopilar comentarios directamente en el diseño.

 Diseño responsive: Con la función de diseño responsive, puedes crear

diseños que se adapten a diferentes tamaños de pantalla y dispositivos.

Adobe XD te permite definir reglas de diseño flexibles y previsualizar cómo

se verá tu diseño en diferentes resoluciones.

 Integraciones con otras herramientas de Adobe: Adobe XD se integra con

otras herramientas de Adobe, como Photoshop e Illustrator, lo que facilita el

flujo de trabajo si ya estás utilizando estas aplicaciones en tu proceso de

diseño.

 Kits de diseño y componentes reutilizables: Adobe XD permite crear y

utilizar kits de diseño y componentes reutilizables. Esto te permite mantener

la consistencia en tus diseños y acelerar el proceso de diseño al reutilizar

elementos comunes en diferentes proyectos.

Desventajas

 Funcionalidad limitada en comparación con herramientas más

avanzadas: En comparación con herramientas más avanzadas como

Sketch o Figma, Adobe XD puede ser considerado como una opción

más básica. Puede carecer de algunas funcionalidades más

avanzadas que podrían ser necesarias para proyectos complejos.

 Herramientas de animación limitadas: Aunque Adobe XD permite

crear prototipos interactivos con transiciones y animaciones básicas,

las opciones de animación son más limitadas en comparación con

herramientas dedicadas específicamente al diseño de animaciones.

 Limitaciones en la colaboración en tiempo real: Aunque Adobe XD

ofrece funciones de colaboración y permite compartir diseños con

otros miembros del equipo, algunas opciones más avanzadas de

colaboración en tiempo real pueden no estar tan desarrolladas como

en otras herramientas.

 Gestión de componentes y bibliotecas: Aunque Adobe XD permite

crear y utilizar componentes reutilizables, la gestión y organización

de componentes puede resultar complicada en proyectos grandes y

complejos. No ofrece una biblioteca de componentes centralizada y

la gestión de versiones puede ser un desafío.

 Soporte limitado para sistemas operativos: Adobe XD está disponible

para macOS y Windows, pero no tiene una versión nativa para Linux.

Esto puede ser una limitación si estás utilizando Linux como sistema

operativo principal.
 Crear una mesa de trabajo Pantalla Inicio

nueva Utilice los tamaños de mesa de trabajo preestablecidos o cree una mesa

Adobe XD le proporciona de trabajo personalizada.

mesas de trabajo para

tamaños de pantalla populares

como los de las distintas

versiones de iPhone, iPad y

Web. Puede crear una mesa

de trabajo personalizada si las

opciones no cumplen sus

requisitos.

Flecha : para mover

Cuadrado `para crear cuadros

y rectángulos

Circulo: crear elipses

polígonos

Líneas la pluma para crear

trazados más complejos para

2- dibujarlos

Texto
Figma
Mesas de trabajo
es

una

Aplicación XD: Utilice la

herramienta Mesa de trabajo

para crear mesas de trabajo

adicionales

Usar una mesa de trabajo

 herramienta de diseño y prototipada basada en la nube, que permite a los

equipos de diseño colaborar en tiempo real y crear diseños de interfaces de

usuario (UI) y experiencia de usuario (UX). A diferencia de Adobe XD u

otras herramientas similares, Figma se ejecuta directamente en un

navegador web, lo que significa que no es necesario instalar ningún

software adicional en tu computadora.

 Diseño basado en la nube: Figma es una herramienta basada en la nube, lo

que significa que tus archivos y proyectos se almacenan en línea y se

sincronizan automáticamente. Esto permite acceder a tus diseños desde

cualquier lugar y compartirlos fácilmente con otros miembros del equipo.

 Colaboración en tiempo real: Figma permite la colaboración en tiempo real,

lo que significa que varios miembros del equipo pueden trabajar en el

mismo archivo simultáneamente. Pueden ver los cambios en tiempo real,

realizar comentarios y colaborar de manera más eficiente.

 Diseño: Figma está diseñado para el diseño y la creación de diseños

adaptables a diferentes tamaños de pantalla y dispositivos. Puedes definir

reglas y restricciones para adaptar tu diseño a diferentes resoluciones y

mantener la coherencia en todas las pantallas.

 Bibliotecas y componentes: Figma ofrece bibliotecas y componentes

reutilizables que te permiten crear elementos y estilos consistentes en tus

diseños. Puedes crear componentes personalizados y compartirlos en toda

 tu organización, lo que facilita la actualización y mantenimiento de tus

diseños.

 Prototipado interactivo: Figma permite crear prototipos interactivos para

simular la experiencia de uso de tu diseño. Puedes agregar transiciones,

enlaces y animaciones para crear prototipos de alta fidelidad que se

asemejen a una aplicación o sitio web real.

 Integraciones y complementos: Figma ofrece una amplia gama de

integraciones y complementos con otras herramientas populares de diseño

y desarrollo, como Slack, Zeplin y Jira. Estas integraciones ayudan a

agilizar tu flujo de trabajo y facilitan la colaboración con otros miembros del

equipo.

Versionado y control de cambios: Figma guarda automáticamente el historial de

versiones de tus diseños, lo que te permite ver y restaurar versiones anteriores en

caso de ser necesario. También proporciona funciones para comparar cambios y

ver el progreso del diseño a lo largo del tiempo.

Estas son solo algunas de las características destacadas de Figma. La

herramienta continúa evolucionando y agregando nuevas funcionalidades para

mejorar la experiencia de diseño y colaboración.

Desventajas

 Dependencia de una conexión a internet: Figma es una herramienta basada

en la nube, lo que significa que requiere una conexión a internet constante

 para acceder y utilizar la herramienta. Si te encuentras en un entorno sin

conexión o con una conexión a internet lenta o inestable, esto puede afectar

tu capacidad para trabajar de manera eficiente.

 Limitaciones en la edición fuera de línea: Aunque Figma permite acceder y

ver tus diseños sin conexión a internet, la capacidad de edición fuera de

línea es limitada. No podrás realizar cambios o modificaciones en tus

diseños hasta que vuelvas a tener una conexión estable.

 Costo para colaboradores externos: Aunque Figma ofrece planes gratuitos

y de pago, si deseas colaborar con personas externas a tu equipo, es

posible que debas invitarlos a unirse a tu equipo o adquirir licencias

adicionales. Esto puede generar costos adicionales si necesitas trabajar

con clientes o colaboradores externos de manera regular.

 Limitaciones en la gestión de archivos grandes: Figma puede tener

dificultades para manejar archivos extremadamente grandes o complejos. A

medida que tus diseños se vuelven más complejos y contienen una gran

cantidad de elementos y páginas, es posible que experimentes retrasos en

el rendimiento o dificultades en la organización y gestión de tus diseños.

 Menor flexibilidad en el diseño vectorial avanzado: Aunque Figma ofrece

una amplia gama de herramientas de diseño, puede tener limitaciones en

comparación con herramientas especializadas en diseño vectorial

avanzado, como Adobe Illustrator. Si necesitas realizar trabajos altamente

 detallados o específicos en diseño vectorial, puede que encuentres más

funcionalidades y opciones en otras herramientas.

Registro,

creación de un

grupo y un

proyecto:

El acceso a Figma

se realiza desde

https://www.figma.

com/. Tras el

registro y

verificación del

correo, tendremos

que poner un

nombre al equipo

de trabajo y,

opcionalmente,

invitar a otros

colaboradores.

Posteriormente,

escoger el plan.

En

nuestro caso el

plan Figma

Professional que

es gratuito para

estudiantes. Para

poder

utilizarlo es

necesario darse
de alta con el

correo UB.

Para crear un

nuevo proyecto

también podemos

utilizar la opción

disponible en la

parte

superior derecha

de la interfaz

Una vez dentro de

la carpeta del

proyecto,

podemos empezar

a añadir ficheros.

En

concreto,

podemos añadir

un nuevo diseño

(design file) o un

lienzo en blanco

sobre el

que volcar ideas,

diagramas, etc
La interfaz de

FigmaLa interfaz

de Figma se

divide en un menú

superior con

varios accesos

directos y tres

grandes bloques.

En el menú

superior

encontramos un

primer icono con

forma de

hamburguesa que

esconde todas las

opciones del

programa y, a

continuación, las

herramientas de

cursor, frames,

formas, pluma,

texto y

comentarios. En la

parte central

del menú superior

tenemos el

nombre del

documento.

Finalmente, en la

parte derecha

los atajos para

compartir y

ejecutar el

prototipo.

En cuanto a los

tres bloques

principales, en la

parte izquierda

encontramos las

capas

(concepto similar

al de Photoshop) y

los recursos

(iconos,

imágenes, etc.).

La parte

central es el área

de trabajo, donde

iremos diseñando

el prototipo. En la

columna

derecha

encontramos las

opciones

específicas del

elemento que

tengamos

seleccionado. Por

ejemplo, si

tenemos

seleccionado un

bloque de texto,
podremos

editar la fuente, el

tamaño, etc.

. Layers irán
apareciendo los
diferentes
elementos que
añadamos a la
interfaz (texto,
formas, iconos,
imágenes,
elementos
interactivos…) que
podremos ir
agrupando en
diferentes capas
para trabajar de
forma ordenada.
Las capas se
pueden activar o
desactivar
mediante el ojo
situado en la parte
derecha del
nombre de la
capa. También las
podemos bloquear
para evitar
modificarlas sin
querer, pulsando
sobre el candado
de la capa en
cuestión. En la pestaña Assets (recursos) encontramos todos los componentes que

hemos ido creando. Los componentes son recursos o diseños que almacenamos en

nuestra cuenta y que podemos reutilizar en diferentes prototipos (un botón o CTA, un

icono, etc.).
crear un

componente

tenemos que

hacer clic derecho

sobre el

componente en

cuestión y

seleccionar la

opción Create

Component. En la

imagen siguiente

se observa como

generar un

componente a

partir del diseño

de un botón

Uno de los

componentes más

importantes en

Figma son los

Frames (También

accesibles

mediante la tecla

F
Un frame es un

lienzo en blanco

sobre el que

incorporar un

diseño. Al pulsar

sobre la opción

Frame, en la

columna derecha

de la interfaz,

podemos escoger

entre diferentes

tamaños estándar

de teléfonos

móviles, tabletas,

monitores de

escritorio,

teléfono,

publicaciones

impresas o de

redes sociales

para el frame en

cuestión.

4. Crear una

retículaCon el

frame central

seleccionado,

pulsamos sobre la

opción Layout

Grid, disponible en

la parte derecha

de la interfaz.
Opción para crear

retículas.

Un grid,

cuadrícula o

retícula es un

conjunto de líneas

verticales u

horizontales que

sirven para

asegurar el

equilibrio a la hora

de posicionar

elementos en la

interfaz,

asegurando

espacios y

alineaciones

homogéneos entre

ellos.

Si pulsamos sobre

el símbolo del grid

(podemos

modificar su color

y tamaño. Cabe

destacar que el

grid es

simplemente una

referencia –una

guía– que no se

mostrará una vez

exportemos
nuestro trabajo. Si

durante el proceso

de diseño nos

molesta, podemos

desactivarlo

temporalmente

con el botón en

forma de ojo.

La herramienta de

textoLa

herramienta de

texto (accesible

mediante la tecla

T, permite agregar

bloques de texto a

la interfaz. Una

vez creado el

bloque de texto,

podemos

personalizar sus

características

(fuente, tamaño,

color, peso, etc.)

mediante las

opciones situadas

en la columna

derecha.
Formas e

imágenesLa

opción situada a la

derecha del botón

para crear

Frames, nos

permite añadir

formas diversas o

imágenes a

nuestro prototipo.

Es importante

tener en cuenta

que la forma o

imagen se creará

dentro del frame

que tengamos

seleccionado. En

la imagen

siguiente se

añade un

rectángulo de

color negro en la

parte superior del

prototipo
Compartir y
exportar
prototiposMedia
nte el botón
“Share” situado
en la parte
superior
derecha de la
interfaz,
podemos
compartir el
prototipo, así
como obtener
un enlace y un
código para
incrustarlo.

3- Axure RP es una herramienta de diseño y prototipado ampliamente

utilizada en la industria. A continuación, te presento algunas de sus

características y desventajas:

Características de Axure RP:

 Prototipado interactivo: Axure RP permite crear prototipos interactivos con

funcionalidades avanzadas, como interacciones complejas, animaciones y

lógica condicional. Esto ayuda a simular y probar la experiencia de usuario

de manera más completa.

 Amplia biblioteca de componentes: Axure RP ofrece una amplia biblioteca

de componentes predefinidos que puedes utilizar en tus diseños. Estos

 componentes incluyen elementos de interfaz de usuario comunes, como

botones, formularios, menús y más, lo que acelera el proceso de diseño y

garantiza la consistencia visual.

 Generación de documentación: Axure RP permite generar documentación

detallada de tus diseños, incluyendo especificaciones de diseño, diagramas

de flujo, mapas de sitio y más. Esto facilita la comunicación con los

desarrolladores y otros miembros del equipo.

 Colaboración en equipo: Axure RP ofrece funciones de colaboración en

equipo que permiten a múltiples personas trabajar en el mismo proyecto

simultáneamente. Los cambios se sincronizan en tiempo real y los

miembros del equipo pueden realizar comentarios y anotaciones en el

diseño.

 Soporte para anotaciones y notas: Puedes agregar anotaciones y notas a

tus diseños en Axure RP, lo que facilita la comunicación de detalles

importantes o instrucciones específicas a los miembros del equipo.

Desventajas de Axure RP:

 Curva de aprendizaje pronunciada: Axure RP es una herramienta potente

pero compleja. Requiere tiempo y dedicación para dominar todas sus

funcionalidades y aprovechar al máximo su potencial. Los principiantes

pueden encontrarla abrumadora al principio.

  Interfaz algo desactualizada: La interfaz de usuario de Axure RP ha recibido

críticas por parecer desactualizada en comparación con otras herramientas

de diseño más modernas. Aunque esto no afecta directamente la

funcionalidad de la herramienta, puede resultar menos atractiva

visualmente para algunos usuarios.

 Requisitos del sistema: Axure RP es una herramienta de software de

escritorio que requiere una instalación en tu computadora. Esto significa

que está sujeta a los requisitos del sistema y puede no ser compatible con

todas las plataformas o sistemas operativos.

 Limitaciones en la colaboración en tiempo real: Aunque Axure RP permite la

colaboración en equipo, no es tan robusta en términos de colaboración en

tiempo real como algunas otras herramientas basadas en la nube. La

colaboración en tiempo real puede ser limitada en comparación con

herramientas más modernas.

Crear un nuevo

proyecto: Abre

Axure y selecciona

"Nuevo proyecto"

en la pantalla de

inicio. Asigna un

nombre y una

ubicación para tu

proyecto.
Interfaz de usuario:

Familiarízate con la

interfaz de usuario

de Axure. En la

parte izquierda,

encontrarás la

biblioteca de

widgets y

elementos de

interfaz de usuario

predefinidos. En el

centro, se

encuentra el lienzo

donde puedes

diseñar tus

prototipos. Y en la

parte derecha,

tienes los paneles

de propiedades y

de interacción.
Utilizar widgets de

la biblioteca: Axure

proporciona una

amplia biblioteca de

widgets

predefinidos que

puedes arrastrar y

soltar en el lienzo.

Estos widgets

incluyen botones,

campos de entrada,

menús

desplegables,

barras de

desplazamiento y

muchos más.

Utiliza estos

widgets para

agilizar el proceso

de diseño y

garantizar la

consistencia visual.
Crear páginas y
estados: Utiliza el
panel de páginas
para crear
diferentes páginas
en tu prototipo.
Además, puedes
utilizar el panel de
estados para definir
diferentes estados
de un elemento,
como un botón
activo o
desactivado, para
mostrar cambios
visuales en
respuesta a las
interacciones.

Colaborar en

equipo: Axure

permite la

colaboración en

equipo, lo que te

permite trabajar

con otros miembros

del equipo en el

mismo proyecto.

Puedes compartir

tus archivos de

proyecto, recibir

comentarios y

realizar cambios en

tiempo real.

4- InVision es un programa para prototipar apps muy parecido a Marvel,

aunque más potente en algunos aspectos. Es parecido a Marvel en el

sentido que Marvel parte de la idea que el usuario suba sus pantallas ya
 diseñadas y a partir de ahí poder añadirle diferentes interactividades

mediante gestures y diferentes transiciones entre pantallas. Así, el

funcionamiento básico de InVision (y Marvel) es que el usuario diseñe

previamente unas pantallas con otro programa para hacer prototipos, luego

suba esos prototipos a la plataforma y empiece a añadirle interactividades

de manera que esas pantallas queden entrelazadas entre sí.

InVision, además, ofrece muchas funcionalidades relacionadas con trabajar en

equipo. En este sentido, lo podríamos considerar como una herramienta de

gestión de proyectos. Como los prototipos son una genial herramienta de

comunicación entre un equipo y/o entre diseñador-clliente, contar con un programa

de prototipado que facilite la comunicación entre los miembros de este equipo y

con el cliente es una gran idea. Así ahorramos una larga cadena de e-mails

caóticos y tediosos y podemos tener la información justo donde pertenece.

Características

 Prototipado interactivo: InVision permite crear prototipos interactivos que

simulan la experiencia de uso de una aplicación o sitio web. Puedes

agregar transiciones, animaciones y comportamientos para crear prototipos

de alta fidelidad.

 Comentarios y colaboración en tiempo real: InVision facilita la colaboración

en equipo y la recopilación de comentarios. Puedes invitar a otros

miembros del equipo o interesados a ver y comentar tus diseños, lo que

facilita el proceso de iteración y retroalimentación.

 Integración con herramientas de diseño: InVision se integra con otras

herramientas de diseño populares, como Sketch y Adobe XD. Puedes

sincronizar tus diseños directamente desde estas herramientas y

mantenerlos actualizados en InVision.

 Biblioteca de activos y componentes: InVision te permite crear una

biblioteca de activos y componentes reutilizables, lo que facilita la creación

y el mantenimiento de la consistencia visual en tus diseños. Puedes

actualizar un componente en la biblioteca y se actualizará automáticamente

en todos los diseños que lo utilizan.

 Gestión de versiones y control de cambios: InVision ofrece características

de gestión de versiones que te permiten mantener un historial de cambios

en tus diseños. Puedes ver versiones anteriores, comparar cambios y

revertir a versiones anteriores si es necesario.

 Pruebas de usabilidad y feedback: InVision permite realizar pruebas de

usabilidad para recopilar feedback y datos de usuarios reales. Puedes crear

tareas y preguntas, compartir el prototipo con los usuarios y recopilar sus

respuestas y comentarios.

 Inspección de diseños: InVision proporciona herramientas de inspección

que permiten a los desarrolladores y otros miembros del equipo obtener

información detallada sobre los diseños, como tamaños de elementos,

colores y estilos aplicados.

 Presentaciones y exportación: InVision facilita la creación de

presentaciones y la exportación de diseños. Puedes crear flujos de

presentación para mostrar tus diseños en orden y exportarlos en diferentes

formatos, como PDF, PNG o GIF.

Desventajas

 Costo: InVision ofrece diferentes planes de precios, incluyendo una

versión gratuita limitada y planes de suscripción con características

adicionales. Dependiendo de tus necesidades y el tamaño de tu

equipo, los costos pueden ser altos, especialmente si deseas

acceder a todas las funcionalidades y capacidades avanzadas de la

plataforma.

 Curva de aprendizaje: InVision es una herramienta potente con una

amplia gama de características y funcionalidades. Esto puede llevar

tiempo y esfuerzo para aprender y dominar todas las capacidades de

la plataforma. Para algunos usuarios, especialmente aquellos que

son nuevos en el diseño y prototipado, puede resultar abrumador al

principio.

 Limitaciones de diseño: Aunque InVision ofrece un conjunto sólido de

herramientas de diseño y prototipado, puede haber algunas

limitaciones en términos de personalización y flexibilidad creativa. Si

tienes necesidades de diseño muy específicas o deseas crear

interacciones y animaciones muy avanzadas, es posible que

 encuentres algunas restricciones en comparación con otras

herramientas más especializadas.

 Dependencia de internet: InVision es una plataforma basada en la

nube, lo que significa que requiere una conexión a internet estable

para acceder y utilizar sus funcionalidades. Esto puede ser un

inconveniente si necesitas trabajar en tus diseños mientras te

encuentras en un lugar sin conexión o con una conexión limitada.

 Rendimiento y velocidad: Algunos usuarios han informado problemas

de rendimiento y velocidad al trabajar con proyectos grandes o

complejos en InVision. Esto puede generar retrasos y afectar la

experiencia de usuario, especialmente al realizar cambios en tiempo

real o al cargar prototipos interactivos complejos.

 Limitaciones en la gestión de archivos: Aunque InVision ofrece

funcionalidades para gestionar y organizar tus archivos de diseño,

algunas personas encuentran que la organización y la búsqueda de

archivos pueden ser complicadas, especialmente cuando hay

muchos proyectos y colaboradores involucrados.

Crear un
nuevo
archivo

Seleccionar
el tipo del
tamaño
que se
quiere
diseñar.
Se indica el
listado de
los
archivos
diseñados
En lado

izquierdo se

encuentran

las paginas,

las

librerías ,las

capas y la

mesa de

trabajo

Panel de
propiedad
es para
modificar
parámetro
s

Seleccionar
+ y se
puede
crear la
herramient
a que se
desea
trabajar
Para texto
con la tecla
t se
configura
el tamaño
que se
desea, el
color de
los
botones de
la letra

Se copia
una
imagen y
se crea
una
máscara
con el
botón
dentro del
recuadro ,s
e puede
centrar la
foto
Crear
componen
tes

Los
componen
tes se
pueden
duplicar y
editarlos
como se
requiere y
no se
modifica el
original
Para pasar
aq otra
pantalla se
hace doble
clic en el
icono se lo
tiene
selecciona
do y se va
a la
pantalla
deseada y
se escoge
la opción
que uno
desea
realizar
 Se puede
sincronizar
con un
dispositivo
móvil

Compartir
el archivo
FreeHand

Compartir
este
prototipo
directame
nte a
invision

5- Sketch es un software de diseño vectorial para interfaces web y móviles.

Esta app se utiliza como una herramienta de desarrollo web y programa de

prototipado, además sirve para hacer logos, elementos de identidad de

marca y gráficos.

Es un programa creado por diseñadores para diseñadores, entonces será perfecto

para cubrir todas tus necesidades del diseño de interfaces. Al abrir Sketch,
podemos empezar a trabajar en su lienzo infinito, que permite tener un gran

espacio para desarrollar ideas como se quiera y cuantas veces sea necesario .

os proyectos de diseño UX y UI nos piden que utilicemos Sketch, ya que la

herramienta de diseño de interfaces nos ayudará a plasmar el entendimiento del

usuario en nuestros proyectos digitales y será muy fácil demostrarle al cliente el

prototipo.

Característica:

 Interfaz intuitiva: Sketch tiene una interfaz de usuario intuitiva y fácil de

usar, lo que facilita su aprendizaje y uso para diseñadores de diferentes

niveles de experiencia.

 Diseño vectorial: Sketch se basa en el diseño vectorial, lo que significa que

puedes crear y editar gráficos escalables sin perder calidad. Esto es

especialmente útil para diseños que se utilizarán en diferentes tamaños de

pantalla y dispositivos.

 Bibliotecas y componentes: Sketch permite crear bibliotecas y componentes

reutilizables, lo que agiliza el proceso de diseño y garantiza la consistencia

visual en tus proyectos. Puedes crear componentes personalizados, como

botones, barras de navegación y elementos de interfaz de usuario, y

reutilizarlos fácilmente en diferentes diseños.

 Símbolos y estilos compartidos: Sketch ofrece la posibilidad de crear

símbolos y estilos compartidos. Esto te permite mantener la consistencia

 visual en tus diseños y realizar cambios rápidos y automáticos en todos los

elementos relacionados. Si actualizas un símbolo o un estilo compartido, se

actualizará en todos los lugares donde se haya utilizado.

 Integraciones y complementos: Sketch se integra con una amplia gama de

complementos y herramientas de terceros que amplían su funcionalidad.

Puedes agregar complementos para automatizar tareas, exportar diseños a

diferentes formatos, prototipar interacciones avanzadas y más.

 Prototipado interactivo: Sketch ofrece capacidades básicas de prototipado

para crear transiciones y enlaces entre diferentes pantallas. Si bien el

prototipado en Sketch no es tan avanzado como en algunas otras

herramientas dedicadas, aún te permite presentar y comunicar tus diseños

de manera efectiva.

 Exportación de diseños: Sketch te permite exportar tus diseños en una

variedad de formatos, incluyendo PDF, PNG, SVG y más. También puedes

exportar diseños específicos para diferentes dispositivos y tamaños de

pantalla.

 Colaboración en equipo: Sketch ofrece funciones de colaboración en

equipo, lo que te permite trabajar de forma colaborativa en proyectos

compartidos. Puedes invitar a otros diseñadores a colaborar, realizar

comentarios y revisiones en tiempo real.

Desventajas:
 Disponibilidad limitada: Sketch es una herramienta exclusiva para

usuarios de macOS. Esto significa que no está disponible para

sistemas operativos como Windows o Linux, lo que puede limitar su

accesibilidad para algunos diseñadores.

 Falta de compatibilidad con Adobe Creative Suite: Sketch utiliza su

propio formato de archivo (.sketch), lo que puede dificultar la

colaboración con otros diseñadores o equipos que utilizan

herramientas de Adobe Creative Suite como Photoshop o Illustrator.

Aunque existen complementos y herramientas para convertir

archivos entre Sketch y Adobe, puede haber limitaciones y

problemas de compatibilidad.

 Funcionalidad de prototipado limitada: Aunque Sketch ofrece

capacidades básicas de prototipado, no es tan avanzado como

algunas otras herramientas dedicadas de prototipado como Adobe

XD o Figma. Si necesitas crear prototipos con interacciones y

animaciones complejas, es posible que debas combinar Sketch con

otras herramientas para obtener los resultados deseados.

 Curva de aprendizaje: Aunque la interfaz de Sketch es intuitiva y fácil

de usar, puede llevar tiempo familiarizarse con todas las

características y funcionalidades disponibles. Los diseñadores

nuevos en Sketch pueden requerir un período de aprendizaje para

aprovechar al máximo la herramienta y sus capacidades.

  Actualizaciones de software y compatibilidad: Con cada actualización

de Sketch, es posible que algunos complementos o recursos de

terceros se vuelvan incompatibles hasta que sean actualizados por

sus desarrolladores. Esto puede generar problemas de

compatibilidad y requerir tiempo adicional para adaptarse a las

nuevas versiones del software.

 Colaboración limitada en tiempo real: Aunque Sketch ofrece

funciones de colaboración en equipo, no es tan avanzado en

términos de colaboración en tiempo real como algunas otras

herramientas. Las actualizaciones de los diseños y los comentarios

pueden requerir actualizaciones manuales y no se muestran en

tiempo real, lo que puede ralentizar el proceso de colaboración.

Las
herramientas de
diseño web
funcionan de
forma intuitiva y
te permiten
tener una
precisión al
nivel de píxeles.
De la misma
forma, ahora
sabes que es
Sketch la única
app de diseño
de interfaces
con la tienes un
flujo de trabajo
no destructivo,
es decir, los
cambios se
pueden hacer
sin modificar el
archivo original
y son muy
fáciles de
revertir sin
arruinar todo el
trabajo.
Sketch brinda
cuadrículas y
una interfaz
para poder
mantener el
trabajo muy
organizado y
limpio, así como
opciones para
customizar la
pantalla
principal para
que se
acomode mejor.

Entre otras
herramientas
para crear un
diseño web en
Sketch, permite
cambiar el
tamaño de las
restricciones de
los elementos
para facilitar su
escala,
proporciona
atajos para
reorganizar y
cambiar de
tamaño las
capas y te da un
control infinito
sobre la
tipografía.
Sketch está
diseñado dentro
de un sistema
que da acceso a
bibliotecas
compartidas
con símbolos,
texto y estilos,
así como a
componentes
reusables que
se puede enviar
a los
colaboradores
y, al mismo
tiempo,
funciona
mantener a tu
equipo al día
con las
actualizaciones
del sistema de
tu diseño.
A su vez, existe
una función
para crear una
paleta de
colores para
usar en todos
tus diseños y,
después,
compartirla con
otros. Por
medio de esto,
podemos
uniformizar la
estética de
nuestros
productos
digitales como
interfaces web y
de aplicativos.
También, la
aplicación de
diseño de
interfaces
contiene la
opción de Smart
Layout. A través
de esta, los
símbolos o texto
que utilices se
adaptarán
automáticamen
te al espacio
disponible,
ahorrándote
mucho tiempo.
Finalmente, el
diseño de la
interfaz de
Sketch te
permitirá
visualizar en
una ventana a
parte los
componentes
guardados en tu
biblioteca
compartida para
que sea sencillo
encontrarlos.
Solo necesitas
abrir “Insert
Window”,
escribir el
nombre en el
buscador y
arrastrar el
elemento al
lienzo en tan
solo unos
segundos.
A través de
Sketch puedes
vincular las
partes de tu
diseño de
interfaz con
mucha facilidad
y crear
prototipos para
probar todas tus
ideas en el
software para
Mac o en tu
propio
dispositivo
digital iOS en
aplicación
Sketch Mirror.
Los cambios
aparecen
automáticamen
te, lo que te
permite trabajar
con mejor
visibilidad y más
rápidamente.
Páginas
En la aplicación
Sketch, cada
página
representa una
plataforma o
una resolución
completamente
diferente. Para
la mayoría de
los proyectos,
tendrás más de
veinte
Artboards para
una plataforma
como iOS.

Luego, debes
crear otra
página para
Android, Web,
Apple Watch,
 tvOS, etc. De
esta manera,
puedes tener un
proyecto
completo
dentro de un
solo archivo de
Sketch. Esto te
permite el
ahorro de
mucho tiempo
al cambiar entre
pantallas y
plataformas.

Puedes abrir las

páginas
haciendo clic en
la flecha junto al
nombre de la
página. Además,
puedes cambiar
rápidamente
entre las
páginas
utilizando el
menú
desplegable. El
atajo de teclado
es Fn ↑ y ↓.

La aplicación que vamos a trabajar para realizar nuestro proyecto es Figma

una herramienta poderosa que ofrece colaboración en tiempo real,

accesibilidad en la nube, diseño multiplataforma, componentes

compartidos, prototipado interactivo y una comunidad activa en línea. Estas

características hacen de Figma una opción confiable y versátil.

 Bibliografía

 Crehana. (s.f.). ¿Qué es Sketch? Recuperado de

https://www.crehana.com/blog/estilo-vida/que-es-sketch/

 FranciscoAMK. (s.f.). InVision Studio: Todo lo que necesitas saber sobre

esta herramienta de diseño. Recuperado de

https://franciscoamk.com/invision-studio/

 Adobe. (s.f.). What is Adobe XD used for? Recuperado de

https://www.adobe.com/co/products/xd/learn/get-started/what-is-adobe-xd-

used-for.html

 UI from Mars. (s.f.). Figma: Primeros pasos. Recuperado de

https://www.uifrommars.com/figma-primeros-pasos/