Interfaz grafica

¿ que es ?
• La interfaz gráfica de usuario,
conocida también como GUI, es
un programa informático que
actúa de interfaz de usuario,
utilizando un conjunto de
imágenes y objetos gráficos para
representar la información y
acciones disponibles en la
interfaz.
• Herramientas para diseño de interfaces
graficas de usuario
• MockFlow
• MockFlow te permite construir
diseños básicos rápidamente
• MockFlow es un conjunto de
aplicaciones que son muy
útiles para una serie de tareas
en el proceso típico del
proyecto
• Balsamiq
• Los elementos de
arrastrar y soltar
de Balsamiq hacen
la vida más fácil
• Axure
• Axure siempre es una de
las mejores herramientas
de cableado en el
mercado y es ideal para
proyectos más complejos
que requieren datos
dinámicos.
• Sketch es una herramienta muy
popular dentro de la comunidad
de diseño que le permite crear
interfaces y prototipos de alta
fidelidad.
Con InVision Studio puede crear un
diseño responsivo en una sola mesa de
trabajo
 Aún en su versión inicial, esta
herramienta lo ayudará a crear
hermosas interfaces interactivas con
una gran cantidad de funciones.
• Proto.io es un candidato
increíble para crear prototipos
realistas desde ideas en bruto
hasta diseños completos. La
herramienta también ofrece
muchas posibilidades para sus
proyectos, incluidas
animaciones detalladas y
también animaciones
vectoriales personalizadas
• Adobe XD es un editor de
gráficos vectoriales
desarrollado y publicado por
Adobe Inc para diseñar y
crear un prototipo de la
experiencia del usuario para
páginas web y aplicaciones
móviles
• Marvel es otra herramienta de creación
de prototipos que es una excelente
opción cuando se trata de producir
ideas rápidas y refinar una interfaz.
• Figma le permite componer y
diseñar interfaces rápidamente. La
plataforma Figma se enorgullece
de ser una herramienta de diseño
colaborativo en la que múltiples
usuarios pueden trabajar
simultáneamente en un proyecto
 Framer X es la evolución mejorada de Framer Studio. Al principio Framer Studio nació para traer a
los diseñadores la oportunidad de poder crear interacciones y animaciones avanzadas. Ahora Framer

X va mucho más allá, no hace falta saber código, puedes prototipar sin necesidad de programar .
Flinto es una herramienta de diseño agradable y simple que le permite crear

interacciones únicas dentro de sus diseños .

• Principle es perfecto para crear
interacciones animadas de gran
apariencia

• El diseño de interacción es lo que

sobresale en Principle, especialmente
cuando se trata de aplicaciones móviles.
Ajustar y obtener interacciones animadas
a la perfección es muy fácil con Principle
UXPin es una plataforma para
creación de wireframes y prototipos,
como tal incluye componentes usuales
de una interfaz de usuario para que
agregues fácilmente botones, casillas
de verificación, imágenes,
• Justinmind básicamente
se utiliza para crear
una interfaz que pueda
ser testeada antes de
diseñar 
• Dado que Origami Studio es
creado y utilizado por los
diseñadores en Facebook,
puedes asumir que esta debe
ser una gran herramienta
• Hay una gran cantidad de
características con Origami,
que incluyen agregar reglas y
lógica a tus interacciones.
• Fluid es una herramienta intuitiva para construir prototipos rápidos y
elaborar diseños. Empaqueta algunos activos interesantes de la caja para
que pueda comenzar con prototipos rápidos y, una vez que haya
actualizado, es fácil ensamblar sus propios símbolos con sus activos de UI
preferidos.
• Zeplin
• diseño y desarrollo previo junto con la creación de prototipos. Le permite
tomar su diseño y prototipos, entregarlos a los desarrolladores y
asegurarse de que sus ideas se ejecuten bien.
 ¿Que es un sistema de navegación?
• Los sistemas de navegación son los elementos de una interfaz que
permiten la navegación por las diferentes secciones y páginas que
componen el sitio web. 
  Elementos que componen el sistema de
navegación de un sitio web
• Para la creación correcta de una pagina web, en el sistema de navegación
no pueden faltar una serie de elementos como:
• Menú y Sub menús de secciones o páginas en las que se divide el sitio
web
• Breadcrumb (migas de pan) elementos de información sobre nuestra
localización dentro del sitio.
• Elementos de regreso a la página de inicio o home
• El menú de secciones es la columna vertebral del sitio web. A través del
menú se debe poder acceder a todas las páginas del sitio. Por lo que dicho
menú debe aparecer en todas las páginas del sitio y localizado en la misma
posición.

