Transcripciones
1. Introducción: Hola Amenace Jo Jo y basando San Francisco. Llevo más de 12 años haciendo diseño de UX. Esta es una clase de nivel principiante y te enseñaré una visión general de alto nivel de eficiente te XT no es proceso. Te enseñaré a diseñar y crear peso Page desde cero se extinguirá y
señalaré algunos mejores procesos muy importantes. Y te mostraré cómo apalancar lo libre te hizo gustar para ahorrar tiempo. Este curso es para personas que son nuevas para extinguirse o tu proceso de amigo extra para un diseñador
gráfico o para principiantes que quieran aprender diseño X. En esta clase, aprenderás una visión general del buen proceso de diseño de UX. Cómo utilizar herramientas útiles básicas en Adobe XY. Cómo crear una información, arquitectura y usuario para cómo crear baja y alta fidelidad y amigos en Adobe X'd cómo
compartir y desplazar su diseñado a desarrolladores, titulares
gruesos y usuarios o crítica y retroalimentación. Entonces si ya me están pegando a un eficiente tú excelente proceso Y no te olvides de
seguirme y robar share
2. Comprender el diseño (nivel de alto): diseño UX en el diseño en general se trata de resolver problemas de pensamiento crítico, crear experiencias y hacer visualmente atractivo y de buen gusto o incluso memorable cuando el usuario experimenta estas líneas. No lo hagas bien, gente realmente no debería darse cuenta en absoluto mientras usa el tema del producto. Simplemente trabajanos. Se supone que debe y ser muy intuitivo. Buen diseño. Es crear formas de hacer que la información y la mensajería sean fáciles de entender y digerir cada elemento utilizado en estos. Me han elegido por una razón, y no está ahí por accidente. Paso uno. Entender el aspecto más importante del deseo de alta calidad es entender verdaderamente al usuario . Esto se puede hacer con bastante facilidad con algunas técnicas y preguntas. Tenemos que preguntar y responder esta estrella con el usuario. Una vez que se conozcan los problemas que enfrenta el usuario, podemos empezar a pensar en la solución. Pero antes de diseñar verdaderamente la solución, necesitamos trabajar en otro aspecto del diseño que dará forma a nuestra solución. Paso dos. Investigación En primer lugar, debemos empezar a entender la marca. ¿ Cómo es el proyecto? Estoy trabajando en alinearme con la marca para entender la misión y los objetivos antes de pasar al siguiente paso. Queremos identificar los problemas de los usuarios y la cancha del cerebro y ver cómo se alinean antes de entrar en el diseño de la solución. Un buen proceso de diseño nos requiere asegurarnos de que realmente entendemos a nuestros usuarios observando bien usuario en su entorno natural para el producto existente y tratamos de meternos en su cabeza
haciendo tantas preguntas como sea posible, entendemos lo que ellos están tratando de lograr, lo que les gusta y no les gusta. ¿ Qué quieren y esperan los usuarios? ¿ Cuáles son los puntos de dolor? Y podemos utilizar esta información para formar persona de usuario. Siguiente paso pruebas de usuario en etapa temprana. No necesitamos encuestar a millones de usuarios. El modo efectivo de probar en etapa temprana es la prueba tres para combatir a los usuarios dirigidos con prototipo de baja fidelidad. Ahorrará tiempo, y nos trae suficientes datos para seguir adelante con el proyecto. Paso tres en los piojos. Una vez que tengas toda la investigación, toma todos los datos que tengas y dispuestas visualmente en yusor personas. Esto será útil en cualquier momento que necesites volver atrás y entender usos también. Dijiste que las personas serán guía muy útil durante futuros pasos de diseño. Si trabajaríamos en el sitio web existente o en una aplicación. Empezaremos a analizar los datos registrados. Es cualquier cosa nosotros. Ellos van a ti y es cualquier cosa que surja una y otra vez de usuarios potenciales y
averiguar ¿cómo podemos conocernos? Esto es necesita necesidades y uso de las partes interesadas. Necesita paso para empezar a construir estrella de diseño real mediante la creación de la
arquitectura de la información para definir el contenido, jerarquía y la manera de encontrar. Iniciar el hallazgo de un uso de flujo, que es cómo el uso de para ir del punto A al punto B dentro de la aplicación y cómo la aplicación interactúa con el usuario. Lo Fidelity esposa amiga es como un plano de la estrella del diseño. Estos me bajan para que el único amigo de alambre consiga la idea a través, y se puede compartir y obtener retroalimentación. Empezar a probar con los usuarios en prototipo. Observe cómo lo usan. ¿ Se confunden? ¿ Es suficiente el año? ¿ Es fácil financiar la información juntos Feedback Eatery y refinado y asegurarse de que todavía necesita objetivo de negocio y necesidades del usuario. Después de diseñar, criticar, retroalimentar y rediseñar y rediseñar un poco más, deseo compartir constantemente nuestra esposa amiga de baja fidelidad, prototipo para probar y reunir retroalimentación con el ting. Él sólo se pone mejor con colaboraciones antes que nosotros. Estos son marco de alambre de alta fidelidad con tu lluvia de ideas, la teta o y se ven y sienten para el diseño visual general. Estos soy color de patrón, topografía, iconos de
botones, imágenes y más. Finalizó la renta de esposa de alta Fidelity y trabajando con el desarrollo ing para cubrir que estos no están en un producto real. Esto requiere la colaboración amorosa con los desarrolladores, discusión
continua T back y secciones de revisión. Varias revisiones ings revisiones y sus oraciones darán lugar al diseño final, que funcionará bien para todos los usuarios. Paso cinco. Almuerzo Después de que la Prada haya lanzado, más por hacer, es el momento para el análisis de usuarios de Río. Deberíamos hacernos preguntas como. ¿ Cómo responden los usuarios? ¿ Dónde luchamos? ¿ Resolvemos sus temas en pinpoints rial? Los comentarios de los usuarios nos ayudarán a entender nuestros errores y a obtener ideas para mejoras. Podemos ir y encontramos el diseño para la próxima versión del producto. Puedes seguir todos los pasos como seguro para la próxima versión del producto. Con algún reflejo de los comentarios de los usuarios, obtendrás valiosos conocimientos que puedes usar para asegurarte de que futuros proyectos y diseñar mal para más fluidez
3. Herramientas básicas de Adobe XD: cuando almorzes será XY. La pantalla de bienvenida proporciona un punto de partida para tu deseo, e incluye recurso útil es para que empiece. Cuando esté listo para crear un nuevo diseño, haga clic debajo de cada preset para a menos que de los tamaños adicionales. Una vez que creé un nuevo archivo, lo primero que haré es guardar el archivo y leerlo. Tienes opciones para guardarlo en la tela o en tu computadora. SS El significativo Mac en la parte superior. Se trata de tres modos en el prototipo de diseño de Adobe X'd en share. Usa estos. Yo soy viejo. Para diseñar las pantallas, utiliza interacciones prototipo moto wire que simularán el flujo del alfarero que estás diseñando. Usa tu voto cuando tu proyecto esté listo para ser revisado. Eres fuerte gira para dibujar. Object on your are poor Al aferrarse a la tecla shift, puedes dibujar un cuadrado perfecto a través de un gol. En triángulo, cambias lápiz como la tecla Mayús. Dibuja algunas líneas curvas con la guerra de Penta. Es una escuela de tecnología. Simplemente los destaco y puedes ir al panel de propiedades aquí en tu
lado derecho . Tan solo deja que tus fonds favoritos que quieras usar y cambien el tamaño del fondo y la diversión. Espera si quieres. Usa panel de SS para gestionar colores, celdas de
personajes y ver toros así como un objeto puede aplicar el cuello El panel de los Reyes te
permite agregar aplicar y gerente de Hawkings.
4. Arquitectura de información: arquitectura de la información. Nombra el archivo y seguro uh, esa paja o círculo y colóquela. Añadiendo una etiqueta. Cole Home y Union Cane. Cambio de estilo Fun a tu gusto. Sorteo bursátil Algunas líneas hormigueo. Dos páginas están conectadas debajo de la página principal. Tener página de primer nivel en página de segundo nivel como ejemplos para esta clase. Puedes hacer alrededor de más páginas en detalles para tu proyecto. Es todo . Aquí está nuestra arquitectura de información. Ahora se puede ver claramente cómo se estructuró el tamaño Web.
5. Persona: persona pasar con estas cosas. Abre el archivo personal que WAAS en la frontera proporcionada primero importa la imagen personal a la R cuatro. Si dominas con fluidez, aquí está el contenido en diseño de diseño a un templo, presiona
turno común y yo dos importantes La imagen. Sostenga la tecla Mayús cuando dimensionamos la imagen para evitar distorsiones. Ahora me gustaría embellecer. Disponga un poco agregando colores en nuevos tamaños de teléfono rígidos para mejorar la
jerarquía visual , ajustando el tamaño del teléfono para que el diseño se vea más equilibrado y fácil de volver a subir bordo. Para conseguir ese panel de reparaciones aquí, puedes encender y apagar la rejilla en esta línea de paneles. Envidia. Alineando algunos más unos pies. Teoh Alce Este archivo personal nos su base para el futuro proyecto.
6. Flujo de usuario: usted, señor. Flow open, Tener un archivo totalmente nuevo, nombre y guardar el archivo. Voy a llamar a un flujo yusor. Y esto hizo lo mismo para los Knicks fuera de borda, y usamos garrapatas hacia demasiado rápido. En mi teléfono, dijiste información yo protector que creamos antes la guía para diseñar el flujo Estamos creando la página principal en esa página parte de esa página. Ahora hay queer ese cosquilleo para la página principal, un logotipo de texto para la página en la página principal. Yo quiero tener un tres escudo de iconos de acción goto que muchos presionan próximo turno I para importar los iconos. Usaré lo mismo para ellos tú mismo. Flujo. Voy a crear en el auto. Acude a selección universitaria aquí. No solo cualquier cubierta que prefieras en el mismo tamaño herramienta de alineación Lisa para alinear
los objetos seleccionados . Agregar cacao Página de acción. - Ahora esta parte superior de la página logo y estos dos iconos a la edad inferior para el bote una página. Yo solo quiero mostrar imágenes de bellos productos. Todo el mundo quiere un sólido por hormigueo a mí presentarme las imágenes del producto. Usaría el azul más claro para las imágenes de marcador de posición manteniendo presionada la tecla de opción para duplicar las imágenes para el bote de la página de detalles, tendré una imagen de gran tamaño y alguna descripción para los productos que éramos. Ángulo recto indica las descripciones de texto. También puedes redimensionar el gráfico introduciendo el tamaño en el componente Panel A línea y realineando el diseño hasta que estés contento con él. Se inspira en errores para proporcionar la dirección e interacción. El círculo indica un enlace. Usa pin a pupilo al drama. Por qué este color de sujeción
puede cumplir con el tamaño del trazo, también. Esto crea otro enlace desde la imagen del producto hasta el producto, dijo a Paige. - Voy a duplicar el indicador infligido por lo que no necesito volver a dibujar así. Convocatoria a la acción en la página principal al detalle del producto. Pagina esto en otra acción kowtow a un producto hasta la página este. Copia el botón en la página de inicio para hacer. Esto no me parece consistente. Me llevó los detalles para los muchos artículos si quieres, pero voy a saltarme la lista para esta demo anoche. En decadencia, el bastón está vinculado al carrito de compras. Uh, eso es todo golpea un ejemplo de alto nivel de uso de flujo
7. Cuadro de cable de baja fidelidad: Lofa Alambre diario. Amigos Abrir Pre mate Baja Fidelidad Esposa amiga que WAAS proporcionó en la clase agua. Esto mastica alambres para sitio web tiempo particular para navegar a través de estos elementos reutilizables. Abre un nuevo archivo y guárdelo en el escritorio. Y recuerden a ellos el tablero de arte. Utilice arquitecturas de información que creamos como guía para diseñar su sitio web. Mantenga presionada la tecla de opción para duplicar el fueraborda. Lo primero que pondría en la página web es un logo. Por lo que esta estrella poniendo un logo en nuestra esposa. Amigos importan los iconos que se proporcionaron en una frontera transfronteriza. O puedes crear uno nuevo desde cero que se ajuste a tu marca. Contamos con canchas de compras de icono de menú en búsqueda, y vamos a utilizar estos tres iconos en todo el sitio. Esto hizo todo azul como el kit de amigo de alambre. Enciende la rejilla. 10. Ayuda a posicionar los objetos. También es útil para crear un sitio web receptivo en resumen y ver copias para describir el producto. Volvamos a esposa Frank it y copiamos elementos que para nuestro proyecto, cada página de inicio es un gran tu imagen. Por lo que la música y ver los artículos actualmente promocionados cuando prestan a los sitios. Es importante un llamado permanente a la acción para esta página web de Thomas. Hold space vino a agarrar en la ventana. Eso es agregar Carrusel, quejándose a la página principal para promover el fondo. Yo sólo usaría círculos para Carrusel para estos proyectos. Nuestro deporte de homepage ahora copia todo desde casa, página nuestra tabla y pégalo en la página principal con la limpieza gastada usa el dedo del pie tintineo que
empiezan por ello. En primer lugar, estuve en una orden de cateo. Coloque pruebas de agua para recordarle qué hacer en el campo de texto. Añadamos muchos artículos enormemente. Los enlaces de detalle se pueden agregar a la arquitectura de la información. Para esta versión corta, no la necesitamos ahora. Quiero agregar una línea divisoria para diferenciar thes diferentes secciones para una mejor
jerarquía visual . Um, volveré a poner el local en el menú. Esta ceniza Iconos de redes sociales financian el pre mayo esposa amiga. Esto pasa a separarse otra vez una página. Esto reduce ese elemento que ya hemos creado. Logo sobre contras y marcador de posición de imagen recita la imagen para representar a la Plata en un
nombre de producto y peinó las fuentes. Lo que hacemos aquí es volver atrás, atrás, atrás, atrás. Una vez que esté contento con la mirada y la sensación y la posición, empezaré implicado. Mantenga la imagen en producto, pase por propiedad y haga clic en Espeluznante. Me gusta mostrar 12 productos para esta página en el hater hacia la página. Última pantalla es la Ayuda de nuestra fiesta. Me gustaría hacer más grande la imagen para exhibir los productos. Agregar hater sub hater en descripción. Usa el ron. Es algunos para nuestra descripción de marcador de posición. - Copiar iconos e del amigo de alambre cremate Última añadir una llamada a Acción Botón uno Último Pan, Adelie esposa, Francia Nacido.
8. Cuadro de la voz de alta fidelidad: Hola, amigo de alambre
fagili. Simplemente toma el pan un frente de alambre diario y re guárdelo una sierra alta fidelidad lejos de solo
voy a usar un corto cada ojo para alto y esta cavar con mismo para todos los hacia arriba y leer Nombre It Click en la imagen Lugar cuarto incluir idiota que importaciones y tu imagen de la clase
proporcionada. Por orden este. Elige la imagen de Pendiente Perla del barrio Imagen. Siguiente habilidad Edo. Envía la imagen a la parte de atrás. Ahora esto a otra cuadrícula solía usar 24 columnas para la tumba para que podamos medir la posición fuera de los objetos. Se reemplaza el logo por el logo de rial que se proporciona en el orden Clase cuatro, luego cambia el color de los elementos para llevar collar. Para esto uso, um, tiene color. 33333 como el collar trayendo y este anuncio que cubren al panel Activos en el
lado izquierdo . Y ahora se ha cambiado el botón en este DUI. Para todos los botones y los iconos del carrusel. También los iconos para el menú, carrito de compras y lupa. - Pasemos a un segundo aeropuerto. En primer lugar, esto cambió el nombre de Our Boards, que alto para amigo de alambre de Delhi, y luego este movimiento de vuelta a la primera son pobres y luego copiar el Al Amends. Hasta el momento, el primero nuestro tablero y D el Pan Adelie elementos en Segunda son pobres. Después pasa un ritmo de nuevos elementos hacia los enfermos y fuera de borda. Ahora esto. Sustituir ese logotipo y luego esto. Al igual que los elementos que hay en la sección de menús. Inglaterra intentó y probó Teoh y cambiar el Element Qala a tu gusto en esto en Grey College. Basta con ver. Y entonces esto hizo el I horizontal en el rosa. Y por último, ha cambiado la espalda en color fuera del menú. Y ahora es estilo caminar a casa, perfeccionando el look y sentir fuera de los muchos artículos. Los nuevos elementos ajustan los elementos a la posición perfecta en tamaño, y una vez que estés satisfecho con el look y la sensación, es que podemos pasar al tercer fueraborda el detalle del producto Página Sam T. Primero esto reemplaza locales e iconos y segundo este collar de prueba de partido al cerebro, abre el borde de la imagen. Y así, como las imágenes de Bata y ahora la magia. Va a suceder arrastrando y soltando esa imagen que acabamos de seleccionarla en la
cuadrícula repetida , y esto hace lo mismo para el Tex y uno. Y por último, la última página la página de detalles del producto. Sustituir el logotipo y los iconos y coincidir. Esto ha alfombrado el cerebro y cambia los colores del icono de abotonamiento. Ahora se llama la Llamada a la Acción y dos carros y esta perfecta posicionada para el ícono que es
click , droga click droga al 2do 1 que quiero.
9. Prototipo interactivo: tipo de portal interactivo Haz clic en Thea Poros que quieras decir como la pantalla de inicio da click en el gran Icono en la esquina superior izquierda. Azul indica que son pobres se nos envía con éxito la pantalla de inicio. Haga clic en el objeto que desea dejar de seleccionar tienda ahora, luego arrástrelo a la página. Te gusta vincular a Teoh. Volvamos a la página principal en selecto y no una llamada a la acción y enlazar a la página. Esto hace que el local volver a la página de inicio se haga clic en el Año en Botón y Desnudo, vinculado a la página de Fatah. En sí hace el menú, pero él volviendo a la página principal. Ahora hay Hacer la tienda ahora enlace botón a la página de video parodia y baja volver a la página de
inicio. Otro bajo Golding Volver a la página principal. Este enlace. Escuchar tres imagen a producto. Ito Page. Ahora jugó Icon en la esquina superior derecha y revisa la obra desplazándose hacia arriba y hacia abajo. Asegúrese de que todos los enlaces estaban correctamente. Después de pasar la revisión de los enlaces, podemos empezar a compartir. Voy a trabajar al equipo para P back el, uh, vierte lo más destacado en azul aliado Ah, los serán compartidos. Hay cinco presets de construcción, revisión de
diseño, presentación de
desarrollo, pruebas de
yusor y personalizado. Esto elige desarrollo para este proyecto por defecto. selecciona Down Activos globales. ID solo requiere contraseña para este proyecto. Demos click en Crear Enlace para subir el proyecto después de su subido click en el Total Generado Tu L click en el Icono de la Burbuja. Verdaderamente comenta y usa pin para anclar el área, mientes para liderar comentario. Aquí tienes una forma de ver lo común que el usuario hizo el icono de mezcla. Está en el icono de desarrollo aquí. desarrollador del visor puede ver las especificaciones de diseño. Pueden copiar activos CSS Coal o Donald. Es muy útil.
10. Ending: muchas gracias por crear tu proyecto con habilidad. XY espero que te diviertas aprendiendo conmigo. De verdad creo que es una poderosa aplicación para que tu idea se cruce si tienes el primer temporizador, Un diseñador gráfico, sí
espero que te ayude a dar vida a tus ideas. Y me encantará verlo. Puedes seguirme en todavia compartir fuera de tu libre para enviarme un mensaje en redes sociales a través instagram o a mí en alargar Y muchas gracias por ver.
Jill Chu, Product Designer
