Está en la página 1de 3

1) Contenido

1.1) FIGMA.................................................................................................................................................................................................................................................... 1
1.1.1) Posibles problemas para solucionar en experiencia al usuario:......................................................................................................................................................1
1.1.2) GLOSARIO:...................................................................................................................................................................................................................................... 3
1.1.3) RECOMENDACIONES Y RECURSOS.................................................................................................................................................................................................. 3

1.1) FIGMA
-es igual al pothoshop, Fireworks.
Mayormente Fireworks es como un editor
para el diseño de interfaces al igual que figma
-anteriormente existía sketch también hecho para diseño
de interfaces pero sketch tenia grandes carencias.
-tambien se parece a marvelapps que hace referencia
al prototipado convierte un diseño estático en un diseño
interactivo
Adobe XD: su fuerza es la integración con otros programas de adobe por que es de la misma familia
agrego prototipado que sketch no tenia, figma es ideal para el diseño de interfaces
-figma trabaja en el navegador, también es como un git para diseño, funciona en web tiempo real
-diseñadores de interfaces es muy demandado últimamente.
USER EXPERIENCE (UX):
toda aplicación, todo software va a ser utilizado por un usuario, una persona lo va a usar.
El producto no servirá de nada si las personas no lo van a usar.
-usabilidad: que el producto cumpla con su objetivo
-arquitectura de la información: post de la comunidad, blogs de los cursos, misma forma de organizar la información para que la gente no se confunda.
-user research.: implica la investigación de los usuarios, ósea volviendo al ejemplo del carro si ponemos 2 pedales para acelerar y frenar. Luego
nosotros queremos poner 2 letreros bien grandes que digan este es para frenar y este es para acelerar no es buena idea que se tiene que hacer una
investigación al usuario sus costumbres, etc. Saber cómo piensa el usuario sus patrones de uso etc.
-accesibilidad: que sea accesible a muchos tipos de personas por ejemplo las personas en sillas de ruedas, no tienen una rampa para subir a la vereda
entonces no es accesible para todo tipo de persona. Por que imposibilitas a que otras personas lo usen.
- análisis de negocio

UI (USER INTERFACE):
Interfaz al usuario es una parte de ux es el diseño de la capa visual del que lo ve.

Figma es todo un conjunto de disciplinas que estudian toda la experiencia de un usuario al utilizar el producto.
no solo software puede ser al utilizar cualquier producto, pero el usuario tiene una experiencia que puede ser buena o
mala por ejemplo en el caso de un automóvil por ejemplo que los pedales estén invertidos el frenar sea de acelerar
y el de acelerar sea el de frenar.

1.1.1) Posibles problemas para solucionar en experiencia al


usuario:
-Tal vez la letra es muy chiquita y no se alcanzaría a ver.
-si abren con clic en un botón se encuentran con algo que ellos no esperaban.
- la opción de pgo esta muy escondido dentro de otros menus.

1) #v = significa créate frame


# frame
De allí en la esquina derecha aparecerán los distintos formatos o tamaños de pantalla.
-phone
-tablet
-desktop
-watch
-paper
-socialmedia.
2) ⬜v = significa rectangle, rectangulo de ahí seleccionamos formas para cubrir el área ese será el color de
fondo de la aplicación.
3) También se puede crear una guía de estilo
cuando seleccionemos el área, en la esquina derecha en fill color styles seleccionamos para crear una nueva
guía de estilos.
Saldrá una nueva ventana que dice “créate now color style” y le ponemos de nombre por ejemplo “color de
fondo” / créate style.
Un consejo seria guardar el nombre para tenerlo identificado ejemplo ”color de fondo # 3a4982”

4) Para hacer borde a un área rectángulo solo lo seleccionamos y seleccionamos en los estilos de la parte
esquina derecha y nos vamos a la sección “stroke” / click en “+” seleccionamos el color y las distintas
cosas que tiene.

5) para subir un archivo al figma ósea una imagen al figma tenemos que seleccionar el rectángulo/place
image. Y nos abrirá la ventana para subir nuestro archivo

6) para cambiarle el color a una imagen hacemos lo siguiente, una vez sacada la imagen la seleccionamos y
nos vamos a “fill” que esta en la parte derecha
+/ modificamos el color y solo escogemos la opción solid.
y también le pedimos crear un nuevo estilo en la pestaña desing que esta a la derecha abajo podemos
cambiarle el ancho y el alto.

7) A un grupo de imágenes podemos agruparlas si seleccionamos todas y con el click derecho seleccionas
la opción /group selection.

8) Distribute horizontal spacing : esta opción sirve para reparar una medida exacta a los iconos

9) Para agregar un sombreado a un rectángulo lo que tenemos que hacer es seleccionar la imagen e irnos al
menú de la derecha y seleccionar.
la opción effects con el efecto dropshadow y controlamos el blur medimos los ángulos x y

10) Para agregar texto al diseño seleccionamos el icono de texto esa que tiene forma de “ T ” y ponemos
el texto y tiene las mismas opciones en fill medimos de que color queremos que sea el texto.
y también en la opción text vemos
el tipo de letra si es light o regular etc el tamaño todo esta en la parte derecha de la esquina

11) Recomendación – pagina de iconos


boxicons.com

12) En prototipe es donde se ejecuta el diseño


elegimos las opciones de acuerdo al diseño y seleccionamos en run “  ▷”

13) Otro recurso seria pexels.com para sacar imágenes con buena calidad y gratuitas

14) Al seleccionar una imagen y ver que esta muy grande con la opción fill se acopla al cuadro que
tenemos creado la imagen

15) Centrar los elementos de acuerdo al área donde esta encerrada con estos símbolos:
los iconos tienen formas de palos en vertical y horizontal en distintas posiciones.

16) Para crear un componente seleccionamos todos los elementos para formar parte de un componente /
los agrupo con click derecho / group / y en la lista de todos los objetos que esta en la parte izquierda de la
esquina / lo convertimos en un componente.

“créate component” le cambiamos el nombre también. La ventaja de los componentes es que cuando te
vas a la vista de los componentes.
Y cuando nos vamos a la sección componentes que su icono tiene forma de “4 cuadrados formando un
cuadrado estando inclinado” y arrastramos el componente.

Con tan solo cambiar la imagen de un componente se cambian todos los componentes o también se puede
cambiar uno por uno.
También podemos cambiar el tamaño.
Del texto de varios desde la vista componente se tendrá que editar para que cojan los mismos cambios.
También podemos agrupar grupos con otros objetos.

Y cuando seleccionemos un scroll vertical podemos decir a esa área dándole click y llendo a sus estilos
nos aparecerá la opción fix position when scrolling, es un check esto significa mantener la posición vertical
mientras va a mantener el scroll.

1.1.2) GLOSARIO:
Prototipado: convertir un diseño estático en uno interactivo ósea el usuario puede hacer clc en una región de ese diseño y ese clic nos lleve a otra
pagina como si se estuviera navegando por una pagina web o por una aplicación.
Wireframes: es el esqueleto o el plano de una interfaz
Mockups: representación gráfica fiel al producto final.

1.1.3) RECOMENDACIONES Y RECURSOS


- Recomendación – pagina de iconos
boxicons.com
- Otro recurso seria pexels.com para sacar imágenes con buena calidad y gratuitas

También podría gustarte