Transcripciones
1. Introducción: Hola, Mi nombre es Nicole y soy diseñadora de UX. Mi trabajo se centra principalmente en tu diseño I X desde bosquejar toe wife con el objetivo de crear prototipos ideas. Y esto es lo que quiero enseñarte Hoy uso fig ma en mi proceso de diseño i X porque este es el paquete completo puedo cablear diseño prototipo, colaborar y entregar mi trabajo todo en la misma herramienta en esta clase aprenderás a usa Sigma en tu propio proyecto cómo construir sistemas de diseño escalables consistentes y el proceso de diseño
completo a partir de por qué enmarcar puntera entregando tu prototipo Este sin clase dirigido tanto a principiantes que quieran aprender el proceso de diseño ideal y con experiencia diseñadores que quieran optimizar su desempeño. Nos vemos en la clase.
2. El proceso del diseño: Felicidades por inscribirse en esta última. Antes de enseñarte a usar Sigma primero quiero compartir contigo el proceso de diseño ideal que debes seguir como eres X diseñador? Mucha gente me pregunta, ¿cómo empiezas? ¿ Qué proceso de diseño utiliza? ¿ Cuántos pasos hay? Algunas personas piensan que comenzamos con solo abrir un archivo de diseño y de inmediato comenzamos a diseñar. Esto no es idea. Grandes diseñadores tienen un conjunto de etapas por las que atraviesan para poder hacer lo que hacen. Hay tres grandes etapas para cada uno que eres UX diseño, proyecto, entender plan y diseño. Hacemos este enfoque donde entendemos y planeamos antes de diseñar porque ahorra mucho tiempo. Debe utilizar esta comunicación de ida y vuelta, malentendidos y problemas que pueda encontrar en el proyecto. La primera etapa entender se trata de entender el negocio detrás de la idea. Se trata de extraer la información necesaria del cliente, como identificar problemas. Encuentra la solución, estableciendo tus objetivos de usuario y definiendo personas. El plan de segunda etapa consiste en crear el viaje del usuario fuera de tu después de que se esbozarlo en papel y compartirlo con tus clientes. Entonces, después de volarla arriba y confirmar los marcos de la esposa de papel, la tercera etapa es sobre esposa apuntando, diseñando y prototipando tu y esta es la etapa que vamos a cubrir en este curso. Te voy a mostrar paso a paso, cómo puedes crear marcos de alambre interactivos, sistemas de diseño de
campanas, prototipos de
comercio y colaborar con tu equipo. En el siguiente video, voy a hablar de por qué debes elegir a Sigma como tu herramienta de diseño.
3. Por qué Figma: Entonces, ¿por qué debes usar Sigma del que probablemente hayas oído hablar para un ilustrador de tienda o en diseño? Estas tres herramientas no están hechas para tu diseño I X, y no recomiendo usar ninguna de ellas. Photo Shop está hecho para la edición de fotos. Illustrator está hecho para dibujar ilustraciones, y la línea indie está hecha para el diseño de revistas. El único motivo por el que solíamos usarlos hace años era porque eran las únicas opciones que teníamos. Pero ahora tenemos muchas herramientas que están específicamente hechas para tu diseño I X. En 2018 las mejores herramientas de diseño serían Fig, sketch de
MMA, Adobe X'd y algunas otras. Creo que el estigma es la mejor de estas opciones. ¿ Por qué? Estas son algunas razones principales First Sigma es gratis para individuos, a diferencia de Sketch, que es de 99 dólares para Adobe X'd, que es stand todo esto por un mes. Sí tiene suscripciones pagadas para equipos más grandes, pero es gratis si eres un individuo. Además, Sigma se basa en la Web. Funciona en el navegador. Esto significa que funciona en cualquier plataforma. Se pensaría que ya que está basado en Web, tendría muchos bugs. Pero Sorprendentemente, he estado usando desde hace el último año y apenas he encontrado ningún problema de naturaleza en términos su diseño. Es muy intuitivo de usar. Por ejemplo, las restricciones le permiten adaptadores de diseños cuando cambia el tamaño de la pantalla y los componentes
le permiten reutilizar elementos en sus diseños. Vamos a ver más de eso más adelante. Vignal también tiene características de prototipado y colaboración construidas, y no necesitas herramientas de prototipado separadas como mármol o visión. Sigma también tiene colaboración en tiempo real con diseñadores. Tú y otros diseñadores de tu equipo pueden trabajar en el mismo archivo al mismo tiempo. También se pueden crear sistemas de diseño con vinculado. Eres componentes que todo el equipo puede utilizar. Y por último, puedes entregar fácilmente a los desarrolladores, quienes tendrán acceso a estilos de pelaje y características de exportación. Los únicos inconvenientes del estigma es que aún no funciona sin conexión, pero puedes arreglarlo abriendo el archivo antes de desconectarte. Entonces, como puedes ver figura es el paquete completo que te permite trabajar en el
proceso de diseño completo . En la siguiente serie de lecciones, comenzaré con una introducción a Fig Mama, y luego te mostraremos el paso a paso proceso de diseño Euronext usando señal
4. Introducción a Figma: en este video, te
voy a dar una introducción amigable para principiantes a la Fig MMA Para empezar a usar figment en tu dispositivo. Todo lo que tienes que hacer es simplemente registrarte usando tu email y contraseña y ya estás listo para salir. Puedes abrir la Fig Ma y el navegador como un er l normal o incluso usar el escritorio hacia arriba. Tenemos el último botón aquí para crear una nueva falta y el botón de importación cuando se quiere importar otros archivos como archivos de boceto o que archivos fig. Ahora estoy en las corrientes de agua. Aquí es donde los archivos que creaste se almacenan por defecto, pero también puedes tener equipos e invitar a personas a ello. Vamos a crear una nueva granja. Esta es la barra de herramientas aquí donde encontrarás las herramientas que necesitas para crear objetos en el
lado izquierdo . Ahí está el panel de capas de toda la derecha. Contamos con el panel de propiedades. Empecemos por crear un marco, que es la pantalla que vamos a diseñar. Al hacer clic en la herramienta de marco, puedo elegir una de las sugerir que presintoniza aquí a la derecha. Escojamos iPhone ocho y cambiemos el nombre del dedo del cuadro en casa ya que esta será la
pantalla de inicio fuera de mi brazo. Ahora vamos a crear el Natwar. Escogeré la herramienta de rectángulo mientras estoy dibujando Fig. Mi ayuda me fuera chasqueando mi objeto a los bordes del marco. Voy a hacerlo blanco y le añadiré la sutil sombra. A continuación, voy a añadir el título de la pantalla. Esta es la perra casera. Sólo voy a agregar texto y llamarlo casa. Hagamos que el tamaño de fuente sea de 16 píxeles. Centrar el texto, alinear los libros de texto en el centro del marco y centrar verticalmente utilizando las
guías inteligentes . Organicemos las cosas. Estos para ir bien juntos en un solo grupo. Entonces vamos a seleccionar Um y agrupar la selección y renombrarlos a barra naff. Ahora vamos a crear un rectángulo aquí. Cuando aguanto y muevo sobre el marco, puedo ver el espacio entre el rectángulo y el marco. Parece que no está centrado, así que elijamos un centro de línea aquí. Este será un diseño de auto, así que lo voy a hacer blanco en la sombra de liquidación a ella, Una tarjeta suele tener un radio de frontera, así que vamos a tener eso desde aquí. Cuatro píxeles ahora quiero agregar una imagen al rectángulo. El mejor modo de hacerlo es cambiar su voluntad a imagen y elegir la imagen desde el buscador . Ahora voy a añadir el título de la tarjeta aquí debajo de ella. Ahora duplicémoslo y añadamos otro subtítulo
más pequeño Debajo de él. Yo, como este, tengo un tamaño más pequeño y también un gris más ligero. Ese es el nombre su subtítulo Fuera de la tarjeta. Ahora estos objetos de aquí van bien juntos, así que sólo voy a seleccionarlos y golpear comando Ito. Agruparlos ahora dicen, quiero crear otra pantalla y digamos que decido quiero cambiar el
color de fondo del NAB Nuestro necesitaría cambiar el color en todas y cada una de las pantallas e imagina que tienes 50 o 100 pantallas. Pasarías horas trabajando en una alteración tonta, Así que para evitar estos tiempos desperdiciados, usamos componentes. Aquí es donde se pone realmente interesante. Un componente es un objeto que se puede reutilizar varias veces. Este número va a ser el usado varias veces en mi arriba, por lo que lo seleccionaré y pincharé en el componente que pueda en la parte superior. Esto lo convirtió en un componente. Tiene esta bonita que puedo en el panel de capas. Hagamos lo mismo por la tarjeta, ya que también se va a usar como es, me voy a Dublín, Kate el marco otra vez Ahora que usé componentes. Ahora este bar naff es una instancia de este oponente de red. El 1er 1 que creamos es el original, mientras que éste es el complicado, que es una instancia fuera de él. Ahora. Cualquier cambio que ocurra en el original se actualiza en su instancia. No obstante, cualquier cosa que le pase a la instancia no se actualiza en el original, ya que es sólo una instancia de la misma. Ahora aquí es donde se pone aún más interesante. Podemos hacer componentes anidados. Por ejemplo. Yo quiero hacer una barra ahora que tenga un botón Atrás. Crearé una bolsa pero aquí y luego seleccionaré la instancia y el botón Atrás y crearé otro componente a partir de ella. Esta vez lo llamaré ahora barra lejana. ese entonces, llamaré normal a la barra original. Vamos a Topic ocho este fotograma de nuevo para tener otra pantalla de detalle ahora por añadida esta barra puedo seleccionar qué tipo de naff lo impide del menú de componentes. Aquí. Hablemos de las restricciones. Las restricciones es una forma de hacer que tus diseños se adapten al tamaño del marco en este momento, si hago este cuadro más grande en el que se comporta como esperamos, no
se adapta al tamaño del marco. Pero podemos arreglar eso y hacer que sea un poco sensible al tamaño de la pantalla. Entonces hagamos que este nah barras comportamiento horizontal izquierda y derecha en lugar de izquierda y hagamos lo mismo para la tarjeta. El flujo ahora responde con el tamaño del cuadro. Hagamos que los otros respondan a También podemos establecer preocupaciones verticalmente. Entonces digamos que quiero hacer esta tarjeta más grande para la calle Detalle Ahora mismo. Se ve así, pero quiero que el título y el dedo del pie del subtítulo siempre se quede en la parte inferior cuando lo haga más grande. Dado que los títulos están dentro del componente, iré al componente original y cambiaré su comportamiento a partir de ahí. Por lo que diré en este título. Hacer que el comportamiento vertical sea inferior en Lee y lo mismo para el subtítulo. Ahora, cuando hago más larga la tarjeta, actúa como yo quiero. Y por supuesto, eso aplica para la otra instancia del componente sin tener que rehacerlo. Es muy importante tener en cuenta que el diseño de cables debes previsualizar tu diseño en 100% pocos vez en cuando solo presiona comando cero, y se acerca al 100%. Esto es para ver los tamaños de fuente en tamaño real antes de mostrarte cómo hacer que estas pantallas interactivas. En caso de que necesites exportar a una imagen, solo tienes que seleccionar al amigo que quieres exportar e ir a exportar en la parte inferior derecha, Y aquí puede elegir múltiples tamaños y múltiples formatos al mismo tiempo. Ten en cuenta que no tienes que guardar nada en FEMA porque también ahorra tu trabajo todo el tiempo. Ahora hablemos de prototipado. Hasta ahora, hemos estado en el mundo del diseño. Ahora sólo vamos a prototipo modo. Al pasar el cursor sobre las capas, estas cabinas hacen círculos cortos para crear un vínculo entre las pantallas. Simplemente dirigimos el círculo a donde se quiere vincularlo, y como este es el componente original, aplica el puntera singling todas sus instancias. Por lo que necesito cambiar esta cosa a la segunda guardia. En cambio, cuando hago clic fuera de pantallas, puedo ver todos los enlaces creados. Deshacernos de los creados por defecto desde el compartimiento original. Simplemente arrastro y suelto para quitar el enlace. También quiero que este botón Atrás vuelva a enlazar a la página de inicio. Puedo hacer esto una vez, y se aplica instantáneamente a otras instancias. Esta flecha azul significa que esta es la primera pantalla fuera del prototipo. Congee eso simplemente arrastrándolo y colocándolo en la pantalla que desee. Juguemos nuestro prototipo golpeando en esta obra, Aiken. Ahora estamos viendo el prototipo interactivo. Ahora todos los enlaces que creamos están funcionando de la manera que queremos. Observe que cada vez que hago clic en algún lugar eso no es un enlace. Dará el flash azul para decirme dónde están los objetos de longitud. Tú y los espectadores pueden comentar usando el Bubel Aiken y comando justo en el prototipo . Ahora, cuando quieras compartir tu prototipo con tus clientes o co trabajadores, simplemente haz clic en el prototipo de compartir y copia el enlace. Cuando vuelves a la falta, también
puedes ver el nivel común en la lucha misma, lo cual es muy conveniente. Cuando compartes tus archivos con desarrolladores, ellos pueden ver el código detrás de tus diseños. Cuando elijas el modo de código aquí, puedes elegir los idiomas CSS que pido o android. Por lo tanto, selecciona consistentemente un objeto y ve algunas propiedades de diseño aquí. También podrías cambiar el formato del abrigo. Ahora esta característica de corte no se utiliza para simplemente copiar pegar todo el código de tu diseño. Tiene más sentido para detalles de diseño avanzados como sombras o resplandor. Los desarrolladores también pueden exportar capas, objetos o marcos de la misma manera que lo hicimos nosotros. Por lo que este fue un panorama general sobre los futuros de Sigma. Te recomiendo empezar a jugar y acostumbrarte a usarlo antes de empezar a crear el tuyo propio. En la siguiente lección, vamos a empezar a trabajar en un proyecto de la vida real. El primer paso será por qué enmarcar
5. Paso 1: construcción de fotogramas de wire.: en este video, voy a empezar por construir los marcos de alambre. Los marcos de alambre son el esqueleto de Europa. Debe incluir la funcionalidad de diseño y su ex, pero no debe mostrar el diseño o colores fuera de eso a lo largo de la clase. Voy a construir el viaje de usuario principal fuera de Airbnb. Me gusta usar Airbnb como ejemplo porque el diseño está bien pensado y tiene un sistema de diseño
simple y consistente. Y amigo siempre debe ser a gran escala sin colores ni diseños. Deténgase para poder enfocarse en lo que importa. Sigue conmigo y construye tu propia página web. Si no tienes una idea de sitio web, puedes diseñar Airbnb, Twitter o cualquier otra op que uses antes de pasar a marcos digitales de esposa. Primero debes bosquejar los marcos de tu esposa en papel. Por lo que anteriormente esbozé los marcos de la esposa en papel, y así se ven como la página principal. Resultados de búsqueda listado detalles, resumen y pago. Ahora en fig MMA, vamos a construir casi todo el camino marcos, usando componentes. Es posible que sientas que va a tomar algo de tiempo extra al principio, pero te va a ahorrar horas más tarde, en adelante. Lo primero que vamos a hacer es crear aquí una biblioteca de tu ojo. Voy a empezar con el componente de texto, así que voy a crear una capa de texto y convertirme en un componente. Este será el tamaño normal en este momento. No nos importan las estrellas de diseño y fondo. Voy a mantenerlo así. Hagamos los otros textiles también. Asegúrese de que el nombre fuera de la capa permanezca en el mismo texto y el nombre del componente
siempre debe ser Barra de texto y el tipo de estrella H uno sería de 36 píxeles. H dos será 28 y cada tres será 20 y el texto pequeño sería 14. Este espacio será para otros componentes que creamos a lo largo de la esposa Cualquier cosa. Entonces vamos a crear el frente de casa. Antes de empezar a crear objetos, voy a crear la cuadrícula en la que voy a construir. Digamos que quiero que mi contenido entre dentro de un 900 pixeles agarrado. La forma más fácil es simplemente crear y 900 píxeles rectángulo. Entonces tenemos que mostrar a los gobernantes golpeando turno. Nuestro entonces arrastra a guardias de la regla y partió a los guardias en el rectángulo. Borraré el ángulo estricto. Ahora hagamos el bar de la NASA. Ahora usemos el texto que creamos ahí y lo copiamos y peguemos aquí. Para crear el menú,
Lings se convierten en un anfitrión viajes, mensajes y un perfil. Aiken. Agruparé estos ings manuales solo para mantener las cosas organizadas. También necesito el local aquí, así que esta barra ahora definitivamente se usará en todas las pantallas, así que voy a convertirla en un componente de aspirina. Vamos a movernos un poco más rápido. Tendremos aquí un título H one. Necesito el texto dedo del pie tamaño acuoso con el contenido dentro. Hagamos una gran barra de búsqueda aquí. A Marcador de posición. Prueba Los Ángeles. Entonces voy a crear un botón aquí. Hagamos un más oscuro y convertidos en un componente. Ahora que tengo el look general, lo
voy a mover a la guía estrella, después copiar una instancia de la misma, luego editar el texto para buscar lo que sigue. Añadamos una sección titulada aquí y entonces este título probablemente estará en H dos. Hagamos la ficha de listado. Esta será la imagen, y aquí tenemos el tipo off listando todo el departamento. Este será un texto pequeño. Tendremos el título del listado aquí, y voy a convertirlo en la Calle de la Naturaleza. He notado que quiero que todos mis encabezados sean audaces. Entonces, solo editemos eso la biblioteca. Ahora voy a hacer otro pequeño texto para escribir el precio en él. Ese es el listado. Ahora voy a convertirlo en un componente y simplemente duplicado para crear dos más junto a él. Vamos a poblar a los otros dos para que sea lo más real posible. Muy bien, La siguiente sección serán experiencias. Es muy similar a los hogares. Entonces solo voy a replicar toda esta sección y simplemente poblar con un nuevo contenido. Ya casi terminamos desde esta pantalla. Todavía tenemos el pie de página, así que vamos a crear un rectángulo grande y añadir algunos enlaces en él. El cada y e sección tendrá sobre prensa y ayuda y este es el título, Así que hagámoslo bóveda. Voy a hacer esto como grupo y llamarlo Sección Footer. Ahora duplicemos esto para tener el mismo pero diferente texto. Entonces hagamos este pie de página como componente. Así lo hicimos sólo esposa enmarcó la página de inicio. Hagamos una corriente más. Duplicaré la pantalla ya que vamos a utilizar muchos componentes similares de ella. De acuerdo, vamos a deshacernos de todo excepto los listados y esta página. Vamos a colocar el contenido lleno con en lugar de dentro de la cuadrícula. Voy a hacer los listados un poco más pequeños para el mapa. Simplemente voy a crear un gran rectángulo en esta pantalla, el mapa descubriendo la altura del arroyo y no hay pie de página. Entonces la altura de mi pantalla es de 900 píxeles, y la novela es de 60 píxeles. Yo solo puedo teclear 900 menos 17 y me va a calcular el tamaño. Vamos a duplicar estos anuncios gratis para poblar este lugar. Todavía tenemos los filtros de búsqueda aquí para ahorrar tiempo. Duplicemos el botón aquí ya que se verá un poco similar. Voy a hacer que todo sea más pequeño que desconectarlo de su componente. Hagamos de esto el filtro de fecha. Y cuando termine, puedo convertirlo en componente y llamarlo una pequeña línea ascendente. Añadamos dos filtros más, invitados y sostenga el tanque. Lo último que voy a hacer es en la pequeña barra de búsqueda. En primer lugar, voy a hacer el componente de barra de búsqueda. Entonces voy a duplicar la gran búsqueda de detección y darle estilo necesita ser más pequeño y tener un borde con un texto más pequeño. Ahora hagamos de este otro componente, y lo llamaremos Barra de búsqueda Pequeña. Hagamos que la altura del marco sea la misma altura fuera de mi pantalla, que es de 900 correcciones y hechas. Detengámonos aquí. Voy a continuar. Por qué enmarcar las otras pantallas y la siguiente lección las vamos a hacer interactivas.
6. Paso 2: que interactúan tus fotogramas de wire.: Ya llevo amigo. Las otras pantallas fuera de su bebé listando detalles, el resumen y las calles de pago. Ahora hagamos que estos coreanos sean interactivos. En primer lugar, queremos que el botón de búsqueda nos lleve a los resultados de búsqueda. Entonces queremos el dedo del pie listado. Llévenos siempre a los detalles del listado. Podemos hacerlo desde el componente original, y se aplica en todas sus instancias. Después el botón de libro nos lleva a los detalles del listado. El botón de continuar nos lleva a confirmar, y ellos y el día de confirmación nos lleva de vuelta a toda la playa. Y por último, queremos el dedo del pie local. Llévenos siempre a la página de inicio. Juguemos al prototipo. Siempre asegúrate de que este día de prototipo sea 100% para ver los tamaños reales. Ahora, después de que hayas terminado con los marcos interactivos esposa, puedes compartir el prototipo con tu equipo o cliente y obtener retroalimentación sobre la
interacción de diseño y en general, ¿lo haces X. Como puedes ver, este paso no incluyó el diseño en absoluto. En la siguiente lección, vamos a diseñar los componentes para convertir estos marcos esposa a un prototipo de diseño
7. Paso 3: estilizar tu sistema de diseño: Por el momento, tenemos novio las pantallas y las hicimos interactivas. Y mientras hacemos eso, construimos un año I biblioteca de componentes. Ahora estamos listos para empezar a pensar en el diseño. Ya podemos empezar en estos componentes que creamos. He colocado todos los componentes originales en la biblioteca U I para que sea más fácil de diseñar. Empecemos con el color. Voy a empezar con el color de la marca primaria aquí. Ya copié los colores más profundos urbanos, así que lo voy a deslucir. Entonces voy a duplicar este color para crear el color de acento. A continuación, voy a elegir la gracia diferente que voy a usar para el diseño de la interfaz. Empecemos con el más oscuro. Voy a empezar con el predeterminado Gris Oscuro. Entonces voy a jugar con él para que sea un poco azul. Ahora que tengo mi color más oscuro basado, puedo elegir otros tonos fuera de esta gran fácilmente tomar el mismo color mediante el uso de la controversia del
recolector de color . Y ahora podemos elegir un tono de este grandioso luchando por el formato H S B y haciendo que el V , que es el brillo más ligero cuando veas que esta gracia resultando ser dos azules Solo haz la saturación. Tan sólo s un poco menos Intenta hacer alrededor de cinco grises diferentes con alrededor del 20% de diferencia en brillo. Estos son los diferentes tonos que se usarán en el diseño. Muy bien, así que esta es mi paleta de colores. Ahora, hagamos los frentes porque hemos creado textiles como proponentes. Ahora podemos cambiarlos desde la biblioteca y se aplicará en todas las pantallas. Quiero cambiar este dedo del pie del teléfono permitirse muy similar a la zona de una y ser usos. Elige Avenir. Voy a hacer pesados todos los rubros y el resto romano. Ahora todo nuestro texto aplicaba el mismo material de frente. Para poder utilizar estos colores rápidamente, podemos añadirlos a nuestros preajustes de color. Aquí, podrías crear aquí un nuevo color o no podemos reemplazar los colores existentes. Ahora puede seleccionar todo el texto y convertirlo en la grabadora oscura predeterminada. También quiero que los colores primarios y acentos estén en mis presets. Entonces solo voy a eliminar los viejos colores aquí. Rápidamente, entonces, son los dos nuevos colores. Ahora vamos a hacer las botellas. Quiero mis botones dedo del pie siempre poblados. Ambos botones deben tener siempre un radio de borde y el latín normal debe tener el color
primario. El esbozo. Milton debe tener un borde y un color de acento. De acuerdo, La entrada tendrá un radio de borde pequeño y un contorno gris. El diseño de etiquetas tendrá un contorno gris claro así como en la frontera Rabia. Hagamos el ahora para La red tiene esposa por el color equivocado y una gran frontera, pero sólo en la parte inferior. Podemos hacer eso agregando una sombra de gota con nobler y un píxel en el Why This way, se aplica sólo en la parte inferior. Y necesito colocar el Airbnb que pueda. Entonces sólo voy a cambiar la sensación de director. Ir a imagen. Quiero que mi foto de perfil llene el estricto ángulo. Entonces hagámoslo también. Entonces ese es el número de diseño para la ficha de listado. Tenemos que hacer primero que el radio del borde permanezca píxeles. Entonces voy a hacer el tipo de listado mayúscula, tener un poco más de espaciado entre letras y hacerlo aún más pequeño. El precio. Voy a hacerlo de color gris más claro. Y ahora hagamos las barras de búsqueda. El grande tiene un color de fondo blanco y un borde gris claro, un radio de borde y una sombra de gota. Voy a añadir el micrófono aquí. Hay muchas formas de agregar artículos en tu diseño. Puedes usar teléfonos Aiken como delanteros también o simplemente podrías agarrarte. Svg Aiken. Voy a subir esto. Podría que previamente lo descargara, lo haga más pequeño colocado dentro del componente de búsqueda y lo haga genial. La barra de búsqueda más pequeña tiene el mismo diseño, apenas más pequeña. Simplemente puedo hacer clic derecho en el estilo de copia de la barra de búsqueda grande y basarlo en la
barra de búsqueda pequeña . Entonces voy a hacer que la sombra sea un poco más sutil. Después copia la búsqueda que puedo y hazla más pequeña para el pie de página. Simplemente voy a cambiar el campo a blanco y luego en el cuarto superior y luego los perderé con. Entonces eso es todo. Ya terminamos de diseñar, discuto I biblioteca. Ahora contamos con un sistema de diseño que podemos utilizar en todo nuestro producto. Veamos cómo se ven nuestras pantallas ahora, sólo por diseñar los componentes en la biblioteca U I con pantallas casi están terminados. Qué impresionante es que Solo quedan unas pocas alteraciones menores por hacer. Yo haré eso. Entonces en la siguiente lección, vamos a finalizar el prototipo y hacer que las pantallas respondan.
8. Paso 4: finalizar tu prototipos: Por lo que he hecho las últimas situaciones en los streams que diseñamos. He añadido las imágenes, los Aikens, e iniciado todas las pantallas. Veamos nuestro diseño en vivo en el prototipo. Esto se parece más a Airbnb que a D urbano se parece a todos efectivamente. El último que tenemos que hacer es hacer que nuestro diseño sea un poco más receptivo antes de terminar el proyecto. Hacer esto ayudará a los desarrolladores a implementar nuestros diseños teniendo en cuenta la capacidad de respuesta. Nos permite traducir nuestras ideas y mostrarles lo que sucede cuando la pantalla se hace más grande . En este momento, nuestro diseño no responde. Entonces pensemos cómo queríamos lucir. Por lo que queremos que los componentes que tienen llenos con dedo del pie tengan restricciones izquierda y secas y las otras cosas se queden en el centro con más pequeños. Entonces hagámoslo. Por lo que la restricción nunca y la flotadora sería izquierda y derecha. Y hagamos eso por todos sus componentes completos,
entonces la forma más fácil de hacer que todo el contenido permanezca en el centro es simplemente agruparlos todos con Comanche. Y hagamos eso por todo el centro confiado, y les daré a todos un centro de restricción para esta pantalla,
sin embargo, sin embargo, quiero que la empresa escale con el tamaño de pantalla. Entonces veamos cómo resultó todo en esta pantalla. El lleno con Natwar en Footer, quédate a la izquierda y a la derecha, mientras que el Continente se queda en el centro. En esta pantalla, todo escala cuando disminuyo y aumenté la pantalla con, y esta pantalla es similar a la página de inicio, por lo que mi empresa sigue en el centro. De acuerdo, eso es para la respuesta a la luz entre los puntos de ruptura. Ahora, cuando hay más diferencias de diseño entre los tamaños de pantalla, ahí es cuando necesitas diseñar varios tamaños. Por ejemplo, en la página de inicio, definitivamente no quiero mantener una cuadrícula de tres columnas en tabletas, tamaños y tamaños móviles. Entonces hagamos una versión móvil fuera de toda la perra. Voy a empezar por duplicar el marco de la página principal, y voy a tener hambre este contenido golpeando al barco de mando G y moverlo un poco a la izquierda. Y ahora aquí voy a colocar las cartas una debajo de la otra. Podemos usar los mismos componentes que creamos y ocultar algunas capas en el móvil, por ejemplo, aquí en la red, quiero mostrar el número, pero no quiero los enlaces de menú dentro de él para que pudiera simplemente ocultarlos. Ahora que he hecho la mayor parte de mi contenido. Si en la vista móvil, puedo cambiar el tamaño del marco. Antes de hacer eso. Necesito cambiar el comportamiento de restricción fuera de todo mi contenido a izquierda para que se mantengan a la izquierda cuando cambié el tamaño de fotograma. Ahora puedo cambiarlo dedo del pie iPhone it. Entonces voy a hacer el marco que le dijo para el pie de página. El diseño cambiará mucho, así que voy a tener que desconectarlo de su instancia para cambiar su posición. A continuación, sólo
voy a mover estos uno debajo del otro. Cada uno de los títulos aquí definitivamente debería ser más pequeño en Mobile. No quiero que el botón de búsqueda se muestre en más mientras así que podría simplemente ocultarlo del panel de
capas. Entonces eso es todo. Veamos cómo resultó. Como puedes ver, diseñamos este sitio web con un 99% de componentes. Esta es la clave para convertirse en un gran y eficiente diseñador. Recuerda, antes de finalizar tu proyecto y manejarlo para desarrolladores, asegúrate de que tus capas y componentes sean de buen nombre. Trata de nombrar todas tus capas para asegurarte de que tu colaboración vaya sin problemas con tus compañeros. Después de hecho simplemente comparte el prototipo con los desarrolladores para que puedan comenzar a inspeccionar el diseño y exportar imágenes. He agregado este archivo de figura a la descripción fuera de la clase aquí, Frito duplicó y lo reutiliza de la manera que quieras. Si quieres desafiarte, puedes agregar más componentes a la biblioteca de ojos y seguir diseñando las otras pieles su bebé.
9. Reflexiones finales: Espero que disfruten de esta última. Ahora sabes diseñar con el proceso de diseño ideal. Usando figments características poderosas, aprendiste a construir marcos de alambre interactivos, construir sistemas de diseño, colaborar con el equipo y entregar a los desarrolladores. Ahora puedes usar este proceso en tu trabajo diario ya sea que estés sintiendo, respondiendo o trabajando dentro de él antes de irte. No olvides dejar una reseña y compartir este curso con tu red para que la gente pueda saberlo. Por cierto, tengo un curso completo que enseña a principiantes absolutos cómo convertirse en tus diseñadores I X. Consulta el enlace en la descripción. Asegúrate de seguirme en Twitter y en mi bloque medio donde bloqueo sobre diseño. Te deseo la mejor de las suertes en tu carrera de diseño. Si tienes más preocupaciones, siéntete libre de publicar tus preguntas por
Nicole Saidy, Designer, Coach, Speaker
