Transcripciones
1. Introducción: Hola y bienvenidos. Mi nombre es Anna Adición. Soy diseñador de UX con antecedentes de desarrollo de hechos. También soy un futuro en la cuota de habilidades, y en la clase de hoy, te
enseñaré el sketch up Basics. Sketch Up es una de las herramientas de diseño profesional más poderosas. Funciona con Mac y utiliza un flujo de trabajo completo basado en vectores Thea manzanas para todo tipo de creadores. Ya sea diseñador de productos, usted x ¿por qué diseñador de sitios web o una persona sin habilidades profesionales o especializadas? Al final de esta clase, podrás diseñar y crear prototipos utilizando boceto. También compartiré a la portada de la aplicación móvil deseos para su práctica e inspiración. Y aprendiste que algunas de las mejores prácticas de boceto funcionaban más eficazmente. Entonces vamos a saltar justo dentro. No puedo esperar a ver qué crea.
2. Tu proyecto y recursos de clase: en la clase de hoy, vamos a crear un diseño de APP móvil usando sketch. Entonces crearemos un prototipo usando esos diseños. Cuando estés listo, sube tu proyecto a la galería. Un proyecto estudiantil completo no debería ir. Las siguientes páginas de diseño en formato PNG o JPEG Portada squash me suavemente hacia fuera Páginas La página principal que la gente ve después de inscribirse. Necesitarás los siguientes recursos para esta clase. Aamodt, Berg y sketch up prueba gratuita de 30 días. Piensa en horno que quieras diseñar. Ni siquiera puedes escoger un existente y rediseñarlo. O podría usar el archivo de boceto que comparto para dar inicio a su proyecto. Para la inspiración del color, siéntete libre de usar mi tablero de humor de color personal en Pinterest, así que sigamos adelante y conozcamos boceto.
3. Waldo de la interfaz de bocetos: El interfaz del boceto es mínimo por diseño. El panel izquierdo muestra que todas las capas son tableros y páginas en el documento. La barra de herramientas a lo largo de la parte superior contiene todas las herramientas y acciones importantes inspector en el camino
correcto para ajustar las propiedades de las capas. último pero no menos importante, el químico en medio es donde verás tus diseños. Repasemos algunas de las herramientas y veamos cómo funcionan aquí. A la izquierda, podemos ver la primera página, cual fue creada por defecto. Para agregar una nueva página, simplemente
podemos hacer clic en este icono más. Podemos crear tantas páginas como no éramos,
y para quitar una página, y para quitar una página, simplemente
podemos hacer click derecho sobre ella y hacer clic en eliminar para empezar a diseñar algo que necesitamos nuestra manera portuaria puede insertar nuestro barco desde esta esquina superior izquierda, inserte nuestro puerto o simplemente presionando la letra A en el teclado. Cuando lo hacemos, podemos ver siempre opciones En el panel inspector, las de son antiguas plantillas pre hechas creadas por sketch para facilitar la elección de qué dispositivo diseñar
para él ya tiene. Todo el tamaño correcto es todo lo que necesitas hacer es solo rápido en el dispositivo con el que quieres trabajar, y creará un tablero de arte para ti. Puede seleccionar dispositivos Apple o dispositivos Android, tamaños de papel Web
responsive o personalizados. Otra forma de crear un tablero de arte personalizado es demasiado rápida en arrastre. De esta manera podemos ver lo que creó el primer puerto de salida Aquí. Podemos cambiar el nombre y cambiar el tamaño del aeropuerto. Podemos acudir al inspector e incluir nuevos números. El primer número W es para con y la edad es para la altura. Para cambiar la altura, no
puse un número diferente y simplemente presioné enter. Estos dos números en la tina son para posición del nuestro puerto, por lo que para cambiar la posición, podemos cambiar el número. Impresiona entrar. Ahora agreguemos un par de capas diferentes y juguemos con las herramientas para ver cómo funcionan a Adam Rectangle a nuestro tablero entre dos. Presione la letra R, luego rápido y arrastre para reprimir sobre Oh, y luego haga clic y arrastre de nuevo para presionar un círculo. Ah, y luego presiona shift, luego rápido y bebe o texto con la prensa mantener sólo escribe algo por defecto. Dice Escriba algo. Entonces vamos a cambiar las propiedades de nuestras formas en el panel inspector. Puedes cambiar el color de este círculo, y luego hagamos lo mismo por su hormigueo. Entonces coloquemos el círculo encima del rectángulo para practicar algunas de estas herramientas. Entonces cuando hacemos clic en el círculo, está seleccionado, y luego podemos usar esta herramienta al Senado hacia atrás. Haga clic atrás, trabajado y luego haga clic hacia adelante para traerlo de vuelta. También podemos agrupar formas juntas o editarlas tan rápido en ella y tirar de los bordes para crear un conflicto. Sacuda fuera de tu forma circular puede rápidamente, en
cualquier lugar del tablero de arte o presiona la edición terminada para salir de la carga de edición. Después podemos rotarlo, hacer clic en el rectángulo presionar shift y hacer clic en la nueva forma compleja y luego máscara rápida. Entonces de esta manera hemos creado nuestra máscara a partir de dos formas. Se puede jugar con las herramientas de la parte superior para ver cómo funcionan para algunos de ellos, como la vista previa de Claude o la exportación. Los vamos a usar más adelante en la clase, así que démosles por ahora, mi diseño de horario podría parecer un poco diferente. Por ejemplo, estos que vengo aquí podría faltar de tu interfaz. Y la razón es que tengo varios boceto enchufes instalados y proporcionan algunas
características adicionales . Eso es más mal boceto, y eso lo cubriré en una clase diferente. Entonces si notas algo así, no te confundas. Esta es la estructura básica del sketch no fue avanzar y empezar a diseñar nuestra app.
4. Parte 1: diseñar la página de la portada de la aplicación: para empezar a diseñar el up. Presionemos un para nuestro tablero y de las plantillas de la derecha, voy a elegir el exceso de iPhone. Vamos a renombrar el Se aburren haciendo doble clic aquí. No, necesitamos un retornable con el mismo tamaño, lo que si seleccionas el Arbour haciendo clic en él, puedes ver su talla. El con es 375 en la altura es 112. Entonces ahora vamos a presionar son para rectángulo, haga clic y arrastre, y luego eliminemos el falsificador y hagamos el tamaño exactamente igual que nuestro tablero. Por lo que fue 375 por 812. No, necesito alinearlo una línea del rectángulo con tablero ER por primera vez, haga clic aquí a Alanya horizontalmente, y luego haga clic aquí a Lenny verticalmente. Entonces necesito cambiar el color. Por lo que hago click en el color. Puedo elegir el color desde aquí, o puedo usar algunos de los colores que ya tengo en mi talento para agregar en tu color a tu unidad de apelación dos. Rápida este icono más aquí. Entonces voy a elegir esto más tranquilo y luego veo que hay diferentes estilos para los iraníes. Se probó esto y ver cómo funcionan. Voy a elegir este estilo y para cambiar el color duro hago clic en este círculo, luego bajar a mi paleta y escogí este color. Después da click en el círculo derecho cuando baje y escojo este color. Entonces ahora tengo es nota Crane int podría hacer cambios a esta genial Y arrastrando este borde del círculo dos ángulos diferentes lo voy a mantener así a partir de ahora para agregar impuesto,
vamos a presionar el té en el teclado y luego solo teclear el nombre de la APP es un local. Voy a dividir mi impuesto en dos partes. Por lo que selecciono este precio Comando ver y luego comando ser y luego cambiar y la tecla de flecha al movimiento. Y esta parte se va a diseñar. Entonces seleccioné y de nuevo usé un turno y Cherokee para moverlo. Seleccionemos ambas partes seleccionando la primera y luego presionando click afeitado y agrupando esas dos juntas. Puedes nombrarlo local para alinear esto perfectamente en el centro, en medio de la obra de arte. Al principio, presione esto para alinear horizontalmente y luego esto hacia Atlántico verticalmente. Entonces en este momento tengo mi diseño de página Splash último paso adelante y sigo diseñando la APP .
5. Parte 2: diseñar las páginas de inscripción: Demos click en la plataforma, enredado, luego doble clic en el nombre para renombrarlo y listo. Haga clic en el símbolo de creación para convertir el atrás en un símbolo. Presiona OK, y podemos ver que saber que este fondo es un símbolo. Pronto verás cómo podemos. Utilizamos el mismo elemento una y otra vez en nuestro diseño. Entonces vamos a dar click en el Are Your Name, luego presione moneda y comité para copiar el tablero de arte. Cambiemos el nombre de esta segunda página a la página dos, y ahora necesitamos mover el logotipo, y luego necesitamos redimensionarlo. Texto seleccionado y cambié el tamaño divertido del inspector. Tenemos que mover las segundas tarjetas ahora haga clic en el grupo de logotipos y nuevamente alinearlo horizontalmente. Entonces presentemos una T para texto. ¿ Y un impuesto? Voy a elegir una avenida frente diferente, y la ciencia del texto va a ser 24. Fui a un Linus perfectamente en medio de nuestra pizarra. Puedes seleccionar firma, diseñar un comando de prensa de piezas, ser para hacer un libro, y así ahora tenemos la segunda página de nuestra app. Vamos a dar click en el nombre nacen Pulse ven y C comando V dos viniendo de nuevo Nombramos
tablero er . Si no cambias el nombre del aeropuerto más tarde, cuando seas experto en tu mundo, él tendrá problemas porque incluso solo extra no funcionará una de esas de nuestras juntas. Entonces no, no vamos a crear la jaula de apuntes en la primera página. Necesitaremos el carril de palo de ropa plegable. Pulse comentario Ser para quitar la calvicie de los looks gravados colocando la última parte para crear una línea Presioné la letra l click y arrástrela aquí puedo cambiar la propiedad de mi línea haciendo blanco también quería estar perfectamente en el centro Incluya aquí. No, quiero crear un botón así que presiono Oh, y shift click Indrek quitó un borde haciendo ahora mismo Aquí necesitamos un poco de sombra porque eso es demasiado. Entonces hagamos un par de cambios aquí. Creo que se ve genial. Entonces x cero y cero en este solo uno y desenfoque. No, necesito colocar un icono sobre mi botón para agregar un icono. Voy al conocido proyecto Que estafa en ese ataque siguiente trae toneladas de diferentes próximos psicópata. Voy a escoger este, y puedo arrastrarlo y soltarlo en mi archivo de boceto. Escojamos el tamaño para asegurarnos de que esté perfectamente en el centro del círculo. Entonces deja que tanto el círculo en el ícono como luego la línea que toriza vertical y horizontalmente y luego así, como la flecha solo vaya a la sección final en el inspector y use el color se ve bien. Entonces ahora quiero mostrarles cómo en realidad puede usar nuestro símbolo que creamos previamente. Por lo que es doble clic en el fondo, que es nuestro símbolo. Digamos, si quiero cambiar mi color de fondo, no
lo vuelvo a mirar, y entro en el estado de ánimo de edición. Por lo que aquí puedo seleccionar un color diferente. No, volvamos a ver qué pasó. Como podemos ver en todos nuestros tableros son el color de fondo ha cambiado, por lo que este es el poder del símbolo. Si tienes, digamos decenas de páginas diferentes, no
tienes que dedicar tiempo a cambiar el color de fondo o cualquier otro elemento una y
otra vez. Simplemente puedes hacerlo en un solo símbolo y eso es genial. No quiero volver a mis colores anteriores, así que aquí los voy a cambiar. Abajo y lo grandioso de los bocetos. También puedes agregar a tus creadores como globales. Por lo que como puedes ver, al hacer click en este ícono plus, estos exactos mismos geniales y se sumarán a tu paladar y podrás reutilizarlo en cualquier otro proyecto. No, Vamos a crear otro símbolo para hacer nuestro mundo más rápido. Entonces cuando un grupo este dos juntos, Pero voy a necesitar en el campo de formulario de grupo, luego voy a crear un símbolo puedo hacer clic aquí o puedo hacer un clic derecho y crea un movimiento . A partir de ahí voy a mantener el nombre vendido donde me sentía. No, vamos a copiar y pegar este tablero de arte. Vamos a nombrar a esto nuestro tablero h cuatro. No, Como puedo ver, la estructura es prácticamente la misma. Pero quiero un texto diferente que escribas. Entonces lo que hago porque es un símbolo, hago clic en él. Y aquí en mi Inspector Pano, puedo cambiar el valor. Lo que hago es solo escribir beaming. Presionar enter. Este es el poder del símbolo fue copiar y pegar de nuevo. Esta es la Página cinco en esta. Esta va a ser toda contraseña. Añadamos también ataques, más términos y condiciones. Volvamos a este tablero de arte y tecleemos algo como mi hijo. Ya lo sabes. Usted está de acuerdo. Teoh visto comisiones? No. Hagamos de este impuesto el tamaño fijo y luego cambiamos el servicio. Tú. Vamos a cambiar el tamaño de la fuente y hacer unos píxeles de Tim. Hagámoslo centrado y alineémonos en el centro. Simplemente cópianos y péguanos en nuestros propios tableros. De acuerdo, entonces vamos a crear el siguiente fueraborda. A los mejores números les gusta. Confirmar contraseña. Es permitirte hacer solo cambiar el año de texto, está
bien. Parece que la manera se han inscrito todas las edades. Entonces nuestro siguiente paso es diseñar una página que la gente vea después de configurar
6. Parte 3: diseñar la página final: No creemos la página principal que ven los usuarios después de que se inscriban rápidamente en este tablero de arte. Comenzar Ver para copiar comando, ser para pegar. Persigue el nombre del aeropuerto a cebo. Siete. Quitemos algunas de las partes que no necesitamos. Cambiemos de tamaño para que el rectángulo de fondo lo use como forma de encabezado. También es necesario cambiar el tamaño local. Seleccione partes de lobo del texto y cambió el tamaño del teléfono también 40. Entonces movamos la parte inferior para alinearla correctamente. Seleccione el grupo de logotipos moviéndose hacia arriba y luego un rayo en el centro del rectángulo. Ahora vamos a crear la comida. Er, copia el fondo con enredo. Oye, lugar y de verdad al fondo. Ha cambiado el tamaño, y puedo sentir que Graydon no se ve muy bien aquí. Entonces, separémoslo del símbolo y creemos un stand diferente para él. Entonces vamos al campo en lugar de genial, y selecciono este primer círculo, que es de un solo color. Después hago clic en el cuentagotas a Teoh, escojo un color y selecciono este. Bueno, este va a ser mi pie de página ahora. Necesitamos algunos iconos para el Pie de página. Asumamos que aquí tenemos tres categorías. Galería de ayuda en perfil. Entonces vuelve al non proyecto. En primer lugar me oleaje galería. Veamos qué tenemos. Voy a escoger éste y luego ayudar. Escojamos este en el siguiente perfil. Estoy tratando de usar iconos que son idénticos en su estilo. Probemos este. Ahora vamos a seleccionar todo esto por autos. Cambie el tamaño a 55 píxeles y luego descanse campo y use el color. No, necesito alinear esto. Entonces vayamos a las herramientas de alineación de forma rápida, esta última para alinearla desde abajo y luego alinear el espacio entre ellas. Una vez que hago esto, puedo presionar el comando G para agrupar estos iconos en un solo grupo. Le renombro dos iconos de pie de página y hago clic en la herramienta de alineación media para asegurarme de que esté perfectamente en el centro de la comida. Er entonces ayuno en la comida o rectángulo presiono shift y selecciono este grupo y hago clic en la otra alineación para asegurarme de que esté alineado verticalmente en el pie de página. Ahora vamos a crear las principales categorías de nuestra aplicación supongo que esta aplicación es para decidir cosas diferentes como banners, iconos,
patrones, patrones, logotipos, etcétera. Entonces vamos a crear esas categorías. Prensa son para rectángulo eliminado la cena pobre haga clic en el color del campo. Rob la herramienta cuentagotas en recogió este color muy superior del cenador al lado de ella. Alinémoslo en el centro, y luego queremos a Teoh. Coloque un texto sobre él. Por lo que Presti en derecho han diseñado. Quiero cambiar la cara de la fuente a Aven ER y también cambió el estilo demasiado pesado. También cambiemos el tamaño de fuente a 24. Selecciona una semana turno de prensa de tango. Seleccione el texto en una línea que verticalmente. No, seleccionemos un rectángulo y quesemos el radio para obtener esquinas redondeadas y luego presione shift . Entonces, al
igual que el texto y copiar esos dos perdura. El 2do 1 va a ser mejor señal. Vamos a cortar el cebo de nuevo en este está diseñado. La siguiente categoría es diseño de iconos y diseño local. Por lo que para el segundo con 10 bajos, voy a escoger un color diferente tratando de crear el mismo grand. Esto se enredaría. Sí, toma el recolector de color y elige el color. No, vamos a seleccionar las capas de texto. Conoces estas categorías y las alineó a la izquierda haciendo clic en la alineación izquierda. No, queremos sumar algunos motoristas para que sea visualmente más atractivo. Volvamos al non proyecto en Lo primero es que el diseño de sitios web fue diseñar. Echemos este ícono para que el siguiente esté planeando
mejor el diseño porque voy a escoger éste. Lo siguiente es el diseño de patrones por el bien del tiempo. No escojo los iconos perfectos. Veamos qué tenemos para el diseño de iconos. Estoy tratando de escoger iconos que sean idénticos en estilo. No tenemos muchas opciones para que no pudiera diseñar, creo. De acuerdo, vamos a este. Y Leslie. Diseño local. Bueno, diseño
local. Escojamos este. Ahora vamos a seleccionar todos estos iconos y cambiar el tamaño para rectificar píxeles. Y luego alinémoslos a la derecha. siguiente paso es hacer clic en el campo y cambiar el color a blanco o cualquier color que funcione para ti. Por lo que ahora podemos ver que se ve mejor con los ICO. Bueno, quiero que sea una carga. Un poco más pequeño, tal vez 50 píxeles en Lo último que queríamos es asegurarnos de que cada uno de los iconos esté alineado en medio de ese rectángulo. Entonces seleccione un rectángulo, haga clic en el icono y alinéelo en línea al medio y haga esto por cada uno de ellos. Ahora tenemos nuestra página lista. No vamos a diseñar toda la aplicación porque tomaría mucho más tiempo. Pero ojalá esto fuera suficiente para que entiendas cómo funciona el boceto. Por lo que nuestro siguiente paso es utilizar esta página es crear un prototipo.
7. Parte 4: prototipos: antes de crear prototipos. Quiero mostrarte cómo puedes explorar tu trabajo rápido en las cámaras y arrastrar para seleccionar todos tus puertos y luego hacer rápido exportable a la derecha. Ves estos patrones sobre nuestra pizarra. Significa que el fondo es transparente. Demuestra tener un fondo blanco, pero cuando
sea experto, va a ser transparente. Por lo que seleccionamos Bagram color y verificamos incluir en experto. Esto asegurará que no sea transparente, pero en realidad es blanco, por lo que puedes escoria y luego hacer clic en experto en la esquina superior derecha. Y si haces clic en experto, podrás exportar tu trabajo a PNG. Aquí, puedes seleccionar un formato al que quieras un experto. Se puede panned. Tú J pack eran diferentes. ¿ Quieres crear un prototipo click en el arte para eso? Se quiere empezar con y luego colocarle un punto caliente. Edad de prensa. Haga clic y arrastre el área que desee un rápido encendido, y cuando lo haga, tendrá esto lo oigo. Si haces click en él, podrás ver todas las páginas así que selecciona la página a la que quieres navegar. A partir de este punto este caso, es Página dos otra vez con edad de prensa y poner un punto caliente en el apunte, que va a ser un enlace a esta página siguiente. A continuación, coloque un hot spot en la tercera página a la siguiente en la misma cosa para otras páginas. No, veamos cómo funciona este prototipo. Rápido en el primero, nuestro tablero que iniciaste, qué y luego como vista previa para ver con un prototipo y vamos a probar. Como podemos ver, funciona de acuerdo a los puntos calientes que pudimos. También puedes subir tu trabajo a la nube de bocetos y compartirlo con el resto de tu equipo.
8. Reflexiones finales: Muchísimas gracias por llevarte esto. Además espero que lo hayan disfrutado. No dudes en llegar hasta mí si tienes alguna pregunta o comentario. Empleado, comparte tu proyecto en la galería de esta casa. No puedo esperar a ver su trabajo.
Anna Avetisyan, UX Designer, UI Artist w/CS background
