Transcripciones
1. Introducción: Bienvenido al curso de diseño Web con Sigma y este curso vamos a aprender a diseñar una sencilla aplicación Web para servicio de entrega de lavandería. Si has tomado un curso anterior, elaboramos una versión móvil para esto también. Y así en este curso, vamos a estar trabajando en la aplicación Web para ello alto. Mi nombre es Nina, y soy tu instructor para este curso. Durante los últimos 10 años, he diseñado y desarrollado obligaciones tanto móviles como web para tanto starups en proyectos propios como
de otros clientes. Al final de este curso, tu aprendiste a diseñar una aplicación de panel Web hermosa para empresas o clientes , o tal vez incluso para tus propios productos también. Lo que diseñamos. El marcado de tres páginas donde más aprenderá a importar plantillas a Sigma. Cómo usar imagen enmascarada para nuestras imágenes será aprender cómo los componentes pueden ayudarnos a hacer que el proceso de
diseño sea mucho más rápido. También estará aprendiendo a usar el diseño automático, que podemos usar para crear diseños hermosos e intuitivos que podemos replicar realmente rápido, incluso usó el contenido de Microsoft. Rio se enchufa justo dentro de Sigma para generar algunos datos de muestra para nuestro proyecto. último, pero no menos importante, aprenderemos cómo podemos crear múltiples versiones de nuestro proyecto y usar el historial de versiones justo dentro de Sigma para poder navegar por todas las diferentes versiones de nuestros diseños. Entonces si estás listo para aprender a diseñar una aplicación de goma hermosa y
sencilla usando Sigma, salta justo dentro y te veré en este curso.
2. Esquema de proyecto: todo bien. Por lo que hasta ahora hemos construido un simulacro para una aplicación móvil. Un marcado completo con siete páginas. Ah, y ahora nuestros clientes nos dieron un nuevo proyecto en el que trabajar, y esta vez parece que va a ser una aplicación Web. Ah, para que sus tiendas de lavandería realmente naveguen sus solicitudes de servicio de los clientes. Y luego a partir de ahí, pueden aceptar o declinar estas solicitudes y luego cambiar su estatus. O el último marcado permitió que los clientes para esta empresa de canguro limpio pudieran realmente
enviar una solicitud para que se les recogiera su lavandería, se los llevara a la lavandería y luego se les entregara de vuelta fresca y limpia. Y así parece que ahora quieren una especie de tablero o tablero Web para que sus
tiendas de lavandería puedan usar, lo cual tiene sentido por completo. Y, por
supuesto, queremos hacer una aplicación Web que sea receptiva. Entonces si el si el cliente o la lavandería lo abre en su dispositivo móvil, todavía
queda bien. Um, tenemos que llegar con el esquema de color, así que ya se nos ocurrió un esquema de color para los últimos proyectos que aplicaremos nuestro
esquema de color y también nuestros fondos al proyecto. Y por supuesto, también
podemos utilizar el logotipo para este proyecto. este momento, sólo
estamos realmente interesados en las páginas requeridas por ahora. Por lo que queremos inscribirnos, barra barra la página de inicio de sesión y luego inscribirnos. Opciones serán enviar el pasaporte por correo electrónico y firmar con Google, similar a nuestra aplicación móvil. Queremos un tablero para ver sus ganancias y estadísticas desde arriba tiene sentido. Entonces esto es de nuevo para que las tiendas de lavandería vean cuánto dinero han hecho a través de Clean Kangaroo y luego están diciendo que una gráfica aquí estaría bien. Entonces vamos a seguir adelante y encontrarles una gráfica para usar como baja. Y luego por último, vale la pena mostrar toda su solicitud de servicio con la opción de elegir cambiar su estado de cada solicitud para dar al cliente eso informado. Si recuerdas en nuestro diseño de aplicación móvil, teníamos un poco de estado en los servicios y eso mostró
en qué paso estaba el servicio de lavandería . Entonces eso lo controla la tienda, como la lavandería aquí, um, pasando por esta página y cambiando el estado de cada pedido o cada solicitud que entra . Entonces sí, bastante simple y directo. Bueno, página de registro de
aplicación, una página de tablero y un servicio solicito página. Entonces ahora que conocemos muchos de los conceptos y herramientas a las que tenemos acceso en fig MMA, creo que diseñar estas tres páginas será súper fácil. Y en la siguiente lección, vamos a saltar y empezar a configurar con una plantilla. Ah, y yendo de ahí.
3. Comenzar con una plantilla: Está bien, entonces creo que estamos listos para empezar con nuestro nuevo proyecto aquí. Algo que voy a mencionar es que no vamos a pasar tanto tiempo pasando por detalles
muy específicos en esto sobre este proyecto sólo porque cubrimos prácticamente todo en las últimas secciones. Por lo que vamos a gastar esta sección realmente bajando a armar maqueta para
aplicación Rob Super fast eso, con
el fin de ayudar sin. Lo que he hecho es que he armado un pequeño archivo de plantilla en han usado un montón de otras plantillas que puedes encontrar a partir de estas plantillas usaron un punto Txt. Por lo que este primer enlace aquí es un enlace a los diseños de materiales fig plantilla MMA que pueden utilizar este es
una versión gratuita. Por lo que incluye un montón de elementos y diseños que puedes utilizar las gráficas gratuitas de éste para fig MMA. Ah, que puedes ir y usar también, y eso te da lindos gráficos de aspecto dentro de tus diseños de figura fuera. Por lo que ya he ido adelante y descargado estos y luego colocarlos dentro de esta plantilla web de
canguro limpia que puedes usar. Y tiene un montón de cosas por dentro también que vamos a explorar eso con el fin de agregar esto a tu proyecto o a tu higo MMA Primero, voy a dirigirme a mi equipo de canguro limpio aquí porque sí quiero colocar esto dentro de un proyecto en aquí. Si no tienes este equipo donde no has seguido este paso, también
puedes simplemente poner este archivo en tu carpeta de borradores también, y eso funcionará muy bien. Entonces voy a seguir adelante y me dirijo aquí a nuevo proyecto en Vamos a nombrar a este proyecto aplicación
web o vamos a hacer tienda de lavandería Aplicación web. Vamos a crear proyecto y luego sigamos adelante y seleccionamos Are Clean Canguro lloró. Simplemente no caben archivo aquí Una vez que se haya importado con éxito. Voy a seguir adelante y solo haga doble clic para abrirlo aquí y repasemos muy rápidamente
algunas cosas aquí dentro. Por lo que hay cuatro páginas configuradas aquí. El 1er 1 tiene nuestros tres marcos principales que intentaban diseñar Um, la cuarta página aquí tiene los requisitos que pasamos en la última lección. Eso tienes acceso a eso aquí es bajo y Estas son las tres páginas que intentaban diseñar en nuestra página de marcas Web Por aquí, entonces tenemos estilos. Así que he ido adelante y en realidad he creado algunos estilos para mi texto, así
como el esquema de color que utilizamos en la última lección o en las últimas secciones. Y en realidad, los
he agregado también a los estilos locales. Por lo que una vez que importas este archivo, tienes acceso a los mismos estilos de color que agregamos en las secciones anteriores, así
como a algunos textiles con nuestro Fondo Rubicam Carla. Ahora bien, si no has seguido las últimas secciones, adelante y asegúrate de instalar estos fondos en tu máquina local. Y luego, si estás ejecutando la web de fig mo hacia arriba, dirígete a Google y busca instalador de fuentes fig MMA y luego descarga eso para que
puedas usar estas fuentes en tu fig, mi aplicación Web también. De lo contrario, si estás debajo de esa parada, solo puedes instalar esas fuentes y luego volver aquí atrás, y luego debería funcionar bien. También tengo una página de componentes aquí donde coloqué fueron de nuevo. Utilicé diseños de materiales, plantillas
de figment para generar muchos de estos. Recurso es así que tenemos un montón de tarjetas aquí que podemos usar. Tenemos un pequeño gráfico aquí de la plantilla de gráfico de la que les hablé antes. Um, un montón de botones, desplegable, campos de
texto, incluso y luego a especie de rosa aquí para información y esas cosas. Ah, y también un pequeño tablero de navegación también. Ahora la razón que han creado estos y te han proporcionado con ellos para que podamos pasar por armar o burlarnos súper rápido. Um, ya
hemos aprendido muchos de estos conceptos, incluyendo cómo crear componentes y cómo reutilizar y cambiar componentes y cómo crear
instancias a partir de componentes y usarlos. Um, si aún no has lavado esas lecciones, asegúrate de ir a las últimas secciones y repasar los componentes. O si has olvidado cómo funcionan, te animo a que vuelvas a repasar esas lecciones tan bajas en solo tipo de llegar a la velocidad con eso. Sí, bueno, usa muchos de estos componentes aquí solo para hacer que nuestro proceso de diseño sea mucho más rápido y más eficiente. Una cosa genial en la que no vamos a meternos demasiado, Por cierto, es que en tus activos encontrarás un pequeño icono de la biblioteca del equipo por aquí. Sí. Si estuvieras trabajando con un equipo, en realidad
puedes seguir adelante y publicar estos componentes que tienes justo aquí para
todo tu equipo. Y ahora, una vez que lo hagas, si no tienes la versión completa, te dirá
que necesitarás un plan profesional para usar esta función. También puedes simplemente publicar el estilo para que entre tu equipo, si están trabajando en múltiples proyectos, puedas usar los mismos estilos. Entonces si hago clic en esto, toda
la app canguro del equipo tendrá acceso a estos estilos para la fuente. Y el color está bien s Oh, definitivamente
puedes publicar thes estilos entre tus equipos y usarlos en el plan gratuito. Pero si también quieres tener acceso a todos estos componentes entre múltiples
proyectos diferentes o múltiples archivos diferentes dentro de tu equipo, definitivamente aprovecha el año de biblioteca del equipo. Y por supuesto, puedes usar todos estos componentes simplemente yendo al grifo de activos, y tienes acceso a ellos aquí mismo también. Estos son solo componentes generales que no tienen categoría. Estos botones de aire, contenedores ven tarjetas, así que definitivamente estaremos usando estos y nuestros simulacros aquí. Entonces volvamos a rep maquetas de rep y luego en la próxima escucha empezaremos a diseñar nuestra página de inicio de sesión a partir de ahí.
4. Página de inicio de sesión: todo bien. Entonces, sin más preámbulos, vamos a saltar a diseñar aquí nuestra página de maletas. Solo voy a usar set y zoom en la página aquí mismo. Entonces lo que quiero hacer aquí, quiero seguir adelante y dividir esto en este marco en dos porciones del lado derecho. Tendré un poco de imagen puesta. Entonces del lado izquierdo tendremos nuestro registro y panel, que será bastante sencillo y directo. Entonces primero lo primero. Vamos a seguir adelante y usar la cuadrícula de diseño para que podamos ver exactamente lo que estamos haciendo. Vamos a seguir adelante y hacer clic en el marco, y entonces ya he configurado un layout grit s para que simplemente podamos encender la visibilidad y usar eso aquí mismo. Deberías ver este año porque esto forma parte de la plantilla. Pero si no simplemente vas y agregas una cuadrícula de diseño con un tipo de columna de conteo 12. Dije el papa, una ciudad del color al 3% por lo que es más fácil ver todo lo demás. Um, el tipo se estirará y luego los márgenes son 60 en los sitios en la canaleta es 10 entre las columnas aquí, así que una vez que hayas encendido eso, sigamos adelante y creemos un rectángulo para tal vez por aquí. Vamos a seguir adelante y asegurarnos de que esta es una línea correctamente. Y ahora vamos a usar un tapón realmente genial llamado ceniza virgen. Por lo tanto, vamos a ir a gestionar los enchufes para instalar eso. Si no lo tienes, simplemente ve a navegar por todos los enchufes. Ahora, una vez que esto se cargue, notarás que podría ser la primera opción aquí. O para cuando estés viendo este video, podría estar en otro lugar. Por lo que simplemente puedes buscar en Splash en la barra de búsqueda. Aquí está bien, ya lo tengo instalado, así que no lo voy a instalar. Pero puedes hacer clic en este botón para instalarlo y volvamos a nuestro archivo aquí y luego usamos plug in on slash. Ahora, si recuerdas, usamos ceniza virgen en nuestra página de inicio de sesión anterior que hicimos en nuestra aplicación móvil. Ahora, esto es de nuevo un recurso de imagen de stock gratuito que puedes usar y así que están enchufados te ayuda a insertar imágenes mucho más fácilmente en tus proyectos. S así que asegúrate de seleccionar primero tu rectángulo aquí y luego de ir a buscar en Vamos hacer tal vez tienda de lavandería, ver qué sale. Enfriar. Entonces tenemos un montón de opciones. Yo sólo voy a mantenerlo sencillo e ir con este 1er 1 aquí. Creo que se ve bastante bonito. Enfriar. Simplemente voy a seguir adelante y cerrar eso aquí, Uh, Y ahora sigamos adelante y solo creamos un pequeño divisor entre estas dos secciones. Entonces estoy creando una línea y usando turno para asegurarme de que sea recta y luego haciendo un
color de trazo apagado. Vamos a nuestros estilos y elegimos nuestro Vamos a hacer el color secundario aquí, el naranja hagamos el ancho, tal vez cinco píxeles o el año de espesor. Y entonces sólo sigamos adelante y pasemos esto a los derechos. Entonces está justo entre nuestras diferentes secciones aquí. A lo mejor podemos chocar hasta ocho píxeles o vamos a hacer seis píxeles. Eso se ve bien. Entonces ahora solo voy a apagar mi grado de diseño para el marco aquí. Ah, y así vamos a seguir adelante y crear un marco para nuestro registro y panel aquí y tener en cuenta, siempre
se pueden crear marcos dentro de marcos solo para mantener las cosas más organizadas. Simplemente adelante y dibuja aquí un marco. Tan solo asegúrate de que encaja toda esta sección aquí. Y entonces podemos incluso configurar un layout. Genial dentro de aquí. Hagámoslo. Collins tiene a cuatro Colon's con un margen de 60. Yo la conseguí de 10. Haz 5% aquí sólo que podamos alinear las cosas correctamente. Primero vamos adelante y añadamos o logo en la parte superior. Entonces pasemos a nuestro recurso Es que debiste haber descargado de la última lección. Uh, ve al logo encendido y vamos a seguir adelante y arrastra este SPG color canguro justo aquí. Y luego mientras sostenía, cambiando a Ault, voy a seguir adelante y redimensionarlo mientras mantengo su posición a Let's Do 76 por 76. Deberían funcionar. Simplemente voy a seguir adelante y colocarlo justo por aquí y tal vez mantener un espaciado de 60 desde la parte superior es bajo. Usemos T para crear un texto de logotipo también aquí, y luego sigamos adelante y asignemos un estilo o un textil de encabezamiento uno y luego elijamos ah, estilo de
color o estilo de relleno del azul primario. Aquí, sigamos adelante y solo alineamos aquellos seleccionándolos juntos. Y luego sigamos adelante y agruparlos también. Usando Command G. Voy a renombrar esto a logo. Adelante y agreguemos una descripción. texto aquí es fila, así que se usa T. Pero esta vez realmente vamos a dibujar un cuadro de límite para el texto justo aquí. Simplemente no se desborda a menos que te registres para ver tus ganancias y excepto
las solicitudes de lavandería de los clientes. Creo que eso es bueno. Vamos a seguir adelante y desvincular este estilo y hacer rumbo a eso se ve bien. Y ahora sigamos adelante y sumamos algunos botones y campos al año. Um, así que sigamos adelante y elijamos nuestros activos. Apuñalar por aquí y luego seguir adelante y abrir los componentes aquí. Manejemos la firma de Google, pero aquí y luego sigamos adelante y arrastramos un campo de texto son en realidad dos de ellos aquí , uno para correo electrónico, uno para contraseña, y luego también necesitamos ah habilitado pero en como fila para nuestro inicio de sesión. Y luego hay un divisor aquí también. Por lo que sólo vamos a separar los dos tipos diferentes de Loggins usando este divisor. Así que adelante y arrastró que aquí es baja y vamos a seguir adelante y sólo acercar aquí y estoy correctamente alineado estos también y redimensionarlos perfectos. Estás firmando con Google Button para estar primero aquí, y después vamos a tener el divisor aquí. Usemos los centros horizontales de alineación, pero aquí, solo para asegurarnos de que esté alineado correctamente, muévalos un poco hacia abajo y entonces tal vez mantengamos un espaciado de 30 píxeles aquí, 30 píxeles con los campos de texto en los campos de texto pueden ser tal vez 15 píxeles uno del otro donde incluso
podemos hacer 10. Y sigamos adelante y solo pongamos nuestro pero aquí también arrástrelo todo el camino a través. Vamos a bajarlo un poco porque queremos también poner una contraseña olvidada. Pero aquí sí, podemos hacer eso simplemente cocinando té y luego teclear para conseguir contraseña. interrogación. Si no te daba automáticamente los botones. Carla. 14 puntos Ah, textil. Aquí, adelante y despegue la celda y luego seleccione. Um, pero en Carla 14 puntos. Adelante y alinémoslo aquí. A 2 20 píxeles de aquí. Está bien, eso se ve bien. Sigamos adelante y también duplicemos este botón de pasaporte olvidado. Colóquelo aquí abajo y luego haga términos de servicio y política de privacidad para enlaces aquí. Voy a seleccionar el final y en realidad usar comando. Estar aquí para desplegarse. Se controlará más allá de Windows. Sigamos adelante y así así y hagamos línea horizontal y luego mantengamos el espaciado apagado. Hagamos 40 desde abajo. Sigamos adelante y seleccionemos este marco aquí y solo ocultemos o maquetemos la cuadrícula solo para ver qué
tenemos . Creo que eso se ve bastante bien. Vamos a seguir adelante y simplemente renombrar un montón de cosas aquí o cambiar la configuración de un montón de componentes aquí. Uh, voy a saltar aquí, cambiar este por correo electrónico. Cambiemos este por contraseña. Y ahora, si seleccionamos o capas panel, deberíamos poder simplemente saltar aquí. Y luego escondamos aquí nuestro marco de la suerte así que solo mostramos el correo electrónico y luego hacemos lo contrario en mejor campo y escondemos el correo. Perfecto. Tenemos correo electrónico y contraseña, y ahora solo queremos cambiar el nombre de este botón para iniciar sesión. Vamos a seguir adelante y sólo un multi. Seleccione estos dos botones es Ley y Cambio. El relleno a nuestro estilo de color oscuro o texto oscuro aquí también. Perfecto. Creo que tenemos un bonito log en paz ahora y ahora. Espero que estés empezando a ver el poder de los componentes reutilizables y con qué rapidez podemos
armar una página como esta que podría haber tardado horas en otro diseño. El software es perfecto. Entonces en nuestro próximo video, vamos a saltar a nuestra página de dashboard y crear un bonito dashboard para nuestras tiendas de lavandería aquí.
5. Masks de imagen: todo bien. Hasta ahora hemos aplicado imágenes a las formas simplemente arrastrándolas a la forma o sobre la forma. Pero realmente no hemos explorado cómo funcionan las máscaras de imagen. Entonces en esta lección, les voy a mostrar una forma alternativa. Se llevaron a cabo imágenes en tu proyecto. Entonces digamos por aquí, en lugar de tener mi imagen de mi imagen de fondo por aquí dentro de este rectángulo, quiero tenerla por dentro, tal vez en unos labios o un círculo o tal vez múltiples círculos. Um
, realmente depende de ti. Máscaras de imagen. ¿ En serio? Danos esa opción dos, por favor. Imágenes dentro de otra forma o múltiples formas en. Te mostraré exactamente cómo funcionará eso. A demostrar. Voy a crear un círculo por aquí sobre mi forma. Creo que algo así funcionaría. Y así ahora lo que quiero hacer es colocar esta imagen dentro del círculo y cortar todo fuera del círculo esencialmente para que la imagen se muestre esencialmente dentro
del círculo, y simplemente esconda todo lo demás fuera. Entonces voy a seguir adelante en el panel de capas, arrastrar mi círculo debajo de mi imagen aquí, Entonces voy a seleccionarlos a ambos juntos y hacer la opción use como máscara. Y como puedes ver aquí ahora hemos aplicado una máscara de imagen, por lo que esa imagen es simplemente máscara. Con eso, vamos a dar forma aquí para que puedas redimensionar tu círculo aquí. Si lo deseas, muévelo para elegir dónde quieres que esté tu círculo o incluso si quieres múltiples círculos. Digamos que para representar esta máscara, solo
puedes seguir adelante y duplicar tu círculo así. Acabo de duplicar tres veces, Así que vamos a seguir adelante y seleccionarlos todos juntos y luego hacer selección sindical por aquí. Y ahora, si vuelvo a crear otra máscara asegurándome de que mi forma sindical esté por debajo de la imagen aquí y luego seleccionándolos a ambos y golpeando el comando Mask or Control em de USA, seguiremos adelante y haremos lo mismo. Por lo que ahora tenemos nuestra imagen colocada dentro de este tipo de único. Yo uso la forma de tres círculos o como quieras llamar a esto aquí, así que siéntete libre de jugar con eso y ver cómo te gusta presentar tu imagen en tus proyectos. Por ahora, solo
voy a seguir adelante y eliminar este sindicato y simplemente arrastrar esa imagen fuera de mi grupo . Y así ahora vuelvo a lo que tenía antes. Entonces así es como se enfría el dominio de la imagen.
6. Página de tablero de tablero: Está bien. Entonces con nuestra página de inicio de sesión armada, ahora
podemos pasar a nuestra segunda página aquí, que es la página del tablero. Um, así que queremos incluir un montón de cosas aquí, como los ingresos para esa lavandería,
um, um, como la de Bella. A lo mejor mostrarles una lista de algunos de sus clientes y cuántos artículos tienen o o órdenes de
lavandería de Hominy . Se complacieron. Y cosas así definitivamente podríamos agregar un montón de otras cosas como sus calificaciones. Al mismo tiempo, quiero mantener esta página simple sólo por la simplicidad de esta sección Por aquí. No queremos ir demasiado en detalle, pero siéntete libre de hacerlo tú mismo si quieres agregar más a este paciente del panel. Entonces si ahora cambiamos a nuestra pestaña de activos por aquí, um, lo
primero que queremos hacer es subir a los componentes, y entonces deberías poder encontrar este componente de navegación por aquí. Y sigamos adelante y solo arrastremos una instancia. Y aquí y vamos a seguir adelante y alinearlo a la izquierda. Déjame ver si eso lo hice bien. Perfecto a la izquierda en la parte superior. Se ve bien ahora por defecto ya han cambiado el color de fondo de estos marcos a este color aquí mismo. Entonces si el tuyo no está configurado en esos colores, adelante y ponlo aquí. Esto es solo un poco de estilings o fondo está en blanco liso, y agrega un poco de solo un poco de contraste entre diferentes elementos, como mi navegación aquí en el fondo. Entonces, sin embargo, con nuestro panel de navegación agregado aquí, um, la opción de tablero ya ha seleccionado en este, por lo que no tenemos que hacer ningún cambio aquí. Así que sigamos adelante y solo empecemos a crear nuestra página de dashboard aquí. Entonces lo primero que quiero hacer, es como el té y el tablero derecho solo para decirles que estamos en la página del tablero. Y luego sigamos adelante y desvinculemos ese textil y añadamos un encabezamiento uno. Cambiemos el Phil por texto estilo de color oscuro. Vamos a seguir adelante y tal vez mover esto hacia arriba y alinearlo en algún lugar por aquí y tal vez mantener el espaciado a 50 píxeles de aquí. Entonces en nuestros componentes, también
tenemos contenedores, así que sigamos adelante y arrastremos un contenedor grande a nuestro marco aquí. Vamos a seguir adelante y también arrastrar un contenedor pequeño. Usaremos este gran contenedor para sostener, o tal vez gráficos de ingresos y cosas así. Y luego éste para tal vez mostrar algunos de los clientes recientes para esta tienda de lavandería aquí. Entonces sigamos adelante y solo una línea sí. Oye, aquí. Eso es mantener un espaciado de 50 y luego entre sí. Mantengamos el espaciado fuera 30. A lo mejor. Creo que eso es bastante bueno otra vez. Definitivamente puedes usar setas de diseño aquí para hacer tu trabajo un poco más fácil cuando estás forrando cosas. Pero por ahora, me voy a centrar en sólo crear este diseño. Perfecto. Entonces ahora sigamos adelante y también agarremos algunas tarjetas de vista desde aquí. Um, hagamos la primera opción aquí mismo, donde la coloques por aquí con el espaciado de 30 píxeles desde la parte superior, justo como un recordatorio que muestra ese espaciado entre diferentes elementos usando Ault. Por lo que si mantienes todo para la tecla de opción, puedes ver qué mientras tienes un objeto o una forma seleccionada, puedes ver el espaciado con cualquier objeto que pases por encima. Solo un pequeño recordatorio por si olvidaste cómo hacer eso. Es muy útil. Enfriar. Entonces sigamos adelante y sumamos otro aquí. A lo mejor uno seleccionado ahora. Y haces espaciado de 30 otra vez entre esto y otra vez a medida que aprendemos Y la consistencia ux es clave . No queremos agregar ah, espaciado que parece apagado en comparación con todo lo demás. Entonces por eso estamos usando un espaciado consistente aquí. Vamos a seguir adelante y usar Ault y arrastrar otra instancia de esta
opción seleccionada o no seleccionada de la ficha de vista aquí también. Y entonces otra vez, solo
voy a revisar dos veces para ver que todo esté alineado Perfecto. Trabajemos nuestro camino de arriba a abajo aquí. Um, primero que quiero seguir adelante y cambiar este título a ingresos perfectos. Y luego seguir adelante y cambiar este texto desplegable a tal vez hagamos mensualmente. Entonces a partir de aquí, tal vez el usuario pueda seleccionar en qué término quieren ver sus gráficos o en qué Lengthy. Quieres navegar por sus datos de gráfico y, um y luego voy a seguir adelante y seleccionar de mis componentes un gráfico de barras aslo para colocarlo justo aquí. Sigamos adelante y usemos turno aquí para simplemente redimensionar esto de manera uniforme. Voy a mantener el mando y sólo expandir esto un poco más perfecto. Por lo que tenemos un espaciado de 24 píxeles de cada lado, así que se ve bien y centrado. Entonces primero vamos. Y aquí y cambiar este ingreso para tal vez reflejar el mes que estamos viendo. Entonces hagamos solo un ejemplo Octubre 2019. Eso se ve bien. Y parece que tenemos un montón de filtros aquí para el gráfico. Por lo que realmente no necesitamos este aquí arriba para que podamos seguir adelante y simplemente eliminarlo desde aquí. Tener todo al respecto estaría bien si puedes mostrar los ingresos totales para ese mes, tal vez aquí arriba. Entonces sigamos adelante y vayamos al componente maestro aquí. Y luego agreguemos un texto aquí. A lo mejor poner en una cantidad de dólares en un do 000 ¿Qué está desvinculado o desligado el estilo aquí y cambiarlo a rumbo a en esto? Adelante y acaba de cambiar el color de relleno a nuestra tecnología. Empieza aquí y muévete. Puede que esté justo aquí, y por supuesto, podemos usar el show y escondernos. Si desea mostrar el filtro en lugar del dólar señale aquí. Pero por ahora, voy a dejar eso ahí. Volvamos a nuestra página de marcas Web, y ahora tenemos que aparece bola. Entonces sigamos adelante y solo editamos esto y pongamos un número de muestra que se vea bien. adelante y ajustemos estos números aquí abajo es, bueno, eso si notan que tenemos un montón de iconos aquí que están en capas uno encima del otro, vayamos a este 1er 1 y pinchemos en iconos. Entonces una vez que encontraste el grupo Icons por aquí, adelante y ábrelo y deberías ver tres iconos aquí. Ah, el 1er 1 representa las Estrellas o cuántas calificaciones tienen. Um, entonces en este, queremos hacer gente, así que queremos dejar esta como se muestra, y luego las otras como escondidas. Y entonces lo haremos. Simplemente nos iremos Eso ha ganado 20 clientes. Um, y luego sigamos por aquí hasta el 2do 1 Es como los iconos de aquí. Y luego sigamos adelante y ocultemos el ícono de la gente ahora y luego ocultemos este también
,
así , que sólo tenemos el medio aquí y puede que sea aquí en lugar de 1 28 podemos mostrar su ingreso
total fue puesto en un número aleatorio aquí tal vez 41 k y hacer ingresos totales. Eso se ve bien. Adelante por aquí. Entonces aquí, sigamos adelante y solo salgamos del 1er 1 y escondemos los dos últimos, lo que debería mostrarnos este iPhone estrella por aquí, y yo Tal vez lo hagamos. Hagamos 4.5. Hagamos calificación media como esta. Creo que eso se ve bien cuando se usa comando y se desplaza para alejar de ahí. Perfecto. Entonces de esta manera el cliente por aquí tiene múltiples opciones. Pueden ir a diferentes pestañas para tal vez ver sus calificaciones a lo largo del tiempo, tal vez ver su número de clientes a lo largo del tiempo. Y así se tratará la página en la que estamos aquí, o la o las estadísticas que estamos mostrando aquí en cuanto a su tablero. Ahora sigamos adelante y agreguemos algo aquí. Sigamos adelante y dupliquemos rápido y cambiemos esto a clientes recientes. Acerquemos aquí y ahora si pasas por componentes de activos, he creado dos tipos diferentes de listas de avatar por aquí. Entonces son zapatos del 2do 1 justo aquí, que es el más simple. Y vamos a seguir adelante y,
um, um, a un espaciado de 24 aquí y luego redimensionar eso para que coincida con ese espaciado. Está bien, Austin, eso se ve bien. Entonces con uno creado aquí, sigamos adelante y usemos a Ault para arrastrar otra copia aquí y hacer. Puede ser un espaciado de 12 entre cada elemento. Y ahora, si realmente golpeas comando de montón de veces, seguirá adelante y duplicará los siguientes elementos en ese espaciado también. Creo que eso está bien aquí. Por lo que la lección futura volverá y en realidad los llenará con datos de muestra adecuados para que no
se vean demasiado llanos así. Pero por ahora, si me
alejo, creo que tengo prácticamente todo lo que quería agregar a mi tablero aquí. Um, de
nuevo, tenemos mucho espacio vacío aquí, así que si quieres llenarlo con un montón de otras cosas para un par de ideas que me vienen a mente podrías mostrarles sus ganancias promedio por pedido o su tiempo promedio de
entrega, Así que hay un montón de cosas que puedes agregar aquí para que se vea mejor. Pero por ahora, creo que vamos a ir con esto sólo para mantener las cosas simples. Y en nuestra siguiente lección, vamos a volver a la página de peticiones donde tenemos la lista de solicitudes de lavandería de los clientes, y luego realmente vamos a diseñar eso usando un concepto realmente cool llamado totalmente fuera también.
7. Disposición automática: Muy bien, entonces creo que estamos listos para pasar a nuestra última página aquí mismo. Ah, la página de solicitud. Por lo que aquí es donde la lavandería o quien haya ingresado desde la lavandería
podrá ver su lista de solicitudes, ya sean las que necesitan aprobación o las que actualmente se están lavando o
secando o lo que sea el caso es. Entonces vamos a tener algunos componentes similares de esta página. Entonces cuando sigamos adelante y solo copiemos esos sobre eso, tendremos aquí la navegación por lo que seleccionaremos ese muro que sostiene turno. Vamos como este título aquí. Y luego vamos a igual a esta vista también usando comando. Ver, podemos ir a nuestro marco de peticiones aquí y luego hacer comando V Perfect. Vamos a seguir adelante y renombrar esto a solicitar. Acerquemos aquí y vayamos a nuestra pestaña de peticiones por aquí, o a la selección aquí mismo. Y sigamos adelante y rectángulo antihigiénico desde aquí y luego ocultemos el rectángulo del otro y sigamos adelante y seleccionemos el texto aquí estilo desprendido y hagamos texto estilo oscuro . Vamos como el ícono aquí. Estilo desligado y hacer este texto color medio. Y entonces entremos aquí y hagamos lo contrario. Cambia este, también, el color primario aquí y luego haz este también un estilo de color primario perfecto. Por lo que acabamos de cambiar la selección de esa a ésta. Aquí. Podrías dar esto un paso más allá y realmente hacer un componente para que cada uno sea seleccionado o en seleccionado y llevar las cosas un poco más allá y nuestros componentes maestros, o hacer que los ajustes aquí en cada instancia sean perfectos. Entonces ahora que tenemos eso, vamos a nuestro Vamos a nuestro contenedor aquí y sigamos adelante y alinémoslo aquí con el texto de solicitud, y solo voy a seguir adelante y hacerlo más grande para que quepa casi toda la pantalla. Veamos cómo nos va con el espaciado. Sostén el comando, hazlo un poco más grande aquí, y vamos a seguir adelante y simplemente redimensionar eso a esta altura, y creo que se ve bien. Entonces vamos al texto aquí y cambiemos la alineación para alinear a la izquierda. Adelante y cambiemos el texto a una solicitudes de espera, por lo que estas son esencialmente las solicitudes que la lavandería necesita para aceptar o rechazar. En realidad, tal vez podamos hacer esto más pequeño, así que tenemos un par de peticiones que aquí. Y luego tenemos un montón de otras opciones para solicitud tal vez aceptada y así sucesivamente. Ahora quiero mostrarles un concepto realmente genial llamado Odelay Out here. Es relativamente nuevo con fig MMA, pero es súper útil, y esta pequeña animación en realidad está mostrando un muy buen ejemplo de ello. Esencialmente, te
permite crear marcos inteligentes que se redimensionan en función del contenido que hay dentro de él. Por lo que esto podría ser bueno para un montón de cosas, como botones de nuevo. Entonces a medida que estás escribiendo, los botones se cambiarán de tamaño según el texto. O, por ejemplo, si tienes un montón de elementos similares que entrarán en un marco, puedes usar el diseño automático para simplemente mover fácilmente las cosas de mover así, si quieres leer más sobre el diseño automático, adelante y echa un vistazo a este artículo. Pero también voy a seguir adelante y aplicarlo aquí para mostrarte cómo funciona. De acuerdo, así que ahora vamos a ir a nuestra puñalada de activos por aquí, donde tenemos una lista de nuestros componentes. Y luego sigamos adelante y arrastremos esta lista de avatar justo aquí, y solo voy a seguir adelante y redimensionarla. Reposicionarlo redimensionarlo. Por lo que coincide con nuestro espaciado en. Creo que eso es bueno. Ahora bien, si quiero duplicar esto y crear varias filas de esta instancia aquí, puedo hacerlo, por supuesto, usando el comando D o alter como hicimos aquí en esta tabla. Pero también podemos usar la función de diseño automático fue La cosa es super cool. Así que sigamos adelante y probemos el diseño automático. Volvamos a nuestras capas aquí en Vamos a seguir adelante y usar a Ault para duplicar esto aquí y ahora. Vamos a seguir adelante y usar turno para seleccionar ambas instancias aquí y luego Ahora verás que tienes una opción llamada temprano aquí. Si sigues adelante y haces clic en el signo más, algo genial sucederá. Estos dos elementos ahora llegarán a él a un marco de diseño automático aquí. Ahora, una cosa que voy a hacer es desmarcar este contenido de quip en. Te diré por qué en un segundo Así que aquí mismo, veo todo se ve normal Pero si en realidad sigo adelante y recorté el contenido así cualquier sombra fuera de esta caja delimitadora se recortará. Si esta opción aquí está encendida, sigamos adelante y simplemente apagarla por ahora. Y ahora este es un marco de diseño automático. Entonces tenemos acceso a un montón de cosas, Um, en el panel derecho aquí. Pero sigamos adelante y primero creamos unas cuantas filas más. Y la forma más fácil de hacerlo es simplemente hacer clic en uno de los elementos aquí y hacer el comando D, y como se puede ver automáticamente, las cosas se colocarán hacia abajo. Um, puedes seleccionar tu otro marco de diseño por aquí y por el lado derecho. Aquí, tienes algunas opciones, así que pasaremos por ellas. Entonces primero quiero mostrarles esta opción vertical. Ah, imagina que estás mostrando esta lista de manera horizontal. En cambio, realmente
puede cambiar eso fácilmente a horizontal, y esta lista se mostrará horizontalmente en lugar de verticalmente. Pero si
eliges verticalmente, se mostrará así, que es lo que queremos. Se puede tratar esto. Puedes tratar la palmadita horizontal aquí, Así que si quieres más espaciado, um a la izquierda y a la derecha. Eso se puede tratar desde aquí. Entonces, en realidad, si haces 24 aquí, solo
podemos seguir adelante y mover este marco a aquí mismo. Perfecto. Y este será tu relleno vertical. Entonces si quieres agregar algún espacio a la parte superior e inferior de todo este marco de diseño automático , puedes hacerlo aquí. Entonces si tuviste relleno de, digamos 24 Así que ahora entre el primer elemento aquí y el último elemento, siempre
habrá una palmadita de 24 píxeles. Y entonces este es el espaciado entre artículos porque originalmente cuando hicimos esto en un fotograma
automático, ese era el espaciado entre ellos. Por lo que sólo mantuvo eso. Pero definitivamente podemos tuitear esto y, um, adelante y aumentarlo si quieres más espaciado o disminuirlo si quieres menos espaciado. Um, así que creo que podemos hacer 18 aquí y se verá bien. Impresionante. Adicionalmente, podemos agregar el mismo estilo a nuestro fondo aquí, Así que sigamos. Agrega un relleno de blanco. Ahora podemos hacer contenido de clip porque hemos agregado esos patrones y yo sigo adelante y agrego un radio de
borde apagado. Cuatro. Adelante y agreguemos un color de trazo. Entonces ahora por un trazo, sigamos adelante y cambiemos el sculler y usemos esta herramienta cuentagotas aquí para escoger el mismo color que nuestro como el borde de este otro contenedor. Aquí. Ahora el Phil es blanco, que es lo que queremos. Un derrame cerebral es lo que queremos. Podemos hacer el trazo por fuera y vamos también a este otro contenedor aquí y usar control. Ver en este texto y luego seguir adelante y elegir mi marco completamente fuera y hacer comando V, y ahora notan que lo colocó en la parte inferior del marco aquí. Pero si quieres seguir adelante y colocarlo en cualquier posición que te guste, puedes hacerlo. Entonces si lo quieres, por ejemplo, distingue entre estas dos tomando, colócala aquí o puedes colocarla en la parte superior como queríamos. Adelante y eliminemos este otro contenedor que tenemos. Vamos adelante y me muevo esto a la cima perfecta. Y así ahora si seguimos duplicando y agregando más artículos o marco entero aquí crecerá muy bien o se encogerá a medida que empiezas a eliminar elementos de ella así. Entonces cuando salgamos del extranjero aquí encendido, entonces sigamos adelante y duplicemos este cuadro completamente fuera, usando Ault y arrastrándolo hasta aquí. Hagamos un espaciado de tal vez 30 en el medio. Adelante y ahora cambiemos este también. Solicitudes activas donde podemos mostrar aquí los servicios de lavandería aceptados. Enfriar. Entonces hay ordenada fuera para nosotros. Espero que ahora veas por qué es tan útil. Y así con eso, creo que prácticamente hemos completado nuestro simulacro aquí arriba. Si me acerco todo el camino, tenemos las tres páginas que necesitamos. Ahora vamos a seguir adelante y en algunos datos de muestra porque ahora mismo se ve muy claro s. sigamos adelante y hagamos eso en la siguiente lección.
8. Añadir datos de muestras: Muy bien, Así que con nuestro simulacro hasta bastante terminado aquí, lo que queremos hacer es seguir adelante y agregar algunos datos de muestra a este reciente toque de cliente por aquí, o el contenedor por aquí y también nuestras solicitudes por aquí. Por lo que un plug realmente útil a la hora de agregar datos de muestra a tus diseños se llama Content Trio. Ahora, si te diriges a administrar los enchufes, ve a navegar por todos los enchufes, deberías poder encontrar contenido real aquí. O puedes buscarlo aquí también. Este plug ins de Microsoft, que es super cool. Se puede ir dentro del evento y leer más al respecto. Pero esencialmente, nos ayuda en algunos datos de prueba o en algunos datos de muestra en nuestros diseños muy fácilmente. Entonces tenemos un montón de opciones como nombres, números de
teléfono. Dirección está en un montón de otros datos que sólo podemos agregar a nuestro diseño. Por lo que se ve real. Así que adelante e instálalo si no lo tienes instalado ya y vamos a pasar a nuestro proyecto aquí y ahora, vamos a acercarnos a nuestra pieza de tablero aquí. Por lo que escuché agregar algunos datos de muestra primero significado para seleccionar los combustibles de texto. Quieren agregar datos a s. así que sigamos adelante y a nuestro panel de capas on. A continuación, haga clic en la lista de Avatar y seleccione el campo de nombre aquí o el texto de primer nombre aquí y luego haga lo mismo aquí abajo mientras mantiene el comando encendido. Simplemente entra en la siguiente aquí y sigue haciendo eso por toda tu Rose. Y creo que son todos los seis de aquí. Entonces sigamos adelante y hagamos enchufes. Y así la vida contenido riel. Y luego una vez que se abra el enchufe, podemos seguir adelante y usar nombres. Pero antes de que hagamos eso, solo hagamos nombres de pila. Así que toca los tres puntos aquí y luego desmarca las últimas cosas por aquí. Retrocedamos,
y luego podremos seguir adelante y solo pinchamos sobre él para aplicar. Y así, tenemos un montón de nombres aleatorios generados para nosotros aquí para no agregar avatares para cada uno de nuestros avatares por aquí, como puedes ver, si haces click te dirá que necesitas una imagen Lee o primero, Entonces estos son todos, en realidad solo iconos vectoriales. Pero necesitamos una imagen en su lugar. Entonces lo que podemos hacer es volver a nuestro componente maestro aquí usando esta opción. Vayamos todo el camino hasta aquí. Vamos como esta foto de perfil de muestra que tenemos desde aquí arriba en nuestro tap de
navegación o una barra lateral de navegación y vamos a seguir adelante y reemplazar este avatar por una imagen, y luego vamos a seguir adelante y aplicar el mismo tamaño. Entonces esto es 40 por 40. Entonces voy a mantener ese 40 por 40 y luego concerniente a las porciones aquí es, bueno, perfecto, y en realidad podemos incluso seguir adelante y ocultar esta capa. Realmente no lo necesitamos ahí dentro hasta que queramos aplicar una imagen. Y ahora sigamos adelante y solo copie esto usando Comando C y aplíquelo aquí es bajo para seleccionar este avatar y hacer comando V. Y solo para asegurarnos de que esa palabra sea perfecta. Entonces ahora volvamos a nuestros mock ups Web, y ahora tenemos una capa de imagen aquí también. Entonces sigamos adelante y abrimos nuestro enchufe de nuevo para cazarte, y sigamos adelante y seleccionemos este cuadro aquí. Ahora sigamos adelante y entramos en este marco aquí y seleccionemos la imagen. Y ahora sigamos adelante y en realidad mostremos la imagen para este 1er 1 aquí y sigamos adelante y la imagen E antihigiénica desde la primera fila aquí. Entonces ahora sigamos adelante y aplicamos avatar aleatorio a nuestro cliente reciente. Aquí s así vamos a seguir adelante y seleccionar la imagen. Asegúrate de ir y seleccionar imagen real y no el marco, y luego hacer avatar aquí arriba y elegir Male Perfect. Y entonces ahora, si vas al siguiente, asegúrate de volver a seleccionar el avatar. Elige la imagen, y luego, base en el género aquí, podemos elegir imagen inapropiada. Y entonces sigamos adelante y corremos. Esconde eso también. Perfecto. Vamos a entrar en este avatar en Ocultar la imagen, seleccionar imagen y hacer correo aquí. Ahora ten en cuenta que tus nombres podrían ser diferentes aquí, así que adelante y en las imágenes. El avatar imágenes en consecuencia. Y vamos a seguir adelante y repetir eso todo el camino. Por lo que llegué a duplicar para poder seguir adelante y volver a hacer clic para obtener otra imagen. Perfecto. Ahora esto se empieza a mirar, Riel. Ahora sólo tenemos las órdenes por aquí. Entonces qué puedes hacer por esto ya que puedes seguir adelante y hacer doble click en el texto aquí. Entonces selecciona este texto aquí, ve al texto y solo podemos hacer números. Pero sigamos adelante y cambiemos esto aquí mismo. Nosotros queremos que no queremos hacer decimales. Y tal vez queremos hacer una gama numérica en las carpas para que sea más realista. Volvamos atrás y luego sumamos números. Perfecto. Entonces ahora si queremos hacer eso por todos ellos, sólo
podemos seguir adelante. Y como hacíamos antes, con nuestros nombres aquí, selecciona cada texto para las órdenes. Adelante y elige números, genera
dos veces números aleatorios por todas partes. Y entonces podemos ir uno por uno aquí a las órdenes, el texto ordena. Y luego, para hacer las cosas más fáciles, simplemente
podemos seguir adelante y ¿Y qué? ¿ Simplemente seleccionamos los pedidos aquí y en su usando copiar y pegar? Ahora podrías notar que el campo de texto aquí es súper pequeño en cuanto a la altura, así que definitivamente podríamos volver atrás y cambiar eso para darle un poco más de altura, por lo que es más fácil trabajar con. Pero creo que eso funciona aquí por ahora. Sigamos adelante y cerremos esto ahora si solo alejo un poco, creo que eso se ve mucho mejor con Data reales agregados aquí. Ahora, sigamos adelante y hagamos lo mismo para una página de solicitud. Pero esta vez sólo voy a avanzar rápido a través de él. Creo que a estas alturas te llega la idea porque realmente es el mismo proceso. Una cosa que quiero decir es que un gran atajo para usar aquí sería comando y turno. Cómo juntos comando nos permite seleccionar elementos individuales dentro de un componente o dentro de, ah grupo aquí, y shift nos permitirá seleccionar múltiples uno. Entonces eso es muy útil. Definitivamente recomiendo eso para hacer este proceso un poco más rápido. Está bien, así que ahora creo que tengo algunos datos de muestra, y aquí eso se ve bien. Quiero mencionar algunas cosas geniales sobre el diseño automático. Definitivamente puedes seleccionar un elemento aquí dentro y moverlos por ahí. Entonces si quieres, por ejemplo, este camino específico sea el 3er 1 aquí. Se puede hacer eso o se mueve hacia abajo, así que es mucho más fácil mover las cosas ahora si voy a esta página aquí, no
hemos usado del todo aquí afuera, pero podemos hacer algo similar. Si mantiene múltiples elementos juntos, podemos hacer cosas como aumentar el espaciado. Si pasamos por encima de esta línea rosa aquí y
arrastramos hacia arriba y hacia abajo, también podemos intercambiarlos usando este pequeño círculo que hace que sea un poco más fácil mover las cosas también. Y esto si no tienes totalmente fuera aplicado a este marco. Otra cosa de la que sí quiero mencionar totalmente fuera es que no se puede usar con restricción. Son conceptos completamente diferentes, y no puedes usarlos juntos. Y así ahora que concluye, nuestra Web se burla de aquí. Eso sería realmente bonito año si nuestros markups también funcionaran con año móvil. Entonces si fuera responsive y funcionara en un dispositivo móvil, eso sería realmente ideal tanto para el cliente como para sus clientes. Entonces como ejercicio, te
dejaré eso para que diseñes una versión móvil también. Si quieres, pero como recurso, dejaré la versión completa, incluyendo una versión móvil, y definitivamente podría descargar ese recurso y comprobarlo también.
9. Historia de versiones: Entonces, como mencioné en el mismo inicio del curso, una de las cosas hermosas del estigma es que auto salva tu trabajo. Por lo que realmente no hay necesidad de golpear comando, guardar o controlar seguro para guardar su trabajo en. Otra cosa genial de eso es que el estigma crea automáticamente una especie de línea de tiempo para tu archivo aquí también. Un montón de otras aplicaciones también hacen esto como Hojas de cálculo de Google e incluso páginas en el Mac. Entonces, si vas al nombre de tu archivo por aquí y haces clic en la flecha pequeña y luego vas adelante y eliges show overs en la historia aquí y luego por aquí, verás todos los autos salvados que el producto ha hecho a través de la línea de tiempo. Entonces Así que este es mi último todo para ahorrar. Pero si hago clic en otro, puedo ver esto es justo antes de agregar mis datos de muestra. Y luego si voy, uno más puedo ver esto es justo antes de añadir las solicitudes. Page s. entonces esto es realmente bonito porque en caso de que quieras hacer algunos cambios o quieres volver
a cierta versión que tuviste, puedes seguir adelante y dar click a los tres puntos aquí y o bien nombrar esta versión para que puedas volver a ella o restaurar esta versión para que haga que esta versión sea la actual. En caso de que quieras deshacerte de los cambios realizados desde entonces, incluso
puedes copiar el enlace y mostrar a los clientes o equipos esa versión de tu diseño. Algo a tener en cuenta es que la versión gratuita solo te da 30 días de
historial de versiones . Sólo voy a volver a esta de aquí, que es la última. Y también puedes agregar una versión manualmente subiendo aquí dándote el título como así ni siquiera
puedo describir lo que cambió por aquí y luego seguir adelante y guardar. Y entonces eso le daría a esta versión actual ese nombre por aquí tan bastante cool. Si quieres navegar por el historial de tu archivo por aquí y solo estoy usando el escapee, solo
puedo seguir adelante y salir de ese historial de versiones. Y esto es muy práctico y muy útil en. Una de las cosas geniales al respecto es que siempre puedes ir al archivo y seguro al
historial de versiones , donde eso también guardará los cambios que has hecho hasta ahora como una nueva versión, también
historia, bastante cool.
10. ¿Qué sigue?: Muy bien, Felicidades por completar el curso de diseño Web con Sigma. A lo largo del curso, aprendemos a diseñar una aplicación Web hermosa, sencilla para nuestro cliente, Clean Kangaroo y ahí tiendas de lavandería para poder utilizar. Y entonces qué? Sexo para ti. Whoa, hay un par de cosas que puedes hacer desde aquí. El 1er 1 será crear un prototipo para su aplicación Web que diseñó. Ahora sí tengo un curso de prototipado aquí mismo en cuota de habilidad también. Entonces si te interesa aprender a crear un prototipo real fuera de mark ups como estos, definitivamente
puedes comprobarlo. Otra cosa que podrías hacer es diseñar una versión móvil, amigable de nuestro clima arriba. Si recuerdas, te
doy esto como ejercicio. Entonces siéntete libre de hacer este paso si quieres. De lo contrario, en el recurso es para este curso, también
podrás encontrar mi versión de los mock ups completados, que también incluye una página que muestra una versión móvil amigable para los diseños también. Así que siéntete libre de referirte a eso mientras diseñaste tu propia versión móvil. También, si te interesa el marketing. Siéntase libre de saludar algún material de marketing para un canguro limpio. Esta será una buena oportunidad para mostrar nuestro clima. O bien, si estás tomando el móvil, eres tú X cursos. Bueno, podrás crear algún contenido de marketing para mostrar la lata limpia dibujada y lo que hacen en lo que hace su aplicación y cómo puede cambiar la vida de las personas. Ahora estaré haciendo un curso en el futuro para el material de marketing adecuado para sus clientes. Entonces si estás haciendo freelance o estás trabajando en una empresa o en tu propio negocio y
quieres crear material de marketing, canchas serán perfectas para ti,
así
que ten cuidado de ese curso, recuerda, como siempre, puedes ponerte en contacto conmigo en hola inteligente en gmail dot com. Estaría encantado de contestar cualquier pregunta o proporcionar cualquier comentario sobre los diseños que hayas creado , así que siéntete libre de contactar ahora. Con eso dicho, felicita nuevamente por terminar este curso. Tengo ganas de verte en un futuro
Nima Tahami, Entrepreneur & Product Designer