pueden incluir objetos, temas y páginas de Salesforce en su

comunidad, las direcciones URL a sitios externos y etiquetas de
menú.
 Breadcrumbs

• Las migas de pan o breadcrumbs nos indican en que página estamos y a

través de que páginas hemos pasado para llegar a nuestro destino actual.
• Cuando nos encontramos en una página del sitio web, es muy útil poder
volver a la página de inicio con un solo “clic”. Normalmente esta función
la cumple el logo, ya que está presente en todas las páginas del sitio y
cuando hacemos “clic” sobre él volvemos a la página de inicio.
Como se construye un menú de navegación
• Este menú habitualmente se sitúa en la parte superior de la página, justo
debajo de la cabecera. Aunque a veces también se coloca en un lateral de
la página.
• Este menú está formado por las diferentes secciones que constituyen el
sitio web. En ocasiones cada sección está dividida en sub secciones(sub
menús).
 Paso-paso

Para crear o modificar elementos del menú de navegación:

1.Seleccione el componente Menú de navegación de la página que va a configurar.

2.Para mostrar el Iniciador de aplicación en comunidades existentes, anule la selección de Ocultar el Iniciador de aplicación en el encabezado de la comunidad.
3.Para mostrar un icono para Inicio en vez de texto, seleccione Sustituir el texto Inicio con un icono.
4.En el editor de propiedades, haga clic en Menú de navegación.
En la superposición del editor de menú, puede modificar o eliminar elementos de menú existentes o agregar unos nuevos.
5.Para agregar un elemento de menú:
1.Haga clic en Agregar elemento de menú.
2.Ingrese el nombre que desea utilizar en el menú de navegación para este elemento.
3.Seleccione el tipo de elemento al que está navegando.
Las opciones incluyen:
Página de comunidad: Vínculos a una página dentro de su comunidad utilizando una URL relativa. Por ejemplo, /contactsupport.
URL externa: Vínculos a una URL fuera de su comunidad. Por ejemplo, http://www.salesforce.com.
Acción global: crea un vínculo a una acción global. Por ejemplo, Caso nuevo.
Etiqueta de menú: Agrega un encabezado principal para su menú de navegación. Anide elementos debajo de la etiqueta de menú.
Tema de navegación: Menú desplegable con vínculos a los temas de navegación en su comunidad. Los temas de navegación se configuran en Gestión de comunidad.
Objeto de Salesforce: Los objetos disponibles incluyen cuentas, casos, campañas, contratos, contactos, tableros, grupos, prospectos,
oportunidades, pedidos, listas de precios, productos, presupuestos, reportes, tareas, órdenes de trabajo y cualquier objeto personalizado .
 1.Complete los campos basándose en el tipo que seleccionó.
•Si seleccionó Objeto de Salesforce, seleccione la vista de lista predeterminada para mostrar.
•Si seleccionó Página de comunidad, utilice el menú desplegable para seleccionar la página de comunidad a la que desea vincular.
• El campo URL rellena automáticamente la URL relativa para la página basándose en su selección.
•Para agregar la página Mensajes a su menú de navegación, reemplace el parámetro :recordId por el valor Home.
•Si seleccionó URL externa, ingrese la URL completamente cualificada. Para mantener la navegación en su comunidad,
• seleccione la casilla de verificación Abrir vínculo en la misma ficha.
•Seleccione Disponible públicamente si desea que el elemento del menú de navegación se muestre para usuarios invitados que no son miembros de la
comunidad.
2.Para mover un elemento, haga clic en     y arrastre el elemento donde desea que aparezca en el menú.
3. Anide otros elementos del menú debajo de una etiqueta de menú arrastrándolos a la derecha debajo de la etiqueta de menú.
3.Para eliminar un elemento de menú, pase el ratón o haga clic en el elemento y haga clic en    .
4.Para guardar los cambios, haga clic en Guardar menú.
Para que estos cambios sean visibles para los usuarios, su comunidad debe activarse en Espacios de trabajo de Experience y los cambios recientes deben publicarse .
• Los botones de acción son un tipo especial de
forma que genera un hipervínculo a otra
diapositiva o a otros objetos. Su uso resulta
adecuado para las presentaciones
autoejecutables; cuando el usuario pase el
puntero del mouse o haga clic sobre el botón, se
ejecutará la acción predefinida para el mismo.
  área de contenidos
• Orden secuencial para las cosas que necesitamos
 Que es un área de interaccion?
• Las áreas de interacción proporcionan los contextos en los que los
profesores y los alumnos ubican la enseñanza y el aprendizaje, abordan las
disciplinas y establecen relaciones entre estas.