Experiencia de Adobe Diseño de trucos, consejos y técnicas

01 de 07

Experiencia de Adobe Diseño de trucos, consejos y técnicas

Cuando Adobe presentó Experience Design como una vista previa pública, la empresa logró dos hazañas bastante sorprendentes al mismo tiempo. Primero, establecieron un espacio en el mercado emergente de software de prototipos. En segundo lugar, crearon una oportunidad para que los usuarios jueguen con un "trabajo en progreso" y está permitiendo que los usuarios influyan en ese progreso. Ahora que la aplicación ha estado disponible durante algunos meses, pensé que sería un buen momento para compartir algunos trucos, consejos y técnicas de Experience Design.

Pero primero, es posible que se pregunte qué se entiende por software de creación de prototipos. Entre los principales actores de este espacio se encuentran Proto.io, Principle, UXPin, Atomic.io, Experience Design e InVision. A diferencia de las aplicaciones como Sketch 3, Photoshop e Illustrator, donde se producen diseños estáticos, estos editores gráficos presentan interactividad, movimiento y otras características comunes en el espacio de diseño web y móvil de hoy.

Con el auge de los dispositivos móviles y el inevitable enfoque láser en el Usuario, ya no es suficiente que un diseñador prepare algunos bocetos, reúna algunas composiciones y luego libere el proyecto o lo cargue en un servidor web. El flujo de trabajo UI / UX ha cambiado fundamentalmente las cosas. Cada paso del proceso, desde la identificación del usuario, los bocetos, los esquemas, las maquetas y los prototipos, ahora están sujetos a extensas pruebas por parte del usuario.

Es esa última etapa, la creación de prototipos, donde los puntos débiles se descubren y se arreglan antes de que el proyecto pase a la producción final. Aquí es donde la interactividad, el movimiento, las transiciones de pantalla y la ubicación de todo en la pantalla son tan importantes. Los problemas y los problemas no se pueden mostrar simplemente como una imagen estática o explicarse verbalmente. Después de todo, estos productos son para humanos reales. En lugar de trasladar todo eso al código, el proceso de creación de prototipos se realiza cada vez más mediante un software de gráficos diseñado solo para ese propósito. Es más fácil corregir un error, reemplazar una imagen, reescribir un texto, mover un botón, etc. utilizando un editor visual que reescribir y depurar el código constantemente.

De hecho, este software se ha convertido en un componente clave en el entorno de diseño y desarrollo "Rapid Prototyping" de hoy.

Dicho esto, divirtámonos con Experience Design.

02 de 07

Cree un pin de destino con un círculo simple en Adobe Experience Design

Un aspecto interesante de XD es su uso de herramientas de dibujo vectorial. ¿No encuentras un icono? No hay problema. Rueda la tuya propia. Así es cómo:

1. Seleccionar La Herramienta Elipse y, con las teclas Opción / Alt-Mayús presionadas, dibuje un círculo.
2. Con el círculo seleccionado, establece el Color de relleno hasta FF0000 y el borde a "ninguno" en las propiedades.
3. Haga doble clic en el círculo para mostrar los puntos de anclaje. Arrastre el anclaje inferior hacia abajo.
4. Haga doble clic en el Punto de Anclaje seleccionado y las curvas se reemplazarán con líneas.
5. Dibuja otro pequeño círculo con un relleno blanco y sin avivar. Colóquelo en posición y seleccione el pin y el círculo. En el panel Alinear en la parte superior de las Propiedades, haga clic en el botón Centro horizontal y se creará el Pin.

03 de 07

Crear un desenfoque de fondo en Adobe Experience Design

Es común tener texto u otro contenido sobre una imagen de fondo. El problema aquí es que la imagen, la mayoría de las veces, supera el contenido que se encuentra sobre ella. Una forma de resolver este problema es desenfocar la imagen de fondo. Puede desenfocar la imagen en Photoshop u otro software de edición de imágenes, pero esto es algo ineficiente, especialmente porque XD ahora puede manejar esta tarea por usted. Así es cómo:

