Transcripciones
1. Bienvenido a parte 2: Bienvenido de nuevo. Sólo un recordatorio rápido. Esta es la segunda parte de una tres parte, por
supuesto. Así que asegúrate de haber tomado parte uno antes de sumergirte en fiesta. Está bien. En esta parte diseñará una primera versión off. Nuestra APP se enfocará en la eficiencia para tener un prototipo fuera de nuestro diseño lo antes posible. El objetivo aquí es ver las cosas como las imaginamos. Si bien escribir las historias tiene sentido para ti sobre la gente a la que muestras esto primero diseñado
para Si no has notado las peleas estudiantiles por el curso en la primera parte. Asegúrate de que lo hagas. Ahora aquí en la clase predicen sección. Como dije, solo
necesitas hacerlo una vez. Hay todo lo que necesitas para las tres partes del curso aquí en ahora estoy viviendo aquí con mi buen amigo. Un increíble área de diseño para las próximas lecciones son divertidas
2. Directrices de iOS: en este video, vamos a hablar de las pautas del IOS. Cada nuevo sistema operativo trae una serie de elementos diferentes que Apple realmente te anima a integrar en tu diseño. Podrás encontrar viejas Directrices oficiales en esta dirección elementos es que los usuarios de iPhone
ya se acostumbran a interactuar con ellos ya que ya los encuentran en la app de cada apple como su estándar de apple, tú y tu desarrollador lo harán Derrick Lee encontrarlos en X Code, el software utilizado para desarrollar IOS APS sin tener que exportar elementos. También es genial porque encontrarás muchos archivos de boceto hechos por gran diseñador con todos esos elementos para conseguir una vista previa abierta. El nombre de archivo IOS ocho. Te gusta en esta carpeta de clases. Este archivo está hecho por una gran empresa de diseño canadiense llamada T Home carece que ha sido adquirida por Facebook desde entonces. Te proporciona elementos de diseño perfectamente que se pueden utilizar en tu diseño. Esos archivos son tan buena manera de aprender cómo se construyen las cosas, así que tómate unos segundos para jugar con esos elementos. Para referirse a las mismas palabras, tendrás que acostumbrarte a diss lexical en la parte superior de cada pantalla, tienes la barra de estado. En la barra de estado se muestra información en tiempo real respecto a su conectividad, el tiempo o el nivel del árbol del Tíbet. El texto puede ser fácilmente en blanco o negro, pero no en el color que desee. El fondo podría establecerse en este transparente, por lo que tendrá el color de su barra de navegación. Siempre tiene 44 píxeles de alto y estirado, dependiendo del ingenio de la pantalla. Para una aplicación muy inmersiva, como un juego, podrías optar por ocultar el cable de etapas. Pero ten cuidado. Si tu APP está usando una conexión a Internet, gente podría no adivinar que le encanta su conexión. Si no ven su estado, barra sólo a mí hasta la barra de estado. Ahí hay barra de navegación o barra de naff. La barra de tuerca suele mostrar acción relacionada con los años de flujo. Muy a menudo, verás un botón Atrás a la izquierda y la siguiente fecha o valor a la derecha. El bar del naff podría colorearse con el cupón 10 La gente suele elegir quitarle el color a su Brent. El estado es guerra y barra suficiente juntos son de 100 a nuevos ocho píxeles de alto. De verdad te recomendamos que recuerdes esta figura yo también. Úsalo con bastante frecuencia durante el curso en la parte inferior de la pantalla, puedes usar la barra de pestañas superior te permite cambiar entre diferentes secciones de tu app que no
están relacionadas entre sí ya que está realmente cerca de tu pulgar. El bar superior generalmente contiene en principio la acción de su aplicación. Al igual que abierto el acceso a la cámara abriste tu home feed o Booker Uber Top Bargain contiene hasta cinco pestañas, y tiene 99 PC de alto. Es totalmente personalizable si es necesario. Es un patrón de parte común que es realmente eficiente, pero como casi todo lo demás, no es obligatorio. En las novelas de Iowa, encontrarás muchos otros elementos que defiendo los conos. En realidad, probablemente
tengas tu APP como nueva información de compartir. Apple News Lider es tener cada contorno de iconos. Pero claro, y eso ya veremos más tarde. Se puede personalizar que se trata de un botón de interruptor. Se utiliza como un verdadero dulce para un Suficiente, por ejemplo, es la herramienta perfecta para cambiar las notificaciones en las listas declarantes. Las listas son forma de organizar el contenido aquí tienes a ejemplo de lista. Este elemento se llama segmento y control. Puede incluir dos o tres secciones en ese escenario. Lo usarás cuando necesites tu más fácil para hacer una elección entre dos opciones que se pueden seleccionar juntas. Por ejemplo, si preguntas, um, um, si su hijo es un niño o una niña como filtro,
tú, tú, lo usarás en la parte superior de la pantalla para crear en la misma pantalla dos o tres lista de diferentes artículos. Por ejemplo, se usa en la parte superior de la lista de notificaciones. Esta interfaz es Golden Action Ship. Es una forma de proponer una solución diferente a una acción. Por ejemplo, en la app de correo. Si deseas contestar un correo electrónico, tendrás que elegir entre responder,
responder todo o reenviar. La barra de búsqueda puede estar en la parte superior de la lista o directamente en la barra de navegación. Dependiendo de tu caso de uso, tendrás que elegir la mejor opción. Ah, teclados
estadounidenses son estándares y siempre tienen el mismo odio en los de Iowa. Se puede establecer un color específico para que sea el color activo, el color que se mostrará cuando la parte inferior sea accionable por defecto. Se trata de un azul eléctrico específico, pero se podía ver rosa en la app de música o amarillo en la app de notas. Por ejemplo. Puedes escoger el color de tu marca si quieres profundizar en las pautas del IOS, realmente te recomendamos engañar a un diseñador llamado Manto on Medium. Aquí está el enlace. Si estás construyendo tu propia app, empieza por elegir los diferentes elementos que necesitas para diseñarla. Es posible que tengas que ser un poco creativo en algún momento, pero realmente puedes encontrar la manera de hacer casi todo lo que necesitas. Fueron los elementos estándar. Entonces ahora que conoces el nuevo léxico más antiguo en la siguiente lección, vamos a usar estos elementos para diseñar una primera versión de Instagram siguiendo
las pautas del IRS Onley .
3. Boceto de caminata 3: tan bienvenidos a esta parte del curso. Vamos a empezar a diseñar la interfaz real. Entonces vamos a abrir, bosquejar y crear un nuevo documento. No te asustes si no entro en detalles en lugar de mostrarte cómo funciona todo
ahora mismo, te
mostraré las herramientas que necesitas y cómo usarlas como diseñamos. No obstante, esto es sólo una visión general. El boceto se divide en cuatro partes en el centro. Tienes un lienzo de dibujo ilimitado en la parte superior. Tienes una barra de herramientas era una función principal. Necesitas dibujar y crear formas. Entonces, por ejemplo, podemos dibujar un rectángulo. Haga clic en insertar forma den rectángulo, haga clic y arrastre para dibujar un rectángulo al tamaño que desee. Ahora también está creando novedosa forma de inserción oval. Podríamos también presidente u O en tu teclado. Como atajo. Puedes más fácil novela de drones o círculo perfecto manteniendo el turno mientras estás arrastrando. Esos dos iconos te permiten agrupar y agrupar objetos de ONU aquellos que acercas y alejas . Los iconos de Ancianos son para transformar Una forma de editor los usará más adelante en el curso. Disfunción llamada Muro es uno de lo mejor boceto. Te permite previsualizar un diseño en tiempo real en tu dispositivo, pero tenemos una escucha dedicada para eso. En el lado derecho, encontrarás sentadas más antiguas para editar tu forma. Aquí están las coordenadas fuera de tu objeto allí realmente útiles cuando quieres hacer pixel perfecto diseño. Esta es una dimensión fuera de tu objeto. El casillero en el medio te permite mantener la proporción de tu forma mientras la cambias de tamaño . Podemos establecer la opacidad y, por
supuesto, los colores se puede decir por separado el color fuera del borde y el color de campo. Como puedes adivinar. También hay una sección dedicada colores en este curso para mostrar viejo increíble perseguir Please sketch. Tres. A continuación están las sombras. Es un poco anticuado esos días, pero aún queda algo bueno por hacer. Es Sombras por qué estábamos dibujando? Habría notado que cada forma que manejamos energía generaba un mentiroso en el panel izquierdo . En boceto, cada forma es una capa. Puedes moverlos por tu lista de capas para ponerlos en segundo plano o en primer plano . Entonces, por ejemplo, si pongo el rectángulo en la parte superior de la lista de capas, estará en la parte superior del círculo en el lienzo para ocultar una capa. Haga clic en el icono que aparece junto a su nombre, y cuando desee congelar una capa, haga un clic derecho sobre el nombre latente y seleccione suerte. Sé que es mucha información para primero Walk through, pero verás que el al final del curso, sabrás lo que representa cada ícono. Ahora mismo. Tómate unos minutos para jugar con las diferentes funciones, y cuando creas que estás listo, ve al siguiente video, donde empezaremos a diseñar la primera versión de la APP.
4. Juegue LEGO: con el fin de seguir viendo simple, ineficiente. En esta lección, vamos a diseñar aversión fuera de instagram usando elementos estándar Onley. diseño estándar es el primer paso antes del diseño híbrido y el diseño personalizado. diseño estándar sigue las pautas IRA usando Onley, iose elements, iconografía e interfaz de usuario. Esto es lo que usa Apple en AP antiguos, pero eso también es lo que le gusta a otra empresa. ¿ Qué pasa? Por ejemplo, ¿combina el diseño híbrido? ¿ Son occidentales con elementos personalizados como los flujos? ¿ Iconos telefónicos? Muchos exitosos hasta como Twitter, Facebook, Pinterest o instagram usan diseño híbrido. Por último, también
hay ejemplo de a diseño personalizado con gestos de noticias, UX
innovadora y totalmente personalizada. You I Snapchat yesca o papel de Facebook son un buen ejemplo de diseño personalizado. Te recomendamos encarecidamente que empieces a diseñar fue girado porque es la mejor manera de ser eficiente. Si es fácil de diseñar, será fácil de desarrollar y rápidamente podrás probar tu producto con usuarios reales . Si la gente empieza a amar tu lo que estás construyendo con estándares, lo
tendrás todo el tiempo. Necesitas mejorar tu diseño con sus comentarios. Entonces por ahora, solo
vamos a jugar a Lego y todo lo que necesitas saber es cómo copiar y pegar abrir el archivo Lane Instagram I West Under Kit en esta carpeta de lecciones Aquí están todos los elementos que
iban a usar para construir nuestra app Ahora genial. Un nuevo documento era final común o si lo sabía, nombrelo instagram A U. S. estándares. Empezaremos diseñando la primera pantalla Para eso se creará un tablero impar con exactos
mencioné a menudo iPhone seis pantalla click insertar fuera de tablero a la derecha, puedes notar que boceto sugiere automáticamente nuestros tamaños de tablero. Podrías sentarte X pantalla de iPhone, seis iPad, computadora de
escritorio y todo tipo de iconos. Para esta lección, vamos a seleccionar retrato de iPhone six llamado la pantalla de inicio de Art Board haciendo clic en su nombre en la lista de capas. También puedes usar un atajo. Comentario son cambiar el nombre de una capa. Ahora juguemos a Lego y pongamos elementos son su ubicación exacta. Empezaremos con la barra de navegación, iremos al otro archivo y copiaremos todo el archivo de conmutador de grupo de barras de navegación y lo basamos. Colócala en la parte superior de tu fueraborda. Vea cómo el boceto le ayuda a poner en su lugar. Bonito té, nos dice
el inconformista de la línea roja. El bloque está bien centrado, y los de los sitios indican que ambos lados del bloque tocan las edades del fueraborda. Si el elemento que estás intentando seleccionar está en un grupo, posible
que tengas que apresurarte varias veces para alcanzarlo. Haga clic en el botón Atrás en la barra de cuchillos hasta que solo seleccione el botón Atrás. También puedes mantener comentario mientras estás sobre el grupo en el lienzo para seleccionar los elementos que deseas directamente. También hay una forma de hacerlo es seleccionar el elemento dentro del grupo directamente en la
lista de capas . Elimina el nivel de atrás y la flecha ya que no la necesitaremos para la pantalla, renombró el título del naff Bar Instagram y vamos a nombrar el nivel correcto directo. Ahora volver al otro archivo con el recurso más antiguo es estas cinco narrativas corresponden a cinco flujos diferentes. Es por eso que Instagram opta por usar la pestaña. Are fue cinco grifos como su sistema de navegación. Cada historia tendrá su propia pestaña podría ser toda la pestaña. Nuestro grupo toca la barra superior en la parte inferior de la pantalla. Esta vez vamos a utilizar las flechas para ajustar la posición del elemento. Si presionas un estrecho en tu teclado, tu objeto se moverá un píxel en la duración de los pechos árabes. Si mantienes el turno mientras haces eso, se moverá 10 píxeles por Dell Pixels Vamos a seleccionar la primera historia. Este será el primer paso que quiero dar, compartir bellas fotos, copiarlo y pegarlo en tu archivo. Será nuestro recordatorio. La capacidad de tomar fotos hermosas es nuestra característica principal, por lo que se colocaría en la cámara central derecha en el icono en el centro de la Tep Bar. Haz lo mismo con la segunda narrativa. Quiero ver fotos de mis amigos. Este va a ser nuestros propios pies justo en casa debajo de la primera pestaña de la izquierda. Quiero ver las horas de imagen de otras personas, tercera narrativa, y será nuestra pestaña de exploración, correcto. Explora en la segunda pestaña ahora puedes llevar a menos narrativas. Yo quiero saber de la gente. Actividad en la APP es nuestra historia habitual forzada y será nuestro el cuatro paso Finalmente, como también queremos tener acceso de lo que la gente ve de mí perfil correcto debajo de la última parada sobre los derechos. Eso es todo. Tenemos toda la navegación. Ahora vamos a traer el contenido. Hay una regla muy simple que debes tener en cuenta a la hora de crear tus pantallas. El contenido es rey. ¿ A qué me refiero con eso? Casi en todas partes, un AB de Mumbai no está enterado. Otra herramienta para manejar contenido detrás del término contenido. Se cuenta con una amplia variedad de cantos y formatos. Puede ser mensajes de noticias y formaciones en forma de textos, foto, gráfica, representaciones o incluso mapas. Las acciones más comunes que nuevamente realizan son crear, consultar, compartir y administrar contenidos. Puede ser interesante preguntarte por cada uno de tu reloj de pantalla tratando de hacer con tu contenido. En nuestro caso, el contenido es imágenes, dependiendo de lo que queramos que haga el usuario. Queremos que se muestren de las imágenes de la misma manera que serán grandes cuando el usuario los conceda y más pequeños cuando las comparta. A medida que estamos construyendo el home feed, hagamos el contenido lo más grande posible. Dibujó un borde cuadrado a borde. Acuérdate de aguantar porquería. Por qué arrastrando para mantenerlo cuadrado se coloca a cero en X en 148 N. Y. Ahora, como contenido secundario, se reproducirá una foto de perfil del usuario que publicó la imagen. Ir a insertar forma. mal juega el ratón en la esquina superior izquierda de la plaza. Acabas de remar ahora. Haga clic y arrastre hasta llegar a la parte inferior de la barra de navegación. Recuerda mantener turno para mantener proporciones. Ahora deberías tener una novela que se encuentra justo entre la barra de navegación, la foto y el borde de la pantalla. Vamos a jugar el mismo margen alrededor de los óvalos y esos tres elementos. Para ello, vamos a redimensionar el óvalo por el centro. Seleccione el óvalo, haga clic en un mango en una esquina presione shift y out hasta que vea que el margen es de 15 pixel para comprobar. Si hicimos bien nuestro trabajo, puedes seleccionar el óvalo y presionar hacia fuera cuando encima o los demás elementos con tu ratón. Te mostrará la distancia entre los dos objetos. Aquí tenemos 15 a la izquierda, 15 en la parte superior y 15 en la parte inferior. Parece que no fueron tan malos en esta lección. Nosotros así cómo jugar Lego con elementos. Cómo jugarlos y abordar los márgenes entre ellos. En la siguiente lección traerá algo de texto a esto para arriba y recordar, el contenido es rey.
5. Conceptos básicos del texto: en esta lección, vamos a insertar texto en nuestro simulacro arriba. Podría ser una de las lecciones más fáciles. Como ya saben, la primera parte del curso está enfocada a ser eficiente, por lo que nos tomaremos el tiempo. Tomó sobre la tipografía y la de Karen más tarde en este curso. Pero recuerda, algunas cosas. No utilices más de dos o tres teléfonos en tu diseño cuando no sepas qué financiar. Para elegir Big Helvetica y 11 pixels es la altura mínima que puedes utilizar en línea por dispositivos. Ahora volvamos a nuestro diseño como lo dejamos, ya
colocamos un Marcador de posición para imágenes así que bien ahora juega los bloques de texto van a insertar en texto. La próxima vez solo presionaremos el corto get tea dibujó un bloque de texto debajo de la barra de naff. No tiene que ser extremadamente preciso. No obstante, en este texto, block mostrará el nombre del usuario que publicó la imagen. Digamos para este ejercicio que nuestro usuario se llama Michael Jordan en el lado derecho, puedes configurar el frente de tu texto. ¿ No han sido siempre claros y fáciles de leer? No es muy original, pero va a funcionar perfectamente para nosotros establecer el tamaño en Helvetica 16. Pero en este caso, también
queremos que se pueda hacer clic en el nombre de nuestro usuario para poder descubrir su perfil. Es una regla común en el diseño móvil usar teléfonos medianos o negritos cuando quieras que
se puedan hacer clic en los textos , por lo que elegiremos medio en el mejor. Lo habrías subrayado, pero parece un poco anticuado hoy en día. Hagamos lo mismo debajo de la imagen. Presti para agregar un bloque de texto dibuja uno debajo de la imagen en el 1er 1 pondrá el número de vuelos. Entonces digamos que recibimos 1234 likes. Y dibujemos otro bloque de texto para los comentarios. Digamos que dunk hashtag n b A. El comentario contiene palabras que no se pueden hacer clic, por lo que dejamos el frente como regulares. De acuerdo, ahora vamos a averiguar qué teléfono usa instagram para su logo. Podríamos preguntarle a Google qué teléfono usar Instagram para este logotipo y tener nuestro inserto, pero no siempre tendrás las respuestas, así que vamos a ver cómo procesar el teléfono. colas en el nuevo logo están hechas a medida, por lo que usaremos el Lego anterior go on Google para encontrar el logotipo de Instagram en una imagen, guárdelo en tu escritorio si es necesario. Recorta la imagen para conservar sólo el texto. Ahora ve a qué diferente y sube a tu vencedor. Qué diferente te pedirá que escribas la letra no reconocía mama Siguiente y aquí
vamos . Instagram Usa un teléfono llamado Billabong. Ahora busca Billabong, Frente en Google. ¡ Aleluya! Es gratis. Podrías descargarlo, pero ya es nueva carpeta para esto. Escucha, ve a la carpeta y haz doble clic en el archivo billabong. Tu Mac abrirá siesta llamada agenda telefónica, Haz clic en Instalar el Filmado, y aquí tienes. Si utilizas teléfonos personalizados, tienes que dárselos a desarrollador, y te recomendamos encarecidamente que utilices los teléfonos Web de Freon en la carpeta. También nos cayeron unos cuantos teléfonos gratis geniales que podrías usar ahora que agregamos el teléfono creyente . Podemos cambiar el título de la barra naff con el logo de Instagram, haciendo
doble clic suficiente grupo de barras hasta que puedas editar el título, luego licita el teléfono de Helvetica a Billabong dijo el tamaño a 35. Por supuesto, no
es el logotipo exacto fuera de Instagram pero definitivamente funcionará para nuestro prototipo. Eso es todo Eliminado. Copa sigue siendo un poco áspera, pero empieza a parecer una aplicación real. Traeremos un poco de color en la siguiente lección.
6. Conceptos básicos de color: en esta parte del curso tomará sobre los colores de una manera muy práctica, dará más detalles sobre teoría del color, cómo ser colores, armonía y mucho más en la segunda parte del curso a este nivel solo usará uno color fondo seleccionado después de la barra de navegación en el lado derecho, se
puede ver que su campo era blanco. Haga clic en la vista previa de color aquí. Se puede ver que estamos en la pestaña de color plano. Nos quedaremos aquí por el momento. Grande el color que quieras. Si alguna vez sueñas con ver instagramming naranja, este es tu momento de gloria. Cuando pongas tu cuerpo en color, debes convertir tu barra de estado en blanco. Esta operación será una buena recapitulación para lo que hemos aprendido hasta ahora. Escoge la barra de estado con textos blancos en EU Te gusta co pagarlo y basarlo en el tablero de
arte. Ponlo en la carpeta derecha Barra Naff. Enmascarar el negro haciendo clic en el contexto II a su nombre. Si quieres. El senador usó perfectamente la hora o la puso en 00 ya que nuestro fondo negro ayuda a tener que colocar su barra de estado la mantendrá y dijo que es color como total transparente. Selecciona el fondo de tu set su barra y dijo la opacidad a cero. Impresionante. Ahora, ¿y si quieres que tu instagram sea una réplica total del original? Sketch incluye un increíble recolector de colores que te permite llevar una carpa donde quieras en tu pantalla. Evan. Si está fuera de la APP, es una característica que te puede ahorrar tiempo ya que ya no tienes que arrastrar una imagen para bosquejar seleccionar su color. Abre la carpeta de esta lección. Tienes una captura de pantalla de la app real de instagram. Abrir fue vista previa. Después vuelve a bosquejar. Ponga esta captura de pantalla de lado a lado las apuestas ponerse al día por re dimensionando las dos ventanas. Haga clic en el fondo de su barra de navegación, luego haga clic en el color y luego seleccione el seleccionador de color. Ahora haz click donde quieras en la barra de captura de pantalla naff. Aquí tienes. No estás usando el azul de instagram oficial en tu app. Como puedes adivinar, vamos a usar este color muchas veces, así que lo guardaremos haciendo clic en el plus para añadirlo en nuestra biblioteca Squatch. Ahora pon en este azul todos los tecnicos que sean aplicables, como el nombre de nuestro usuario, el número off likes y el hashtag en nuestro equipo. También tomemos unos segundos para controlar lo que hemos hecho hasta ahora. Digamos que esos divertidos tamaño a los 16 convirtieron un título en blancos y la etiqueta directa, también. Eso es todo. Sabíamos lidiar básicamente con los colores. Si tienes un proyecto personal, selecciona cualquier llamada que no quieras y guárdala en tus conmutadores. En la siguiente lección, vamos a aprender a alinear perfectamente los objetos creando una nueva pantalla.
7. Alineación y cuadrícula: en esta lección verá cómo utilizar las herramientas de alineación. Son realmente útiles y muy fáciles de usar. Entonces ahora que hemos roto, la pantalla de inicio mirará la pantalla de la expo. Seleccione la pantalla de inicio fuera de borda. Se puede hacer clic directamente en el nombre del árbol en el cannabis Selected Copiapo board venía , ver, y basado que venía. V Renombrarlo presionando common are name it. Explora pantalla, haz clic en la barra de cuchillo para cambiarle el nombre Tipo, explora y dijo el teléfono de nuevo en un medio Levítico 17. La pantalla nos permite las muchas fotos de bro a la vez. Entonces en lugar de tener una imagen en el medio se mostrará pactado de miniaturas, lo
hizo todo lo que no necesitamos tales pilas y marcador de posición. Ahora vamos a hacer pactado de los machos dibujaron un cuadrado y redimensionarlo a 125 pixeles por 125 pixeles. Recuerda que si quieres mantener proporciones, tienes que presionar shift como ves boceto el estilo predeterminado para las formas es un gris claro en el fondo en un gris oscuro para el borde. Dibujaremos muchos cuadrados sin bordes en esta lección, así que Veamos cómo podemos editar el estilo predeterminado. Selecciona esta consulta simplemente verdadera y comprueba los libros Borde Ahora haz clic en Editar y dicho Estilo como predeterminado. Ahora forma más antigua Will dro no tendrá fronteras. Vamos a competir la plaza y basarla. Puedes copiar más fácil pegar con ven y ven y ven. La envidia o la sequía arrastraron el elemento Pulsando hacia fuera. Copia tres cuadrados donde quieras. En el fueraborda juega el borde izquierdo de una plaza en el borde izquierdo fuera del tablero de arte y el borde derecho de otra plaza en el borde derecho de Thea Porter. Ahora vamos a usar las alineaciones para y dejar que suceda la magia. Seleccione los tres cuadrados y alinéelos en la parte superior, presionando este botón. Ya ves, ahora
todos los elementos están alineados. Ahora mantenga seleccionada la plaza de la calle y haga clic en el primer botón en el ojo Herramientas de Lineman en otra para distribuir los elementos horizontalmente. Es botón y capacidad para poner exactamente el mismo espacio entre diferentes elementos. Ahora podemos duplicar la primera línea de abajo y crear nuestra cuadrícula. Genial. Ahora que sabemos usar la herramienta de alineación, veremos una forma diferente de hacer lo mismo, y empezaremos por eliminar todo lo que acabamos de hacer. Basta con mantener la primera plaza en la esquina izquierda. Vamos a utilizar la herramienta de cuadrícula, click en naranja y hacer rejilla, dijo Rosarios. Cuatro fue un margen de un píxel y dicho columnas con tres con un pico en margen. Haga click en Megret. Selecciona todos los rectángulos que has creado en el panel izquierdo y alinéalos visualmente con la foto del otro tablero de arte. Terminemos el trabajo correctamente ahora seleccionamos todos los terminales en la lista de capas y agruparlos haciendo clic en este psicópata llamado Grupo Grid Dragon. Dejar este grupo debajo de la pestaña de navegación están en lista de retardo. Vuelve a Instagram. IOS resultó archivo de niño Para traer la barra de búsqueda Coupet y lo basó en tu tablero impar. Colóquelo de borde a borde debajo de la barra de navegación. Haz lo mismo para el segmento y el control. Reemplaza a la izquierda Labelle por fotos. Esto agotará la visualización de fotos aleatorias. Puedo Breaux y reemplazar el derecho que construí por la gente. Esto mostrará gente recomendada que puedo seguir. Eso es todo. Bueno, ahora ya sabes alinear, objetar y duplicar objetos para vivir reglas específicas. Estos dos son tan útiles que los vamos a usar mucho en el curso, Así que no tengas miedo. Si tienes problemas para usarlos, te acostumbras rápidamente a ellos. Ahora que nuestro simulacro se ve casi como una siesta, llevemos algunas imágenes en ella para ver cómo se verá como si lo vamos a ver en el siguiente video.
8. Insertar imágenes: hola otra vez en esta parte del curso, te
vamos a mostrar a manera útil de insertar imágenes en boceto, y te van a mostrar a ambos y decirte por qué debes elegir una u otra. El primero es usar una máscara. Vamos a hacer esto para la pantalla de inicio. Abrió una foto llamada Picture Home Indus Escucha carpeta. Solo tienes que arrastrar la imagen directamente a tu archivo, redimensionarla y colocarla encima del marcador de posición en tu pantalla. Ahora di, como presumir el marcador de posición, Terminar la imagen y hacer clic en la máscara sin picar. Hagamos esto de nuevo fue una foto de perfil de nuestro usuario arrastrar y soltar la imagen de
perfil de Michael Jordan en tu boceto cayó. Colóquelo encima de la imagen de perfil, marcador de posición y máscara. Aquí tienes. Lo que es genial con este método es la capacidad de golpear la parte de la imagen que quieres mostrar. El inconveniente es que tienes dos capas para una imagen y presentar complicado. Entonces veamos otra forma de agregar una imagen buena al grito expo, Seleccione el primer clic cuadrado en la pestaña de color y vaya al tiempo de fuerza llamado Patrón Quicken. Elige imagen y selecciona Elegir un azulejo es cuando tienes un patrón, pero en este caso, queremos imagen para sentir el cuadrado. Por lo tanto seleccione el campo. Hazlo de nuevo por plazas mayores con hablar con los Tres Grandes antes y así sucesivamente. Y si quieres usar tus propias imágenes, adelante. Como puedes ver, este medio es realmente Festen fácil. También funciona muy bien con los plug ins cool hablarán de esto más adelante. El inconveniente es que es menos preciso. Eso es todo. Nosotros por lo dos formas de insertar imágenes en su diseño. Usaremos la opción de máscara si queremos ser realmente precisos en colocar nuestra imagen y sentir opción. Si solo queremos sobre forma para tener una imagen en el fondo. En el siguiente video, insertaremos acciones en nuestra app diseñando botones.
9. Diseño de botones: hi de nuevo en esta lección diseñará botones a todo un usuario para interactuar con el contenido. Volvamos a nuestras historias por un segundo. Actualmente estamos trabajando en los pies de usuario como Kevin. Quiero ver fotos de mis amigos y darles comentarios para que sepan que les estoy dando validación. Hasta el momento, hemos permitido los impulsos de uso. Es amigos fotos. Ahora queremos permitirle que comience y, como dos fotos bajo las que descanso realmente no incluye botones Apple prefiere cuando usas conos oi de nivel de
texto. Todavía no necesito tener nuestro icono personalizado. Utilizaremos un ángulo indirecto de nivel de texto para crear un botón para realizar la llamada a la acción. Llamamiento más fuerte a la Acción o C T. A. Es la capacidad de tu diseñado para animar a la gente a hacer conexión aquí. Para hacer click en el botón, volvamos a nuestra pantalla de inicio y limpiemos un poco. Seleccione una imagen de perfil y nombre de usuario y agruparlos nombrados a una carpeta nombre de usuario el contenido principal de la
imagen, seleccione el número fuera de Me gusta y comente y agruparlos de la misma manera. Esta descripción del titular arrastró a su grupo unos píxeles más abajo. Si al hacer clic en él, sólo se selecciona un elemento en lugar de todo el grupo, y marque la casilla hace clic a través. Al seleccionar en el lado derecho, coloque la barra de pestañas de navegación encima de Description Group en la lista de capas. Ahora vamos a grandes nuestros elementos procesables. Bueno para insertar rectángulo la próxima vez vamos panes. A atajo son Dibujar un rectángulo de 30 píxeles de alto por 90 píxeles blanco. Colóquelo a 15 píxeles desde el borde de la pantalla. Puedes hacerlo fácilmente escribiendo 15 en X, y recuerda que puedes comprobarlo colocando el ratón sobre tu elemento. Por qué oprimir hacia fuera para que se vea aún más que conexión Will Button dará un rectángulo registrado. Corners dijo. El Reg está a las cuatro. posible que hayas notado ese día que es entrenamiento para hacer que los botones parezcan peelings. Spotify utiliza este lote, por ejemplo,
para hacer eso, acaba de decir lo común registró el máximo y tu rectángulo se convertirá en apelación. Si necesitas ir por encima de 40 puedes escribir el valor que quieras. Por ahora, vamos a darme eso para Vamos a duplicar el primer rectángulo, haga clic y arrastre sosteniendo y reproduce un nuevo rectángulo junto al 1er 1 Finalmente, haga clic y arrastre y coloque un último rectángulo en el borde derecho de la pantalla para colocarlo pixel desde el tipo de borde derecho menos 15 en la exposición. Ahora insertaremos los niveles que describe la función de cada botón insertado bloque de texto y dijo que el frente en Helvetica Irregular 16 dijo que el color era un gris oscuro. Coloque el bloque de texto sobre el primer botón y escriba como solo ingenio de bloque de texto para
que coincida con el botón y dijo que el texto se centrará en el bloque de texto. Copia el bloque de texto sobre el otro botón y escribe. Comentario. Nuestro tercer botón será acceder a las opciones, como reportar el contenido o copiar el enlace de la imagen. No es tan importante como los demás que lo diseñarán de manera diferente. Copia bloque de texto sobre él y teclea más ahora sin marcar el campo color bucks y revisa el balón. Los pavos. Esto atraerá nuevamente el efecto de la ciudad fuera de nuestro botón. Ver ta representa un llamado a la acción. Por ejemplo, entre esto, este y este botón que podría tener una mejor conversión el 1 Hay mucho
artículo sobre cómo aumentar de nuevo la conversión. Diggin si quieres primero o informaciones agrupa cada nivel de texto con el rectángulo detrás ellos. Nombró la carpeta con el nombre de la acción, por lo que tendremos, como comentario y más. El botón más hará que aparezca un tramposo de acción con diferentes opciones. El botón de comando hará que esta reina se deslice hacia la izquierda y revelará el teclado. En cuanto al botón me gusta. Una vez que lo tocas, solo en rojo seleccionará el fondo del botón me gusta y mirará un precioso rojo gire el frente en blanco en la misma pantalla. Tenemos ahora el mismo botón en ST. Estatus diferente. Activo, inactivo y secundario. Separemos los tres elementos de la información que figura a continuación. Al dibujar una línea, podría pensar que el peso más fácil dibujó una línea será hacer clic en insertar en línea, pero en realidad no lo es. El león Herramienta no es realmente genial en boceto. Es bastante difícil de configurar y no muy intuitivo. Por eso usaremos una herramienta que conocemos bien. Ahora. Rectángulo de dibujo directo lo establece con un 345 y es ocho a uno. Pixel dijo que el color era un gris claro, ya que tiene que ser una información realmente discreta, dijo la posición en 583 en
Why, y colocarla en el medio. Se puede, por ejemplo, utilizar las imágenes grandes y alinearlas ambas por el centro. Eso es todo. Veamos un poco de léxico antes de envolver cuando tienes en el límite como un botón fuera de algún contenido, como una foto. Está delimitado por un borde que puede ser visible o no. El espacio entre la frontera y lo que hay dentro, por ejemplo, entre el borde fuera un mejor y el texto del botón. Se llama el acariciamiento. Por último, el espacio entre el elemento y lo que hay a su alrededor, por ejemplo, el borde de la pantalla. Es oro, el margen. Está bien. Ya hemos aprendido muchas cosas en el Lexus y estaremos en ejercicio que
te hará usar todo esto por lo que hemos pasado hasta ahora. Listo. Go
10. Hora para practicar - Flujo de cámara: esto es todo. Noches. Tiempo para trabajar por tu cuenta. Ya hemos pasado por bastantes características, como dibujar formas, colocar textos, importar imágenes e insertar elementos nativos de Iose. Es hora de que practiques. El oro es construir las pantallas de los flujos de cámara. Pero antes de que pudiera iniciarlo, déjame hablarte de algunas buenas prácticas. En primer lugar, reorganizaremos los fueraborda. La navegación principal de nuestra app se basa en cinco pasos, en este caso, una práctica que arregla nuestras tablas y tu lienzo es demasiado grande. Cinco rosas, una por grifo, así que dejamos aquí la pantalla de inicio y toca la explosión justo debajo. Puedes escribir el nombre de las pestañas del lado izquierdo para que si compartes a tus otras cinco personas entiendan cómo funciona la APP tan pronto como abran el archivo. Entonces eso es tipo home y dijo el tamaño lo suficientemente grande para que puedas verlo cuando realmente te
alejaste . Copia y pega a continuación y escribe explore. Por fin hacer lo mismo para cámara. ¿ Recuerdas la historia de usuario que definimos en ti? Excepción. Bueno, los
usaremos ahora para definir lo que habrá que diseñar en cada una de las pantallas de la cámara abrir el instagram i Western Ese chico que quiero tomar en compartir bellas fotos fue la historia para la cámara tap Kobe y basted debajo de la cámara nivel. Ahora veamos cómo podríamos lograr esto a través de diferentes pasos. Crear, no tablero. Presionar un inserto iPhone seis. El primer paso para lograr su objetivo será tomar una foto. Por lo que renombrados son a la vez cámara y justo debajo. Puedo tomar una foto ya que esas pantallas están conectadas Juntos, se
puede colocar un estrecho entre las pantallas para dibujar clic estrecho en, insertar una flecha dirección derecha. Relacionarse con ello. Valoro fechado la foto y dar clic en siguientes copias de Border Side. El segundo paso es hacer que la foto se vea bonita, así que llevemos filtros renombrados a bordo. Los filtros en la pantalla estaban justo debajo. Puedo deslizar para elegir el filtro. Cuando hago clic en un filtro
, altera la imagen. Están fríos ingley Ahora que la foto se ve bien, vamos a dar algunos detalles en cereza. Con el mundo como la acción es la misma, se podría basar la primera flecha crear, aseverar fuera de borda y renombrarlo compartiendo y escribir la historia a continuación. Puedo agregar una descripción para hacer mi foto. Puedo seleccionar las redes en las que quiero compartirlo ahora. Anote lo ocurrido en la última acción. Mi imagen se comparte en mi feed de seguidores y en redes. Seleccioné la cámara para fines, y estoy de vuelta en mis pies de casa por su reina de tu app. Trata de enfocarte en una o dos acciones para que utilices un dunk. Dura. Eso es todo. Ya sabes, tengo que sentir el espacio en blanco. Nuestros tableros. No necesariamente tienes que replicar Instagram. Nuestra historia de usuarios puede tener diferentes respuestas en cuanto a ti. I En esta carpeta de lecciones encontrarás todos los elementos que necesitas y el archivo completado. Trata de hacer tu mejor esfuerzo por tu cuenta. Y si te atascas en cómo hacer algo, cómo Mira el siguiente video, te
mostraremos cómo completar todo el ejercicio. Buena suerte
11. Corrección de ejercicio: flujo de cámara: Bienvenido de nuevo. Te vamos a mostrar cómo terminamos el ejercicio. No replicamos exactamente Instagram pero solo dimos respuesta a la historia del usuario debajo de cada puerto
debe. Podrías, por
supuesto, crear tu propio diseño Si lo haces se ha acelerado un poco. Entonces vamos a música ciudadana deejay todos los días paso mi tiempo esperar cerca para encontrar puedo entender sí, Todos los días paso mi tiempo sintiendo camino me llevo ¿Puede él ir a otra dimensión Mama
porlo has estado bebiendo el camino Consigue verdades arrojadas en este flujo Apenas bits negocio solar va negocios negocios préstamo ciudades van a la cárcel, Ir a la iglesia Genial. Y sólo Dios puede juzgarme. Sí, ya
sabes, como ninguna mirada fea. Tan jodidamente bueno la mayoría Sí, lo
sé. Te ruego el quinto si necesitas a Teoh Motion en la contemplación acercarme en algún asiento Lo social más cercano nunca iba. Sabe que es esperanzador. Se opone a Justin. Apenas emociones. - Quiero tocar otro clip en el medio con un mensaje a los jefes para perderse este nuevo outfitters en la cabina de sangre. Muéstrame esa marca que marca buena cabina. Bollos de copia más grandes como legal sobre solo a punto de conseguir un pedazo de la estoy de acuerdo con simplemente bien sólo bebiendo mi ventana de vino. Pero no me encanta que no se tome tiempo de esa manera gallina. Está bien, incluso no.
12. Vista previa en tu dispositivo con Sketch Mirror: Oye, espero que lo pasaras bien diseñando a flotador de cámara. Ahora vamos a abrir al archivo con pantallas más antiguas ya diseñadas. Abre el archivo instagram. Siempre corregí en esta lección. Carpeta dos, hermano. Estos expediente. Vamos a utilizar una de las mejores características en boceto. Se llama Sketch Miro. En realidad fue una de las razones que me hizo hacer dulce desde Photoshopped hasta
boceto . Miro te permite previsualizar el diseño en tiempo real directamente en tu dispositivo. Poder previsualizar un diseño en el dispositivo para el que estás diseñando es esencial. Es la única manera de estar seguro de que lo que estás haciendo realmente tiene sentido, y te permite avistar flujos potenciales. En primer lugar, necesitas ir a la tienda APP en tu iPhone o apuesto y buscar el sketch meal up. Te costará $5 Pero si no quieres gastar esa cantidad de dinero, sin preocupaciones, te
daremos un par de alternativas. Son gratis, pero un poco menos prácticos porque no construido en boceto. Una vez que tengas descargas cocina, tú en tu iPhone. Asegúrate de que tu computadora y iPhone estén conectados a la misma red WiFi ahora vuelve a tu sketch, Fell y abierto. Esboza comida arriba en tu dispositivo. Deberías ver un rojo que aparece junto al icono del medio. Haga clic en él y seleccione su dispositivo. Si todo funcionaba bien, deberías ver ahora los fuerbordas aparecen por tu consejo. Ahora ya puedes, hermano. Ambos están deslizando en su dispositivo o seleccionando el arbol específico que desea mostrar en su boceto. Cinco. Es la mejor manera de ajustar el tamaño de tus teléfonos o ver cómo se ve realmente el color en la pantalla real. Todos los cambios que realices se actualizan en tiempo real. Por supuesto, donde vienes en ti para usar comida de captura. Pero si no eres drayd o si no quieres gastar $5 la mejor alternativa para bosquejar Mayo se llama vieira Review. Puedes descargar gratis en tu Mac directamente en este enlace. El android y IOS hasta nuestro gratis también. No funciona tan bien como Cógeme bien porque no mostrará tu diseño en tiempo real. Tienes que exportar PNG archivado y luego abrirlos en escala A para poder verlos en tu teléfono. Diviértete jugando con esta app en la siguiente lección se acercará para darle vida a esto .
13. Exportación de mesas de trabajo: en las lecciones de práctica. Hemos diseñado una app usando un EU licitado un limones. No es perfecto, pero es funcional, y eso es lo que más importa. En realidad, es más que suficiente para empezar a codificar. Entonces intentemos con el mundo, empezando con un desarrollador a desarrolladores, el tipo que estará codificando la app convirtiendo tu diseño de un prototipo a una app que la gente consigue en Jacquizz él es tu compañero en la codificación del crimen no es algo que cubramos en este curso . Se trata de un conjunto de habilidades completamente diferente. No obstante, es crucial que usted baja desarrollador para entender su diseño, y eso es en lo que trabajamos en esta lección. Si eres desarrollador, las cosas te serán más fáciles si no eres algún consejo sobre trabajar eficazmente con el desarrollador. Lo que importa ahora es ¿le encantó el futuro central de tu producto? Entonces no te pongas por declarado Si en la aplicación de trabajo e Icahn es un píxel contratado y esperado, estos son detalles estéticos que se pueden arreglar más adelante. Recuerda también, los desarrolladores son ingenieros, y realmente aprecian precisamente la comunicación en los límites. Si quieres que tu relación sea una pareja pacífica siempre debes recordar eso en esta parte del curso. Hemos diseñado la app usando solo elementos de IOS resultó. Todos esos elementos son de forma nativa. Incluido en el código X es un software de desarrollo utilizado para desarrollar los abs de Iowa. Esto significa que no tendrás que exportar los diferentes elementos que tu diseñador hizo del desarrollador. Sólo necesitamos ver cómo posicionas los elementos para recrear tu diseño en X. Bueno para mostrarle somos Onley nique exporta a diferentes pantallas. Entonces veamos cómo exportar fuera de borda antes de exportar en nuestro tablero, hay
que hacerlo exportable. Seleccione su se aburren haciendo clic en su nombre en su lienzo o directamente en la lista de capas , luego haga clic en la esquina inferior derecha para que sea explotable. Aparecerá instantáneamente una vista previa. Podrás elegir tu ex entre diferentes archivos de imagen porque también optan por multiplicar la resolución de su pantalla. Pero hablaremos de esto. Cuándo exportará elementos configurarlo en una X y PNG. Ahora puedes arrastrar y soltar directamente la vista previa en tu escritorio para exportarla. Seleccionar otro comentario fuera de borda, por ejemplos, hacerla exportable y exportarla. Ponga pantalla más antigua en una carpeta que nombrará a las pantallas de exportación. Ahora vuelve a bosquejar y selecciona todos los fueraborda excepto la pantalla de inicio y la
pantalla común . Seleccione el 1er 1 haciendo clic en su nombre en la lista de capas y luego haga clic en. Por qué sostener comentario Para agregar las otras dos selección, Hazlas Oh, exportable Ahora en la pantalla de inicio bajo pantalla común a tu selección, comprueba los pavos de color de fondo y mantén el color en blanco. Esto incluirá el fondo blanco en cada pantalla para que no se vean transparentes . Ahora que todos tus tableros son exportables, puedes decidir exportarlos todos esos. Para ello, haz clic en el icono de exportación en la esquina superior derecha de tu boceto. Esto te mostrará todos los elementos que se pueden exportar en tus archivos. Seleccione las que desea exportar y haga clic en Exportar. Selecciona la carpeta exportar capturas de pantalla que acabamos de crear. Esto actualizará automáticamente las pantallas en su última versión. Ahora puedes compartir esta carpeta con un desarrollador y empezar a codificar mientras se está
desarrollando Europa . Tienes tiempo para crear el icono, y eso es lo que vamos a hacer en la siguiente lección.
14. Diseño de iconos de aplicación v1: Oye, vamos Jefe de nuestra app se está desarrollando en este momento es la oportunidad perfecta para diseñar el ícono del Aún así el ícono representa tu app en la tienda APP y en la pantalla de inicio de tus clientes llenando. Es importante que sea consistente con la identidad de Europa y el estilo IOS, por lo que no se ve raro entre todos los demás iconos. Se quiere crear algo que sea simple. Eso fue claro para los usuarios que representarán tu app y destacarán en la
pantalla de inicio . Echemos un vistazo al icono del IOS. Son bastante sencillos. Gmail App Icon es un sobre. El reproductor de música. Un par de notas Encontrar un elemento gráfico que represente tu app es una buena manera de hacerlo en tu icono fresco y efectivo. Si quieres ser eficiente, lo más fácil de hacer es diseñar una Nikon siguiendo el ejemplo de Facebook el primero después del nombre de tu app con el frente derecho con tu color principal como fondo, y por eso vamos a hacer en esta carpeta de lecciones. Encontrarás un icono de línea de fuego, avaricia, plantilla. Nos ayudará a diseñar una Nikon que se hinche proporción. Entonces vámonos. El a bordo para iconos es un cuadrado apagado 1000 y 24 pixel por 1000 y 24. Pixel ahora dibuja un cuadrado para llenar este tablero fuera y tintado en el Instagram específico que Louis encontró antes. Si no aparece en tus muestras, Dakota es 125688 No te preocupes por las esquinas del caldo en este momento. Nos ocuparemos de eso más tarde. Ahora que tenemos, el fondo acabará de poner el primero después de nuestra arriba en los teléfonos adecuados. Insertar cubiertas, tipo
bloque. El más tarde yo en mayúscula decía el color en blanco y el tamaño en 900. Colócala en medio de tu fueraborda, dijo los huevos a 300 la Y a los 40. Eso podría ser suficiente, pero vamos a proxenetizar un poco. Nuestro ícono fue a sus fortalezas. Cheetos planos duplican tu capa de texto fue venir y ver y venir envidia en la posición blanca tipo más 30. Esto será a 30 pixel en la posición fuera de nuestra capa de texto, y lo haremos bajar 30 Pixel dicho. El transparencia de esta capa al 50%. Ahora tenemos que icono de fantasía, click
derecho en el otro nombre nacido y exportado. Puedes agregar este icono a tu envío de agin. Apple necesita una increíble cantidad de peleas con diferente tamaño. Por suerte, gente ya creó archivo para que podamos generar todo a la vez, y eso veremos más adelante. Si lo deseas, una versión de tu ícono estaba a la vuelta de la esquina es ponerlo en tu sitio web. Una tarjeta de visita o era suéter o un suéter que puedes perseguir así? Vuelve a tu archivo de jaula de iconos y copia el desplegado fuera de borda Carpeta oficial de codicia. En los Loyalistas, verás una capa llamada icono Borde seleccionada y la colocarás justo encima de tu fondo azul. Selecciona el color del campo con nuestro azul y desmarca la casilla del borde. Oculta fea para arrancar capas de fondo y todos los demás hombres abajo. Exporta tu a bordo y aquí tienes. Podrás pedir tu primer jefe de pegatinas. Este es el final de la primera parte del curso. Hemos pasado por lo antiguo de lo básico, y ahora estamos listos para tener una app en la tienda APP y empezar a ver qué está haciendo la tuya con ella. Enhorabuena en la segunda parte pasarán de estudiada, diseñada al diseño personalizado y crearán una app que realmente se vea bien. Vamos a profundizar en las características de boceto y convertirte en un maestro de bocetos. Hablaremos de tendencias de dos días y cómo quedarnos. Manténgase al día. Te enseñaré las mejores prácticas para ser eficiente y usar increíbles enchufes desarrollados por la comunidad de
sketch. Nos vemos del otro lado.
15. Parte 2 Proyecto: Está bien. Felicidades por terminar la segunda parte del curso. Espero que te divirtieras con aquí afuera y que disfrutes aprendiendo a bosquejar. Si lo tienes, no dudes en informarnos y dejarnos una reseña. Tu proyecto en esta parte de la clase es diseñar un ícono simple para que tu aplicación se encargue de diseñar las pantallas de tu flujo de funciones clave utilizando en la medida de lo posible elementos estándar de IOS. La idea es venir para el primer borrador lo más rápido posible para ver si funciona. Entonces sube dos o tres pantallas de tu flujo de funciones clave en lo que llamamos la V. La versión uno de tu app que pude en la tercera y última parte de este curso se sumergirá más profundamente en boceto diseño de funcionalidades avanzadas, mejores prácticas y muchas otras cosas emocionantes para llegar a un diseño personalizado para nuestra app. Entonces nos vemos en la tercera parte
Maxime C, Entrepreneur and Designer
