Diseño de aplicaciones para móviles en Adobe XD

1. Curso de diseño de aplicaciones de promoción skillshare: Vamos a construir una aplicación móvil increíble en Adobe XD. Oye, ahí, soy Chris Barren, certifico al instructor de Adobe y además, el CEO de Dean Junkie, una empresa de diseño de aplicaciones móviles que fundé y dirigí 2013-2018 en tan solo 3 h. certifico al instructor de Adobe y además, el CEO de Dean Junkie, una empresa de diseño de aplicaciones móviles que fundé y dirigí 2013-2018 en tan solo 3 h. usted algunos de los principios de diseño más importantes para el diseño de la aplicación, todo basado en Material Design 2.3. Y eso es de la pauta oficial de Google. Vamos a diseñar una aplicación móvil. Pero más que eso, te voy a enseñar cómo abordar un proyecto de este tipo desde wireframe hasta brief, todo el camino hasta el producto acabado. Ten en cuenta que no vamos a codificar nada. Todo va a tener lugar en el programa de diseño Adobe XD que tiene una prueba gratuita de siete días, entonces son diez dólares al mes. En la primera parte de este curso, vamos a cubrir todos los componentes de una app. Entonces vamos a ponernos a trabajar y aplicar todos esos conocimientos. La diferencia clave que hace que mi núcleo se destaque es el proceso de pensamiento. No solo te digo cómo diseñar ciertas cosas, voy a compartir todas mis ideas, toda mi experiencia, e inmediatamente podrás aplicar todas esas cosas en tus propios flujos de trabajo. Con eso, pongamos manos a la obra y empecemos. 2. Introducción al diseño de materiales: Bienvenido de nuevo. En los próximos minutos, quiero que exploremos el diseño de materiales, si es, qué no es y por qué debería importarle eso. El diseño de materiales es un lenguaje de diseño que fue creado por Google en 2014 con el único propósito de hacer que las brechas no solo sean hermosas, sino también utilizables, predecibles y significativas. Ahora, el lenguaje del diseño parece pretencioso, pero se puede pensar en el diseño de materiales como un conjunto de reglas. Si sigues esas reglas, es probable que termines con una app que se ve y se siente natural en las manos del usuario. Ahora bien, esta pauta está disponible públicamente para todos. Ahora mismo, la tercera versión está ahí fuera. Y eso es porque como con todo, evolucionó el bálsamo labial, se puso cada vez mejor. Bueno, al menos así lo esperamos. Ahora lo que necesitas saber en este punto es que la mayoría de estas reglas de la guía, nuestra tasa, producen resultados. Hablan de simplificar los diseños usando colores llamativos, usar el movimiento para dar significado y así sucesivamente. Basta con mirar el Gmail general y el nuevo donde se siguen las reglas. Así que es de noche y de día Material Design ayuda. Ahora, todas estas pautas deben considerarse cuando estás construyendo una aplicación o incluso un sitio web. Ahora, piensa en cómo se hace tu ropa y por qué hicieron de cierta manera, ¿verdad? Esa es la razón por la que los fans tienen dos piernas, pero ¿por qué una camiseta tiene cierta longitud? Bueno, ¿por qué hace un agujero aquí mismo, verdad? Los políticos tienen que mantenerse dentro de ciertos parámetros, ¿verdad? Si no sigues las reglas más básicas, vas a terminar con diseños locos. Entonces esto es lo que el diseño de materiales está tratando de evitar. El único problema es el empaque. El guía en sí es un poco difícil de seguir. Es un poco abrumador. Ahora, es posible que hayas visitado el sitio web. Dios mío, esto es demasiado y no estás solo. Ahora, de nuevo, esta es la tercera versión. Google lo renovó varias veces y aún se está actualizando. Pero aun así, sigue siendo algo difícil de seguir, sobre todo en ciertas secciones. La redacción es un poco compleja a veces. Y en general, esto hace que sea muy difícil de leer y seguir. Por ejemplo cosas como densidad de píxeles, pantallas independientes de densidad, píxeles escalables y demás. Estos pueden intimidar a cualquiera. Luego pasas a otras partes y encuentras ejemplos donde dice que debes usar 72 dB entre el título y el borde de la pantalla, DP. Pensé que íbamos a usar píxeles. ¿Cómo convertimos píxeles a dp? ¿Necesitamos la fórmula? ¿Necesitamos una calculadora cada vez que añades un rectángulo? Entonces estos son los tipos de cosas que te dejan rascándote la cabeza. Y nuevamente, este es solo un ejemplo. Ahora, lo que vamos a hacer en este curso es que vamos a tener un enfoque realista que producirá grandes brechas de aspecto. Entonces esto nos lleva a lo que no es el diseño de materiales. No es un regalo de los dioses. No es el fin de todo, sea todo de aplicaciones. Si bien sí nos da muchos recursos, personalmente no creo en seguirlo al 100 por ciento. Como si fuera la Constitución, como si fuera la ley. Ahora, he encontrado situaciones en las que tuve que desviarme, pero muchas razones. Entonces por eso en este curso, te voy a enseñar algunos de los mejores principios de diseño que encontré a prueba de balas, prácticos y fáciles de usar. Ahora, la mayoría de ellos también se pueden encontrar en esta guía, mientras que otros han sido descubiertos a través de mi propia experiencia y trabajando dentro de Adobe XD y construyendo brechas. Ahora bien, lo que quiero que entiendas es que nunca hay una discusión sobre si esto o aquello es parte del diseño de materiales. Y eso es porque realmente no importa. lo que me gusta enfocarme son los resultados. ¿La app se ve bien? ¿Se puede codificar sin ninguna solución alternativa? ¿Nos da el resultado pretendido? Estas son algunas de las preguntas que pasan por mi mente y guían mi toma de decisiones. Entonces hay alguien arriba en una frase, vamos a usar el diseño de materiales y otras aplicaciones, pero también nos desviaremos de él de vez en cuando. Nos referiremos a ella, pero no vamos a adorar en, con eso dicho, saltemos a la siguiente conferencia. 3. Resumen de componentes de interfaz Android: Bienvenido de nuevo. Necesitamos saber cuáles son los bloques de construcción que podemos usar para crear aplicaciones, específicamente las de Android. En esta conferencia, les voy a dar una visión general de los elementos más importantes. Esto va a ser bastante rápido, pero no necesitas memorizarlos en el banco, tienes una hoja de trucos adjunta. La idea es que cualquier receta de pastel necesite harina, huevos, mantequilla, etc. La mayoría de ellos necesitan las mismas cosas. Entonces es lo mismo con los anuncios. Tomémoslo desde el ancho superior, la barra de estado. Esta es la diminuta banda en la parte superior de cualquier aplicación que te muestre el nivel de batalla del tiempo, tu operador y otras notificaciones. Puede ser negro, transparente, o puede ser de un color sólido. Esta es la barra de estado. La barra de estado, la barra de estado, lo que sea que se te ocurra en cuanto a su diseño, probablemente la convertirán en un color sólido porque eso se ve mejor. Inmediatamente debajo de la barra de estado viene la barra de aplicaciones. Ese es el nombre oficial, pero también se le llamó la barra de acción hace un tiempo. Algunos desarrolladores todavía lo llaman por ese nombre, y yo estoy en ese barco. Creo que mejor describe esa zona. Ahora bien, la barra de acción es bastante importante porque cumple múltiples funciones y vamos a hablar de eso en una conferencia dedicada. Ahora, aprendamos a reconocer que tal vez veas que ocupa una sola línea imaginaria, así. Pero también puede ocupar mucho más espacio, generalmente para dejar espacio para las pestañas. Y casos raros. Puede ser transparente, pero aún así, siempre hay un elemento obligatorio presente. Y esa es esta flecha, que es el signo universal de Android. Para volver. En realidad se llama la flecha hacia arriba en la documentación oficial. Pero de nuevo, solemos decir que es la flecha hacia atrás. Desde que ya mencioné eso, centrémonos en el siguiente bloque de construcción, tabs. Ahora bien, estos se pueden usar para dividir tu contenido. Los usuarios de Android están muy familiarizados con el gesto de deslizamiento que cambia eso, ya que estos no están en todas partes en casi todas las aplicaciones. Ahora, hay dos tipos de dabs, fijos y desplazables. Prefiero el primero porque es más estéticamente agradable ya que dividimos el ancho del tablero de arte al número de camas, podemos ir con tan poco menos hacer o 45 tablillas se vuelve demasiado lleno en caso de que necesites más pestañas, lo mejor es que uses la función de desplazamiento. La distancia desde el borde izquierdo también es bastante significativa. Es bastante grande. Pero en general, eso es dabs en pocas palabras. Otro componente es el menú de la izquierda, pero no porque nos permita darle vida en cuanto al lado del diseño. No hay mucho que podamos hacer. En realidad, esto es realmente útil porque abarrota la app, hace más sencilla. Y luego los usuarios de drogas son los muy acostumbrados a este menú. Y esto nos permite ocultar bastante contenido dentro de él. Entonces, en lugar de enarrojar la barra de acción con cargas y montones de iconos o muchas pestañas, solo mueves todo eso aquí mismo. Este diseño es muy estándar, por lo que los desarrolladores pueden crear rápidamente el aspecto predeterminado, que es lo que ves aquí mismo. Podemos personalizar los iconos y añadir un poco de color. Pero eso es todo en cuanto a personalizarlo. Nuevamente, los desarrolladores siempre juegan un papel importante en esta compensación porque si creas un diseño ligeramente diferente, van a tener que hacer mucho trabajo de su parte, lo cual es bastante difícil y de nuevo, más caro. Ahora bien, por lo general no vale la pena el esfuerzo, así que vamos a mantenerlo así. Entonces por esa razón, el panel de navegación no obtendrá una conferencia separada, al menos no por ahora. Al seguir adelante, las tarjetas son una excelente manera de presentar contenido. Se pueden identificar por la base blanca, ligeramente redondeada, que generalmente se asienta sobre un fondo gris claro. Es bastante fácil confundir tarjetas con listas. Estos se utilizan mejor para mostrar contenido de naturaleza similar. Por ejemplo, las fichas de recetas a., por otro lado, pueden mostrar varios tipos de contenido como texto, fotos, y luego generalmente diferentes. Un tablero es un buen ejemplo de que las tarjetas se utilizan correctamente. Cada punto de elemento es una parte diferente de la aplicación. Bien, ahora vamos a seguir adelante con esto. Mi siguiente componente está presente en casi todas las pantallas, y esa es la pantalla emergente. Esto se llama oficialmente diálogo, y se puede ver en dos formatos. El normal, que es muy fácil de detectar, y luego el de pantalla completa. Vamos a discutir ambos en una conferencia separada. Pero puedes identificar rápidamente un diálogo de la pantalla del teléfono mirando la barra de acción. Si ves este ícono de cerrar junto con una palabra de acción en el lado derecho, entonces es un diálogo, bien, con cerca del final. Pero me encantan estos tipos, así que realmente quería darles un grito. Snack-bares. Y esos. Ahora bien, si bien estos parecen ser parte de un desayuno equilibrado, estos chicos en realidad están acostumbrados a informar al usuario de varias cosas que acaban de suceder. Ahora conceptualmente, estos pueden confundirse con diálogos, pero vamos a pasar por las diferencias pronto por ahora, y asegurémonos de que podamos detectarlas si las vemos en un diseño. Desafortunadamente, no podemos hacer mucho en términos de trabajo de diseño. Pero sin embargo hay que saber de ellos. Realmente mejoran la experiencia del usuario. A continuación en nuestra lista están los botones. Estas se dividen en dos grandes categorías. Botones regulares y botones de acción flotantes, que también se llaman FAB is. Ahora los botones regulares son predecibles. Son grandes, ¿verdad? Tienen un estado prensado y se pueden colocar en casi todas partes de la pantalla en una cantidad razonable de poros. Ahora, los botones de acción flotante suelen colocarse en la parte inferior derecha. Efectos. Entonces a medida que te desplazas, el botón permanece puesto porque esa acción suele ser la característica principal de la app. Ahora por ejemplo en WhatsApp, la FAB abre una nueva compensación en nodos. Su bebé crea una nueva entrada. Entonces esa es la principal diferencia entre estas dos categorías, los botones clásicos y sus bebés. Pero vamos a hablar de ellos más profundidad en una conferencia separada. Por último, hablemos de los campos de Beck en Android. Entonces estos son extremadamente versátiles y puedes verlos en casi cualquier aplicación que haya. Podrían tener una etiqueta o algún texto debajo de ellos. Podrían tener una flecha desplegable o el icono del calendario junto a ellos. Los etiquetados con a veces se muestran en línea. Y cuando actives el campo, éste se moverá por encima de él y se encogerá. Estas otras mucha diversión. Y pueden cambiar drásticamente la forma en que se ve tu app. vamos a usar bastante. Pero con eso, hemos concluido esta visión general sobre los principales componentes de Android. Ahora, sé que eso es mucho tocino, pero por favor revisa la hoja de trucos adjunta e incluso puedes imprimirla. No tienes que memorizar nada ya que vamos a discutir todos los detalles a fondo en el momento adecuado. Ahora antes de que te vayas, debes saber que hay otros componentes de Android como chips, deslizadores, consejos de herramientas y demás. Pero en mi libro, esos no son tan importantes. Y tenía muchas ganas de tomarlo paso a paso por esa razón, no vamos a hablar de ellos. En cambio, vamos a centrarnos en lo que discutimos aquí porque esos van a estar en el 90% de todos los proyectos. Bien, te veré en la próxima conferencia. 4. Aquí tienes el mejor tamaño de la tabla de arte para tus aplicaciones: Bienvenido de nuevo. Hablemos del tamaño del tablero de arte, lo que podría complicarse bastante si no tienes los partos adecuados ahí atrás. Ahora, vimos que Google mide todo en dB y Sb. Ahora bien, si eres el codificador, probablemente estés familiarizado con estos términos. Pero, ¿y para el resto de nosotros para el diseño, eso es lo que debemos hacer? Bueno, aquí está la versión corta. Ahora primero, para las aplicaciones de Android, vamos a usar 720 como ancho. La altura realmente no importa porque la mayoría de las veces vamos a tener aplicaciones más largas. Entonces, ¿por qué 720, a pesar de que tenemos 360 o el cuarto habitado en el panel de presets? Y luego algunos kits de interfaz de usuario que quizás hayas visto 375. Aquí está la situación. 360 es el estándar en diseño de materiales. Número dos. Puedes ver un ejemplo aquí donde la altura de la barra de acción es de 56 dB, y eso se traduce en 56 píxeles en la placa de arte 360. Ahora, puedes ver todas estas otras medidas que son muy útiles para principiantes. Ahora bien, el problema con tres-sexto es que es bastante pequeño. Entonces, cuando exportas eso, todo lo que quieras lucirlo a tus amigos o incluso a tus clientes. No va a quedar tan bien. No va a ser tan agudo, ¿verdad? Entonces por eso prefiero simplemente duplicarlo, duplicar todo el asunto. Las proporciones son las mismas pero con apenas duplicar todavía, ¿verdad? Entonces por eso vamos a usar 720. Nuevamente, básicamente estamos duplicando el tamaño de la pantalla, pero todo es proporcional. Así que siempre puedes mirar estos valores desde el chico y duplicarlos. Y vas a estar bien para ir. Por ejemplo, 56 dB se convierte en 112 píxeles, 16 se convierte en 32, y así sucesivamente. Las proporciones siguen siendo las mismas. Pero le da a un banco decir que la norma cambia de tres dieciseisavos a cualquier otra cosa. Lo que sea. Bueno, sólo como ejemplo rudo, digamos que tenemos una brecha de 16 píxeles aquí, aquí, y luego aquí en la pantalla del televisor. Fresco. Entonces en el cien y 12 píxeles uno completo, entonces podría aumentar a 24 píxeles. Pero de nuevo van a ser 24 en todas partes. Entonces la idea es, nuevo, que todo es proporcional. Todo ya sea escala hacia arriba o hacia abajo. Y porque estamos usando vectores, todo esto está bien. Entonces, para resumir esto, el tamaño de tu pantalla no es realmente tan importante porque tus elementos siempre escalarán hacia arriba o hacia abajo. Así funcionan las aplicaciones. Algunos teléfonos tienen altas resoluciones súper locas. Los más baratos tienen resoluciones más bajas. Entonces, ¿vas a diseñar entonces más versiones de cada aplicación? No, eso sería una locura. En su lugar creas uno como chico y luego la coda la va a escalar arriba o hacia abajo dependiendo de varias cosas. Y debido a que estamos usando formas e iconos que están basados en vectores, esto significa que puedes hacerlo sin ningún problema de calidad. No vas a tener bordes borrosos o ensangrentados. Y nuevamente, recomiendo siete 20 para el ancho. Y eso nos lleva al siguiente número de dimensionamiento. ¿Cuál es el mejor tamaño para todos nuestros componentes? Para los botones, para la acción Bode's para las cartas y así sucesivamente. Hablemos de eso en el siguiente clip. 5. Tamaño en píxeles: aquí es por qué la gente argumenta que los usuarios: Bienvenida de nuevo. En la conferencia anterior, platicamos sobre el uso de la Guía de Diseño de Materiales. Fresco. Ahora, la forma en que puede obtener rápidamente todos los tamaños correctos para los otros componentes, solo busque las especificaciones, que es la abreviatura de especificaciones. Y no obtuviste respuestas rápidas en términos de dimensionamiento. Ejemplo para la barra superior, que debe tener 112 píxeles de alto. El hueco de la izquierda, habrá dos pixeles. Ahora, ¿cómo voy a conseguir estos números? Solo los estoy duplicando para que encajen en el tablero de arte 720. Ahora, vayamos a Botones, por ejemplo, el ancho mínimo es de 128 píxeles, el alto mínimo 72 píxeles. Ahora vamos por un ejemplo más. Echemos un vistazo a los fabs, por ejemplo, busquemos las especificaciones y desarrollemos varios tipos de dabs. Pero en definitiva, estos tienen 96 píxeles de alto, y ese es el estándar. Y aquí hay otro. Esta mide 144 píxeles de alto, si acaso quieres un icono y la etiqueta, una etiqueta de texto. Pero sí, en general, esta es la forma más rápida de ponerse al día con el diseño de materiales. Me gustaría recordarles que esta es la segunda versión de la guía. Si quieres usar material tres, que realmente no recomiendo. Apenas un minuto de actualización en lo que a mí respecta, aún puedes duplicar esos valores, pero vas a tener que usar 824 como tamaño de tablero de arte. Entonces, en lugar de armar 28, 24, no es gran cosa. Pero otra vez, tú lo haces tú. Ahora, demos un paso atrás y veamos el panorama más amplio. Ahora bien, ¿los desarrolladores programadores, les importa si usas diseño de materiales dos o tres o si usas 36412, lo que significa 72824? No, absolutamente no. Repito. la mayoría de los codificadores no les importa el tamaño de pantalla que diseñes. Y eso está afuera por la puerta. Pero eso trae la pregunta, ¿por qué tanta gente discute en línea sobre el tamaño del tablero de arte? Bueno, sólo pensemos en todo el objetivo. Como diseñador. Al principio, solo queremos una cosa, pero no los caminos cambian buscando brechas. Por ejemplo, diseñar un botón enorme que ocupe un tercio de la pantalla, ¿verdad? Eso sería malo. O un icono que es tan pequeño que solo los extremos pueden usar. Eso es lo que estamos tratando de evitar como diseñadores principiantes, ¿verdad? Y ahí es donde entra el tipo. Es un buen conjunto de reglas que previenen este tipo de errores. Entonces otra vez, quieres diseñar algunos ventiladores, ¿verdad? Necesitas dos piernas, ¿verdad? Quieres diseñar el auto. Vas a necesitar algunas ruedas. Los estándares están ahí por una razón. Proporcionan una base sólida para nuestro diseño. Ahora, para ese fin, Esto es lo que sugiero. Abre algunas aplicaciones hermosas en tu teléfono y toma capturas de pantalla. Busca las apps que usan millones de personas. Después arrástralos dentro del Adobe XD y ajusta el tamaño si es necesario, eso para que puedan caber en tu tablero de arte. Lo más probable es que hagas una captura que va a ser mucho más grande. Pero otra vez, eso está bien. Escalarlo proporcionalmente. Ahora la pregunta es, ¿tu talla es casi la misma? Verás, no es una tragedia. Si en lugar de 96 píxeles, vas a usar 100, la policía de Material Design no va a llegar a tu puerta. Ahora bien, la principal preocupación es que no le hagas 400 píxeles de alto. Eso sería un problema, o 20 píxeles. Entonces, una gente mucho más inteligente decidió que 96 píxeles funcionan mejor para la mayoría de las personas. Entonces por eso estamos hablando tanto tamañarlo para que podamos comenzar con el pie derecho. Pero por si acaso no te gustan las pautas de diseño de materiales, solo continúa tomando capturas de pantalla y comparando tu diseño con las principales Apps. ver si Yahoo Mail decidió que el botón 96 por 96 funciona mejor, entonces realmente no deberías usar 20 por 20. O si ves que el 90% de las aplicaciones usan pestañas que son 96 píxeles caen. Otra vez, no uses 50 pixeles, ¿verdad? Estos son solo ejemplos aleatorios de la parte superior de mi cabeza, pero sí espero que estés viendo mi punto. Estos tamaños de la guía no son leyes enviadas por la divinidad. No, eso solo es una forma rápida de establecer una fundación. Entonces si ves a algunas personas debatiendo sobre 363,754.12, cuatro AT, con cualquier otra cosa. Por favor, no se involucre en ningún argumento. Enfocado en los principios de diseño. En cambio, un esquema de color gris, simetría equilibrada, increíble biografía de pipa y así sucesivamente. Eso es lo que realmente va a hacer que tu app se vea genial. Y claro, no te desvíes demasiado del estándar. Unos cuantos pixeles aquí y allá, eso está totalmente bien. Pero no cambies las tallas en más de 20 dólares. Y muchas gracias y te voy a ver en la próxima conferencia. 6. Aprende a diseñar la barra de acción (barra superior): Bienvenida de nuevo. Hablemos de la barra de acción o la barra de aplicaciones y veamos qué puede hacer por nosotros como diseñadores. Ahora antes de eso, veamos rápidamente qué pasa con el vecino de arriba, la barra de estado. Esto no recibe ningún amor y se avergüenza bastante cuando los desarrolladores lo dejan en su estado predeterminado. Sin embargo, una barra gris oscuro no es realmente una gran suerte. Puedes hacerlo transparente o negro. Los diseñadores tienden a usar un color sólido que coincide con la barra de acción y es más estéticamente agradable de esa manera. Esto también proporciona mejores contrastes con todos sus iconos, que son en su mayoría blancos. Ahora, más recientemente con el árbol de diseño de materiales, la barra de estado obtiene el mismo color que la barra de acción por defecto, pero eso es todo sobre la barra de estado. Así que bajemos a la barra de acción. Ahora, la ActionBar puede tomar varias formas y tamaños que se forman en total, pero probablemente vas a usar solo una o tal vez dos. Ahora bien, este es el clásico con un icono de menú a la izquierda y el logotipo en el medio. Este es el centro, la barra de acción. Y es bastante popular para la pantalla de inicio, es decir, la pantalla, ya sea que siempre vuelvas a. Ahora bien, a este icono de menú se le suele llamar menú de hamburguesas porque bueno, líneas una encima de la otra. Entonces supongo que es algo parecido a una hamburguesa de todos modos, esto es muy popular. Pero tenga en cuenta que estas pestañas son un componente separado. Sí, son del mismo color, pero no forman parte de la barra de acción para decir, bien, Avanzando, En el lado derecho, a menudo obtendrás algunos íconos que te ayudan a hacer algunas acciones bastante importantes. En este caso, tenemos una función de búsqueda que es bastante útil en un sitio web de noticias más otro menú. Pasemos a otra barra de acción muy popular. Cuando ingresas dentro de un artículo, normalmente vas a obtener este diseño. Esta flecha te ayuda a regresar para el nivel superior dependiendo de cómo lo mires. Entonces tienes un título que te ayuda a navegar por la aplicación, además de otro ícono en el lado derecho. Esta es una barra de acción típica que se deja la línea donde la primera barra de acción, tuvimos que centralizarlas, el logo. Aquí, el título está a la izquierda. Entonces, para resumir esto hasta ahora, hemos visto dos tipos de barras de acción, centradas y línea izquierda. Nuevamente, normalmente el centrado muestra el logotipo de la compañía y normalmente lo verás en la pantalla principal de la aplicación. El título de alineación izquierda generalmente se muestra cuando estás dentro de algún tipo de contenido. Así que son dos de cada cuatro barras de acción. ¿Y los otros dos? Bueno, niños y ejemplo de Gmail. Como puedes ver, el título es muy largo y bastante grande, por lo que no encajaría al lado de la flecha. En realidad no se suponía que hicieras que el título fuera súper pequeño para mejorarlo. Es por eso que Material Design sugiere estas dos opciones. Básicamente el título se mueve hacia abajo mi consejo, trata de evitarlo porque esto no se ve tan bien en mi opinión. Ahora, déjame decirte la verdad. Las aplicaciones se actualizan todo el tiempo. Así que podrías echar un vistazo a estas mismas aplicaciones de este curso y podrías ver del completamente diferente. Así es como son las cosas. Pero el punto esencial siempre sigue siendo el mismo. Un menú de hamburguesas, un título, algunos iconos en el lado derecho. Nunca uses más de tres iconos en el lado derecho. Y si el título no encaja en línea con el menú de hamburguesas, ¿cuál es la flecha hacia atrás? Sólo muévelo hacia abajo. No lo encojas. Ahora la pregunta es, ¿ podrías hacer pequeñas variaciones? Claro. Por ejemplo, aquí está Google Calendar. Aquí con en la pantalla principal, esperarías que el título estuviera centrado. Pero esto es en realidad un desplegable, así que se deja la línea. Y debido a que los Acerca de tres íconos en el lado derecho, esto realmente tiene sentido para colocar el mes y el año a la izquierda. Y aún dentro de Gmail, obtenemos esta barra de acción en los ahorros. Ahora bien, esta flecha es muy común. Nuevamente, te demuestra que estás dentro algo y que puedes volver atrás, o como lo dice el guía oficial, puedes subir un nivel. Ahora, la barra de acción es el icono de alineación izquierda, el título en el lado izquierdo y luego un icono de menú en el lado derecho. Pero sí, en general, así es como se ven la mayoría de las barras de acción. Ahora, hablemos del tamaño en píxeles. Tienes una guía que discontinua que no necesites memorizarlas en el banco, estamos hablando del tamaño de pantalla V6 desde el diseño del material hasta el doble. Entonces 720 píxeles para el ancho. Entonces la barra de estado, queremos 48 pixeles. Y para la barra de acción 112, esto nos da un total de 160 píxeles. Pero el espacio vacío a cada lado, 32 píxeles es la norma. Al usar este tamaño de tablero artístico, siempre puedes buscar la Guía oficial de Diseño de Materiales y duplicar los valores que se muestran aquí en VB. Entonces, si echamos un vistazo, vamos a ver que la barra de acción es 56 db por 2,100.12. Es lo mismo para los márgenes. Dicen 16, vamos a duplicarlo, así que son 32. Entonces este es un resultado o el ingresó el doble del número que la guía oficial cuando haya usando mis recomendados son los bandos de guerra. Eso es todo para la barra de estado y la barra de acción. Tienes los tamaños y píxeles más los diseños más comunes. Consulta las hojas de trampa para que puedas refrescar tu memoria. Muchas gracias. 7. Todo lo que necesitas saber sobre las pestañas: Bienvenido de nuevo. En esta conferencia, vamos a hablar dabs y otro componente esencial de Android. Su propósito principal es separar el contenido a través de diferentes pantallas. Ahora, solo hay una regla importante que debes tener en cuenta. El contenido de cada pestaña debe estar en el mismo nivel de jerarquía. ¿Qué significa eso? Prácticamente, esto significa que tus pestañas deben mostrar cosas que tienen sentido juntas. Si es una app de música, solo un ejemplo aleatorio, podrías ver pop, rock, hip hop y así sucesivamente, ¿verdad? Si es una tienda, es posible que veas electrodomésticos, celulares, cámaras. Entonces es muy intuitivo una vez que consideras todos estos ejemplos. Pero esto es lo que no debes hacer, que es aún más claro. Entonces digamos que es una aplicación de entrega de comida y muestra configuraciones italianas, indias y luego. Entonces eso obviamente no funciona porque ahorro pertenece a un lugar completamente diferente en la app. Entonces eso es lo que esto significa, el mismo nivel de jerarquía. Ahora, en general, el por qué es probable que todo te vaya a mostrar la estructura de información de la app. Así que en realidad hay pocas posibilidades que vayas a estropearlo. Ahora hablemos del lado del diseño. Las pestañas se pueden dividir de muchas maneras dependiendo de lo que te interese. Ahora desde el punto de vista de la navegación, pueden ser fijos o desplazables. Ahora abs fijos me encantaron. Se ven geniales. Pero estás limitado a cuatro. Las entradas que ancho en píxeles viene determinado por el número. Y aquí están las matemáticas. Pestañas significa tres sextos más profundas, porque todo el ancho es de 723 pestañas 240. Y si quieres para 1AD es todo lo que vas a conseguir. La manera fácil de organizar estos elementos en Adobe XD es crear el rectángulo que muestra la pestaña activa. Esto siempre tiene cuatro píxeles de altura. Ingresar aquí el ancho, digamos a 40, y ahora dejó la línea y luego centrar el texto o el icono con las pestañas significa que vas a necesitar ser capas de textos individuales. Y solo mueve este bar por ahí. Derecha. Ahora en caso de que estemos hablando de pestañas desplazables, la distancia desde el lado izquierdo necesita ser 104 píxeles, 104, los Paxos. Entonces tienes arranques rectangulares activos. Por supuesto, la palabra en sí necesita estar centrada, así que por favor asegúrate de que no te confundas con esa distancia. Entonces nuevamente, deja 100, luego vierte los píxeles vacíos del lado izquierdo. Y entonces eso va a ser eso. Bien, bonito. Ahora con respecto al ancho mínimo, eso vuelve a ser 180. Eso significa que vas a conseguir dos dabs y media en una pantalla. Pero esto no debería ser un problema considerando que quieres mostrarle al usuario eso, que son un montón de otras pestañas. Ahora cuando lo veas en acción, alguna vez vas a ver que realmente tiene sentido ya la pestaña activa se hace evidente a través de una bonita animación. Bien, avanzando, otra forma de ver Bell Labs se basa en su etiqueta. Puede ser icono de texto o texto más icono. Pero como probablemente ya asumas, nunca debes mezclarlos y combinarlos. Si tienes dos etiquetas de texto, no agregues la tercera. Eso es sólo un icono que no tiene sentido. Elige una dirección y mantente en ella. Esa es una regla muy simple que se aplica en casi todas partes. Ahora bien, estas opciones tienen tamaños muy específicos. Entonces veamos qué es, qué opción uno con etiquetas de texto. Esta es, con mucho, la opción más popular. Su tamaño, su fondo es de 96 pixeles de alto. 96. Esto, por supuesto, se une a tu barra de acción y a la barra de estado. Todo el bloque, casi 720 tablero de arte estándar tiene 256 píxeles de alto, y eso es 48, 112, y luego 96. Si eliges la ruta de iconos que usa la misma altura para el fondo 96, los iconos mismos tienen que mantenerse al tamaño de lo que el ocho por 48 píxeles. En caso de que tu icono sea de forma irregular, puedes usar un rectángulo para guiarte. Ahora, no soy fanático de los dabs solo con íconos, ya que son bastante difíciles de entender lo que hay detrás de ellos. Así que personalmente me mantendría alejado de esa opción a menos los iconos sean extremadamente intuitivos y muy conocidos. Este grupo está reservado para cosas como búsqueda, GPS, hueso, Wi-Fi, y los muy pocos otros. Ahora la tercera opción y la final son etiqueta e iconos. Entonces tx plus icon, que de nuevo, no soy un gran fan de por la altura. Esto necesita 144 píxeles frente a los 96 para la línea simple. Entonces esa es una gran diferencia. Te estás comiendo bastante espacio. Ahora de hecho, se ve bien, pero con la pérdida de espacio de presión, hay algo que decir sobre una función de desplazamiento donde la barra de acción desaparece cuando te desplazas hacia abajo. Pero no vamos a centrarnos en el movimiento porque eso es muy difícil de sumar en todos los proyectos en Adobe XD. Pero tenga en cuenta que no es el fin del mundo. Si haces un poco de espacio en la parte superior, la mayoría de las aplicaciones muestran una etiqueta, exactamente por esta razón para que sea simple. Pero al final del día, realmente depende de ti. Ahora, volviendo a nuestro tema, pega dos capas de texto e intenta evitar nombres muy largos. Eso se puede evitar. Estos usan punto punto, punto al final de la palabra, aunque Google dice, puede confundir al usuario. Ahora, lo que proponen es que aumentes la altura del componente. Pero en mi libro, eso va a quedar peor. Entonces esto nos lleva al estado de dabs. Hay dos de ellos activos con ese rectángulo de píxeles completo debajo de él. Ahora, eso suele tener un color que realmente destaca por el máximo contraste. Y luego tenemos inactivo donde la capa de texto tiene una perspectiva lavada y sin decoración adicional, nada en cuanto al lado del diseño. Ahora desde mi experiencia, la mayoría de mis cabeceras son de colores brillantes. Entonces mi etiqueta de texto activo y el rectángulo debajo pueden ser de color blanco puro. Ahora a veces sí me desvía y uso el amarillo, pero sólo cuando la combinación no es discortante cuando no molesta el ojo. Ahora tenga en cuenta que capa de texto de pestañas activas nunca debe ser de otro color que el blanco. Para que puedas jugar con el rectángulo, la barra debajo, pero no la capa de texto es blanca suele ser lo mejor. Ahora, aquí hay otra cosa. Whitehead son muy comunes. Por lo que puede parecer limpio, pero la mayoría de las veces en realidad no usamos un fondo blanco puro. Ahora, quiero dejarte con esta idea en mente. A veces las reglas se pueden romper siempre y cuando sigas los principios de diseño descritos en todo este curso, puedes salir la caja y crear algo hermoso, algo que sea utilizable sin importar si siguió las pautas de diseño de materiales o no. Pero por ahora, es el momento del siguiente tamaño de celda. Estos crean cinco encabezados propios. Por encabezado me refiero a barra de estado, barra de acción en un sistema de pestañas todo combinado. Ahora, el propósito es que te familiarices con el proceso de configurar las cosas en Adobe XD y experimentar con varios colores y diseños. En general, no trabajamos en condiciones aisladas. No vamos a crear solo el encabezado. Vamos a crear todo el asunto. Pero realmente quiero que pruebes esto y veas cómo te va. Así que son cinco encabezados diferentes en cualquier estilo que quieras, en cualquier diseño. Para los iconos puedes usar icon.com negro o simplemente tomar algunos de Internet. Realmente no importa. Esto es solo para fines de práctica. No lo vamos a usar en ningún otro lado. Por favor publique su trabajo en la sección de comentarios. E idealmente, todos estos diseños deberían estar uno debajo del otro en una sola tabla de arte. Diviértete con eso, y te voy a ver en la próxima conferencia. 8. Cómo trabajar con tarjetas: Bienvenido de nuevo. Las tarjetas son uno de los elementos más importantes en cualquier Android que, y eso es porque son una de las mejores formas de mostrar contenido. Las tarjetas vienen en todas las formas, tamaños y looks. Y es sorprendente ver cuántas variedades caen bajo esta etiqueta aquí que algunos ejemplos. Este muestra un video en la sección superior y el título y descripción debajo. Este tiene el título encima de él, y luego una foto, una descripción, y la llamada a la acción. Puedes exhibir regalos musicalmente agrega elementos relacionados con el clima. Puedes tener todo tipo de cosas como iconos, interruptores, muchas cosas, botones, por ejemplo o nada en absoluto. En definitiva, son extremadamente versátiles. Sólo hay una regla importante. Las tarjetas tienen que pararse solas 2 pies. Esa independencia, es decir, no se basan en elementos circundantes o en los componentes o en un contexto específico. Así que vamos a pasar por algunos casos para que puedas entender mejor por qué las tarjetas están tan flexibles. Ahora, si echamos un vistazo a la aplicación memo en los nodos, podemos ver tarjetas inacción. Entonces por eso dije que te sorprendería ver cuántas variedades hay. En esta versión. No tenemos títulos, botones, medios de ningún tipo, miniaturas, descripciones, nada, solo el contenedor y la vista previa del contenido real. Un adelanto, Eso es todo. Eso son las tarjetas donde ahora estás considerando todo esto, no tengo un tamaño específico ni la plantilla que debes seguir. Piense en qué contenido debe incluirse y aplique los principios de diseño de este curso, específicamente los que vamos a discutir un poco más adelante en el curso del ejemplo usando el derecho relación de aspecto, espaciado consistente, gran tipografía, y los miembros anteriores de legibilidad, altura de línea adecuada y tamaño básicamente es súper importante cuando se trata de texto. Entonces estas son las cosas que van a hacer o deshacer. Ahora, cambiemos a I Herb, una tienda de suplementos muy popular que cuenta con múltiples tarjetas ahí. La pantalla inicial primero, aquí hay una fila de varias marcas. Entonces un enfoque muy mínimo con respecto al contenido. Directamente debajo de esta fila, tenemos algo completamente diferente. Una foto del producto. Sentí el precio de calificación por estrellas, pero también un menú que contiene las opciones. Ahora, eso es bastante. Avanzando hacia abajo, vemos otro guardia para la entrada del blog. Esto nuevamente, características de podo inactivo y la descripción en la base de cada carta destaca el contenedor que es rectángulo blanco, ligeramente redondeado o cuadrado, que puede tener una sombra muy sutil. Normalmente puedes encontrarlos sobre un fondo claro mientras volteaba esto, la idea de que la tarjeta es un elemento distinto Eso es independiente de cualquier otra cosa. Aquí hay otro ejemplo, la aplicación de entrega global que está tomando Europa por asalto la entrega de alimentos básicamente. Aquí podemos ver otro ejemplo de tarjetas que se están utilizando. Sin embargo, no es nada especial, pero es interesante ver cuántos estilos se pueden perseguir. Ahora avanzando, cuando tocas una tarjeta, puede expandirse al modo de pantalla completa. Pero hay casos en los que hay un icono desplegable que nos muestra la capacidad de las tarjetas para revelar aún más contenido. Este ejemplo sobre material dot io se compra en. Lo importante es que no tienes que desplazarte por las barras y tu app. Entonces, si la carta revela mucho contenido que la cuenta, tendrás que desplazarte demasiado húmedo, pero no obtendrás un pergamino secundario solo para esa acción. Continuando, las tarjetas se pueden apilar una encima de la otra. Pero hay muchos casos donde puedes colocarlos en fila con un pergamino horizontal. Entonces este es un enfoque muy popular ya que entrega mucho contenido, pero está bajo el control del usuario. Esto hace que sea menos probable que el usuario se sienta abrumado por la gran cantidad de inflamación. Ahora, de nuevo, por favor ten cuidado cuando mezcles dabs con tarjetas de desplazamiento. Por defecto, el usuario sabe que puede deslizar y cambiar de pestañas. Pero si toca una región que presenta la carta desplazable, un pergamino horizontal para el de la Guardia. lugar va a terminar barajando a través de ellos. Entonces este es el tipo de cosas que realmente molestan a los usuarios. Esto es algo que parece pequeño, como si fuera un pequeño inconveniente, pero en realidad la gente odia eso. Ahora, volviendo a nuestras tarjetas, espero que le quiten una cosa en particular a esta conferencia. Una tarjeta no tiene un aspecto o tamaño en particular. Puede incluir muchos elementos. O puede tomar la forma de un rectángulo con un poco de texto encima del mismo. Y eso es todo. Lo esencial es que expongas las cosas tal manera donde se cumpla el objetivo de la app, el objetivo, sin abrumar al usuario con mucha y mucha inflamación. Ahora mismo vamos a hablar esa segunda parte en una conferencia dedicada. Pero por ahora, quiero ver algunas otras tarjetas que hayas identificado y otros laboratorios. Por favor, publique una captura de pantalla para que otros puedan ver más ejemplos de tarjetas. Aunque, como dije, pueden ser de todas las formas y tamaños. Después de que hayas hecho eso, por favor crea al menos dos tarjetas propias. Por favor, hágalos todos dentro del tablero de arte 720. Puede ser cualquier tipo de tarjeta con cualquier tipo de contenido. De veras quiero que practiques más que cualquier otra cosa. Mojarse y realmente espero ver otros trabajos en la sección de comentarios. Gracias. 9. Crea botones hermosos y eficaces: Bienvenido de nuevo. Hablemos de botones y cómo funcionan y un entorno Android. Tenemos dos categorías diferentes. Tenemos botones regulares y botones de acción flotantes, que se llaman FAB. Ahora, hablemos de este elegante, FEB, cada vez que inicies un nuevo proyecto de app, probablemente te vayas a preguntar, cuál es el propósito de la app o qué se supone que debe hacer el usuario dentro de la app. Si estamos hablando de Gmail, por ejemplo, la acción principal sería redactar un nuevo mensaje. O si es la app de calendario, necesitamos un FAB para crear una nueva entrada. Si se trata de Google Maps, el usuario tiene que iniciar su viaje Muy rápido. Si se trata de una aplicación de reloj, el usuario necesita crear la nueva alarma y así sucesivamente. Entiendes la idea. Esta acción específica es una característica central de la aplicación que el usuario a menudo necesita. Por lo que tiene que estar justo al alcance de su mano. Debe mostrarse en todo momento. Entonces ahí es donde entra el botón de acción flotante. Se revisan todas las casillas. propiedad principal es que flota por encima del contenido en una posición fija, así que siempre está ahí, siempre es accesible. Entonces FAB, botón de acción flotante, ciertas aplicaciones cuando te desplazas hacia abajo, lo hace alto, pero luego cuando te detienes, siempre vuelve a aparecer. Ahora, FAB es puede tomar dos formas, regular y extendida. Ahora, el Botón Flotante regular siempre se coloca en la parte inferior derecha de la pantalla. Y me gusta colocarlo 32 pixeles de los bordes inferior y derecho. Ahora, el tamaño del botón es de una doceava por doceava, y el icono en su interior es de 48 por 48. Y como dije, el botón flota. Entonces por eso suele tener una sombra de caída. También es de colores brillantes y el icono suele ser de color blanco puro, por lo que es muy fácil de conseguir. El icono más común es el símbolo más, que generalmente significa crear, crear el nuevo correo electrónico, crear la nueva reserva y una nueva entrada y así sucesivamente. Ahora, solo hay un solo botón de acción flotante, solo un solo FAB. Y eso es porque normalmente eso es más importante dentro de la app. Así que por favor no tengas más de una FAB. Ahora, aquí hay otra cosa que desaconsejo el uso de múltiples acciones ocultas dentro de una FAB. Ahora bien, esta animación, claro, es encantadora. Hace un impacto. Pero cuando lo he usado, he visto menos clics. Y eso es porque la gente no está acostumbrada a todo esto. Entonces, por favor, de nuevo, evita eso. Ahora, el siguiente tipo de botón de acción flotante es el extendido, donde el regular estaba limitado a un solo icono y bastante pequeño. El FAB extendido también puede tener una etiqueta de texto o texto y un icono. Y puedes hacerlo tan ancho como quieras, pero la altura recomendada es de 96 pixeles. Ahora extendido. Los bebés son geniales para las acciones que requieren una etiqueta de texto. A veces una Nikon simplemente no lo corta, no es lo suficientemente claro. Ahora, estos también se utilizan para captar la atención del usuario por el tamaño puro. Y eso es porque pueden ser bastante fornidos y como los regulares, extendieron los que flotan por encima del contenido. Por lo que es bastante claro que se supone que el usuario debe hacer clic en él. Ahora bien, un buen ejemplo es el botón Checkout. Claro, es posible que tengas un ícono para el carrito y el lado superior derecho, pero eso puede perderse cuando veas un botón de acción flotante extendido, no te lo vas a perder. Entonces, obviamente, cuando se quiere finalizar, no solo eso, sino que es una experiencia mucho mejor. Pasemos a la siguiente categoría, botones regulares. Ahora bien, estos vienen en muchas formas y tamaños, pero están fijados a cierta posición dentro de la app, como vas a ver en un momento. Entonces esa es la principal diferencia entre ellos y sus bebés. Fab es flotar la vout, y normalmente están en la parte inferior derecha. Los botones clásicos pueden estar absolutamente en todas partes. Ahora bien, hay cinco tipos de botones irregulares, pero probablemente solo usarás unos tres. Entonces está lleno, delineado y texto. Esta captura de pantalla te muestra exactamente lo que necesitas saber. Básicamente, eliges el tipo de botón en función de su importancia. Ahora bien, en este caso, ¿qué quiere la empresa del usuario? ¿Cuál es la acción más valiosa? Es agregar consideración. Por eso está aquí el botón Rellenar porque más destaca. Llama tu atención. Ahora. Puedes decir, Oye, sabes qué, a estas alturas podría hacer más dinero a la compañía. Pero normalmente la gente agrega varios productos a un carrito antes de revisar la gota. Por eso el foco está en Agregar respeto. Esto es lo que la mayoría de la gente espera ver. Entonces es bastante claro que estas son las acciones clave. Entonces es por eso que obtiene el botón de campo. Y la reacción secundaria a estas alturas entra en el botón de esquema. Esto también se llama botón fantasma, y eso es porque no tiene cuerpo. Nadie va cosas divertidas. Ahora el tercer tipo de botón es el texto puro. En este caso, sí característica o un icono también. Haz una pregunta. Nuevamente, esta acción es mucho menos importante que las otras dos. Entonces tiene que ser menos gritar el, no hace falta que destaque tanto. Entonces así es como piensas de los botones. A esto se le llama el principio jerárquico. Y realmente no es nada tan complicado. Piensas en el nivel de importancia y luego te mueves hacia abajo. Entonces es contorno lleno y luego texto. Ahora, volviendo a la guía de materiales en su tercera forma, realmente no me gustan los botones Donald. Creo que eso se usó para los casos de flecos. Así que realmente no quiero molestarte con ellos. Y el final, el botón elevado, suele ser confundido por principiantes con un FAB extendido. Entonces mi consejo no se centre en estos otros para enfocarse en los tres que mencioné, y estarás bien para ir. Ahora cuando diseñemos cosas, verás que no pararemos y nos preguntamos, oh, esto es en FAB, qué es esto un botón elevado? ¿Sabes en qué nos vamos a centrar? ¿Es encantador a la vista? Es fácil de usar, y así sucesivamente. Ahora en general, estos son botones en pocas palabras. La segunda parte de la ecuación aquí, Siempre hay un rango a considerar dentro de cualquier pantalla. Entonces está la acción más probable, algo como agregar al carrito, pero puede haber otras cosas como más información o comparar artículos que son menos importantes, pero siguen ahí. Entonces, en base a este proceso de pensamiento, puedes decidir qué tan grande impacto deben tener tus botones. Esto requiere un poco de análisis sobre eso y la pantalla actual y las circunstancias. Pero vamos a hablar de todo eso en este curso ahora mismo. Eso es. Tomemos un momento y te voy a ver en 1 s. Muchas gracias. 10. Trabaja con el texto como un profesional: Bienvenido de nuevo. En los próximos minutos, vamos a discutir los muchos aspectos de los campos en una app para Android. Desde el principio, tengo que decir que no estoy enamorada de los diseños sugeridos por la guía oficial. Creo que estos campos se ven algo anticuados entonces, torpes, suficientes. Han actualizado los estilos desde que grabé esta conferencia, pero aún así la nueva versión parece un poco decepcionante en mi opinión. Ahora, dicho eso, estudiemos los componentes de una habilidad tecnológica. Y vamos a hablar de estilismo al final. Ahora, cualquier campo debe tener una etiqueta, un lugar donde el usuario pueda escribir, y luego un indicador que signifique su estado activo. A veces podemos agregar la pista o un icono que describa el campo que suele colocarse a la izquierda. Ahora bien, otra cosa se podría colocar un icono en el lado derecho para las diversas acciones, como un micrófono, por ejemplo para la entrada de voz o un desplegable en el gay ahí. Ahora, todo esto requiere una altura de al menos 100 píxeles, pero esto varía dependiendo de tu estilo. Al rectángulo se le llama indicador de activación, y tiene dos estados, inactivo con una altura de dos píxeles, generalmente gris oscuro y activo. Qué píxeles de altura con un color vivo y brillante. Ahora, la etiqueta en general se muestra en el lugar donde se supone que el usuario debe escribir. Cuando el campo es tabulador, al hacer clic en él, cuando está activo, la etiqueta se mueve hacia arriba y se encoge. Por lo que hace espacio para que el usuario escriba algunas cosas. Ahora en caso de que haya otra, hay tres cosas que iluminan la etiqueta, el área de pistas y el icono de advertencia en el lado derecho. Siempre que no se muestren saludables, el error siempre se muestra debajo del campo. Más que eso, lo que usan, los tipos nunca se resaltan en rojo con ningún otro color de advertencia. Ahora, pasemos hacia el estilo. Tus colores son esenciales porque transmiten significado. Por ejemplo, si el campo de activación se muestra en un gris lavado, el usuario podría pensar que se trata de un campo deshabilitado. Lo mismo se aplica a la etiqueta. Entonces realmente tienes que considerar cuidadosamente lo ligero que quieres que sea tu calificación. Tal vez no consideres esto un problema. Pero la mayoría de las Galerías de Diseño están llenas aplicaciones que realmente tienen cargas y montones de grises muy claros. Y subrayo el hecho de que estos son los conceptos porque la recaída en realidad no se ve así. De nuevo, puede parecer genial en Dribbble o Behance. Puede que te den me gusta. Pero ese grado muy ligero no significa que siga todos los estándares que tenemos para ese diseño. Ahora continuando por este camino, el campo de texto nunca debe verse como un botón o un banner. La buena gente de Google intenta configurar las cosas encapsulando estos campos en un rectángulo, ¿verdad? Pero otra vez, no estoy enamorada de ella. Honestamente puedo decir que esta es probablemente una elección terrible, Todas las cosas consideradas. Es funcional, está claro, pero no es agradable de ver. Lo que te propongo es que busques todas las coordenadas de la web y encuentres lindas migas anteriores que te inspiren. ejemplo, en mi última aplicación, fui con un ángulo directo blanquecino que presenta un trazo ligeramente más oscuro, una mano lavada y la etiqueta sobre ella. Ahora sigo jugando con él porque ese peligro siempre presente está aquí, que podría parecer discapacitado. En general. Voy a jugar con él un poco más, pero de nuevo, no uses la guía oficial si no estás enamorado de ella para ese caso específico. Aquí hay otro que destacó para las aplicaciones de iOS, pero realmente no me importa. Esto se ve interesante. Es intuitivo. Entonces, ¿por qué no usarlo, verdad? Este es el tipo de enfoque que quiero que tengas. Si se ve bien, úsalo. Aquí hay otra esta vez de la web. Como puedes ver, está todo en la diapositiva, estos detalles más pequeños. Esto requiere un ojo agudo y pacientes, diseñas, revisas tu teléfono a valores de niveles de brillo. Te quitas, trabajas en ello hasta que eres feliz. No hay un código de color mágico que pueda compartir contigo. Es cuestión de DNS, buen espaciado y excelentes opciones de color. Pero lo que hace la mayor diferencia son los contextos. Ves que los ejemplos de Google son desalmados porque no tienen ninguna identidad. No son parte de un panorama más amplio, de una aplicación más grande. Así no lo hace el alma. No hay pasión. No se ve a lo que se adjunte. Lo que vemos en las Galerías de Diseño son fragmentos de las aplicaciones potenciales que tienen una enorme personalidad. Cuando lo descompongas. Es solo una línea con un par de capas de textos unidas a ella. Lo que lo hace especial es la atención de los diseñadores al detalle y su respeto por la vibra general de la app, luego esa personalidad, todo el ambiente, quieras llamarlo. Entonces lo que vamos a hacer es diseñar algunos foros en este curso donde voy a abordar este punto en profundidad. Pero la principal conclusión de esta conferencia es inspirarse en absolutamente todas partes de la web. Debido a que los formularios son el punto de conversión y no existen sin ningún texto, los rendimientos, el registro, el checkout y otros puntos esenciales dentro de cualquier aplicación dependen en gran medida de los campos de texto. Tan complacido, tómate tu tiempo con ellos y conviértalos en una parte integral de tu app. Entonces practiquemos. Por favor, tómese un momento y cree tres pantallas diferentes con un tipo diferente de diseño de campo de texto. Ahora otra vez, aquí no hay contexto. Tienes que hacerlo. Me gustaría ver al menos tres campos por pantalla. Lo importante es que pruebes diferentes tamaños, arreglos, diseños y colores. Si alguna vez has visto mis cursos, sabes que soy fanático de ciertos códigos de color. Pero para este ejercicio no voy a darte nada. Pruébalo todo por ti mismo. Cuando hayas terminado, publica tu trabajo en la sección de comentarios y voy a revisarlos. Muchas gracias y lo espero con ansias. 11. Introducción al proyecto: Hola y bienvenidos. En la próxima sección, vamos a diseñar una app de entrega de comida va a estar tranquilo el proyecto. El objetivo es familiarizarse con todos los componentes de una aplicación, usar Adobe XD de manera efectiva y crear algo que se vea genial. Por favor, vea cada video dos veces. Una vez para entender lo que está pasando, luego una segunda vez para trabajar a lo largo haciendo pausa con la frecuencia que necesite. Bien, como vamos a pasar por cada pantalla, te voy a dar mi proceso de pensamiento y cómo rápidamente tomo decisiones de diseño. Éstos sean conscientes de que los principios que aplico requieren de un análisis en profundidad. Pero decidí hablar los principios un poco más adelante. este momento quiero que trabajes lo más posible y dejes la mayor parte de la teoría para después. Puede preguntar si hay muchas cosas que necesito aprender. ¿Por qué nos lanzamos a un proyecto de diseño de aplicaciones en toda regla? Y eso es porque quiero que obtengas experiencia realmente trabajando en Adobe XD y diseñando. Por eso con saltar directo, una cosa es leer sobre cosas. Otra cosa es practicar realmente. Siguiendo adelante, también quiero que diseñes diseños estándar porque eso es lo que vas a encontrar en tus proyectos cotidianos. Ahora, si miras las manos del driblar, vas a ver diseños y animaciones extremadamente creativos y todo tipo de efectos. Pero la mayoría de los clientes no gastan una fortuna en el desarrollo de aplicaciones. Así, lo que vamos a crear se basa en mi experiencia trabajando con clientes reales y codificadores reales las 24 horas del día. Eso significa aplicar las mejores prácticas y usar diseños bastante estándar. Hay que ser consciente de que cada decisión de diseño puede aumentar o disminuir los costos de desarrollo. Entonces, si bien algo puede verse increíble en Dribble, hay muchas posibilidades de que los desarrolladores tengan trabajar más duro para que eso suceda. Obviamente no todo el mundo tiene cientos de miles de dólares para gastar en animaciones de lujo. De nuevo, he estado por ese camino muchas veces. También he estado en el asiento del cliente donde tuve que aprobar pagos adicionales porque la versión final requiere más trabajo del que inicialmente anticipamos. Así que he estado en ambos lados como diseñadora y como cliente. Voy a traer todos estos conocimientos al curso y te voy a enseñar a elegir cuidadosamente tus batallas. Por ahora, mantente curioso y haz tu mejor esfuerzo para terminar todo el capítulo. Antes de irnos, tengo que pedir su comprensión respecto a ciertas partes que serán aceleradas o omitidas. Cualquier proyecto decente de diseño de aplicaciones te va a llevar unas semanas cuando estoy tratando de hacerlo es reducirlo a su esencia. Por lo que obtienes una gran experiencia de aprendizaje de manera oportuna. Eso significa que tengo que editar ciertas cosas. Cosas como encontrar iconos, Google otras cosas que consumen mucho tiempo. ¿Eso sería fuera del camino? Vamos a divertirnos un poco con nuestro primer proyecto serio. Vamos por eso. 12. Comprender el breve y los deseos del cliente: Bienvenido de nuevo. Este es nuestro primer proyecto de aplicación serio. Esta va a ser una app de entrega de comida a domicilio. Y vamos a aprovechar esta oportunidad para pasar por muchas pantallas y escenarios diferentes. Este proyecto tiene un resumen que se trata de un ocho de cada diez. No es increíble, pero ciertamente no son pocos bocetos en una servilleta. Es doble como debería ser. Por una parte, tenemos el wireframe, que nos muestra las pantallas más importantes y qué contenido hay que incluir. otro lado, tenemos un documento que describe lo que sucede dentro de la aplicación por si acaso no queda claro a partir del wireframe. Idealmente, siempre debes tener ambos al iniciar un nuevo proyecto. No es tu trabajo llegar a ellos. Pero si el cliente sí quiere eso, deberías incrementar tu cotización de una manera muy significativa, básicamente cobrando más, yo diría al menos al mínimo, otros $1,000. Bien. Adjunto al curso, puedes encontrar el enlace para el wireframe, el logo y la documentación. Ahora bien, este negocio se llama Live short for delivery, y básicamente es una app que entrega comida. Y algunas ciudades, necesitamos enumerar todos los restaurantes que ofrecen comida para llevar, pero solo aquellos que tienen su propio personal de reparto. Bien, bueno saberlo. Ahora, la empresa de la izquierda no maneja la entrega real. Ahora bien, esta área del brief es muy común. Es la esencia del proyecto y es un buen lugar para comenzar a medida que tienes una idea general sobre lo que estás a punto de diseñar. La siguiente fase es crítica, el público objetivo. Y esto va a determinar el aspecto y la sensación de la app. Y es agradable tener al menos algo de inflamación. Ahora bien, esta app es para personas activas con ingresos disponibles. Ambos géneros, probablemente solteros, no casados, trabajo de oficina, poco probable, alta dirección. Tenemos que pagar puntos, la calidad de la comida y el tiempo de entrega. Ahora bien, estos son puntos útiles porque estos pueden ayudarnos a determinar el aspecto de la app. Cómo debemos darle estilo a LEP. El contexto lo es todo. Ahora me gustaría tener algunos detalles más, pero como dije, se trata de un ocho fuera de banda. Otra cosa que debes encontrar en estos escritos es el valor de la app. Ahora tenemos los principales puntos de dolor, así que sabemos lo que hay que arreglar, pero ¿cómo hace eso la app? ¿Cómo hace feliz la aplicación a la gente? Aquí, la aplicación tiene algunas fortalezas. Son las vistas, el excelente tiempo de entrega y las fotos reales de los productos. Bien, bastante bien, razonable. En los próximos párrafos con obtener detalles clave que darán forma a todo el flujo de la app. Ahora, voy a saltarme esta parte, pero por favor lee todo tú mismo después de esta conferencia por lo que veo, creo que el usuario puede saltarse el proceso de registro y lo mismo para la dirección, sólo puede saltarlo. Ahora, normalmente, el registro es el primer paso. Pero aquí el cliente, también conocido como el dueño del negocio, ha hecho la elección inteligente. No quiere que el usuario se quede atascado con llenado de formularios sin ver el valor de la aplicación. Entonces es por eso que estamos dando al usuario la posibilidad de interactuar con la app, de realmente usar el bien. Y que está convencido de que puede registrarse durante el proceso de pago. Esta es una gran señal. Esto te demuestra que el dueño o el gerente de proyecto o el dueño del negocio, quien esté dirigiendo el espectáculo, ha pensado cosas que hacer. Tenemos que analizar estas cosas porque esto nos dice nuestra posición en el proyecto. ¿Deberíamos compartir nuestras propias ideas? ¿Nos permitimos ser vocales y desafiar ciertas decisiones? Bueno, depende de lo bien pensado que esté el proyecto y por supuesto, tu papel, tu trabajo en este caso, esta es una gran señal. Las cosas están bajo control y no necesitamos adivinar el breve. A veces los clientes no tienen idea. Este no es uno de esos casos. Avanzando en caso de que el usuario haya iniciado sesión y la ubicación no se complete con solo va a mostrar la ciudad con la mayor cantidad de restaurantes. Pero puede usar un desplegable para cambiar eso rápidamente. Nuevamente, suena bien, bastante razonable. Ahora, en caso de que el usuario esté registrado, el desplegable obviamente mostrará su ciudad. Ahora bien, el sistema de calificación se basa en porcentajes, 1-100% en lugar de la calificación de cinco estrellas, lo que para nosotros es un buen lugar para agregar algo de personalidad. Vemos que nuestras cuatro categorías de calificaciones. Así que tendremos que diseñar algo que sea un poco creativo e interesante. Ahora, hagamos una pausa de nuevo. Esta es otra gran señal de que las cosas han sido analizadas con gran detalle por los cerebros de la operación. Los sistemas de calificación utilizan el enfoque estándar de cinco estrellas, pero algunas de las compañías más grandes del planeta han cambiado a un sistema de aversión similar. Esto incluye YouTube, Netflix, y en algunas partes del mundo, Facebook. Ahora, el listado es la pantalla fundamental dentro de la aplicación. Por lo que necesitamos una comprensión clara de lo que hay que incluir y qué se puede exhibir en otro lugar. Ahora, aquí vemos necesitamos la foto, un título, calificación, tipo de cocina, tipo de comida tiempo de entrega. Sin esta inflamación, podemos seguir adelante. El caso es que podríamos incluir por ejemplo a. orden mínima, ¿verdad? O el cargo de entrega. Podríamos incluir la distancia en millas o kilómetros desde el restaurante hasta el usuario. Todo esto cambiaría completamente la estructura del diseño. Así que de nuevo, estoy bastante contento de que tengamos toda esta información y sabemos lo que hay que incluir y lo que es opcional. Tenemos algunos otros pedazos aquí y allá, pero pasemos a los wireframes. Tenemos que ser conscientes de que el número de pantallas que se muestran aquí no es realmente exacto. El wireframe normalmente muestra las pantallas más importantes y tenemos que rellenar los espacios en usando la documentación, por ejemplo, pop-ups, pantallas intermedias y demás. Obviamente, esos no están incluidos en la mayoría de las situaciones. No los vas a encontrar si los tienes. Grandes noticias, pero en este caso, no creo que las tengamos. Ahora volvamos a ello. Las cosas están bastante bien trazadas. Entonces creo que vamos a pasar un buen rato con ello. Simplificado de nombres. Estos están numerados, lo cual es impresionante. Entonces podríamos hablar sobre la pantalla de ubicación, por ejemplo, pero podría ser más rápido llamarla pantalla uno. Si quieres comentar algo, por favor incluye el número. Ese es el mejor enfoque. Ahora volvamos a ello. Veo que necesitamos incluir tanto el menú izquierdo como el menú derecho, que no es algo que Google recomiende. Pero creo que esto es necesario debido a esos filtros que van a ayudar al usuario a encontrar un restaurante específico. Por último, hay que tener cuidado con los diferentes flujos de la app. Tenemos múltiples avenidas. A, cuando el usuario está registrado, eso es importante. Ser cuando no tiene cuenta y se salta la ubicación, así que no tenemos una dirección y vemos cuando no está registrado, pero él nos proporciona una dirección. Esto no nos afectará demasiado en las etapas iniciales de diseño, pero en la fase de prototipado, vamos a tener que ordenar todos estos escenarios. Vamos a tener que hacer la app y la directiva. Entonces va a ser bastante complicado, pero ya veremos en ese momento en la fase de prototipado, Con todo, podemos iniciar el proceso de diseño revisando la competencia en este nicho, tenemos para buscar inspiración. Tenemos que ver lo que están haciendo otras personas. Entonces continuemos en el siguiente clip. 13. Analiza los competidores de la aplicación: Parte 1: Bienvenido de nuevo. En este punto, el breve no debería ser un misterio. Si no has ido al ancho, por favor pausa el video y analízalo que solo el siguiente paso es echar un vistazo a la competencia de la app para ver qué está pasando en este sector en particular. Aquí tenemos un nicho bastante bien establecido, entrega de comida que son apps más que suficientes que podemos analizar. Otro, hacer que uno entienda mejor los requisitos del proyecto y obtener algo de inspiración con respecto al estilo general. Tenga en cuenta que estas aplicaciones se basan en la ubicación. Lo que estoy a punto de mostrarte puede que no esté disponible en tu país, pero sí tienes varias capturas de pantalla de cada aplicación adjunta al curso. Sin embargo, el line-up incluye al hígado, Food Panda , the Live, que es una app que tiene exactamente el mismo nombre, pero es puramente casual. Comida para llevar y luego pulsa Menú. Ahora, todos los laboratorios se actualizan constantemente, por lo que las versiones en vivo pueden ser diferentes. En realidad, estoy bastante seguro de que diferente. Aún así, las capturas de pantalla serán el punto de referencia. Bien, comencemos con el vivo para que podamos sacarlo del camino. Ahora, la pantalla inicial es un gran desastre. Tenemos banco amarillo, azul marino, y curiosamente el botón principal también es amarillo. El fondo parece ser una imagen de la ciudad, pero está bloqueada por este rectángulo sólido, lo que no tiene sentido. Cuando buscas, aunque no entiendas mi idioma, el rumano, podrías ver que este texto es de calidad bastante baja, muy pixelado, y algo distorsionado. Y eso es porque estos no tienen en realidad capas de textos, oficialmente llamadas cadenas por codones. En cambio, esta es una imagen que se está estirando. Esa es una mala práctica y no es buena Mirar en absoluto. Bien, ahora cambiemos a la página de listado. Aquí vemos de inmediato la poca atención al detalle. No hay espacio vacío a ninguno de los lados. Entonces, si arrastramos algunas líneas, se puede ver que la alineación está fuera de control. La topografía es modesta, las fuentes son aburridas. No hay diversidad en esta región. No hay en particular la jerarquía que se pueda detectar fácilmente. En general de cuatro de cada diez. Y estoy siendo generosa. Cuando entramos al restaurante, podemos ver que las pestañas tienen estos divisores verticales, que no he visto muchas veces en las apps de Android. Encima de eso, no hay elevación en ningún lado. Puedes detectar cualquier sombra paralela que sea. Ahora bien, eso no es exactamente algo malo, pero esto se ha quedado corto en el departamento de diseño. Peor que eso, el gesto de deslizar que a menudo se usa para cambiar rápidamente los golpes. Bueno, en realidad no funciona. Eso es todo un shock. En su lugar, hay que tocar manualmente estos elementos, o podríamos usar estas flechas, que son de tiempos de Windows XP. Ahora, honestamente no tengo idea de lo que estaban pensando estos tipos. Este es un excelente ejemplo de una app que fue hecha por desarrolladores y empresarios conocen diseñadores con involucrados, te prometo que en la parte superior derecha, cuidado de adivinar qué hace ese ícono. Es información adicional sobre el restaurante, tal vez una función de compartir, Agregar a Favoritos? Y la respuesta es, no lo sé. Cuando lo toco, no pasa nada. No tiene un downstate, así que no estoy seguro de si realmente funciona. Pero al seguir adelante, la caja también es risible. Todo se lanza al azar junto. Creo que querían centrar estas capas de textos, pero todo está apagado. Por más que intentes, no encontrarás muchas líneas imaginarias. Nada está alineado. Ah, y esto entrega el ícono, se lleva el pastel. Cambié de opinión. Es un dos de diez, otro cuatro. Bien. Pasemos a llevaray.com, que es una empresa que está comprando aplicaciones de entrega de izquierda a derecha, no hace nada bloqueándonos. Como si fuera en el caso de vidas donde no podías ver nada a menos que pongas una dirección con una S para la ubicación, para el permiso GPS. Entonces la aplicación básicamente quiere nuestra ubicación e inmediatamente va a aparecer una lista de restaurantes. Ahora, personalmente pedí muchos alimentos, así que en realidad soy un usuario bastante pesado de estas aplicaciones. La comida para llevar no es una de ellas. No me gusta y déjame decirte por qué. Todo es confuso. Nada es donde yo esperaría que estuviera eso. Claro. El listado de restaurantes es encantador. Logotipos bonitos y limpios a la izquierda. Despeja los títulos en negrita a la derecha. Iconos interesantes debajo. Pero ahí es donde se detiene el tren feliz. ¿Me puede decir cuál de estos dos restaurantes tiene una calificación más alta? Porque si alguna vez has usado booking.com, creo que ya sabes, hay una gran diferencia en la calidad. Entre un hotel 8.0 y un hotel 8.9. ¿O qué tal IMDB? Si te gustan las películas, película 6.1 versus una 6.91, noche y día. Lo que estoy tratando de decir es 4.5 estrellas para dos restaurantes no me dice nada. Necesito más información para poder tomar una decisión. Ten en cuenta, tengo más de 50 restaurantes en mi zona. Por lo que este sistema estelar, sin ninguna otra información, no es lo suficientemente bueno. Pero volvamos al diseño por el momento. A mí me encantó la naranja. Realmente brilla a través y tiene un bonito zinc para agregar. Es fresco. Es captar los íconos de nuevo, agradable y encantador. Y tenemos un interruptor interesante que cambia la forma en que funciona la app, ya sea en el modo Liberty o pickup. Eso está bien ejecutado. Las fuentes utilizadas no están fuera de este mundo. Y lo mismo puede decirse de sus íconos, decentes, pero no geniales. Dentro del restaurante, todo está bien espaciado. Pero curiosamente, fueron por esta sombra de trato extraño para el color de llamada a la acción. Esto es bastante extraño. Ahora, hay un sistema de pestañas que te permite deslizar entre categorías según lo esperado por cualquier usuario móvil. Algunos platillos tienen descripciones, pero otros no. Respecto a las fotos del platillo. Misma historia. Ahora, la caja es realmente mediocre. Muchos divisores, mucho gris, poca atención al detalle respecto a la tipografía. Pero luego hagamos una pausa en el lado del diseño. Esto sería un 6/7 de diez en mi libro, el problema, como dije al principio, es la funcionalidad. Solo echa un vistazo al sistema de tarjetas. Está en algún lugar en la parte superior derecha, pero no en la barra de acción. No, en realidad es un FAB de botón de acción flotante, así que simplemente se cierne sobre. Eso es bastante inusual. El sistema Deb tiene fuentes que son demasiado grandes, y esto me dificulta saber qué hay disponible en el restaurante. El menú de la izquierda está en realidad en el lado derecho. También es completamente personalizado. Ahora, no estoy diciendo que eso sea algo malo, pero es otra cosa a la que tengo que acostumbrarme. Estos cuatro iconos encima de la lista de restaurantes. Otra vez, bastante extraño. Esta es una app que ni siquiera ha considerado los lineamientos oficiales del diseño de materiales. No les importaba en absoluto. Y se siente como en general, la app en mis manos, se siente torpe. Es difícil de poner en palabras, pero simplemente no se siente bien. En general, este es un diseño AB mucho mejor que el vivo el anterior. Pero no creo que lo califique más de un cinco de cada diez, tal vez seis si soy súper generoso. Ahora, pasemos al menú de ayuda, que tiene un enfoque totalmente diferente. Primero, me encantó el proceso de incorporación, es decir, las primeras pantallas iniciales que te informan sobre la aplicación. Diseño agradable y limpio. Y una vez que ingresas a la app, me muestra una lista de restaurantes basada en la dirección que puse. Ahora bien, el listado es muy fácil a la vista. Pero hay un problema con respecto a la funcionalidad. No tienes forma de ordenar estos restaurantes. Hay que entrar a cada uno y ver qué es qué. Y esta es la vibra en toda la app. Hay que tocar mucho para llegar a la meta. Muchos clics en resumen, donde algunas aplicaciones quieren que llegues a la fase de pago y cuatro pestañas o menos. Aquí ese número se duplica fácilmente. Hay que poner mucho trabajo. Cuando tocas una entrada, esto es lo que obtienes. De nuevo, diseño encantador. Este es un ocho y mi libro desde el punto de vista del diseño. Aquí está el menú del restaurante. Tenemos un enfoque de dos columnas, pero no estoy seguro de si esta es la mejor opción. ¿Deberíamos llegar a ver más artículos? Pero la suerte no es tan grande por esta altura. Se siente demasiado pequeño. Parece antinatural. Se siente como si algo estuviera mal. Y las fuentes, ahí no están listas. Todo parece tirado junto. Ahora cuando los platillos tienen fotos, es un poco de experiencia, pero en general, esto es una bolsa mixta. El botón de acción flotante también es confuso. No estoy muy seguro de qué pasa con este botón. Después de algunas investigaciones, sí creo que esto me permite hacer un grupo por lo que sea que sea que sea. Básicamente, es algo acerca de ordenar con tus amigos. Pero, ¿por qué colocarlo tan al frente y al centro? En fin, el fondo es un poco demasiado fuerte, el gris un poco demasiado oscuro para mi gusto. Destaca demasiado. El sistema dapp se ve bastante bien y los iconos de la ActionBar también son interesantes. Es difícil puntuado en algunas partes es un siete, tal vez incluso una ayuda. Mientras que en otros lazos, ¿es el otro cuatro pies? Ahora, vamos a darle un 6.5 y pasar al hígado. Pero vamos a hacer eso en el siguiente clip. Gracias. 14. Analiza los competidores de la aplicación: Parte 2: Bienvenido de nuevo. Ahora estamos en el hígado. Hazlo, vamos a analizarlo y a ver si esto es una fuente de inspiración. La primera impresión es genial. La topografía es puntual, tiene carácter, agrega valor al diseño. Es fácil de leer. Lo siguiente que noto es el sistema de tarjetas horizontales que se utiliza para exhibir la característica de los restaurantes. La sombra es bastante fuerte, considerando que el fondo parece ser blanco puro, pero sí me gusta. Arriba. Tenemos algún tipo de anuncio, pero fíjate lo bien que se encuentra encima de esa línea diagonal. También agradezco cómo han usado ese pequeño icono en el área de la barra de acción. Claro, es espacio desperdiciado, pero demuestra que les importa. Se trata de branding y de asegurarte de que sabes que estás en su app. Pero tú eres el hígado. En cuanto al listado en sí, me encanta cómo se talla el tiempo de entrega en la foto. Agradezco la jerarquía en el listado. Creo que eso está muy bien ejecutado. Tenemos el título en negrita, varias etiquetas en un color lavado más pequeño. El tiempo de entrega se reserva y se le ha dado bastantes bienes raíces por su importancia. Y por último, tenemos el sistema de calificación y porcentajes. Pero lo que realmente me encanta es este chapoteo de color para hacer el emoji. Ahora bien, otra forma de traducir el principio jerárquico dentro del listado es esta. Ya sabes, donde la suerte, puedes escanear fácilmente diversas áreas y saber lo que es importante y lo que no. Ese es el principio jerárquico. El contenido se distingue fácilmente y esto lo convierte en una gran experiencia. Se siente sin esfuerzo. Ahora bien, si volvemos a vivir, podemos ver que todo está básicamente agrupado. Esto se siente abarrotado y básicamente soso, aburrido sin ningún gusto, pesar de que presenta casi la misma cantidad de elementos. Ahora, volviendo al hígado, sin embargo, esta aplicación no parece seguir las pautas de diseño de materiales. En la parte superior, no hay sistema de tabulación, ni esto es irregular la barra de acción. En cambio llegamos a los desplegables, que son muy poco comunes. En la actualización más reciente. Se deshicieron de ellos y estoy feliz de que hayan hecho ese cambio. El tamaño de las tarjetas es bastante generoso. Bueno eso mejora el impacto de la app. Solo puedes caber a punto de restaurantes dentro de una pantalla. Y el segundo está un poco cortado. Ahora bien, para la pequeña ciudad, esto tiene sentido, ¿verdad? Pero para los más grandes con montones de restaurantes, va a ser bastante difícil. Básicamente después de los seis o siete anuncios, simplemente te vas a aburrir. Ahora, las fotos causan una gran impresión y definitivamente es la brecha más parecida del grupo. Pero me encantaría ver un poco de uso de este espacio. Veremos lo que es posible cuando empecemos a diseñar. También vemos una barra inferior, que incluye la función de búsqueda. Ahora bien, bastante bien. Lo interesante es la combinación de colores, blanco y Thiel, nada más. El contenido se deja el brillo, probablemente porque las imágenes son bastante pesadas en detalle. Eso es bastante inteligente. Y probablemente vamos a hacer lo mismo en nuestro propio diseño. Más aún considerando el hecho de que mayoría de los restaurantes no tienen buenas fotos de la comida. En la mayoría de los casos, las fotos son oscuras, las placas están ocupadas y los colores no suelen ser halagadores. De nuevo, se puede ver el vivo para eso. La diferencia es noche y día. De vuelta a la pantalla inicial, tenemos un botón de acción flotante extendido que te ayuda a llenar allí. Esto está bien ejecutado, pero una vez que lo tocas, vas a ver otro letrero que lleva esta aplicación a un nueve de cada diez, si no más, magníficos íconos que están en sintonía con la vibra abs. Obtenemos hermosos íconos que están en sintonía con las aplicaciones de vibe. Bonitas imágenes debajo con gran contraste para el texto. Borrar el botón de llamada a la acción. Hay poco que decir en el lado negativo. entrar en el listado, vemos la foto de los restaurantes en la parte superior y todos los elementos del menú están en la lista desplazable. No hay sistema de tabuladores del que hablar. Las fuentes utilizadas son fáciles a la vista, entonces puedes decir fácilmente qué es qué. No me gusta. El hecho de que no haya miniaturas para los platillos, sobre todo porque hay suficiente espacio en el lado izquierdo. Por otro lado, sí lo hace bastante aireado. Se siente como que tiene suficiente sala de lectura. Bien, ahora agreguemos algo a nuestro carrito y veamos cómo va eso. Bien, tenemos una barra pegajosa en la parte inferior que nos muestra la canasta actual, y está separada por una sombra en la parte superior. Es curioso que el botón también tenga sombra. No estoy seguro de estar de acuerdo con eso. En fin, la caja es otro punto fuerte. Todo es fácil de seguir y han usado estas cartas de manera inteligente, un poco pesadas con ese trazo, pero aun así un buen trabajo. En general, la aplicación se ve encantadora y eso se debe a que sus elementos son los bien espaciados. Sus fuentes son agradables e interesantes y el contenido se deja brillar. Un fuerte nueve de cada diez. Pasemos a Food Panda para ver otro bulto sobre el mismo tema. Aquí, inmediatamente reconozco el mismo estilo de un color, y esto se usa para llamar la atención del usuario. Si puedes tocarlo, entonces es rosa barra roja. Sí me gusta este estilo porque esto guía al usuario sin hacerle pensar. La primera impresión es que esta es la app mejor diseñada del lote, 9.5 de cada diez. La principal diferencia entre ésta y el nivel es la atmósfera. Eso es un poco más amigable, aunque esto es un poco más profesional, sin embargo, centrémonos en el listado. Están pasando más debajo de la foto. Entonces esto sí se ve un poco más ocupado que el hígado a las fuentes utilizadas son, bien, pero carecían ese nodo especial que los distingue. Volvamos rápidamente al hígado hacer y revisar el tiempo de entrega. Observe cómo se destacan estos números, sobre todo los números. Idealmente, ese es el tipo de personalidad que busco en mis tipos de letra. Food Panda también tiene un botón de acción flotante, probablemente para ayudarte a checar. Ya está bastante claro. La barra de acción es un elemento básico de cómo se debe hacer. Está bien definido, tiene una jerarquía adecuada, bien espaciada. Si hay algo que agregaría es el hecho de que no me hubiera gustado que el icono de búsqueda se dejara alineado con el menú de hamburguesas. Eso lo habría hecho perfecto. Aún así, en general, esta es una de las mejores que he visto hasta ahora. Pasemos a la página de listado de restaurantes. Aquí obtenemos pestañas que han colocado debajo de la foto principal de los restaurantes. Esto se ve bien. Es funcional, pero no estoy enamorada del sistema estelar como se muestra aquí. Creo que se pierde. En cuanto a los elementos reales, esa relación de especificaciones es un poco impar. Las fotos son demasiado altas y eso va a ser un problema para la mayoría de los restaurantes. Cuando esas otras antenas miniaturas. Es otra cosa aunque se podría argumentar que esto es para avionar dos básicos. Vamos a tener que encontrar una buena solución en nuestro diseño cuando se trata de ello, ninguna de estas opciones funciona para mí. Entregar que fue simplemente abandonar la idea de mostrar una foto del platillo. Pero en otros Wireframe, sí lo vemos como un requisito. En general. Sin embargo, esto está atado o tal vez un poco detrás del hígado. Vamos a llamarlo el nueve, tal vez un 8.5. Ahora bien, la cosa es que podría continuar fácilmente, pero quiero que explores algunas de estas aplicaciones tú mismo o encuentres otras similares. El objetivo es entender cómo intentaron resolver diversos problemas. Quiero que me digas lo que te gusta y lo que no te gusta de ellos. Para resumir esto, las conclusiones de esta conferencia son las siguientes. Deberíamos usar un solo color hermoso en nuestra aplicación y dejar que el contenido brille. Tenemos que tener cuidado con la relación de aspecto de las fotos en el listado del restaurante. Necesitamos una fuente de gran apariencia que agregue algo al diseño, algo con personalidad. Por último, debemos hacer nuestro mejor esfuerzo para incluir al menos dos restaurantes completos en la pantalla de listado inicial. Como consejo, cuantas más aplicaciones veas, más inflamación vas a tener. Este proceso debería llevarte al menos 2 h. Pero por consideraciones de tiempo, tuve que acortarlo. Por favor. No tengas miedo de ser despiadado en tus comentarios. Tu objetivo es separar cada componente y ver si es algo que debes evitar. O por el contrario, quizá utilícelo como inspiración. Toma muchas capturas de pantalla y póngalas al lado de la otra para que puedas ir y venir fácilmente. Bien, continuemos. 15. Configura el diseño para las dos primeras pantallas: Bienvenida de nuevo. ¿Exploraste la competencia por ti mismo? Ojalá hayas pasado por varios laboratorios en tu propio teléfono, o al menos has mirado las capturas de pantalla que adjunté a la conferencia anterior. Ahora, es el momento de iniciar Adobe XD. El tamaño personalizado está bien. Los ajustes que voy a usar están basados en el diseño de materiales 2.3. Ahora, para que las cosas sean simples, vaya con 720 para el ancho y 15, 24 la altura. Ahora bien, ¿cómo voy a conseguir estos números? Estoy duplicando los valores del viejo Samsung Galaxy S. Entonces. Ahora bien, ¿por qué lo estoy duplicando? Así que va a quedar mejor cuando revisemos el diseño. Para que podamos ver todo bonito y crujiente sin conseguir anteojos. Esa es la única razón por la que lo estamos duplicando para que se vea bien. Esto no importa para el código de ahí. A él no le importa. El proceso de codificación no se ve afectado de ninguna manera. Bien, habilitemos un desplazamiento vertical. Y la ventana gráfica simplemente significa el punto de corte, el punto donde tienes que desplazarte hacia abajo para ver más contenido. Inicialmente, vas a obtener 15, 20 píxeles, y luego lo que esté debajo requerirá el desplazamiento. Bien, genial. A continuación tengo dos monitores para pantallas, y voy a mirar constantemente el wireframe y la documentación en el otro. No voy a mencionar eso cada vez. Si no tiene una segunda pantalla, arrastre el wireframe dentro del programa y encoja un poco. Bien, Ahora ¿cuál es el objetivo? Bueno, queremos establecer nuestro layout, la base del proyecto sin consideraciones de diseño. Así que no hay colores, ni fuentes, nada solo cosas básicas. Queremos rectángulos y capas de textos en su forma más pura. Después tenemos una base de fundación. Después de eso tenemos algunas pantallas. Entonces vamos a empezar a experimentar con varios colores, fuentes y demás. Bien, Ahora comencemos con el primer tablero de arte, ya sea que necesitemos el logo de las apps, esto se adjunta al curso. Ahora bien, el icono en sí no está estilizado de ninguna manera, ni tiene texto alguno. Esto nos ayudará a mantenerlo en línea con el resto del diseño. Esto es ideal. Bien, voy a centrarlo y colocarlo en ninguna posición en particular en la parte superior de la pantalla. Algo sobre su. A continuación, voy a agregar el campo de ubicación a un rectángulo. Esto debería tener unos 600 píxeles ancho y unos 80 píxeles de alto. Me gusta usar el panel de propiedades para eso. Recuerda w para el ancho, h para el alto. Estos no son valores precisos porque eso viene más adelante en la etapa de estilismo. Sólo son números de estadio de béisbol. Por favor, tenga en cuenta algo. Siempre voy a centrar todo en el tablero de arte, estas herramientas. Ahora, no quiero sonar como un disco rayado, así que no voy a mencionarlo absolutamente. Cada vez. Además no te diré cuando renombro o cuando un grupo capas que se dan esto es una necesidad absoluta. Tienes que estar organizado. Haz del rectángulo un gris muy claro. Y eso es porque vamos a agregar algunos textos y queremos un gran contraste. Escribamos algo así como una entrevista o ubicación, algo así. Ahora, no agregaremos un ícono en esta etapa, pero podemos escribir GPS para recordarnos que vamos a necesitar uno aquí. También podemos duplicar estas capas y crear un botón Enviar. Puedes hacer una copia como quieras. Me gusta mantener presionada la tecla Alt, hace la tecla Opción en el Mac, y luego arrastrar una copia así. Si no te gusta hacer eso, también puedes usar controlar al gay, bonito. Cambiemos el texto. Encoge el botón a unos 250 píxeles. Y claro, centrar todo ese texto dentro del botón. Y luego todo el elemento con la pantalla, con nuestro tablero. Por favor, recuerde trabajar en su segunda visualización haciendo una pausa con la frecuencia que necesite. Ahora tenemos dos cosas más que agregar. Omita este paso y cree un inicio de sesión de barra diagonal de cuenta. La primera puede ser una capa de texto porque no es lo suficientemente importante. Realmente no queremos que la gente lo use. El otro debería ser un botón. Así que vamos a agregarlo en cualquier lugar cerca de la parte inferior. Digamos que crea una cuenta barra de inicio de sesión ahora. Bien, bien. Recuerda, pulsa Escape cuando quieras terminar de editar. Bien, cambiemos el tamaño a unos 500 píxeles, así que duplique el tamaño del botón Enviar. Nuevamente, estos no son valores finales, pero es un buen punto de partida. A partir del breve. Entiendo que la creación de cuentas realidad ocurre en una pantalla diferente. Entonces, en realidad, eso es todo aquí. Pero lo que esto significa es que esto nos da mucha libertad en nuestro diseño. Lo que tenemos que tener claro sobre la consistencia. Esta es una buena oportunidad para hablar de eso. Por ejemplo podemos hacer los botones y los campos de texto. Digamos Bien por encima de los 100 píxeles de alto, digamos un tercio de dy, ¿verdad? Y podemos explicar esa decisión con bastante facilidad. Es por el bien de la usabilidad, ¿verdad? Cuanto mayor sea la carga, menores serán las posibilidades de las piernas de Minsk o las pestañas accidentales. Tiene sentido, ¿verdad? Tienen botones grandes. Echa un vistazo a este verde aquí. En este tenemos cuatro textos, rendimientos más un botón. Entonces el tamaño que antes dijimos una treinta crea un gran problema de espaciado. Y obviamente no está bien usar diferentes tamaños en diferentes pantallas. Porque nuevamente, consistencia, tenemos que tomar nuestras decisiones de diseño basadas en toda la app en su conjunto, no como elementos individuales. Entonces es por eso que estamos creando pantallas en lotes. Y con pensar en el tamaño para todo el diseño, para toda la app. Entonces un tercio D no funcionaría. 16. Diseña la pantalla más importante en la aplicación: Bienvenido de nuevo. Pasemos al siguiente haciendo una copia y quitando todo. Ahora otra vez, volvamos a lo básico. Esta es una buena oportunidad para recordar nuestras proporciones. La barra de estado tiene que ser 720 por 48. Lo dejaremos rectángulo en blanco cualquier color aleatorio y lo colocaremos correctamente. Lo que me gusta hacer es que me gusta alinearlo arriba. Entonces usa a la izquierda alinear nuestra puerta. Vamos a arrastrar una copia para la barra de acción. Y esto necesita ser redimensionado a 112 píxeles. 112 pixeles. Aquí es donde el panel de propiedades vale la pena, cambia de color a algo muy diferente. A lo mejor un gris muy claro. si acaso no te gustan ambos términos. Por cierto, puedes seleccionar varios rectángulos a la vez, así, y simplemente deshabilitarlo así. Ahora, agreguemos algunas capas de textos. Necesitamos filtro de ciudad y búsqueda. El primero es para el lado izquierdo, mientras que los otros dos para el lado derecho, te sugiero que uses shift al crear copias porque eso te ayuda a mantener tus capas de textos en la misma línea. Básicamente Alt y Shift mientras arrastra. Impresionante. Bien, ahora el triángulo desplegable se puede crear usando la herramienta polígono. Asegúrate de mantener presionada la tecla Shift cuando arrastras, así obtendrás un triángulo perfecto. Verifique el lado derecho y luego establezca el número de coordenadas en TV. Ése son los valores predeterminados. Así que estoy bien para ir aquí. Establezca el punto hacia abajo. Es posible que necesites rotar eso cambia color a absolutamente cualquier cosa que quieras, probablemente negro. Una cosa a tener en cuenta, algunas personas prefieren usar la herramienta pluma para algo como esto. otras personas les gusta descargar iconos. La palabra clave en este momento es velocidad. Así que haz lo que quieras, solo hazlo rápido. Ahora se pone interesante. Recuerda que queremos exhibir tantos restaurantes como sea posible sin apretar y abarrotar todos los elementos. Entonces comencemos con un rectángulo que va a ser de 600 por 400 píxeles, ya que este cubrirá la mayor parte del ancho de la pantalla. Además, para empezar tendremos una relación de aspecto decente. El tamaño real se va a decir más tarde, pero este es un buen punto de partida. Así que algo ancho y bastante corto. Cambie a la herramienta de movimiento y colóquela justo debajo de la barra de acción. A pesar de que vamos corriendo, voy a robar el centro. Todo está bien. Practica. Ahora puerta, agreguemos algo de texto ficticio. El título, vamos con el paraíso de los postres, justo al lado. Escribamos algo así como tiempo de entrega 30 min. Yo, la categoría es doble. Uno para el tipo de alimento y otro para el tipo coseno. Ahora bien. Sea lo que sea esto, el breve Eso me está diciendo esto esto debería ser Desierto y la vida internacional. Gracias de nuevo, realmente no importa lo que pongamos. Sólo queremos exponer alguna información. Entonces tenemos algo que mirar, algo con lo que trabajar. La calificación. Vamos con 92 por ciento de 24 votos. Esto cubre todos los elementos según el wireframe y brief. Bien, ahora seleccionemos absolutamente todo así y veamos si podemos caber dos de ellos. Recuerda, ese es un requisito importante. Sí, esto funciona. Sin embargo, podemos caber dos restaurantes enteros. Nuevamente, esto es sólo un borrador aproximado. nada al respecto, hay precisa. Entonces tenemos que tomarlo con un grano de sal. Pero vamos a resumirlo. Hasta ahora recreamos las dos pantallas a partir del wireframe con el propósito de tener algo con lo que trabajar. En las próximas conferencias, hemos hablado de ser conscientes del impacto de nuestras decisiones. Específicamente cómo hacer un campo de texto o el botón niño va a afectar a toda la aplicación y puede causar problemas. Lo paramos fuerte. Te voy a ver en un segundo después del descanso. Gracias. 17. Crea la pantalla de detalles del restaurante: Bienvenido de nuevo. Pasemos a la pantalla de detalles de restaurantes donde se listan todos los platillos. Entonces, sin más preámbulos, pongámonos a trabajar. Vamos a copiar la pantalla, pero hazlo, y comencemos con un enfoque de arriba a abajo reemplazando la ciudad por cualquier nombre de restaurante aleatorio. Vamos a llamarlo madurar su entrega de pizza. Eso suena bastante italiano, ¿verdad? El desplegable y el Filtro tienen que ser eliminados. Pero nos quedaremos con el último y le cambiaremos el nombre. Esto debería decir Info. Y esto va a ser un icono que nos va a mostrar la dirección de los restaurantes, pantalla 15 y luego la pantalla de vistas 16. Si miramos el wireframe, podemos ver algunas pestañas, pero no está claro si estas son fijas o las desplazables. Vamos a comenzar con la versión fija. Creo que eso es más probable. Primero, copia la barra de acción y suelta su tamaño a 96 píxeles. Por supuesto cambia el color para que veas lo que está pasando. De vuelta a la talla por el momento. 96 es lo suficientemente grande desde el punto de vista de la usabilidad, en realidad puedes usarlo, pero lo suficientemente pequeño para que no consuma demasiado espacio. Este es también el valor recomendado en la guía oficial de Google. Elimine los dos grupos de listado si aún no lo ha hecho. El texto, voy a usar el desayuno, el almuerzo y la cena como mis elementos principales. Esto significa que el diseño de tres pestañas, por lo que a 40 rectángulo ancho va a ser necesario para el acto de artículo. Así que tomemos la herramienta rectángulo, clic y arrastremos cualquier forma, luego cambiemos su tamaño a 40 por cuatro píxeles. Esto se puede dejar en blanco por ahora, pero por favor retire el trazo. Esto es algo que no me gusta absolutamente de Adobe XD. El relleno siempre es blanco y hay una tabla que se aplica por defecto. Esto no es lo ideal. De todas formas, asegúrate de colocarlo correctamente en el borde inferior del fondo de las pestañas. Este es un paso opcional, pero cualquier diseñador de experiencias lo va a hacer el desayuno central con esta línea para asegurarse de que esta es claramente la pestaña activa. Obviamente también se centraron los textos verticalmente. Y luego hacer lo mismo para el almuerzo. Solo asegúrate de entender este principio. Selecciona dos capas, el texto y el rectángulo, y luego usas las herramientas de alineación. Pero, ¿qué pasa con la cena? Verticalmente, Eso no es un problema. Dibuja una caja para seleccionar ambos y usa el comando adecuado. Bien, bien, pero ¿y horizontalmente? Bueno, aquí está la pista. Seleccione la línea negra y escriba la línea en. Si solo se selecciona una capa, los mundos de alineación considerarán la pantalla, el tablero de arte, como el segundo elemento. Entonces una línea a la derecha hace que la línea toque el lado derecho. Ahora, mantén presionado el turno y haz clic en la cena para seleccionarlo. Centrarlo horizontalmente, y eso es todo. Bueno, en realidad hay un paso más. Tenemos que poner una línea negra en el lado izquierdo, deseleccionar haciendo clic en cualquier lugar. Luego selecciona eso, luego solo deja la línea en. Impresionante. Ahora mi consejo es que trabajes con zoom para que puedas agarrar fácilmente las capas correctas. Y así, el sistema de pestañas es, entonces, echemos un vistazo a la estructura de alambre vez más, tenga en cuenta, este no es el fin de todo para nuestro diseño. Podemos experimentar con diversas miradas si tenemos alguna idea. Pero por ahora, creo que vamos a mantenerlo simple y seguir el wireframe, es decir, un diseño de una tarjeta. Si no estamos contentos con un diseño de una tarjeta, podemos probar un enfoque diferente, sin embargo. En serio no me gustó el diseño de dos columnas que vimos en el video anterior. Tenemos que crear un porta imágenes para cada plato, una miniatura. Creo que esto tiene que ser una forma algo cuadrada, probablemente un poco en el lado más ancho. Entonces comencemos con un rectángulo con un tamaño de digamos, dos a cinco por uno AD. Como dije, no exactamente al cuadrado, pero no demasiado alto porque vimos que eso no funciona demasiado bien. Colócala a 30 pixeles de los dabs. Recuerda, mantén pulsada la tecla Alt, esa es la tecla Opción en la Mac. Entonces usa tus teclas de flecha con o sin shift haría shift hace, es que te ayuda a mover la capa y diez incrementos de píxeles. Esto se ve bien. Bien, por ahora, volvamos para el título y la descripción. Tengo algo preparado en una ODA mala, el título de nuestro GU, todo por ahora. Ahora, aquí está la cosa. Podría haber usado, Lorem Ipsum, pero creo que un título real ayuda mucho. La descripción debe ser una capa de texto de párrafo si acaso quieres cambiar rápidamente tu contenido. Entonces esto significa que tienes que hacer clic y arrastrar. Ahora localizar las líneas debería ser suficiente, aunque podríamos dejarlo caer para hacerlo solo en caso de que no podamos mostrar suficientes productos en la pantalla sin desplazarnos. Eso es. Bien. Ahora, por cierto, por si quieres algún texto ficticio rápido, te recomiendo lipson.com. Este es un gran sitio web para el texto falso, contenido falso en general. Tómate tu tiempo con él y asegúrate no apresurar estos bits esenciales. Esta es la base de nuestro diseño. Entonces, si tienes una idea fija y te quedas con ella, podrías ponerte en una esquina. Así que de nuevo, sea flexible, por ejemplo, el tamaño de las miniaturas. No tengo idea si esto es lo suficientemente bueno. Ese fue un punto donde la competencia falló o todo lo contrario, ellos reslumbraron. Volviendo a nuestro listado, tenemos que agregar el precio, digamos 14 dólares. Esta va a ser la tercera línea. Y siguiente mojado, vamos a poner en el peso del producto, que como entiendo es bastante importante. Esto es todo desde el breve, por cierto, aquí, escribamos 350 g. por último, vamos a necesitar un Agregar al carrito textos. Aunque estoy bastante seguro de que esto va a ser un ícono. Pero por ahora, vamos en lugar darme un momento para ordenar todo esto, me gusta alinear todo a pesar de que van a moverse cuando empecemos a jugar con el tamaño y la fuente. Pero de nuevo, esto es algo que absolutamente quiero hacer porque simplemente me hace sentir mejor. Idealmente, queremos una ruta imaginaria para que el usuario vea la miniatura, el título, el precio, el peso del producto y luego el botón Agregar al carrito. Todo tiene que fluir. Entonces más adelante, tenemos que hacer que suceda con el tamaño y el color para básicamente ayudar a que esto avance. Ahora, a pesar de que las cosas están bastante agrupadas, vamos a terminar esto con un divisor. Usa la línea para todas las teclas de acceso rápido L y configúrala a tal vez dos píxeles, así que es más fácil seleccionar un píxel. Las líneas son increíblemente difíciles de recoger. Ahora bien, ¿por qué estamos usando un divisor? Porque en un espacio reducido, esto nos ayuda a separar nuestro contenido. Sin ella, tendríamos que usar mucho más espacio vacío. Y queremos evitar eso. Ahí está, por cierto, debería colocarse unos 30 pixeles de la foto, solo para que tengamos esa hermosa simetría. Ahora para concluir esto, agrupa todo juntos porque queremos hacer algunas copias. Llenemos toda la pantalla con clones. Y veamos dónde estamos. Lo que me encanta es esta magnífica opción llamada Repeat Grid que realmente puede acelerar las cosas, pero no la vamos a usar. Quiero que ganes velocidad a la antigua usanza. Quiero que hagas algo de trabajo manual. Después de colocar el último, vamos a seleccionar todos ellos y usar este comando, distribuir ahora que todos perfectamente alineados y esto es bosquejar forma. Hagamos una pausa por un momento. Gracias. 18. Cómo hacer grandes opciones de diseño: Bienvenido de nuevo. Me gustaría hacer una pausa para que podamos discutir un punto importante. ¿Cómo se supone que debemos tomar decisiones importantes de diseño en este proyecto en particular? ¿Vamos por la imagen de fondo de pantalla completa en el primer tablero de arte? ¿O lo mantenemos sencillo? Y si lo mantenemos simple, ¿vamos de color blanco liso o usamos un patrón sutil que está relacionado con la comida? Si vamos a usar un fondo blanco, ¿cómo va a afectar eso a la siguiente pantalla? ¿Vamos a usar el blanco para la barra de acción? Eso significa que también vamos a necesitar usar blanco para la barra de estado. Así como se puede ver cuando la decisión impacta a todo lo demás. Y eso es porque una app necesita ser cohesiva, todo tiene que funcionar en conjunto. Entonces queda la pregunta, ¿cómo se supone que debemos decidir? El esquema de color tampoco está definido. Entonces ese es otro factor. ¿Vamos con verde para implicar frescura? Azul porque es calmante y seguro. Rojo o naranja porque es Bolden caliente. Hay muchas preguntas como esta, y creo que es por eso que muchos diseñadores pasaron horas sin hacer ningún progreso. Aquí está mi respuesta. Tú las haces todas. Sí. Escuchaste eso, ¿verdad? Creas todas tus ideas. pones uno al lado del otro. Y así es como no solo mejoras, sino que también eliges un estilo para toda la app. Esto se llama proceso iterativo, donde tienes una idea que puedes obtener, luego arrastras una nueva pantalla y pruebas otra idea, otra idea, y otra. Déjame mostrarte un ejemplo. Tuve que crear una pantalla de horarios donde tuviéramos algunas citas así como una nueva que tenía que mostrarse para su aprobación ahora. Bien. El nuevo tuvo dos periodos ajustables no disponibles que fueron de aproximadamente 15 min cada uno. Bien. Ahora, eso es bastante para manejar. El horario oscilaba entre las 06:00 a.m. y las 12:00 p.m. así que serían bastantes horas. Naturalmente, quería encajar tantos como fuera posible en una sola pantalla para minimizar el desplazamiento. Ese era mi objetivo. Pero también tuve que tener suficiente espacio para que la pantalla fuera utilizable para la gente normal, no solo francotiradores de élite o extremos. Teníamos que tener botones grandes. Entonces esto fue un reto. Entonces, ¿qué hice? Empecé exactamente como te mostré en la conferencia anterior. Añadí todos los elementos ahí dentro, la forma más simple. Y luego empecé a trabajar, empecé a experimentar. Entré jugando con varias distancias entre cada línea. Constantemente, veían cada versión en mi teléfono y yo avanzaba constantemente con cada versión. Siguiente rey, la carne del diseño, la cita real burbujea. Y quiero mostrarte como esa palabra aquí. Traté de mostrar la hora dentro del rectángulo así como algún texto que describe estaba ahí. Entonces enseñé que el rojo es un poco demasiado, así que traté de limpiarlo un poco. Así, dejé una sola línea roja y luego agregué el sutil patrón que marca esa área fuera. Ahora eso fue marginalmente mejor pero no mucho. Entonces creé otra versión, otra variación, donde no hay áreas superpuestas solo para tener una mejor idea de cómo se aplica este diseño en diversas circunstancias. Entonces encubro el problema. El verde que usé para una nueva cita es el mismo verde que el botón de llamada a la acción. Entonces decidí cambiarlo. Esto se volvió morado. Luego agregué un botón Editar para asegurarme de que esto sea claramente editable. Bien, pero luego dije, Genial, Probemos otros estilos. Eso es lo que pensé. Entonces lo que hice fue redondear el rectángulo completamente y luego me quedé con la única línea roja. Luego lo cuadré y lo dejé correr de borde a borde. También dejo caer la línea roja y la reemplazaron con este símbolo. Los colores estaban chocando un poco, así que hice otra copia más y la cambio a púrpura. También hice que tocara el rectángulo, un detalle muy pequeño, pero todo estaba sobre la mesa. Bien. Aislado. Esto se ve bastante bien. Pero ¿qué pasa cuando está al lado de otra cita? Eso fue lo siguiente en mi mente. Entonces creé una nueva pantalla para ese propósito específico. Una y otra vez fue y se pueden ver varios otros casos, colores, esquemas, símbolos, y todo eso. Ahora, el intestino es corto. Al final, decidí ir con este diseño. Un gran salto desde donde empecé. Esto es lo que quiero decir con iteración iterativa del proceso. Iterativo. Te haces una idea, creas lo más rápido posible, y luego pasas al siguiente concepto. Creas esa nueva versión siguiente a la original, y las comparas. Te depositas varias ideas hasta que estés vacío. Intentas mejorar cada versión, pero también puedes mezclar y combinar elementos de diferentes ideas. Básicamente, repite hasta que estés feliz. A veces toma tal vez media hora para la pantalla. A veces te puede llevar días. Necesitas tomar descansos constantes donde no mires tus diseños en absoluto. Entonces regresas y lo revisas otra vez. Cada variación te acerca a la mejor versión que eres capaz de dibujar. Entonces, ya sea que llames a estas iteraciones variaciones, versiones , o cualquier otra cosa, la idea permanece, tienes que tomar las ideas de tu mente y ponerlas en el Lienzo. Esta es mi mentalidad en cualquier proyecto. 19. Crea diferentes versiones para la primera pantalla: Bienvenido de nuevo. Es momento de ponerse a trabajar sin app de comida a domicilio una vez más, ahora tenemos un par de pantallas que están esperando algo de atención. Empecemos con la pantalla de ubicación. Y la primera idea que quiero probar es la imagen de fondo de pantalla completa, que es una opción muy popular en este nicho. Para encontrar fotos geniales, totalmente gratis. Usa unsplash.com. Si el proyecto tiene un presupuesto decente, también puedes usar las acciones de Adobe, pero empecemos gratis. Aquí. Probablemente vas a buscar la comida y vamos a descargar todo lo que son las chispas y no confíes en más de diez imágenes sin embargo. Idealmente, una imagen de vista superior probablemente se verá mejor. Pero mantengamos una mente abierta al respecto. Una vez que vea algo interesante, voy a presionar el botón Descargar. Ahora bien, el proceso es bastante sencillo. Elige varias fotos y luego arrástralas a Adobe XD. Ya tengo algunos seleccionados, pero prometo que los elegí exactamente como te dije. volví a etiquetar 1-6 para que puedas seguirlos fácilmente. Aquí está la cosa. Antes de agregarlos, agreguemos un rectángulo que sea del tamaño del tablero de arte. De esta manera la foto va a ser redimensionada automáticamente. Esto es bastante útil. Así que arrastra un rectángulo y enfócate en el panel de propiedades. Aquí. Vamos a cambiar su tamaño a 720 por 15, 20. Bien, ahora, lo principal es esto cambiar el relleno a algo oscuro y deshabilitó el borde. Ahora k. Finalmente, el rectángulo no debería estar encima de todas las demás capas. Así que ve al panel de capas, haz clic y arrástralo hacia abajo así. Bien, Impresionante. Ahora estamos listos para arrastrar nuestras fotos. Aquí es donde empieza a suceder la magia. Ahora estamos buscando una imagen interesante que proporcione un buen contraste para el logotipo y todas las demás acciones que están disponibles en esta pantalla. El número uno muestra varios platos de espagueti y unas copas de vino. Entonces está en línea con la aplicación. Tiene sentido. Ahora bien, la primera pregunta es, ¿sería el logotipo blanco o un color sólido? Si vamos por la primera opción, vamos a tener que oscurecer un poco la imagen. Si lo hacemos del color sólido, el fondo tiene que ser lo más sencillo posible. Entonces veamos qué es qué. Primero, agreguemos otro rectángulo que sea negro puro, exactamente del mismo tamaño. Bien, ahora, por la opacidad, 50 por ciento también debería darnos un gran contraste. Bastante bien, bastante bien. Ahora recuerda que el objetivo es poner a prueba las cosas. No es una decisión final. Bien, Ahora, hagamos que el logo sea blanco. Por cierto, esto no es un PNG, más bien, es un SVG. En definitiva, esto significa que podemos redimensionarlo sin perder calidad. Además podemos cambiar su color usando el relleno. Impresionante. Si esto fuera un PNG, podemos deshacer algo de eso. Pero esto se ve bastante bien. Y una cosa acerca de los logotipos, no necesitan golpearte en la cara, como una bolsa de Brex. No lo hagas enorme. Basta pensar en lo que hizo el liberal. Aunque en la pantalla de listado inicial, usan la versión mini del logotipo. Bien, volviendo a este diseño, un fondo oscuro tiene sentido, sobre todo porque el campo de texto probablemente va a ser blanco. Entonces hagamos que eso suceda. Vamos a aumentar el radio de coordenadas de los rectángulos a cinco píxeles. Esquinas cuadradas. No te veas tan genial. Ahora para los botones, vamos a hacer lo mismo. Pero cambiemos el color. Hagámoslos de un verde brillante solo para ver cómo se vería un llamado a la acción regular. Tómate tu tiempo con él e intenta cortar algunas esquinas muestreando colores o usando el panel de propiedades en múltiples capas a la vez. Ahora bien, cosas buenas. Por favor, haga que todas estas capas de textos sean blancas. Y no te olvides de saltarte este paso. Está ahí, pero quizá no lo veas muy bien. Ningún K cambia su color, su posición, o tal vez ambos. Creo que en la parte inferior de la pantalla se va a quedar un poco mejor, ¿no? No podemos juzgar esta mirada de inmediato porque tenemos que compararla con otra cosa. Sin mencionar que estos son los trazos amplios. Todavía no estamos operando a un nivel fino. Actualmente estamos buscando la dirección general. Y una vez que experimentemos con este par de pantallas, podemos volver y refinar eso, hacer la perfección. Por ahora, probemos con otro enfoque. Duplicemos eso y probemos una alternativa donde tal vez el logotipo sea de cualquier tipo de color sólido, tal vez un azul oscuro, por ejemplo, así que una elección bastante segura. Ahora, el logotipo podría necesitar ser levantado un poco y la foto tiene que bajar. Ahora K. Y mientras estamos aquí, toma la herramienta tipo, la tecla de acceso directo D, y escribamos el directo justo debajo del ícono para que podamos tener una mejor idea de las cosas. Ahora para el formateo, mantén la fuente estándar, pero hazla negrita y tal vez 60 píxeles o algo así. Por favor, asegúrate de usar el mismo codón de color que. No queremos el arcoíris en nuestras manos. Repito con solo tocar en este punto, esta no es la fuente final. Este no es el look final. Ahora puerta. Ahora en el pasado, podría haber sugerido un degradado de desvanecimiento para la foto. Podríamos hacer eso en Photoshop, pero no creo que ese sea el aspecto correcto. La mayoría de las aplicaciones han dejado de usar reflejos o el fade away es hace bastante tiempo. Entonces creo que la versión de pantalla completa podría ser la mejor. Bien, esto puede funcionar, pero probemos algunas imágenes de modelo en esta versión. Aquí, el proceso es éste, esconde la capa negra del 50 por ciento usando este icono aquí. Genial. A continuación, Arrastre otra imagen, Herramienta Imagen encima de la original. Finalmente, revela el rectángulo negro. Ahora, no puedo decir que me encanta. Déjame repasar rápidamente todas las opciones. Necesitamos algo rico, extravagante e interesante para mirar. El hueco en la parte inferior izquierda no va a volar. Entonces esto no es bueno. Probemos el número de foto para ser. Ahora, esto cuenta con amigos comiendo juntos, un gran concepto, pero la relación de aspecto está muy alejada por lo que perdemos la mayor parte de su Sparkle. A continuación, foto número cinco. Esto también funciona, pero creo que el anterior encaja mejor. El principal problema es la comida mostrada. Esta es una ensalada a base de huevo. Ahora, el público objetivo espera comida de buena calidad, pero aunque no estamos hablando de alta dirección, no estamos hablando de buena comida. Una ensalada de huevo, no es el aspecto correcto, creo que no va a ser algo que se vea apetitoso. Creo que las hamburguesas, rápidas, cosas así, funcionarán para el público objetivo. Por último, número seis, esto tiene esa mirada rica, abundante. Pero no me encanta es la comida en sí. Está demasiado enfocado en los postres. Sí vemos algunos huevos en el fondo. Pero de nuevo, es más hacia los desiertos. Opción para esto funciona y creo que marca todas las casillas correctas. inmediato destaca una buena opción, y esta es una de ellas. Tiene una vista superior. Cuenta con interesante comida multicolor. La mesa de madera tiene un campo agradable, acogedor y familiar. Entonces sí, bastante buena opción para looks mejor. Ahora, déjeme traerlo de vuelta. Ahora bien, esto plantea la pregunta, ¿qué más podemos hacer aquí? La única idea que me viene a la mente es un fondo blanco puro o tal vez un patrón sutil que tal vez sea un color blanquecino. Ahora, no voy a hacer que eso suceda porque las aplicaciones que son absolutamente nadando y blancas, por lo general tengo de gama alta. Y este no es el caso. Piense en el restaurante con estrella Michelin o la gran moda llamada los gustos de producto, por ejemplo esas son marcas que pueden rockear un diseño minimalista con solo tal vez un toque de color, pero la mayor parte es pura blanco. Este no es el caso aquí, así que ni siquiera voy a probarlo. En conclusión, en este punto, nos quedaremos con todo el concepto inicial de 50% negro y la foto número cuatro. Este nuestro tablero puede ser tirado a la basura. Fue una idea decente, pero no va a funcionar. Bien, te voy a ver en un segundo. 20. Explora diferentes ideas para la página del restaurante: Bienvenido de nuevo. Sigamos con la pantalla de listado de restaurantes, que es lo segundo que va a ver el usuario. Esta es una de las pantallas más importantes de la app. Entonces tenemos que experimentar con diferentes rezagos. Desde el principio. Sé que quiero ver una versión sin fondo, tan blanco puro. Y uno tal vez sería un gris claro que proporcionará el buen contraste para nuestros anuncios, cuales deberían tener tarjetas blancas. Ahora, se me ocurrieron esas ideas investigando la competencia. Y estos son muy dos estilos comunes, muy populares. Bien, vamos a empezar con el contenido real. He preparado esta imagen de un panqueque para la portada de los restaurantes, así que la voy a arrastrar, pero hablemos de números. Ahora, los lineamientos oficiales de diseño de materiales dicen que necesitamos 16 dB a cada lado, lo que se traduce en 32 píxeles en nuestro caso. Ahora, hagamos algunas matemáticas, 720-64, que los dos de cada lado significan 656 píxeles, 656. Entonces este es el ancho del rectángulo. Eso es lo que necesitamos usar también para los divisores en la pantalla de edición. Ahora otra vez, por favor céntralo después de cambiarlo de tamaño, no hace falta decirlo ahora, probablemente se verá mejor con esquinas ligeramente redondeadas. Entonces vamos con cinco píxeles para el radio de la esquina. Y mientras estamos aquí en el panel de propiedades, deshabilitamos el borde si aún no lo has hecho. Como dije, XD los agrega por defecto. También voy a arrastrar algunas guías porque tenemos que asegurarnos de que todo esté en alza. Puedes obtener guías moviéndote hacia el lado izquierdo de la pantalla. Y vas a obtener este cursor, haz clic en arrastrar, y así tienes guía. Esto solo funciona desde el lado izquierdo y el borde superior. Bien, mientras estamos en ello, eliminemos la segunda entrada. Nos dirigimos allí solo para poder ver si podíamos encajar dos de ellos sin desplazarnos. Y de hecho, eso está bien. Ahora hablemos de jerarquía. Tenemos bastantes artículos aquí. Y la pregunta es, ¿cuál es la más importante? Tendría que decir el título, ¿verdad? Pero muy cerca de ella viene la calificación ya que ese es el principal valor de la app. Eso es lo que dice el escrito de todos modos. A continuación viene el tiempo de entrega, que seguramente es un factor decisivo. Y por último, en el cuarto lugar con probabilidad va a tener las etiquetas relacionadas con el tipo de comida. Estos se pueden utilizar para filtrar rápidamente tipos de alimentos similares o las cocinas. El usuario puede tocarlas. Y obviamente la lista se va a recargar con ese filtro en particular aplicado. Estamos hablando de la importancia porque esto nos dice cómo deben colocarse y estilizarse estos artículos. Entonces esos van de la mano. No miras lo que es hermoso. Se piensa en su importancia para la primera versión. Y sí quiero recalcar primero, voy a colocar el título y la calificación en la misma línea por lo que hablamos, las etiquetas pueden ocupar la segunda fila. Y me gustaría colocar el tiempo de entrega en algún lugar sobre la foto, similar a lo que vimos en comida Panda zap. Movamos todo este elemento 32 píxeles de la barra de acción. ¿Bien? Siempre que sea posible, por favor apunten a la simetría. Simplemente hace que el diseño se vea mucho más pulido. Clientes, nunca te voy a decir la distancia a los lados. ¿Hay D2 pero en la parte superior son 38? No, nunca te van a decir eso, pero créeme, van a darse cuenta, van a sentirlo en su instinto. No es intelectual, no es algo que puedan articular, sino que lo sienten. Bien. Ahora el título lo hace 40 píxeles, y vamos a ponerlo en negrita. La fuente predeterminada está totalmente bien. Lo que estamos buscando, nuestras ideas ásperas, lo hacen negro puro también. El gris estándar no es genial. Yo quería repetir. Esta no va a ser la tipografía que vamos a usar. Sólo estoy probando cosas para ver si la importancia que les dimos tiene sentido. Alineó el título con la guía izquierda y dejó unos 20 píxeles más o menos entre éste y la imagen de portada. Para el tiempo de entrega, voy a colocar un rectángulo negro en la parte superior izquierda de la imagen de portada. Y creo que podría agregar el reloj al lado. Vamos a hacer todo eso después. Pero por ahora, asegurémonos de que esto esté muy bien posicionado. Luego ordene eso levantó el texto y el panel de capas para que realmente pueda verlo y luego leer eso. Bien, ahora bajemos la opacidad de los rectángulos para decir 30 por ciento de. Entonces esto nos va a dar un gran contraste, pero aún se puede ver la puerta de fotos. Esto también nos va a dar más espacio para todos los demás elementos, más espacio. Pero la pregunta es, ¿debería mantenerse esto blanco con texto negro encima, o viceversa? Ahora, creo que un rectángulo negro funciona un poco mejor. Vamos a probarlo. Entonces vamos a cambiarlo de blanco a negro. Deshabilitó el borde y, a continuación, cambie a la capa de texto. Esto tiene que ser blanco, pero cambiar su peso a semi negrita. Por lo que destaca un poco más para que puedas leerlo fácilmente. Cuando haya terminado, seleccione ambas capas y centre horizontalmente y luego verticalmente. Este artículo nuevamente, debe colocarse en la parte superior izquierda. Ahora la pregunta es ¿por qué hay y no en otro lugar? Bueno, he visto innumerables aplicaciones usar esta ubicación específica. Entonces voy a hacer lo mismo. Bien, vamos a mantener las etiquetas exactamente como están, pero vamos a alinearlas a la izquierda con el título. Esto es fácil porque tenemos que guiar la distancia. Dejemos unos 20 píxeles entre ellos. En realidad, hagamos de ellos un gris medio , algo así como 777. Ahora un código hexadecimal suele tener seis caracteres. Pero en Adobe XD, si pones los tres primeros, los otros van a ser copiados y pegados automáticamente. Bien, hablemos de la calificación. Quiero algo parecido a la regla del hígado. Entonces una cara sonriente es bastante agradable que el mejor lugar en la web será iconos es slab icon.com. Pero tenga en cuenta que mayoría de los íconos necesitan la suscripción. No te voy a mostrar cómo busqué la cara sonriente porque eso no tiene nada de especial. Sólo sé que siempre me descargo el SVG no es PNGs, y eso es muy importante. Eso es lo que te recomiendo que uses también. Entonces aquí está el resultado final. Es posible que desee saber cómo encontrar iconos de aspecto impresionante. Pero llegaremos a eso más adelante en el curso. Para la talla 40 por 40 es una buena manera de ir. Por lo general, me iría más pequeño, pero este es un icono fantástico, es bastante feliz. Entonces, ¿por qué no presumirlo? Colóquelo luego píxeles del texto. Por cierto, creo que lo mejor es que hagamos el porcentaje audaz y verde porque esa es la parte que realmente destaca en el listado. Vienen en él y la línea, todo bien. Manteniendo a estos dos en la misma línea que la Biblia, pero que el elemento toque la guía correcta, bien, con hacer un buen progreso. Pero no es nada de lo que gritar todavía. Recuerda, esta es solo la primera versión. Vamos a manejar la parte superior porque en realidad me está despidiendo. Quería juzgar este diseño sin distracciones y estos rectángulos grises, bueno, no lo están haciendo por mí. Entonces manejemos eso en el siguiente clip. Gracias. 21. Configura la barra de estado y la barra de acción: Bienvenida de nuevo. Cuando analizo el diseño, me gustaría hacerlo en contexto. Ahora bien, ¿podríamos aislarlo todo y enfocarnos en esta tarjeta? Seguro que podríamos, pero ¿por qué lo haríamos por eso que tenemos que manejar la barra de acción y la barra de estado? La primera opción es un aspecto muy limpio. Ambas formas deben ser blancas, pero tendremos una sombra para la barra de acción para que no se pierda. Tenemos que separarlos de alguna manera. Ahora bien, esto es mucho mejor que usar un trazo, una sombra paralela. Entonces, por favor, ni siquiera consideres agregar un trazo. Un borde que es trazo está en Photoshop, borde está en Adobe XD. Perdón por eso. Bien. Para los escenarios, sexo y sexo. Y eso es todo. Bueno para ir. Nada especial. Tenemos una buena sombra paralela. Moviéndose a lo largo. Nos faltan elementos importantes de la barra de estado. Entonces aquí hay un archivo que los malsanos salen. Este recurso está adjunto y espero que lo utilicen en todos sus proyectos. Ahora de nuevo, por favor use Shift si es necesario. La idea es ésta. No hay nada realmente tan especial aquí. La barra de estado es básica y súper simple, por lo que no debemos desperdiciar en ningún momento con It. Sólo cópielo y péguelo, y eso es todo. Bien, reemplacemos la capa de textos de la ciudad con San Francisco, escrito en negrita, 40 píxeles, negro puro, sin hojas de parra. Esto es exactamente lo mismo que el nombre del restaurante. Centrarlo con la barra de acción. Recuerda, aunque esto parezca un gran bloque continuo, en realidad hay un rectángulo separado para esta área específica. Izquierda. Alinear con nuestra guía y podemos continuar. A medida que te familiarices cada vez más con XD, te sugiero que aprendas los comandos para alinear horizontal y verticalmente. Esos realmente ayudan, así que no tendrás que mover mouse completamente en la parte superior derecha. Mueve el icono desplegable a si aún no lo has hecho. Por último, por el bien del tiempo, voy a saltar adelante y voy a mostrarte los íconos que he seleccionado para esta zona correcta. Los tienes apegados. Estos también deberían ser de 40 píxeles. Los centraron dentro del rectángulo. Por favor, ten en cuenta que cuando los dejes caer dentro del proyecto, no los dejes caer directamente encima del rectángulo porque no lo vas a pasar bien. Eso no quieres. En realidad, hay que colocarlos un poco más abajo. Bien, ahora escribe la línea, el icono de búsqueda entre ellos deja 40 pixeles, así que los dedos gordos no serán un problema. Olvidamos el menú de hamburguesas de la izquierda. Eso es un hecho, eso es una necesidad. Por favor, dame un segundo para hacer la magia de todo. Aquí hay un icono encantador. Nuevamente, lo que se quiere evitar esto, esto, vea el punto culminante. Si voy a soltarme aquí, no lo vas a pasar bien. Entonces deshagamos el control Z. Esto es lo que realmente queremos. Voy a usar mis guías para posicionarlo correctamente. Voy a dejar 30 pixeles entre ésta y San Francisco. Una vez más, asegúrese de usar alinear centros verticales, puerta. Podría preguntarse por qué no usé 40 píxeles entre estos dos elementos. Dos en medio, el espacio a la derecha. Y eso es porque este lugar también va a mostrar la dirección del usuario cuando haya iniciado sesión. Entonces vamos a necesitar tanto espacio como sea posible. Tenemos una última cosa que necesita clasificación. La flecha desplegable debe redimensionarse a algo así como 20 píxeles por diez. Y creo que debería colocarse lo más cerca posible de la ciudad. Aunque 30 píxeles se verían mejor. me voy a apegar a diez, ¿de acuerdo? Sí, estoy más que feliz con eso. Después de que todo esté dicho y hecho, por favor seleccione todos estos elementos y centírelos dentro de la barra de acción. Al igual que así. Genial. Si todo está en orden, nada debe moverse. Bueno, tal vez un pixel de dos. Observe que la fuente parece desplazada hacia la parte inferior. Esto realmente me molesta, pero recuerda, esta no es la tipografía final. Para que podamos avanzar las cosas. No te preocupes por eso. Bien, este es nuestro primer diseño. Seleccionemos la entrada y finalmente usaremos esta opción. Repita la cuadrícula. Como dije, quiero juzgarlo en contexto. Entonces me gustaría ver toda la altura ocupada por entradas. En general. Es un borrador rudo. Es solo una idea, pero tiene todos los elementos requeridos y podemos comenzar a jugar con ellos y llegar por lo menos dos a las otras opciones. Así es como va y esto es lo que te recomiendo que hagas también en tus propios proyectos. Bien, continuemos después de un rápido descanso. 22. Crea rápidamente otra versión: de la manera fácil: Bienvenida de nuevo. En este video, vamos a explorar varias versiones para esta tarjeta. Vamos a duplicarlo, así que vamos a mantener las cosas bonitas y limpias. Esto también nos va a ayudar a comparar todas las versiones, todas las iteraciones. Bien, lo primero que debemos probar es un fondo gris claro. De hecho, he muestreado el bonito color de Dribble que tiene un bonito toque de azul. El código de color exacto es f z aunque, F11, F8. Y es muy sutil. Por favor, tenga en cuenta que no hay rectángulos establecidos como fondo. Este es el color para todo el tablero de arte, así que tienes que seleccionarlo para poder cambiar el relleno. Bien, Ahora el texto no se ve muy bien sobre este fondo gris. Así que vamos a crear el rectángulo base para la tarjeta. Aquí está el proceso rápido. Selecciona la imagen dando click sobre ella. Ahora crea una copia con Control D, D como duplicado. Desplazarse al panel Capas y seleccionar el de abajo. Bien, Ahora vamos a aumentar la altura a 500. Por el momento, no tiene sentido, pero aquí está la cosa. Da click en el relleno para abrir el mendigo de color, muévalo por ahí. Y ahora vas a ver que aparecerá el rectángulo, hazlo blanco puro, claro. Y eso es todo. Ahora tenemos una tarjeta. Bien, claro. El texto no encaja y luego agrega algunas cosas para arreglar. Pero este es el proceso. Entonces nuevamente, duplique, seleccione la capa inferior en el panel de capas, aumente la altura, y luego juegue con el color de relleno. De vuelta al trabajo. Seleccionemos la imagen y cambiemos el radio de coordenadas en la parte inferior. Por favor, tenga en cuenta que tenemos una cuadrícula repetida aquí. Por un lado, esto es genial porque estamos afectando a todas las copias desde abajo. Pero la desventaja es que ahora tenemos que mantener control y hacer clic en la imagen para seleccionar realmente esa. Si no haces eso, esto es lo que va a pasar. Déjame deseleccionar, revisar el panel de capas, ¿ verdad? No se selecciona nada. ¿Bien? Ahora bien, si simplemente hago clic encima de la imagen, voy a seleccionar la cuadrícula, no la foto en sí. Entonces la conclusión es que tienes que mantener presionado el control y hacer clic para seleccionar un elemento. Bien, de vuelta al radio de la esquina. Anteriormente hemos usado este campo aquí, ¿verdad? Pero si queremos cambiar las coordenadas individuales, tenemos que dar click aquí. Mi consejo es que hagas clic en el primero y compruebes el ícono. Esto te está mostrando a qué esquina estás afectando en realidad. Use la pestaña para cambiar rápidamente a una nueva. Lo que realmente queremos es z aunque eres tú por los dos últimos, así como así. Ahora bien, increíble. Ahora podemos comenzar a organizar nuestras capas de texto. Seleccione ambos elementos y muévalos 30 píxeles hacia adentro. cuanto a la distancia en el eje vertical, esto realmente no importa tanto por el momento, pero intenté colocar a estos dos en algún lugar en el medio, el lado derecho, exactamente lo mismo ahí, los píxeles. Pero mantén esto en línea con el título. Nunca mandó el escrito esta situación. Piense en estos como dos filas individuales. Por cierto, este es un método para saber usar Control y Cambio. Déjame aclarar las cosas. Así que mantén el control y haz clic en el dipolo. Ahora que seleccionen eso. Asumiendo que también queremos el desierto agarrado, tenemos que sostener a Shift. Ahora, revisa el panel de capas para eso. Así que recuerda, control-clic te ayuda a seleccionar una sola capa. Si entonces quieres recoger varias otras capas, vas a tener que sostener Shift así como así. Así que de nuevo, con el uso de Shift para seleccionar múltiples capas, tenga en cuenta que vamos a rehacer todos estos ajustes finales, estas finas ediciones cuando lleguemos a la conferencia de tipografía, cuando en realidad vamos a elija una fuente y así sucesivamente. Después de un poco de retoques, esta es la primera cicatrizada. Por favor, mueva el ratón entre las tarjetas para que podamos ajustar este espacio también. Mira este rectángulo rosa, haz clic en Mantener, y esto te va a permitir cambiar el espacio. Ahí. D está absolutamente bien. Esto es a lo que vamos a buscar. ¿Bien? Esta es nuestra primera opción. Mirándolos uno al lado del otro. Creo que es una mejora, pero en general, no estoy muy contento con este tamaño. Duplicemos todo este tablero de arte para que podamos probar otra cosa. Por favor, asegúrate de que tienes suficiente espacio. Tenemos un montón de espacio y Adobe XD. Ahora, digamos que reducimos la tarjeta en 40 píxeles, por ejemplo esto significa que el rectángulo base tiene que reducirse a 460 y el final de la uno necesita ser solo para ser 60. A continuación, necesitamos manejar estas capas de textos. Y aquí es donde tu velocidad realmente patea en la destreza. Esa es la palabra clave rapid file. Selecciónalos y muévalos hacia arriba para los Pexels. ¿Y sabes qué? Mientras estamos aquí, agreguemos también un toque de color a estas etiquetas. Se ven aburridos como son. Además no sabría que se trata de acciones. De hecho, puedes tocarlos y vas a filtrar tus resultados de búsqueda. Entonces cualquier color va a hacer. Pero prefiero no usar el green de la calificación. Me gustaría evitar cualquier confusión y realmente separar estos dos tanto como sea posible. Rojo slash naranja sería todo lo contrario. Así que vamos con algo así. Nuevamente, el código coloreado realmente no importa tanto en este punto porque vamos a establecer el esquema de color un poco más adelante. Recuerden que seguimos trabajando en la cabecera con seguir trabajando en las propias tarjetas. Bien, estoy bastante contento con este. En general, la relación de aspecto es bastante buena. No es tan alto como me gustaría que fuera, pero sigue siendo bastante grande. Y esto se traduce en un fuerte impacto visual. Cuando abras la app, va a quedar hermosa. Las fotos realmente te van a golpear. Ahora, pensemos ¿qué más podemos hacer? Haga otra copia, por favor controle D o Alt, arrastre. Y pensemos que podríamos tener estas etiquetas y el color de fondo sólido para mostrar los botones que se pueden tocar, hay una acción detrás de ellos, ¿verdad? Pero como quiero que la calificación también tenga mucha atención, creo que voy a mover eso arriba de la foto. Así que vamos a llegar a ello. Mueve la calificación en la coordenada inferior derecha de la foto. Algo alrededor de esta zona. Obviamente podemos verlo, pero podemos agregar un rectángulo que, eso va a proporcionar una buena cantidad de contraste. El tamaño después del bit de ida y vuelta a 50 por 60 píxeles. Esto va a funcionar bien, y claro, tiene que ser blanco puro. Ahora, aquí está la cosa. Es posible que tengas problemas con mover el rectángulo debajo de los textos y emoji. Ahora, eso es porque tenemos una grilla repetida. Entonces, ¿cuál es la solución? Bueno, es bastante sencillo. Tienes que usar una tecla de control de teclas de acceso rápido a la izquierda. Esto va a mover la capa seleccionada hacia abajo. Así como así. Si quieres levantarlo, es Control, ¿verdad? Llave de corchete cuadrado. Esta es una de las formas más fáciles de obtener una gran legibilidad sin hacer ningún compromiso. Sólo tienes que añadir el rectángulo. Deja 30 píxeles desde los bordes inferior y derecho. Como pueden ver, una vez que fije el valor, en este caso 30, lo estoy guardando. A continuación, aumentemos la redondez al valor máximo y eso va a coincidir con la forma de las caras sonrientes. Por cierto, puedes poner cualquier valor ridículo aquí, como 90 o lo que sea, va a ir al máximo, y eso es todo. Bien, vamos a desactivar la frontera. Si aún no lo has hecho. No nos ayuda de ninguna manera. Pero sí creo que es momento de mover los emoji y los textos justo en el centro de esta forma, algo así. Sólo muévelo por ahí. Siempre busque ambas líneas bancarias. Ahora que estamos aquí, selecciona bien la base, y crea un grupo con Control G. Ahora, ¿por qué necesitamos al grupo? Son solo tres capas, ¿verdad? Bueno, probablemente vamos a mover esto así que es mejor que nos mantengamos organizados. Llámalo calificación y esa cosa Eso es todo. Tomemos un descanso rápido y continuaremos en un momento. 23. Más variaciones para la tarjeta: Bienvenido de nuevo. Vamos a manejar las bolsas. Aquí. Voy a crear otro rectángulo redondeado, unos 40 pixeles de alto. El ancho va a variar dependiendo de la longitud de la palabra, pero queremos unos 20 píxeles en cada lado. Entonces, por favor, sean generosos con ello. Recuerda que utilizan la tecla de control de teclas de acceso tecla corchete izquierdo, la posición que correctamente en el panel de capas que la mueve hacia abajo. Bien, esto debería ser rojo azotonado anaranjado. Pero no te preocupes demasiado por la sombra. Solo asegúrate de que el texto que sea blanco puro va a ser visible. Moviéndose bastante rápido porque esto es algo estándar. Entonces deberías poder seguir adelante. Pero claro, tienes que pausar el video a menudo y obviamente trabajar en tu segunda visualización. Las coordenadas deben redondearse al máximo para que coincidan con la calificación. Por supuesto, todo tiene que estar centrado. Ahora aquí está la cosa. La altura de la tarjeta no es buena. Simplemente no podemos hacer que esto funcione aunque levantemos un poco el título. Sugiero que cambiemos esto a 470. Y después de todo está dicho y hecho, así es como se supone que debe verse. El caso es que no todas tus ideas van a ser geniales y eso está totalmente bien. Es esencial que los crees lo más rápido que puedas y luego los juzgues a todos mirándolos uno al lado del otro. Terminemos esta versión moviéndonos alrededor de esta entrega hacia abajo desde la coordenada superior izquierda. Esto en realidad debería colocarse en la misma línea que el título del restaurante. Escribamos en entrega en 30 min. Esta fuente básica está bien por ahora. Lo que buscamos es equilibrio. ¿La tarjeta se ve bien? Ahora, no puedo decir que me guste con una calificación en el lado derecho. Ahora puerta, al final de esta sesión, podemos copiar este diseño y alejar para ver todas las opciones que le dan la oportunidad de la Fed. Asegúrate de que todo esté abotonado. Si dedicas mucho tiempo a tu diseño, naturalmente estarás más inclinado a que te guste más. Entonces todos esos ajustes finales, sí importan, sí te influyen. Bien. Empezamos aquí sin fondo y tarjetas grandes. Claramente esas son las palabras cuando la segunda versión se ve bien, pero la tercera es definitivamente mejor debido al tamaño de la tarjeta más pequeña. También me gustó la pizca de color que el naranja en realidad ayuda mucho. Pero cuando comparo estos dos, creo que las etiquetas sólidas fueron un error. Esto es un poco demasiado ocupado y no equilibrado. Valió la pena una oportunidad, pero no te voy a poner en Aunque me gustó el rating flotante, pero tendremos que trabajarlo un poco más. Bien, tomemos un descanso y vamos a continuar en un momento. Gracias. 24. Explora un diseño final: Bienvenida de nuevo. Espero que te estés divirtiendo y estés trabajando conmigo. Pero claro, en tu segunda visualización, en este punto, hemos jugado con varias opciones y sabemos con certeza que queremos seguir con esta versión, pero sin etiquetas. Entonces hagámoslo. Crea otra copia del último tablero de arte y eliminemos los rectángulos naranjas. Sí me gustan los colores, así que creo que vamos a aplicarlo a estos textos. Las capas las dividirán con un guión y limpiarán esto. Este divisor puede ser negro o algo así. En cuanto a la distancia entre ellos, yo diría en cualquier lugar 15-20 pixeles. La pregunta es, ¿ debemos mantener esta posición? Creo que podemos jugar un poco más con él. Aquí está mi idea. Movamos el tiempo de entrega debajo del título porque el resumen dice que este es un factor muy importante para los usuarios de la aplicación. Entonces esto significa que los huevos se sentarán del lado derecho como antes, 30 píxeles del borde. Muy pronto vamos a empezar a escoger fuentes y esto va a quedar mucho mejor. Durante nuestro descanso, me tomé el tiempo para encontrar el icono del reloj que coincidía con todos los demás. Aquí está. Y puedes ir con 30 por 30 o 40 por 40, lo que creas que funciona mejor. El tamaño más pequeño está bien porque no es una acción. 40 píxeles es lo que usamos en la barra de acción. Entonces eso hubiera sido apropiado, pero en general, voy a ir con el valor más bajo, 30 por 30. Bien, por favor tómese un momento para arreglar todo entre el reloj y la hora. Creo que diez píxeles está bien. Y obviamente todo necesita estar centrado verticalmente. El icono del reloj, el tiempo de entrega, y por último, las categorías. Así como así. Como paso opcional, podemos acortar este texto para entregar los 30 min. Creo que eso es lo suficientemente claro. Incluso podríamos eliminar la entrega porque tenemos ese icono de reloj. Pero creo que lo voy a dejar en esta versión. Por último, aunque me encantó el diseño de calificación está cubriendo una parte significativa de la foto. Entonces esto es lo que propongo. Me inspiró el hígado azul. Entonces quiero que la calificación se siente en este borde. Esto también debería equilibrar el diseño. El caso es que sí necesitamos la sombra paralela, así que por favor controle haga clic en el rectángulo y habilite. A esto se le llama a la factura un botón por cierto, una factura. Bill como en medicina, porque es bastante redondo. Podrían cronometrarlo y colocarlo a 30 pixeles de la derecha. Pero aquí está la cosa. A pesar de que esta no es la fuente final, creo que es demasiado espacio vacío a cada lado de la misma. Así que selecciona el rectángulo base, no el Grupo, Por cierto, harías cualquier otra cosa y redimensionarlo. Y aquí tienes un gran truco cuando quieres cambiar el tamaño de una capa, pero quieres mantener su posición mantener Alt mientras arrastras. Eso es Alt o la tecla Option en el Mac. Como puedes ver, estás afectando a ambos extremos. Esto significa que el contenido en su interior se mantiene centrado. Entonces esa es la tecla Alt y la versión ideal. Esta forma es tan ancha como estas dos etiquetas. Pero claro, esos cambiarán todo el tiempo con base en las palabras reales que se muestran. Aquí, internacional es bastante largo, pero obviamente otras categorías pueden ser cortas, así que no pierdas tu tiempo en ello. Pero sí, esa sería la situación ideal. Dicho esto, creo que esta es una gran mejora con respecto a la versión anterior. La sombra es demasiado fuerte. Una vez bajamos el tono sólo un poco. Esto va a quedar bastante bien. opacidad del seis por ciento está bien. Tenga en cuenta que la opacidad se controla desde este campo. También podrías usar esta área vertical, pero me gusta usar el campo en su lugar, es más fácil. Creo firmemente que esta es la mejor versión de lejos. Esa es mi opinión, pero ¿qué opinas? Hazme saber en la sección de comentarios y por favor asegúrate de trabajar en tu propia versión cuando termines esta. Bien, tomemos un descanso. 25. Variaciones creativas para la barra de acción: Bienvenida de nuevo. Centrémonos en la región superior por el momento, creamos algo muy limpio, incluso como iOS, pero ¿es este el camino correcto a seguir? Recuerden, fuimos al ancho bastante rápido porque queríamos analizar las cartas sin que nos echaran. Pero es momento de crear algunas opciones de modelo. Vamos a crear una copia para que podamos explorar algunas opciones. Haz espacio y comencemos. El primero que me viene a la mente es muy creativo y ese es el uso de foto para toda esta área. Esta puede ser una imagen de la ciudad y esa sería San Francisco, ya que esa es la actual. Eliminemos la barra de estado y expandamos la barra de acciones y esa área. Ahora, ¿por qué queremos eliminarlo? Porque es mucho más fácil agregar una foto dentro del único rectángulo. Si nos gusta, entonces podemos hablar con un codificador y ver cuánto esfuerzo se necesitaría realmente para que esto suceda. Porque de nuevo, esto sí cambia la estructura de costos. El caso es, sé que esto es posible, pero no estoy seguro de lo caro que es, lo difícil que es. Pero vamos a tener esa discusión si nos encanta. A ver. Yo hice una pausa en el video y fui a unsplash.com para seleccionar varias fotos de este icónico puente. Aquí están, y probemos esto. Entonces aquí está el primero. Tenemos bastantes elementos que no funcionan sobre un fondo coloreado. Entonces en este caso rápidamente los haré blancos. Nada más, por favor, no se deje tentar por el amarillo, naranja o el verde lima. Esos son los peores diferenciales del diablo. Sólo el blanco funcionará. Bien, esto no es tan malo. Y en realidad podemos agregar el rectángulo negro con una baja opacidad para mejorar la legibilidad de este texto. Pero por ahora, sigamos con las fotos. Recuerda que siempre puedes hacer doble clic en la imagen y reposicionarla, o incluso redimensionarla. Adobe XD hace todo lo posible para colocar la foto dentro del rectángulo, pero no siempre hace un buen trabajo. Así que no tengas miedo de entrar ahí y cambiarlo. Por ejemplo, para la última imagen, número seis, ésta debe colocarse muy abajo. Pero tenemos que pensar en esta estrategia. ¿De verdad queremos llamar mucho la atención sobre la barra de acción C? Sin embargo, nos encanta la simplicidad del hígado, pero esto nos aleja de eso. Y realmente no creo que valga la pena eso. Algunas de estas fotos se ven bien. Pero dicho eso no es asombroso, no es fantástico, simplemente está bien. Entonces, no compliquemos las cosas. Entonces vamos a fastidiar esta idea. En cambio. Vamos a probar una Heather sólida, algo simple, una copia nueva. Y vamos a experimentar con unos colores llamativos brillantes, algo bastante saturado. En la parte superior de mi lista tengo verde, naranja, morado y azul. Los básicos opciones seguras que a la mayoría de la gente le gusta. Así que lo que voy a hacer es que los voy a apilar uno al lado del otro para que podamos darles una oportunidad justa. Por lo que hacer copias es bastante importante. Dame un momento mientras reviso todas estas versiones. Voy a tener que acelerar bastante el video. Pero no pasa nada especial. Es solo jugar con el seleccionador de color. Bien, aquí están. Ahora, ¿tienes un favorito? ¿Crees que alguna opción de color es mejor que la del blanco puro? Porque la cosa es de donde estoy parado, creo que la blanca es la mejor. Las fotos son ricas en color, así que creo que aquí estamos pidiendo problemas. El blanco es mucho más elegante. Mi conclusión, llevémosla y refinémosla. Si piensas lo contrario, solo continúa con tu elección y muéstrame tu resultado final. Este es un método de gusto, pero también cómo interpretas el brief, cómo ves lo que quiere el cliente. Bien. Tomemos un descanso y te voy a ver en un segundo. 26. Conceptos de diseño para los detalles de los restaurantes (3): Bienvenido de nuevo. Estamos listos para pasar a proyectarlos, pero el diseño de los detalles del restaurante, veamos qué variaciones podemos llegar a tener para este verde. Pero primero, actualicemos eso. Estos rectángulos tienen que ser blancos. Y el de las pestañas necesita tener habilitada una sombra paralela. Por favor, recuerde que teníamos ajustes específicos para eso, no los ajustes predeterminados. Fue sexo y sexo. Esto es bastante importante cuando se trata de sombras porque no queremos que la sombra aparezca en la parte superior del rectángulo. Por lo que cambiar la configuración es crítico. Ahora para la barra de estado que necesita ser de color negro puro, excepción del propio rectángulo. En el pasado usaba PNGs, fotos reales, pero para la barra de estado, lo mejor es que uses un elemento que sea ajustable. Y el formato que buscas es SVG. Pero aún mejor, puedes simplemente copiar pegado de cualquier freebie, desde cualquier recurso de la web. Solo mira cualquier freebie para Adobe XD y es probable que lo encuentres. Bien, bajando, necesitamos agregar íconos. Me tomó un poco de tiempo encontrar la flecha hacia atrás coincidente y el icono de inflamación. Estos necesitan ser colocados exactamente como una pantalla ellos pero hacen todo en la misma línea. Ancho suficiente de la habitación. Creo que podríamos haber omitido agregar las guías a esta pantalla específica. Entonces agreguemos eso aquí. Hay una pista. Agrega cualquier rectángulo que tenga 656 píxeles de ancho. Como es habitual, el panel de propiedades es la mejor manera hacerlo cuando buscas el tamaño específico. Entonces cuando lo tengas y envíes el rojo, puedes arrastrar la guía y luego eliminar la capa extra. Es tan fácil como eso. Este es uno de esos hacks que me encantan. Esta técnica salió por necesidad. Y sólo un freelancer que realmente valora su tiempo tiene este enfoque. Si ves a alguien moviendo manualmente una guía píxel a píxel, entonces sabes que está demasiado relajado. Dentro de los negocios, por favor, elimine los textos de información si aún no lo ha hecho y coloque el ícono de información al lado de la guía. Repita para el otro lado. Por favor tómate tu tiempo con él y asegúrate de hacerlo bien. Por supuesto, la forma más fácil de arreglarlos es secando la caja grande que los agarra a todos, luego golpear el comando Alineación y has dado un paso bastante grande. Impresionante. Deja 30 píxeles entre la flecha y el título. Entonces es agradable y aireado. Esta fuente no es tan buena, pero pronto vamos a empezar a dar algunos toques finales. Eso va a ser un poco más tarde. Ahora k, Ahora para que coincida con la pantalla número dos, vamos a cambiar el título de las pantallas a 40 píxeles en negrita. Nuevamente, mantén este tipo de letra. Sin embargo, por favor hazlo negro puro. Ahora bien, esto puede ser un poco arriesgado. Hacer se vuelve tan grande, pero pronto lo arreglaremos todo y podremos hacer varias ediciones. La idea principal aquí es mantenerse consistente. No me gusta usar diferentes valores en pantallas aleatorias. Después de dejar a un lado, hay que seguir con él. Y oh, por cierto, cuando cambias tu talla, lo mejor es que vuelvas a alinear todo. Para las pestañas. Hagamos esto. Selecciónalos todos a la vez porque esta es la forma más inteligente de trabajar, luego cambia esa orientación al centro. Esto hará que se queden puestos porque mi plan es aumentar el tamaño a unos 24 píxeles. Eso es cierto para hacerlos atrevidos y obviamente negros. Si no son ya negros, ese gris realmente me saca. No me gusta. Pasamos bastante tiempo arreglándolos con la ayuda de esa línea que muestra la pestaña activa. Y la cosa es que no quiero que todo ese esfuerzo sea para nada. Entonces por eso cambiamos esa orientación. Bien, sigamos hacia abajo. Selecciona la primera entrada y deberías tenerla agrupada si has estado siguiendo. Si no, por favor Agrupe ahora con Control G. Ahora de nuevo, habilitemos una cuadrícula de repetición desde la derecha. Excelente. Arrastre esto hacia abajo para que podamos obtener algunos ejemplares. Obviamente el espaciado no parece correcto, pero eso es un dato rápido. Buscamos 30 o 32 pixeles. Este es uno de los cambios de ganancia frente a cuadrícula de repetición de Photoshop nos muestra cómo va a quedar nuestro diseño cuando tenemos un montón de entradas y eso es con el mínimo esfuerzo. Toma esta línea como ejemplo. No es el tamaño correcto. Necesita tener 656 píxeles de ancho. Seleccionará uno de ellos y utilizará el área de transformación en el panel de propiedades, tecleará 656 y lo moverá a su lugar. Por cierto, aprovechemos esta oportunidad para usar también el campo x. X es para el acceso horizontal. Entonces, si tecleamos 32 píxeles aquí, esto significa que la capa se va a colocar 32 píxeles del borde izquierdo de la pantalla. Entonces x eje horizontal, y comienza desde el lado izquierdo. Y eje vertical, de la parte superior. Bien, Ahora para las fotos necesitamos usar unsplash.com. Una vez más, ya tengo algo preparado, así que voy a arrastrarlos todos a vez por encima del primer rectángulo. Y debido a que esta es una cuadrícula repetida, XD sabe que quiero una foto diferente en cada entrada. Por cierto, si no has desactivado la frontera, por favor hazlo. No hay necesidad de ello. Y mientras estamos aquí, déjame mostrarte otra característica de la cuadrícula repetida. Tengo este nodo simple malo. Este es solo un archivo TXT de punto estándar con varios de esos. Si arrastre esto con una de las capas de textos, diga el título del platillo, miren qué pasa. Magia. Voy a repetir este paso por el precio de descripción, y luego finalmente por el peso, el nombre del bloc de notas no es importante. Yo solo les renombro para que puedas seguirlos fácilmente. Lo único que debes tener en cuenta es dejar un espacio vacío entre tus entradas. Así es como se ve el archivo TXT de punto descriptivo. A pesar de que la válvula tiene múltiples líneas, XD sabe cuándo comienza el próximo siglo en base a este espacio vacío. Y en caso de que haya demasiado texto, solo reduzca la altura de la capa de texto y eso es todo. El exceso se va a esconder. Fresco. Cuando eso esté hecho y estés listo para seguir adelante, centrémonos en Agregar al carrito, la acción principal en este verde. Aquí está la cosa. He mirado largo y duro, y decidí usar este símbolo más. Según tengo entendido, cuando tocas toda esta región, el producto se agrega automáticamente al carrito. No hay otra página, no hay otra pantalla. Bueno, sin agregar la fase de peinado todavía, por favor, aligeró el divisor para que no distraiga. Este color simplemente no me funciona. Un gris muy claro. Los gustos de ddd deberían funcionar bien como una solución temporal. Y si, puedes agregar letras en el código de color. El código hexadecimal no solo contiene números , también puede contener letras. Para continuar con nuestra cadena de mando desde la herramienta de pantalla, voy a hacer que el título, precio y el peso sean negrita. Vamos a ponerlos en unos 30 píxeles. Aunque eso puede ser un poco demasiado, podría ser un poco apretón. Una vez que nos pongamos en marcha, podemos tener una mejor idea de nuestro espaciado. Ah, por cierto, bajas un poco el título si es necesario. Sin embargo, ese es un paso opcional, recordado. Pronto vamos a elegir una fuente diferente. Idealmente, el título debe estar alineado con la miniatura. El precio espera, un icono debe estar alineado abajo con la miniatura, pero como una unidad completa. Ahora bien, mientras tanto, quiero recordarte que quiero ver dos diseños de Ti. Quieres una réplica perfecta de lo que estoy haciendo aquí con exactamente los mismos iconos, fuentes, tamaños y colores que ves en el curso. Y otra que son tus propias fotos nuevas, nuevas fuentes, nuevos iconos, nuevo diseño, las obras. También quiero ver diferentes contenidos. Por favor, no publiques tu trabajo sin usar una cuadrícula repetida. Elige diferentes nombres de restaurantes, etiquetas, precios, etc. No seas perezoso al respecto. Ahora antes de continuar, por favor haga estos dos elementos del menú, gris 777, por favor. Creo que esto es lo que usamos hasta ahora. Y eso es porque queremos demostrar que no están activos. Bien. Veamos qué podemos hacer aquí. Tengo que suplicar indicaciones. Una es usar una foto en lugar de la barra de acción, que podría funcionar mejor aquí que en la pantalla número dos. Y el tercero es proporcionar al cliente un desvío desplazable en lugar del diseño fijo de tres Deb. Hagamos todo eso en el siguiente video después del descanso rápido. Gracias. 27. Variación para los detalles de los restaurantes: Bienvenido de nuevo. Vamos a crear una copia y ponernos a trabajar en la primera variación para esta pantalla, el rectángulo de la barra de estado del líder y levantemos la barra de acción. Queremos agregar una imagen en esta región. Pero aquí está la cosa. Podríamos hacer esta zona aún más grande, aunque no es tan común. Nosotros sí tenemos esa opción. De mis pruebas y haciendo mi investigación. Una altura de alrededor de 270 va a funcionar bastante bien. Y nuevamente, aunque no es estándar, es muy factible. Las pestañas por supuesto, tendrán que ser movidas por debajo junto con todos los demás platillos. Recuerda, trabaja de manera inteligente, por ejemplo, para ver mejor en qué estamos trabajando, cambia el color de fondo a algo así como gris. De esta manera sabremos por dónde deben comenzar las pestañas. La idea es crear algo similar a Food Panda. Tómate tu tiempo porque hay bastantes capas. Te recomiendo acercar y alejar para que puedas tener más control. Con este cambio, probablemente habrá que quitar uno de los platillos del fondo. Pero creo que está bien. Tenemos más que suficiente. Bien, ahora podemos empezar a construir encima de esta capa. Agreguemos la foto del armario de restaurantes. En este caso, es una imagen de una pizza. Ya tengo algo preparado. Obviamente podemos ver el texto, pero vamos a practicar la técnica anterior. Controlador de ancho duplicado se jugará con el relleno, por lo que la imagen va a ser reemplazada por un color. Ve por el negro puro. Ahora, bajó la opacidad para decir tal vez el 40 por ciento de. Entonces tal vez necesitemos más, pero veremos que todo en esta área necesita hacerse blanco, incluidos los iconos de la barra de estado. Esto va a tomar un minuto, pero déjame mostrarte cómo me gusta trabajar, sobre todo si no estaba grabando esto. Veo que la barra de estado está agrupada. Eso no es bueno. Vamos a desagruparlo así. A continuación, voy a arrastrar una caja para seleccionar todas estas capas. Verifique el panel de capas para confirmación. El problema es que tengo dos heridas extra, la foto y el rectángulo negro, aunque se les llame igual, sé cuál es cuál. Bien, mantenga el control y haga clic en ellos en el panel de capas para deseleccionar. Ahora eso está hecho. Puedo cambiar a todos estos tipos de una sola vez así. Impresionante. Recuerde, tenemos en modo iteración con desviaciones de gauss bancarios, aunque la barra de acción no está presente per se. Todavía va a mantener estas dos capas posicionadas en ese lugar, la flecha hacia atrás y el título. dejemos caer el ícono de información Sin embargo, dejemos caer el ícono de información porque se pierde en la mezcla. Y agreguemos los elementos de calificación en algún lugar en el medio de esta área. Aunque no se requiere, es un toque agradable. Recógelo de cualquiera de los tableros de arte anteriores que creamos. La sombra paralela podría necesitar intensificarse, aunque al final, no va a hacer una gran diferencia porque aquí está la cosa. Incluso con 50% de opacidad, apenas es visible. En un teléfono. Probablemente no notarás la sombra cuando todo esté dicho. Y entonces así es como se ve la variación. Personalmente, me gusta más que la versión limpia, pero todo es cuestión de gustos. Y estas situaciones en las que tienes dos opciones muy sólidas, puedes dejar que el cliente decida. Voy a quedarme con los dos, y luego podemos pasar a la opción de pestaña desplazable. Usemos el concepto inicial para ello donde la barra de acción es estándar. Entonces hagamos otra copia. Y estos deberían estar todos uno al lado del otro por cierto, para que podamos juzgarlos fácilmente. Aquí la principal diferencia es que los elementos del menú se colocan en una sola capa de texto y se empujan hacia la derecha. Entonces, borra estos dos y crea cinco o seis categorías de alimentos. Tengo algo preparado en un Bloc de Notas, pero se te puede llegar a la tuya propia. El caso es que todo esto viene de la pauta oficial de diseños de materiales. O son las pestañas fijas o las desplazables. Entonces aquí es donde ahora estoy obteniendo todas estas opciones con respecto a dabs desplazables, nuevamente, al usar las medidas faciales, potencialmente podrías alearlo y simplemente alinear las cosas como mejor te parezca. Sólo ojo. O puedes usar la medición oficial. Voy a ir por esa opción y se puede ver en acción. Para que puedas ver qué es, qué. En primer lugar, el rectángulo, éste tiene que cambiarse a 180 píxeles, que es el mínimo según la guía. Entonces hay que colocarlo a 140 pixeles lejos del borde. Eso son 52 dp de la guía oficial. Ahora, recordé cómo se puede hacer esto fácilmente. Puede usar el campo x del panel de propiedades x para el eje horizontal, y siempre comienza desde la izquierda. Excelente. Ahora, respecto a mi primer paso pasado, esto necesita estar alineado horizontalmente con el rectángulo. Pero claro, eso es un problema porque esta capa contiene un montón de elementos de menú. Ahora bien, en este caso, voy a aproximar que podríamos agregar un rectángulo a cada lado y podríamos hacer algo manual de ida y vuelta. Pero sólo voy a aproximarlo. Cuando hayas terminado, cambia el color de todas las demás pestañas a un gris lavado. El color del código lo establecemos como triple siete, por lo que 777. Hay una cosa que me gustaría abordar. Puede que tengas curiosidad el fondo y por qué lo dejé blanco, porque podríamos probar un color blanquecino. Pero aquí decidí no hacerlo. Lo probé fuera de cámara y simplemente no se veía bien. Pero solo así desarrollar no hay secretos que los niños tengan que parecerían y en mi opinión, esto es fangoso, sucio , ocupado, lejos del aire el look que queremos crear. Ahora, aquí está la cosa. Otra opción sería crear rectángulos, rectángulos blancos, que se llaman tarjetas para cada platillo. Pero eso es otra cosa que decidí no hacer. Y el razonamiento es la muestra número uno, o bien presionaría el espacio porque cada uno de ellos requeriría más relleno y espaciado. Entonces esa no es una buena idea. Y lo segundo, esta es una lista, así que las tarjetas en realidad no pertenecen aquí. De acuerdo con los lineamientos oficiales de diseño de materiales, todos los artículos pertenecen juntos. Y si recuerdas la conferencia sobre guardias, en realidad solía mostrar artículos individuales que no necesariamente van juntos. Recuerda el ejemplo del tablero o la aplicación Notes. Por eso al final del día, decidí no usar el fondo. Pero sí, ahí lo tienes. Estas son las opciones, número de pantalla completa de v. Por supuesto, sí necesitamos elegir una fuente o una combinación de colores y aplicar algunos toques finales. Podemos pasar a esa parte porque no tengo ninguna otra idea sobre la pantalla. Así que vamos a por ello. Vamos a afinar las cosas. Te veré en un momento. 28. Elegir la mejor tipografía: Bienvenido de nuevo. Es hora de hablar de topografía y usaremos el mismo proceso iterativo en estas pocas pantallas. Selecciona las mejores versiones y tú eres la vista y ponlas lado a lado para que podamos ir y venir rápidamente entre ellas. Si estás indeciso, está bien. Pero las hojas eligen tres tableros de arte diferentes para que podamos explorar cada tipo de letra en una serie de situaciones. Ya tengo el mío separado de la parte de atrás y vamos a trabajar en copias. Así que lo mantendremos simple con un solo tipo de letra que tenga al menos dos pesos, regular y negrita. Tiene más, eso es genial. Pero otro factor es su tamaño. Aquí está la cosa. Queremos que sea lo más pequeño posible en términos de kilobytes. Entonces, si estamos indecisos sobre dos tipos de letra similares, iremos con el más pequeño. Buscamos las fuentes sans serif porque queremos ese aspecto limpio, nítido y moderno. Y los tipos de letra serif son los más complicados. No funcionan tan bien. Por último, el punto de búsqueda esencial es la personalidad. Queremos algo similar para entregar, hacer redondeado, interesante, y con un poco de personalidad que agregue valor al diseño. Ahora, podrías estar rascándote la cabeza por eso. ¿Qué significa eso, personalidad? Bueno, vamos a ponerlo de esta manera. Si usamos Arial, por ejemplo no ganarás ningún diseño. Las palabras de mi libro dedicaron muchos tipos de letra que no tienen personalidad. Son simples, no llaman atención de ninguna manera ahí, la mezcla, y eso es por lo que significa que son versátiles y se pueden usar en muchas circunstancias. En el contexto de un diseño AB, queremos que nuestro texto se destaque, por lo que nuestra elección podría hacer o deshacer que el diseño sea bastante importante. Ahora, ya mencioné a Ariel, pero aunque tarde, ciertos pesos de Open Sans robo aunque Source Sans Pro y muchos más caen en esta categoría mediocres. Esas son las fuentes que debes evitar. Bien, empecemos a agrietarse con Google Fonts. Voy a desactivar serif y manuscrito. Y voy a ir a la ciudad con buscar por lo menos cuatro o cinco tipos de letra. El primero que me llama la atención es Montserrat, que es una de mis favoritas. Voy a pasar rápidamente por estos porque la investigación real toma al menos 20 min. ¿Bien? Ahora ubuntu tiene mucha capa. Entonces son dos, aunque no estoy seguro si así es como se pronuncia. Creo que es Uunto. De todas formas. Pasando, Nieto, esto se ve precioso, así que voy a agregarlo también aunque, dice que es un poco demasiado ligero, pero a lo mejor tiene otros los pesos. Y podemos ver que tiene bastantes estilos en ella va. Por último, arenas movedizas, esto también es bastante encantador. Ahora, por el bien de que las cosas sean breves y concisas, me voy a parar aquí. Pero cuando estés haciendo esto tú mismo, por favor ve a más tipos de letra. Cuanto más mejor. Y a medida que practiques, vas a empezar a desarrollar una base de datos mental de fuentes con aspecto de grado. Tendrás un comerciante ya sea con listas, lo que tienes próximo proyecto. Por eso no voy a perder el tiempo desplazándome por ahí. Ya sé lo que estoy buscando y tú también vas a hacer si pasas por este ejercicio, descarga archivo, extraído. Y te voy a mostrar cómo los ordeno rápidamente por tamaño, sobre todo si has seleccionado muchos tipos de letra. Ahora, dentro de esta carpeta, vas a buscar TDF oscuro. Y esto los va a revelar a todos. Si has visto obtener los archivos en el modo de detalles, deberías obtener el tamaño y la columna separada. Y de inmediato podemos detectar que Ubunto es cuatro veces más pesado que las arenas movedizas, 400 kb frente a 10. Por ahora, todavía no lo tacharé de mi lista. Pero tiene que verse absolutamente fantástico para mantenerlo como opción. Y eso es porque todo el mundo en el espacio del ábside es muy sensible sobre el tamaño de su app. En mi compañía con constantemente buscando recortar cualquier grasa. Y esto estaría en la parte superior de mi lista. La velocidad de carga es increíblemente importante, por lo que hacer que la aplicación sea más pequeña es imprescindible. Vamos a Adobe XD y veamos qué es qué. Ya tengo estos instalados en mi carpeta de fuentes de sistemas. Sólo tienes que copiarlos y pegarlos. Echemos un vistazo a las arenas movedizas. Y aquí no hay magia. Es sólo la magia de la edición. Hay que seleccionar todas las capas de textos y cambiarlas. Voy a acelerar el proceso para que veas el resultado final. Este es un proceso que requiere mucho tiempo, pero sí quiero que practiques y sí quiero que vayas a la web. Podríamos usar varias funciones en Adobe XD para ir rápido allí. Pero en este punto realmente quiero que lo hagas de la manera manual. Bien. Ahora, ¿cuál es tu primera impresión? Echa un vistazo de cerca, acercar y alejar. ¿Esto es un ganador? No estoy segura. Entonces continuemos con los otros. Por favor, ten en cuenta que estos cambios obviamente van a arruinar tu alineación. Entonces tal vez tengas que hacer algunos cambios aquí y allá. Ahora de nuevo, ahora esto se ve bastante sólido considerando que con pasarlo bastante rápido, podríamos trabajar con un mayor grado de precisión, pero ahora mismo no necesita eso en este paso del proceso. Bien, pasemos al siguiente tipo de letra. Vamos a limpiar las cosas en unas cuantas conferencias en el futuro. Por ahora. Seamos las cosas a lo largo. Aunque tan ordenado, esto es un poco más ligero, pero vamos a verlo en acción. Por favor, tenga en cuenta que hay otra versión llamada Nieto sands. No queremos eso, solo el normal. Entonces mi impresión es que esto es similar a las arenas movedizas, pero es un poco más redondo. Se puede ver que sobre todo en el tiempo de entrega, la televisión es mucho más nítida que esta. Pero es una carrera reñida. Realmente depende de tu cara. Ahora voy a hacer zoom hacia delante mientras pruebo todos los demás tipos de letra. Gracias a Dios por el poder de todo. Recuerda, tienes que hacer esto por tu cuenta y desarrollar muchas opciones disponibles en las fuentes de Google. No hay alternativa al trabajo duro. Trate de ser lo más eficiente posible. Podrías seleccionar las capas de texto en negrita y cambiar el tipo de letra directamente a ese peso. Eso significa que tienes que ser realmente rápido con tu técnica de clic de consola. No importa cómo lo hagas, es importante que lo hagas. Además hay que tener un buen número de capas de textos. Si hubiéramos hecho esto, solo agrega la pantalla de ubicación, la primera. No sería relevante. Es como preguntarle a la gente de la calle por quién está votando. Dicen candidato X. Y luego reportarás que el estudio muestra 100% de la gente quiere votar por el candidato X. No funciona de esa manera. No te engañes a ti mismo. Para votos, Eso no es suficiente. Aquí es lo mismo. Sólo dos o tres capas de textos, eso no es suficiente. que verlo y contextos en montones y montones de situaciones. Así que usa varios tipos de textos, capas, titulares, descripciones, sub titulares, números, fondo blanco, fondo mixto, y así sucesivamente. Pero ten en cuenta que cuantas más mesas de trabajo incluyas, la dificultad sube. Es por ello que no creamos todas las pantallas y dejamos este paso al final. Bueno, eso también es posible. Es mucho mejor decidir el estilo de una app. En la etapa inicial. Esto hace que sea mucho más fácil cambiar las cosas a su alrededor. Aquí están todos los tipos de letra que selecciono que tengas este archivo adjunto y te sugiero que explores la cada opción. Xd podría darte algunas advertencias si no tienes esas fuentes instaladas. Primero visita Google Fonts para evitar interrupciones. Cada tipo de letra tiene sus propias fortalezas. Pero lo que puedo ver claramente desde el principio es que Ubunto no vale la pena. Se ve bien, pero no es cuatro veces más agradable que las otras. Montserrat también es encantadora. Pero con todo, creo que el más guapo es nu need aunque. Tiene muchos pesos. Es bastante pequeño, así que no explotará el tamaño de la app. Y tiene este zinc especial que lo hace destacar, sobre todo en su variante negra. Es bastante grueso y redondo. Teniendo en cuenta al público objetivo, creo que esta es una gran primera opción. En caso de que algo surja en un momento posterior, podemos cambiar fácilmente la tipografía a cualquiera de estas alternativas, así como podemos explorar algunas otras. Pero eso concluye esta conferencia. Hemos avanzado mucho y quería felicitarte por seguir con el proyecto. Te voy a ver en un momento. Gracias. 29. Define y refinar el estilo de nuestra aplicación: Bienvenida de nuevo. Es hora de dejar unos minutos a un lado para que podamos definir el estilo AP. Buscamos los colores, tamaños de fuente, alturas de línea, etc. Entonces vamos a aplicar todos estos al resto de las pantallas. Sé que puede ser aburrido, pero tenemos una técnica que salva vidas y ese es el panel de activos. Empecemos con la combinación de colores. Una vez que este panel está activo, justo desde aquí, el proceso va así. Digamos que elegimos una pipa l, digamos San Francisco. Abrimos el seleccionador de color y experimentamos con varios tonos, ¿verdad? Lo genial es que podemos ver el cambio en tiempo real. Ahora, para abreviarlo, decidí usar este uno a uno. Hacer f49, que es un tono muy oscuro de azul. Estoy diciendo los códigos de color exactos para que puedas seguir. Pero honestamente, solo jugaba con el seleccionador de color hasta que estaba feliz. Esto es casi negro, pero es ideal para muchas capas de textos. Ahora, ¿cómo lo aplicamos? Primero, agregamos en el panel Activos. Vaya al color y haga clic en este símbolo más. Y así, tenemos la muestra aquí mismo para mostrarte el poder del panel de activos da un ejemplo rápido, como este título, el cielo del desierto, que ahora mismo es negro. Ahora, ve al panel Activos y hazlo azul. Eso es más rápido que usar el área de relleno en el panel de propiedades. Pero en realidad, esta es la verdadera razón por la que hay este panel es increíblemente importante. Entonces digamos que al cliente no le gusta este color. En cambio quiere leer. Bien, aquí tienes. Haga clic con el botón derecho en la muestra y elige Editar. Ahora, hagamos cualquier cambio. Y es tan fácil como eso. Ambas capas se actualizan automáticamente. Dos capas no es un gran problema. Pero imagina que tenemos 200 pantallas y casi mil capas de textos. Ahí es donde el panel de activos es un imperativo absoluto. Entonces, vamos a darle a Control Z para deshacer. Para continuar, selecciona tres tablas de arte y muévalas por separado si aún no lo has hecho. Tenemos que limpiar las cosas sólo un poco. Quiero la pantalla de ubicación, la pantalla de listado principal donde la calificación está flotando en el borde, en el lado derecho. Y finalmente la Virgen donde tenemos tabuladores desplazables. Así que tres pantallas en total y podemos construir nuestro panel de activos. Bien, centrémonos en el segundo. El título es azul, se muestra en nuevo Nieto negro por la talla que podríamos ir con para D. Pero creo que uno más pequeño tal vez mejor, creo que antes es una buena opción. El estilo también debe aplicarse al título del restaurante. Bueno, en el panel de activos, en realidad también puedes hacerlo. Baja a Estilos de personaje y pulsa este Plus. Y así, vas a ver el nuevo Nieto 34. Mi consejo es que le cambies el nombre haciendo clic derecho, obtener, llamarlo título o algo así. A continuación, vamos a aplicarlo. Control-clic postre tiene encendido para seleccionar eso y luego haga clic en la entrada para probarlo. Hagamos un cambio dramático. Así que haz clic derecho en él y en el panel de Activos, presiona editar y hazlo por ejemplo 50 píxeles o algo loco así. Y sí, sí funciona. Pulsa Escape, luego Control Z para deshacer. Entonces tomémoslo desde arriba. El título está hecho, ¿verdad? Pero, ¿qué pasa con todos estos íconos? mí me gusta esa naranja, así que vamos a probarla. Coge el menú de hamburguesas, y vamos a configurarlo al siguiente color dorado, F, F, E, C, z, z, aunque, que es una naranja intensa muy encantadora. Después agrégalo al panel Activos. Entonces mi plan es aplicarlo a todos estos otros íconos. El desplegable, el filtro y la búsqueda. Usa Control para seleccionar el primero. Luego agrega shift a multi-select, y son naranjas. Encantadora. Por favor, aplique el mismo color a las etiquetas en la parte inferior derecha. Como puedes ver, con el mínimo esfuerzo con cambiar el diseño y sin tiempo en absoluto. Básicamente lo que estamos haciendo ahora mismo es con la marca de cada artículo. Entonces las etiquetas ya eran de color naranja, pero queríamos decirle a Adobe XD que debería aplicar este estilo específico desde el panel de activos. Básicamente estamos conectando los puntos con conectar la capa con el panel Activos. ¿Qué pasa con el tiempo de entrega? Bueno, esto necesita mostrarse en el nuevo Nieto regular 24, los píxeles en un gris bastante oscuro. Vamos con 777. Podemos agregar ese color así como el estilo del personaje. Creo que es muy probable que vamos a usar esto como texto del cuerpo principal, es decir, la descripción de cada plato. Así que vamos a cambiarle el nombre a cuerpo. Quiero dejar claro que no estoy 100% seguro. Puedo cambiar de opinión. Vamos a ver a medida que avanzamos, pero como tenemos el panel de activos, podemos cambiar rápidamente de opinión la calificación. Vamos con el nuevo Nieto 20. Tan bastante pequeño. Podemos hacerlo gris, Eso es 777 código de color así. Y luego selecciona la parte del 92 por ciento y hazla negra. Negro en términos de peso, por cierto, porque para el color, realidad vamos a mantener en verde, puedes probar el emoji para eso porque cambiamos la fuente, la alineación no tiene ningún sentido. Pero esa es una solución rápida. Una pregunta que te puedes hacer, es este Chris, ¿Cómo decidiste el 34 negro para los títulos? ¿Por qué no 30, no 40? Y la respuesta es bastante sencilla. Yo los probé. Subí el diseño en mi teléfono y los comparo primero entre ellos y luego frente a otras aplicaciones que previamente analizamos que antes el parecía la mejor opción. Lo mismo va para todos los demás tamaños. Bien, avance rápido, y este es nuestro resultado. Así debería verse tu proyecto en esta etapa del juego. Tomemos un breve descanso. Gracias. 30. Practica tu velocidad: Bienvenida de nuevo. Estamos en la pantalla número dos, y quiero reemplazar todo este contenido ficticio aquí de todos los recursos que preparé para esta grilla. Primero, las fotos, agárralas y arrástralas sobre la primera entrada. Si sientes que alguno de ellos no está bien configurado, haz doble clic en ellos y puedes reposicionarlos o incluso redimensionarlos manualmente. A continuación, voy a arrastrar en los títulos. Recuerda, esto es solo un archivo de texto estándar. No tiene nada de especial. ¿Bien? La posición no está bien. Pero el punto principal es éste. Primero tenemos que cambiar el texto para escribir una línea. Y sólo ahora podemos posicionarlo correctamente a 30 pixeles del borde. Y eso es porque la longitud cambia. Impresionante. Por último, los votos. Cuando arrastras el contenido, el estilo va a cambiar y no hay nada que puedas hacer para evitarlo aparte de tener dos capas separadas. No quiero hacer eso, así que voy a mantenerlo como está. En caso de que tenga tiempo, podría cambiar manualmente cada entrada, pero no cuente con eso. Podrías preguntar, Chris, ¿por qué haces todas estas cosas? Y es bastante sencillo. Por un lado, es una gran práctica. Tienes que hacer ejercicio día tras día y estar preparado. En segundo lugar, es importante que le mostráramos al cliente y al desarrollador algo de lo que estamos orgullosos de tener contenido repetitivo falso, mucho Lorem Ipsum, simplemente rompe la magia. Entonces por eso tengo que hacerlo. Y sólo para traerlo a casa, vamos a disminuir el tamaño de la foto en 40 pixeles. Creo que eso es necesario. Así que control-haz clic en él y vamos a echarle un vistazo. Tres sextos, vamos al 320. Y para la tarjeta para ellos para 70, vamos al 430. Por supuesto ya nada está alineado, pero sabemos que el cambio nos ayuda a mover las cosas y luego a los incrementos de píxeles. Entonces necesitamos cuatro pestañas. La pregunta es ¿ tenemos que redimensionarlo? No, Pero como dije, no quiero ponerme el trabajo duro y ver si puedo mejorar el diseño, si puedo hacerlo aún mejor. Y creo que esto se ve más bonito. Bien, cuando estés listo para comenzar, pasemos a la pantalla para comenzar con el título, seleccionar y aplicar el estilo de personaje llamado exactamente así por Bell. Para la flecha hacia atrás y el ícono de Información, estos deben ser naranjas. Excelente. Por último, vamos a seleccionar todos estos elementos y alinearlos correctamente. Hermoso. Avanzando hacia abajo, la pestaña activa también necesita ser naranja, que sepas qué hacer con ella. Bien. El rectángulo ahora es naranja. Fresco. Para las pestañas. Bueno, para ser honesto, no estoy seguro. Empecemos con el estilo del título. Ahora. Obviamente eso es demasiado grande, pero podemos cambiarlo a tal vez 26 píxeles como antes, las pestañas inactivas obtienen el tratamiento azul. Así que vamos a tener que arreglarlo. Esto es lo que propongo. Seleccionemos todos los demás elementos y colóquelos en un archivo de texto separado. Este necesita ser configurado y Nieto 26 como antes, pero en la forma regular, nunca se debe cambiar el tamaño de la fuente aunque esté inactiva, no es una buena práctica solo el peso y el color. En cuanto al activo, éste debe hacerse naranja. Ahora bien, aquí está la cosa. Quizás no sepas cuánto espacio debes dejar entre la pasta y la pizza. Después de todo, queremos el medio, el espacio entre pizza y risotto, ¿verdad? Pero debido a que se trata de una sola capa, no se puede averiguar cuál es la distancia real. Bueno, aquí está el hack. Agrega el rectángulo entre estos dos y echa un vistazo al ancho. Una vez que tengas ese valor, en realidad es bastante fácil con la capa seleccionada, mantén presionado Alt y verifica la medición existente. Entonces afinarlo con tus teclas de flecha. Tal vez turno y ya está listo para ir. Bien, bajemos los nombres de los platillos. Bueno, creo que estos deberían ser los mismos que el tabulador. Entonces eso es aguja negra, 26 píxeles, pero esta vez y azul, lo que me encanta es el hecho de que esta es una cuadrícula, repita cuadrícula. Entonces todo cambia. Por lo que es bastante fácil juzgar el tamaño. Se puede jugar fácilmente con él. Pero en realidad estoy contento con ello. Para la descripción, vamos a usar el estilo de la carrocería. Nieto es una fuente más grande que la predeterminada, pero sí quiero mantener solo tres líneas de texto. Así que redimensiona si es necesario. Por el precio y espera, apliquemos el estilo titulado 26 y comprobemos la posición Wanted bottom alineado con la miniatura. Aunque aquí está la cosa. Tal vez tengas que mirarlo. Tal vez tengas que aproximarlo. Y eso es porque esta fuente específica tiene bastante espacio extra en la parte superior y en la parte inferior. Y no hay nada que puedas hacer al respecto. Entonces la alineación de dos mundos no va a funcionar bien. Sin embargo, creo que el precio debería mostrarse en naranja. Sí, creo que esto es millas mejor. Por último, agregar al carrito también debe ser naranja. Después de todo, es una acción y sí hay que destacar. Y lo creas o no, creo que en realidad hemos terminado con esta pantalla. Si hay algo más que quieras editar, ahora es el momento para ello. Por ejemplo, el peso del producto. No estoy seguro de que merezca ser tan grueso. No es tan importante. Así que vamos a hacerlo audaz en lugar de negro. El caso es que el panel de Activos es absolutamente fabuloso. Y podrías hacer una entrada por cada cosita. Como habrás notado. Aunque no hice eso. No agregué todos los estilos al panel de Activos y eso es intencional. No quiero añadir demasiadas cosas y confundirme con eso. Es hora de un descanso rápido. Gracias. 31. Termina la primera pantalla: Bienvenida de nuevo. Manejemos la primera pantalla, la de ubicación. Tomémoslo desde arriba y asegurémonos de que estamos en la misma página. El icono necesita ser 18180, blanco puro. Colóquelo a 80 píxeles del borde superior. Esta es una gran oportunidad para usar el campo y. Recuerda, este es el eje vertical y empieza desde arriba. El nombre de la app, el live tiene que ser escrito en. Vamos a marcarlo de la siguiente manera. Estoy pensando unidad totalmente negra, 70 pixeles en blanco puro. Ah, por cierto, creo que lo mejor es que agreguemos panel blanco y assets también. Es sólo una cosa rápida. Si constantemente movemos nuestro ratón en esta zona, lo mejor es tener blanco aquí también. Bien, ahora la centré en la lona. Y vamos a colocarlo a unos diez píxeles del icono , dar y tomar. Eso es entonces el siguiente. Creo que es seguro decir que el naranja va a ser el color de acción principal. Vamos a aplicarlo a ambos botones. ¿Qué pasa con el texto? Bueno, antes que nada, cambiemos esto para mostrar restaurantes que es más que significativo. Empecemos con el título 26 y veamos qué es, cuál es el tamaño en sí mismo bastante bien, pero es un poco demasiado fornido para esta talla pequeña. Así que vamos a bajarlo a negrita. Y en realidad esto hace una gran diferencia. No estoy seguro de que puedas verlo a través de la grabación, pero confía en mí, es bastante sustancial. Compruébalo en tu teléfono y lo que vas a estar de acuerdo conmigo, bien. Centró el texto y luego centrar el botón. Si aún no lo has hecho. El problema que estoy teniendo aquí es que la jerarquía no está clara. Entonces pensémoslo bien. Tenemos tres acciones disponibles, ¿verdad? Puedes ingresar la ubicación y luego un botón de enviar, omitir este paso y pasar a la siguiente pantalla, o al último número tres, crear una cuenta o iniciar sesión. En general, estas pueden considerarse dos direcciones separadas, iniciar sesión y registrarse, pero voy a combinarlas para que sea fácil. Entonces, ¿cómo deberíamos hacerlo? Si bien está bien tener dos botones con el mismo nivel de importancia, creo que lo mejor es que apliquemos a diferentes estilismos para crear una cuenta. Por lo que entiendo del brief, el proceso de registro no es tan importante. Puedes ver los restaurantes sin registrarte. Entonces eso significa que los restaurantes show son la prioridad. Esto es lo número uno y esta pantalla. Como tal, hagámoslo súper ancho, 656. Bien, también deberíamos topar su altura a 90 pixeles, solo para que destaque más. Por cierto, volvió a centrar los textos. Al subir por el momento, el campo necesita que coincida con los botones que tenemos. Así que 656 también, las cosas están cambiando rápidamente, pero recuerda las barras tantas veces como necesites. Para el texto. Esto se llama oficialmente una pista. Por favor aplique el estilo de los textos del cuerpo. Cuando el usuario toca el campo, la mano va a desaparecer, centrarla y dejar unos 30 pixeles a su izquierda. Eso debería quedar bien, y creo que es bastante bonito. Nuestro progreso hasta el momento es decente, pero mantengamos el ritmo. Yo hice una pausa en la grabación y busqué el bonito ícono del GPS. Aquí está, lo tienes adjunto. El tamaño es de 28 por 40 píxeles. Cuando hagas tu propia versión, asegúrate de encontrar tus propios iconos. Hágalo naranja porque puede tocarlo para que la aplicación pueda obtener su dirección automáticamente, colocarla en el lado derecho del campo y dejar 30 píxeles a esta derecha. Hablando de 30, Eso es lo que quiero dejar entre estos dos rubros. Así que selecciona el campo, insinúa la Nikon y agruparlos juntos. Esto va a hacer que sea más fácil reposicionarlo si es necesario. Como dije, dejar 30 pixeles entre los dos y colocarlos en algún lugar cerca del centro de la pantalla. Tómate tu tiempo con él, muévalos y deja que X d te ayude. Bien, pensemos que esta es la parte más importante en la pantalla. Pero entonces, ¿qué sigue? Creo que crear una cuenta viene en segundo lugar. Ahora también podríamos darle un botón naranja, pero creo que eso va a competir con los restaurantes de espectáculos. Como tal. Creo que lo mejor es que lo coloquemos en la parte inferior de la pantalla. Pero primero, vamos a movernos, omita este paso fuera del camino para el estilo. Hagamos esto. Aumenta la altura a 100 píxeles para que no te lo pierdas. Eso no es exactamente enorme, pero es un poco más grande que el llamado a la acción principal. Conviértalo en el fondo negro puro su opacidad hasta el 60 por ciento. No hay frontera para eso, si acaso todavía lo tienes puesto. La idea es darle mucho espacio, pero sin que se destaque demasiado. Entonces por eso elegí el negro y la baja opacidad hacen que abarque todo el ancho de la pantalla. Entonces eso significa 720 píxeles. Alinear correctamente y ahora debería ver a dónde voy con él. Cuando hayas terminado, cambia el texto para crear una cuenta o inicia sesión con una C. mayúscula Todos estos detalles realmente importan al final del día. Por último, enviemos el desplazamiento al rojo M, donde M significa medio, y Shift C con C significa Centro. Pero obviamente necesitas que ambas capas seleccionen eso. Cosas buenas. En general, este es un buen diseño para la reacción del segundo año. Echemos un buen vistazo a nuestro diseño durante un descanso rápido. Gracias. 32. Un nuevo estilo de botón para tener un gran flujo: Bienvenido de nuevo. Nos queda un artículo principal. Omita este paso. Voy a usar algo nuevo. Comienza con un rectángulo que sea de 300 por 90 píxeles. Mantenga el radio equivalente como antes, cinco píxeles. Eso es sin duda. Nunca mezcle estos valores. Tú eliges uno y te quedas con él. Si no te gusta, cámbialo a diez, pero hay que cambiarlo en todas partes. Ahora centrado en el tablero de arte. Y aquí está la cosa, por favor desactiva el relleno. Lo que vamos a hacer es crear un botón llamado botón fantasma. Fantasma porque no tiene cuerpo. Por eso deshabilitamos el relleno. En su lugar vamos a usar un borde grueso, tres píxeles, blanco puro. cierto, por favor asegúrate de que estás ortografiando está en el punto y que pones en mayúscula cada letra, la primera letra de la palabra es decir , centrar todo correctamente. Pero aquí está la cosa. Es posible que no tengas suficiente contraste frente a la imagen de fondo, especialmente si usas otra foto. Ahora, seguro que podríamos aumentar la opacidad, pero incluso eso puede no ser suficiente. Además lo más importante, cuando no tienes relleno, estos botones son increíblemente difíciles de seleccionar. Se. Esto es lo que propongo. Habilita de nuevo el campo y hazlo negro puro, luego baja su opacidad a aproximadamente el 30 por ciento de. Entonces. Es posible que deba activar el panel de capas y cambiar el orden de estas capas. Pero eso no es un problema ni llave de Soporte Cuadrado de Control. Por cierto, odio el hecho de que pueda ver tanto mi panel Capas mi panel de activos al mismo tiempo. Han pasado años y no creo que habrá va a dejarnos tener paneles flotantes pronto. Bastante lástima. Volver al diseño. Analicemos eso. Entonces el logo está en la parte superior. Lo miras y luego te mueves hacia abajo justo en el medio, tienes el área principal donde tienes que poner en tu ubicación. Cosas increíbles y geniales. Es grande, es brillante, destaca. Ahora la pregunta es, ¿podemos agregar más detalles adicionales para que se vea aún más agradable? Bueno, una idea es incluir un icono dentro del botón naranja. Pero en cambio hagamos algo un poco más interesante, un efecto sangrante. Así que selecciona el rectángulo naranja y habilita una sombra paralela en caso de que tengas un borde, por favor desactívelo. No lo necesitamos para el color. No queremos que la sombra sea negra. Así que usa el cuentagotas y selecciona esta naranja. Ten en cuenta que no puedes usar el panel de activos en este caso. Para los ajustes. He hecho esto 1 millón de veces. Entonces esto es lo que mejor funciona, cinco para el campo y y 15 para el B. Por último, establecer la opacidad en alrededor del 60 por ciento. Una vez que des la selección, vas a ver a lo que me refiero, un efecto de sangrado. Básicamente es un efecto de neón. Destaca bastante. Y es solo un detalle extra que a algunos clientes les puede encantar, o podrían decir eso. Pero en cualquier caso, lo voy a dejar porque lo hago callado. Apreciado. Bien. ¿Qué más? Bueno, no me gusta la posición de saltarse este paso. Simplemente está flotando por ahí. Podríamos acercarlo, pero prefiero no darle golpecitos accidentales. Entonces, en vez de eso hagamos esto. Obtener la herramienta tipo, tecla de acceso directo D y escribir o aguja, negrita, 26 Pexels, divorcio blanco puro. Entonces eso es, o como alternativa, centrarlo horizontalmente y moverlo 50 píxeles del botón naranja. Ahora bien, aquí está lo que queremos simetría en todos los casos, es algo a lo que siempre debes apuntar. Entonces si tenemos 50 arriba, necesitamos 50 entre omitir este paso y este ítem aquí. Sostén Alt y mide las cosas. Entonces usa tus flechas en tu teclado. Bien, esto es cogiendo forma, pero no es el final de la misma. Obtener la línea para bien, tecla de acceso rápido L. Vamos a hacer algunas matemáticas. Sabemos que estos tipos tienen 656 pixeles de ancho. Entonces quiero el divisor aquí, pero sin pasar por esta palabra, creo que ya basta con 50 píxeles. Entonces hagámoslo. 656 -50 es 606/2, eso es 30 a B. Bien, así que vamos a arrastrar una línea y luego cambiar el tamaño de esos 303 píxeles. Mantenga pulsada la tecla Mayús cuando agregue cualquier línea para obtener una recta 1303, de color blanco puro. Las líneas no tienen ningún relleno, así que no intentes usar el panel de activos en ella. No va a funcionar. Hazlo blanco desde el panel de propiedades, por supuesto. Y para el grosor, voy a ir con dos pixeles. Uno es un poco demasiado pequeño para ser tan demasiado. Ahora, duplicarlo, Control D o el arrastre Alt y colóquelo del otro lado. Debería ser bastante fácil de alinear. Tienes ese botón naranja arriba, así que por favor úsalo. Cuando estés listo, centro, y agrupa todo junto con Control G. Y creo que este realmente se lleva el pastel. Se ve interesante y ayuda al usuario a que navega por sus opciones. Bien, tomemos un descanso y vamos a hacer un análisis completo después de eso. Gracias. 33. Descripción general: Bienvenida de nuevo y felicitaciones. Acabas de terminar la primera parte de nuestra app de entrega de comida a domicilio. Sé que ha sido todo un viaje, pero ojalá hayas llegado a este punto con un mínimo de morderse las clavos, jurar y rascar la cabeza. El proceso es algo difícil al principio. Muy similar al rompecabezas 1,000 BCE. Pero a medida que avanzas pieza por pieza, toda la imagen se vuelve más clara y puedes coger velocidad. No puedo enfatizar el valor de los pacientes y la dedicación. Esta aplicación de entrega es un proyecto del mundo real, algo que podrías encontrar en tu trabajo que la agencia de diseño o en cualquier plataforma de trabajo independiente. Este no soy yo alardear, pero la mayoría de los tutoriales diseñados no te muestran recaída. Solo son fotos bonitas y eso es todo. No hay pensamiento ni funcionalidad detrás de ellos. Y eso es como aprender a andar en bicicleta cuando el mundo está lleno de camiones monstruo. Entonces mientras estás aprendiendo el proceso es difícil, soy un firme creyente de que cuanto más duro sea el entrenamiento, más fácil será la pelea. decir, cuando consigues el trabajo realmente puedes brillar porque pasaste por esta capacitación. Todavía nos queda un largo camino por recorrer. Pero mira donde empezamos un wireframe, el layout, luego algunos experimentos de diseño, elegimos una tipografía o esquema de color, y resolvemos los problemas reales tratando de encajar tantos restaurantes y como muchos platillos como sea posible sin hacer que la pantalla se vea ocupada. Hablamos de tener la relación de aspecto correcta para las fotos, la cadena de mando, también conocida como la jerarquía. Utilizamos tarjetas, iconos, diversas técnicas de topografía, y aprendimos el uso del panel de activos. De nuevo desde el fondo de mi corazón, felicitaciones por llegar tan lejos. Quédate conmigo y te irá aún mejor. Sin embargo, la primera pantalla es probablemente la más complicada. Eso es porque puedes escribir tu ubicación en este campo, pero también puedes usar el GPS de tu teléfono. También puedes saltarte este paso. Y la app te va a mostrar los restaurantes del laboratorio, solo ciudad. Todo esto está en el breve y espero que lo lea. Por último, puedes registrarte o iniciar sesión. Saber estructurar todas estas acciones no es broma. No es poca cosa. Los clasificamos por su importancia y luego tomamos decisiones de diseño en consecuencia. Por eso usamos el botón fantasma, por ejemplo por eso bajamos la opacidad para este rectángulo. todo, de nuevo, felicidades, fantástico trabajo por llegar hasta aquí. Te veré en un segundo.