1. Crea una nueva mesa de trabajo y agrega tu imagen de fondo.
2. Seleccione la herramienta Rectángulo aDibuje un rectángulo sobre la imagen. Con el rectángulo seleccionado, configure Relleno en blanco y Trazo en Ninguno.
3. Con el rectángulo seleccionado, seleccione fondo borroso en el panel de propiedades. Los tres controles deslizantes son Desenfoque de cantidad, brillo y opacidad. Esto es lo que hacen:

• Cantidad de desenfoque: Ajusta el desenfoque de la imagen debajo de la forma. El valor máximo es +50.
• Brillo: Ajusta los resaltes y sombras en la imagen. El valor mínimo es -50 y el valor máximo es +50.
• Opacidad: Afecta la transparencia de la forma y la visibilidad de la imagen debajo de la forma. Los valores van del 0% al 100%.

Si realmente quieres "cambiar las cosas", cambia el color de la forma y juega con el valor de Opacidad para cambiar el "aspecto" de la imagen.

04 de 07

Crear un Scrim en Adobe Experience Design

Un problema de diseño común es que los elementos de la interfaz tienen que ser de un color común, pero se pierden cuando se colocan sobre una imagen de fondo o un color sólido. La solución es un scrim. Una malla es un gradiente algo opaco colocado entre el elemento de la interfaz y el fondo. Esto es fácil de lograr en XD. Así es cómo:

1. Cree su mesa de trabajo en XD, agregue una imagen y copie y pegue los elementos de una interfaz desde el Kit de interfaz de usuario - Archivo> Abrir kit de interfaz de usuario … - en la mesa de trabajo. En la imagen de arriba, la foto hace que la barra de estado y la barra de aplicaciones sean difíciles de ver.
2. Seleccione la herramienta Rectángulo y dibuja un rectángulo. En el Panel de propiedades, seleccione Rellenar y seleccione Degradado del menú emergente en el Selector de color. Establecer los colores degradados en blanco y negro. Establezca el valor A - Opacidad- al 60% y el Blanco Un valor al 0%.
3. Con el rectángulo seleccionado, seleccione Objeto> Organizar> Enviar hacia atrás. Los elementos de la interfaz ahora son visibles sobre la imagen.

05 de 07

Crea una imagen avatar en Adobe Experience Design

Un patrón de diseño común se encuentra en las aplicaciones de chat donde las personas hablan entre sí y la imagen del orador aparece en la pantalla. Estos avatares suelen ser imágenes que han sido enmascaradas. Es muerto simple lograr esto en XD. Así es cómo:

1. Comienzas con una imagen y un círculo u otra forma en la mesa de trabajo. Puedes rellenar el círculo con cualquier color. Lo que no necesitas hacer es agregar un color de trazo. Desaparecerá cuando crees el efecto, así que, ¿por qué molestarte? Si necesita avivar el círculo, cópielo en el portapapeles.
2. Mueva el círculo a la imagen y seleccione la imagen y el círculo. Con los objetos bot seleccionados, seleccione Objeto> Máscara con Forma. Cuando sueltas el ratón, se crea el avatar. A partir de ahí podrás redimensionarlo.
3. Si necesita agregar un trazo, pegue el círculo sentado en su portapapeles en la mesa de trabajo. Con la copia seleccionada, desactive el relleno en Propiedades y agregue un color y ancho de trazo. Para alinearlos, seleccione ambos objetos y haga clic en los botones de alineación central en las opciones de alineación en la parte superior del panel de propiedades.
4. Si quieres mover la foto en la máscara, Haga doble clic en la máscara. Esto mostrará la imagen y la forma de la máscara. Haga clic en la imagen y arrástrela a su posición. Cuando suelte el mouse, la imagen estará en su nueva posición dentro de la máscara.

06 de 07

Juega con Adobe Experience Design Artboards

Los paneles de diseño de Experience Design no son solo para que usted coloque contenido. Ellos también pueden ser manipulados. Aquí hay un par de cosas que puedes hacer:

1. Si necesita las versiones Horizontal y Vertical de una mesa de trabajo, duplique la mesa de trabajo y, con el duplicado seleccionado, haga clic en el botón de paisaje en el panel Propiedades. La mesa de trabajo cambiará a orientación horizontal. Si la mesa de trabajo tiene contenido, haga clic en el nombre de la mesa de trabajo y las propiedades de la mesa de trabajo aparecerán en el panel de propiedades.
2. Para agregar un color personalizado a la mesa de trabajo y al proyecto, seleccione la mesa de trabajo y haga clic en la ficha de color de relleno en la sección Aspecto del panel de propiedades. Ingrese el valor hexadecimal para el color y haga clic en el signo +. El color se agregará como un color personalizado. Para aplicar ese color en otro lugar, seleccione un objeto y haga clic en el chip Color personalizado para aplicar el color.
3. Las mesas de trabajo se pueden hacer verticalmente desplazables. Para hacer esto, seleccione la mesa de trabajo y cambie su altura en los paneles de propiedades o arrastrando la parte inferior de la mesa de trabajo hacia abajo. En el área de desplazamiento del panel de propiedades, seleccione vertical en el menú desplegable e ingrese la altura de la ventana gráfica para la pantalla. Esa línea azul discontinua muestra la parte inferior de la ventana gráfica. Para probarlo, haga clic en el botón Reproducir y desplácese. Para desactivar el desplazamiento, seleccione Ninguno en el menú desplegable Desplazamiento hacia abajo.

07 de 07

Editar un kit de interfaz de usuario móvil en Adobe Experience Design

Experience Design contiene un kit de IU para desarrollar IU de iOS, Android y Windows. Cuando los abres por primera vez, puedes pensar que están bien colocados. No del todo, cada uno de los bits y piezas de esos kits es completamente editable. Averigüemos construyendo un wireframe de Android.

1. Comience seleccionando la herramienta de Artboard y seleccionando Android Mobile en la sección de Google del Panel de Propiedades..
2. Seleccione Archivo> Abrir kit de UI> Material de Google. Esto abre el Kit de interfaz de usuario de Diseño de materiales. Selecciona la lupa y la carpa.Las guías de pantalla de la mesa de trabajo.. Me gusta comenzar con este porque me da las guías para colocar correctamente los elementos de la interfaz en pantalla. Si haces clic en una de las barras azules, verás que está bloqueado. Haz clic en el bloqueo adjunto a cada uno de ellos para desbloquearlo.. Marque la mesa de trabajo y copie la selección en el portapapeles. Vuelva a su documento y pegue la pantalla en su mesa de trabajo.
3. Haga clic una vez en la barra de aplicaciones que se encuentra en la parte superior de la mesa de trabajo. Observe cómo puede seleccionarlo. Al aire libreSeleccione Objeto> Organizar> Traer al frente. Su selección está ahora por encima de las Guías de pantalla. Esto debería indicar que cada uno de los elementos en la pantalla se puede editar.
4. Haga doble clic en la barra de estado. En la parte superior y, en el panel de propiedades s.y el color de relleno a 455A64. Haga doble clic en la barra de aplicaciones y establezca su relleno en 607D8B. Esto debería indicar que cada elemento de un kit de IU se puede editar para cumplir con las especificaciones de color del proyecto.
5. ¿Qué pasa con los iconos? Aquí es cómo cambiar su color. Doble click en el corazon para seleccionarlo. Si observa el Panel de propiedades, puede suponer que no puede editar la selección. No exactamente. Haga doble clic en el corazón una vez más.. Las Propiedades se abren y cambia el color de relleno a FF0000. Repita este truco doble-doble para los iconos restantes y el texto.