Marca y diseño web: crea un lenguaje visual desde cero

1. Introducción: Hola, ¿cómo va? Me llamo Tariq Usama, diseñador visual y mi director de Barcelona. Trabajo en su mayoría a través de proyectos digitales e interactivos y también diseño de marca. Pensé que eso es lo que podríamos estar haciendo hoy. Si eres estudiante, tal vez te estés preguntando ¿hacia quién está orientada la clase? Yo no diría que es para el total de principiantes. Voy a estar cubriendo mucho contenido y no podré cubrirlo todo a fondo. Está más orientado a jóvenes profesionales del diseño y directores de arte que están dispuestos a conseguir algunos nuevos trucos e inspiración. Cuando se trata del software, utilizaré principalmente Photoshop, Illustrator y after effects porque estaremos también animando el logo. Te recomiendo que tengas listo tu Adobe CC. Sí, qué esperar para el final de la clase, probablemente deberías poder crear tu propio logotipo geométrico, estará haciendo eso encima de nuestra cuadrícula. Al mismo tiempo, deberías estar recibiendo un montón de ideas nuevas y frescas sobre cómo abordar un proyecto web utilizando tecnologías web modernas como WebGL. Déjame hablar del cliente con el que voy a estar trabajando. Se llama Juguetes Pagados. Es marca natural de Barcelona y diseñan este tipo de chicos. Ves, tienen un montón de diseños que los crean en un software 3D. El objetivo es que quieren venderlos para que los clientes realmente puedan personalizarlos para que los vendan en blanco al igual que éste. Entonces el cliente debería poder pintarlos como desee. Al igual que este ejemplo. O incluso este otro tipo de aquí. Es un proyecto bastante cool así que espero que te sientas igual y estés dispuesto a unirte a mí en esta clase. Vamos por ello. 2. Logo de arte y bocetos: Empecemos estas lecciones. Empezaré con el logo. En primer lugar, aquí te recomendaría hablar con tu cliente sobre lo que tiene en mente. Esto es sumamente importante. No quieres empezar a diseñar algo que pudiera terminar siendo brillante, pero no tiene nada que ver con lo que él o ella tienen en mente. Entonces ese es un primer paso importante. Ya lo hice. El único requisito fue que el logotipo de alguna manera se ve japonés. Japón es donde comenzó la palabra de los movimientos [inaudibles], así que esa es la conexión que quería. Fue un breve bastante abierto para mí, que me gustó bastante. Por lo que armé algunas ideas en Mood Board de las que voy a hablar ahora mismo. Oye, así que déjame mostrarte el Mood Board que ya le he mostrado al cliente. Lo que estoy tratando de hacer aquí es crear de alguna manera un logotipo que se vea japonés. Eso se parece casi al kanji japonés. Ahí es cuando estaré usando estas formas geométricas y este color, estoy hablando del rojo aquí, que viene de la bandera japonesa. Casi enseguida te lleva a Japón. En realidad, la idea vino del logotipo único. Lo que me gusta aquí es que tiene forma en un cuadrado, casi pareciendo una etiqueta y eso es algo que creo que debería poder replicar en el nuevo diseño. Pocas otras cosas que me han gustado de estas imágenes, por ejemplo, ésta, los bordes afilados y lo mínimo que es lo hace muy moderno en mi opinión. Entonces veremos un par de piezas halagadoras aquí. Este a la parte superior izquierda, me gusta mucho porque sigue siendo muy legible. El de la derecha no es tanto y eso es algo que necesitamos ser extremadamente cuidadosos con nuestros logotipos ya que no es pieza de letras y será nuestra marca, por lo que necesita ser súper confiable. Oye, así que estaba empezando a bosquejar cómo podría verse este logotipo. Estoy usando un bloc de notas de checker, que viene muy útil por lo que ya puedo usar una cuadrícula en mi boceto. También estoy usando un marcador en lugar de lápiz, así que en realidad se llega a ver lo que estoy diseñando. Esto es súper rudo, solo lo volveré a hacer para que entiendas mi idea. Básicamente lo que quiero hacer es usar de alguna manera las letras de pago la p, la e, y la i y colocarlas dentro de una plaza para que parezca un kanji japonés. Empezaré, muy rudo. Apenas con la P, algo así. Todavía no voy a cerrar la P. Ya verás por qué más tarde. Voy a usar este espacio debajo de la P para colocar a los otros dos personajes. Esta sería la E y la I a su lado derecho. Ahora déjame terminar este P. Más o menos esa es la idea de la que estaba hablando de generar esta plaza que parece un kanji de lejos. Ya tenemos nuestro logo. Probablemente lo haré más tarde al digitalizar, pero tendremos que escribir lo que está permitida esta marca. Algo así como, son juguetes justo debajo. Sí, creo que eso va a funcionar. Entonces déjame volver a mi computadora. Chicos [inaudibles]. 3. Logo | digitación y variaciones: Digitalicemos este logotipo, lo haré en Illustrator así que vamos a crear un nuevo documento. Por ejemplo, 600 por 600 cualquier cosa que te sientas cómodo trabajando, eso debería ser RGB. Yo lo abriré. Aquí lo que probablemente deberíamos hacer primero, es ir a las preferencias y a las guías y cuadrícula, y configurar tu cuadrícula, que puedas acoplarte a ella y crear el logotipo geométrico del que hemos estado hablando. Puse en yo una línea de cuadrícula cada 100 píxeles con subdivisiones de ocho que probablemente debería funcionar para ti también. Voy a hacer clic en “On” y luego esto necesita ser mostrado, así que mostrar cuadrícula, puedes usar atajos a eso, recomiendo aprender los atajos tanto como sea posible. Entonces necesitas ir a ver snap to grid. Esto es muy importante, así que sea cual sea la forma que dibujarías broches a través de tu cuadrícula, al igual que esas. A ver a qué me refiero. Tenemos el documento todo configurado podemos empezar a reproducir el boceto con él hace un tiempo. Volveré a empezar con B. Así y luego podemos ir por la E, así que más o menos, eso será lo que hemos hecho antes. Las cosas resultan ser demasiado anchas, demasiados espaciados aquí así que me tiraré hacia abajo. Eso ya se ve bonito, bastante parecido. A lo mejor es tener demasiado horizontal, algo así, creo que va a funcionar más bien. Bien, entonces ya creamos el PEI, el P-E-I. Ahora, como mencioné antes durante el tablero de humor, estaría bien colocarlo de alguna manera dentro de una etiqueta así que voy a dibujar un cuadrado alrededor de ella, algo así que voy a cortar y pegar en la parte posterior de la misma. Voy a cambiar los colores del PEI. Algo así, por lo que ahora está incrustado. Creo que probablemente necesito más espacio entre los personajes y el y el borde de la etiqueta. Algo así debería funcionar. Voy a hacer algo de espacio aquí que en la parte inferior para colocar los juguetes de arte como lo hemos hecho antes. Aquí voy a escribir Art Toys. Puedes elegir cualquier tipo que te guste, creo que iré por lo [inaudible]. mejor el GT America que tengo mucho peso, así puedo ver lo que funciona mejor. Creo que el audaz extendido sería genial para eso. Voy a abrir el rastreo. Algo así tal vez, creo que debería. A lo mejor se puede trabajar con menos rastreo para que encaje en las rejillas. Di algo como esto. Creo que eso funciona. Entonces pensando en el color, hemos mencionado antes el rojo, así que voy a poner este rojo, he seleccionado sombra de rojo hace un tiempo. A ver si puedo tirarlo hacia atrás. Ya no está aquí. Bueno, olvídalo. Simplemente voy a usar un rojo como solo para el ejercicio. Estoy haciendo esto bastante rápido. Voy a trabajar en rectángulo secundario a continuación para la elección, así que voy a copiar, pegar en este. Este voy a hacer negro por lo que entonces la elección de arte en su interior necesita ser blanca. Esto está empezando a parecer que estamos llegando a algún lugar. Tengo demasiado espacio justo debajo de los personajes, así que arreglaré eso. En realidad creo que tengo demasiado espacio en los bordes. De todos modos, así que quizá debería, bien hecho. Ampliaré el tipo porque creo que eso ya está funcionando. Ahora me centraré en arreglar el espaciado así. Creo que ese es nuestro logo. lo mejor me parece un poco plano, así que intentaré colocarlo en alguna sombra plana justo detrás del P-E-I y ver qué pasa. Se tira hacia atrás el acordado utilizar la herramienta Pluma algo como esto, para crear la forma. Ahora lo jalo al fondo o espero haberlo hecho bien creo. Déjame trabajar primero en el rojo para que esté un poco más oscuro. Algo así funcionará. Ahora selecciono ambas formas y más allá abajo, así que, creo que incluso podría ser un poco más oscuro, algo así empezando a parecerse a un bonito logo. Déjame afinarlo un poco pero creo que con esto estamos bien para ir a la siguiente parte de la lección. Ahora que tenemos este primer acercamiento a nuestro logotipo, hay algunas cosas que debemos tomar en consideración, pocas variaciones del mismo. ¿ Cómo se va a comportar esto para impresión, para online? ¿ Cómo va a funcionar sólo para una tinta sobre positivo, negativo, forzar más formatos como un montón de cosas a tomar en consideración a la hora de branding. También hoy en día estamos llegando a ver más identidades dinámicas que se están convirtiendo en parte de un sistema, incluso receptivas para que lo esté haciendo un poco más complejo, pero definitivamente mucha diversión. Voy a estar recuperando parte de ella ahora. Voy a limpiar un poco este logo así que en realidad está listo para imprimir. En primer lugar, lo voy a convertir a CMYK. Puedo hacer eso desde el modo de color del documento de archivo , color CMYK, bueno, por lo que sería un primer paso esencial. Entonces lo que voy a hacer, tengo estos caracteres P-E-I que en realidad están agravados por varios rectángulos. Yo quiero que esto sea solo uno, así que uniré esto usando el Pathfinder. Entonces no quiero que estos dos colores rojos se peguen entre sí, así que voy a copiar este, voy a dividir este rojo, así que sólo tenemos esta forma y la voy a pegar de nuevo. Ahora sí tenemos dos rojos aislados. Haré lo mismo con este tipo de aquí, cual dividiré aquí usando nuevamente el Pathfinder y luego solo recogeré el logo de pago y lo pondré encima. Lo cortaré y lo pegaré al frente y luego haré lo mismo con esta forma aquí, lo dividiré así, vea. Ahora este logotipo está listo para imprimir. Déjame ahora abordar algunas de las variaciones del logotipo que hice cuatro opción de pago. Este es el logo que ya has visto, ese es el predeterminado, y es el que estoy animando al cliente a usar todo lo que pueda. Pero claro, si tal vez quieras usar este encima de un fondo muy oscuro, tal vez vayas a perder esta caja negra aquí. En realidad podría querer usar algo como esto, ese es el logotipo negativo en una tinta. Cualquier bajaría necesita trabajar en una sola tinta, diría tanto en positivo como en negativo. Es posible que desee darle flexibilidad a su cliente sobre cómo usar el logotipo en varias aplicaciones. A lo mejor quiere usarlo como marca de agua, eso es algo que en realidad podría funcionar mejor. Logo también podría funcionar para pequeños formatos, como en el avatar social es un simulacro de cómo podría ser su Instagram. En este caso, perderíamos la elección de arte por debajo de la paga, sólo porque se va a poner demasiado pequeño para ser legible en la línea de tiempo de Instagram, así que eso es algo a tener en cuenta también. Por último, que voy a estar cubriendo en la siguiente lección, podríamos incluso animar este logotipo para darle como simplemente más riqueza a él. Eso es lo que estaré cubriendo en la siguiente lección. Quédate conmigo. 4. Trucos de animación de animación de |: Bien, así que animemos este logo. Sigo en Illustrator. Lo que voy a hacer primero es preparar el archivo para la animación. Hago animación en After Effects. Verás que eso sucede en un rato. En primer lugar, quería que estos personajes se separaran individualmente en diferentes capas, eso es lo que se ve aquí. Tengo todas las p bajo un color, tengo todas las e's bajo otro color. A ver si le quito algo. Esto te va a permitir tener más versatilidad cuando saltas a After Effects para animar. Hagámoslo. Me mudo a After Effects. Subiré el archivo que acabamos de ver aquí. Puedes subirla como composición, eso debería ser mejor en este caso, así que déjame entrar en ella. Aquí puedes ver todas las capas. Lo que quieres hacer ahora es convertir todas estas capas de Illustrator en capas de formas. Esto te dará más versatilidad para animar. Vas a poder usar algunos plug-ins de los que voy a estar hablando más adelante. Si realmente haces esta pestaña, deberías poder colocar en algunos trazos, gradientes, así que eso es en realidad una necesidad aquí. ¿ Cómo voy a convertir estos en capas de forma? Yo los selecciono todos, sí hago clic derecho, y luego vas a Crear, Crear formas a partir de capa vectorial. Ves, tienes todas esas capas duplicadas. Ahora lo que voy a hacer es deshacerme de las viejas capas ilustradoras así. Yo los borro, así que tengo lo mismo, pero como capas de forma. A continuación, esto es probablemente un poco demasiado pequeño. Este 100 por ciento es la resolución en la que estaba trabajando Illustrator, así que creo que me sentiré más cómodo si lo hago doble tamaño. Para hacer eso, que todas las capas crezcan al mismo tiempo, voy a usar un nuevo objeto. Voy a ir a Capa, Nuevo, Nuevo Objeto. Ya ve, acaba de llegar a la cima de ella. Entonces voy a seleccionar todas las capas, y voy a usar esta espiral aquí y conducirla poder pararla al nuevo objeto así. Ahora debería poder transformar todas estas capas al 200 por ciento en conjunto. Exactamente, así como eso. Ahora solo voy a abrir el marco, creo que voy a usar los 1920 y 1080, así que formato amigable con video, color de fondo blanco igual que este. Esta es la forma en que se configura esto para iniciar la animación. Ya he animado este logo. Simplemente pasaré muy rápido por cómo hice eso y cuál fue la idea detrás de él. Básicamente, solo quería tenerlo creciendo de 0-100. Entonces quería que apareciera este personaje y este azulejo inferior con los Art Toys rebotando hasta el final. Te lo tocaré un segundo. Se verá algo así. ¿ Ver? Por supuesto, esto no sucedió de inmediato. He probado varias iteraciones, así que creo que deberías hacer lo mismo. Yo quería que fuera realmente rápido, que sucediera dentro de tres segundos máximo, así que estoy bastante contento con el resultado. No tengo tiempo suficiente para pasar por todo eso, pero te puedo dar algunos consejos que en realidad podrían ser útiles. Uno de ellos, es simplemente muy sencillo. Se trata de usar colores a los que el personaje pertenece cada capa. Eso es muy práctico y es muy visual, por lo que facilita la animación. Eso es algo que hice aquí con todos esos colores. Entonces voy a hablar de un gran plug-in. Se llama el Mt. Mograph Motion_2, tu wingman de animación. Básicamente, lo que te permite hacer, lo pondré desde el menú, es trabajar en el is-ing, el is--in, est-out, para que no tengas que usar el valor predeterminado After Effects, pero en realidad puedes trabajar en algo más elaborado. No la he estado usando desde hace tanto tiempo, pero ya estoy enamorada de ella. Por ejemplo, aquí en el texto sobre este azulejo negro, lo he estado usando como un is-in y est-out, pero así creo que he usado esta excita o salto. No me acuerdo por el momento, pero sólo dale una oportunidad. Permite obtener más riqueza y detalle en la animación. lo mejor sólo puedo agarrar esta composición y la voy a precomponer, porque ahora sólo se ve entrando, pero me gustaría que también saliera. Por supuesto, no necesitas animarlo todo de nuevo. Algo bueno sería precomponerlo, así que vamos a llamar a esto IN y luego vamos a duplicarlo Control-C, Control-V. Voy a renombrar eso, voy a llamar a eso OUT. Voy a hacer esta composición en lugar de tres segundos, seis. Simplemente lo deslizaré hasta el final. Ahora lo que tendrás que hacer es hacer clic derecho en la composición OUT, ir a Time and just Time-Reverse Layer. Creo que eso debería funcionar. Veamos cómo funciona eso. Spot on. Ahora lo tenemos entrando y saliendo con muy poco esfuerzo. Por fin quería hablar de movimiento del cuerpo. Esta es una extensión After Effects que básicamente te permitirá exportar tu animación a un formato web como una animación SVG. Lo puedes encontrar bajo esta URL. Yo lo uso mucho y de verdad lo recomiendo si animas cosas que terminarán en la web. De vuelta a nuestro proyecto, estaba pensando que podríamos usar esta animación de logotipo como precargador de tres segundos. Queremos que esto no sea pesado, así que es bueno para el rendimiento y ese cuerpo en movimiento, nos va a permitir hacer eso. ¿ Cómo lo vamos a utilizar? El primer paso sería hacer este lienzo más pequeño, probablemente porque es demasiado grande. Veamos cómo funciona eso. Eso ya debería ser mejor. Abriré el cuerpo moviéndose el cual puedes encontrar en Ventana, Extensiones, Movimiento de Cuerpo. Aquí está, a ver si se carga. Nuestra composición, ya es la seleccionada, que es el precargador. Aquí puedes elegir tu configuración. En este caso, basta con tener una demo. Todo lo que quiero es un HTML para mostrarte cómo se verá esto en línea. Si estás trabajando con etiquetas, es posible que quieras hacer clic en Glifos también o en cualquier otro ajuste. Pero en este caso, eso debería ser suficiente. Voy a dar click en “Seguro”. Asegúrate de tener al jugador, ya lo tengo, y esa es la carpeta de destino. Estos archivos terminarán en realidad en mi escritorio. Daré click en “Render”. Esto es súper rápido. Ya hecho. Déjame ir a mi escritorio a ver si los encontramos. Aquí están. Ese es el demo.html y el data.json. Ahora abriré esta demo para ti. Este logotipo en el que hemos estado trabajando, ya es código, así que podríamos usarlo de inmediato. Tiene un precargador, claro que es más pequeño. Es así como funciona el movimiento del cuerpo. Espero que le des una oportunidad. 5. Dirección de arte interactivo: Bien. Empecemos con la segunda parte de esta lección, que se centrará principalmente en el diseño web. Aquí lo que queremos hacer es crear un nuevo lenguaje visual desde cero. PEI Toys, es nueva marca, por lo que no tienen nada a la hora de tipografía, color, layout por lo que tendremos total libertad para crear eso y vamos a estar haciendo esto usando la web, principalmente diseñando para escritorio. No tengo tiempo, me da miedo diseñar para móvil en este momento. Pero por supuesto, hay algunos pensamientos que ya deberías tener en cuenta en tu flujo de diseño para todo el responsive. Esta comunicación visual debería funcionar para la web, pero al mismo tiempo, podría funcionar para un nuevo catálogo o para algunas publicaciones en redes sociales o para alguna estacionaria. Entonces empecemos con esta web y tal vez en nuestra segunda fase, incluso podemos ser capaces de diseñar más cosas. También me gustaría hablar de las oportunidades creativas que nos trae este proyecto. Los juguetes han sido diseñados en Cinema 4D, que es un software 3D. Entonces sí tenemos la masa como tres piezas. Cada juguete está compuesto por tres piezas que podemos exportar como un OBJ o cualquier otro formato que podamos implementar en un navegador web. Lo vamos a hacer usando WebGL, que es una biblioteca JavaScript que te permite crear e implementar gráficos 3D en tu navegador. Entonces empecemos con algunos ejercicios de dirección. Es así como normalmente iniciaría mi proceso. El modo en que iniciaría un proyecto como este es con un documento en blanco que empezaría a rellenar con todas las ideas, diseño visual UX, tipografía, ideas interactivas, algunas referencias. Empezaría a estructurarlo y esto terminará eventualmente como una presentación que podría mostrarle a mi cliente. Entonces aquí está este documento que ya rellené y más viejo un poco. Podemos pasar muy rápidamente por algo de ello. En primer lugar, traté de estructurar el sitio web y cómo se vería eso en el menú. Por lo que tendremos seis páginas, incluyendo la página de inicio. Segundo serán los juguetes. El tercero serían los juguetes de largometrajes artistas, que llamaremos colecciones y luego tendremos la divertida galería donde el usuario podrá enviar los juguetes que han personalizado. Después tenemos la página sobre y la página de contacto. Quizás podamos echar un vistazo a algunas de las ideas creativas que tengo para esta web. En el aterrizaje, por ejemplo, que debería ser un aterrizaje dinámico para que el cliente pueda seguir actualizando la imagen si entra como una nueva colección, por ejemplo. Podemos tener un h1 que podría ser interactivo y podríamos usar fuente variable para eso. Sólo voy a mostrar un ejemplo de lo que quiero decir. Entonces esa es una fuente variable interactiva. Ya ves si voy de izquierda a derecha, cambia la forma. En mi caso, creo que cambiaría el peso, por lo que pasaría de ligero a negro, muy probablemente. Creo que esto debería ser divertido. En algún momento de la página de inicio, creo que va a ser bastante genial ya que esos han sido diseñados en 3D para exportar la secuencia PNG para que lo confirmáramos con un pergamino. Simplemente tengo una referencia para eso creo que va a ser mucho más fácil de entender. Simplemente agregará algo de riqueza a este sitio. Ves, me estoy desplazando hacia abajo, esa es probablemente una secuencia PNG y sobre todo esta parte, me gusta que sigas desplazando pero las páginas están ahí pegadas y solo lo ves cambiando. Por supuesto que deberían ser 60 cuadros por segundo y necesitamos ver si los desarrolladores, si es viable o no en cuanto al rendimiento. A lo mejor debería saltar a la página del producto, que será el lugar donde exhibir los juguetes principales, los juguetes en blanco, los juguetes que aún no han sido personalizados por ningún artista. Entonces aquí lo que haremos es usar WebGL ya que estos juguetes se han ido creando en 3D y cada juguete tendrá estas tres piezas de las que estaba hablando. Podremos como usuario dar vueltas a estos juguetes en 360 y cambiar de juguete a juguete usando algunas transiciones agradables. Tengo algunas ideas aquí que en realidad podrían funcionar también. Déjame abrir. Esto sería para la transición del juguete, que me gusta bastante que esté bastante sin fisuras al igual que estas referencias, no necesitamos que el juguete desaparezca del lado arriba de la página o de cualquiera de los dos lados. Simplemente puede suceder como a la perfección en el marco, así como esto. Creo que eso va a ser bastante guay. Entonces podríamos agregar algunos efectos. Es esta página súper enfriada. Apenas algunos efectos, efecto de cámara encima de los juguetes, solo algunos efectos interactivos para agregarle algo de riqueza. Incluso en la transición de juguete a juguete, podríamos usar algunos problemas. Estaba mirando este photomosh.com que es super cool. Es bien una plataforma basada en WebGL. Entonces aquí puedo elegir alguna imagen justo como ejemplo y puedo datarlo mosh de varias maneras. Ve éste por ejemplo, me gusta bastante. Quizás eso podría ser un comienzo para nuestra transición, en realidad puedes ajustarla de la forma en que es mejor. Eso es por supuesto algo que vamos a clavar con los desarrolladores al final del proceso. Pero es bueno antes de empezar realmente la fase de desarrollo que ya sepan lo que me gustaría hacer. Entonces quizá pueda hablar un poco tipografía ya que creo que esta página tendrá algunos. Yo creé, bueno, no es una [inaudible] todavía, es más una carpeta de cosas que me gustan. Estaba pensando en un h1 usando algunas características de tipografía condensada bastante débiles como estas o incluso más como estas. El otro probablemente sea demasiado extremo. También me gusta este efecto de angustia, esta textura dentro de la tipografía. Entonces creo que eso realmente va a funcionar muy bien para los títulos. Esto es lo que quise decir con las fuentes variables con el peso creciente. Entonces para el resto de la topografía, bueno no para la copia corporal, pero tendré algunos pequeños subtítulos. He estado mirando algunas referencias donde estos pequeños subtítulos están realmente repartidos, como aquí en el lado izquierdo. Están realmente repartidos uno de otro o incluso aquí como tener estos pequeños tipos y solo algunos HUD repartidos por toda la página. A mí me gusta esto. Creo que les da ventaja tecnológica que necesitamos para este proyecto. Incluso algo como estos, pequeña tipografía en estos pequeños detalles que simplemente lo hacen un poco más atrevido. Lo mismo aquí. Yo también he estado recogiendo estos documentos. Incluso éste, me gusta bastante también algo de la tipografía estar al revés. También me gusta el rosa como uno de mis colores primarios. Eso ya veremos más tarde. Aquí atrás, hay algo más que vale la pena revisar? Sí, quizá en la página de colecciones, creo que en realidad será un pergamino horizontal solo con todos los juguetes de colaboración. Quizás al usar el ratón, nos acercaríamos, esto en realidad no es acercar, pero ya ves a lo que me refiero. Podríamos acercar el juguete para que puedas ver más de los detalles. En realidad tu ratón se convertiría en una lupa. Creo que eso sería bastante guay. También tengo alguna referencia de animación aquí. Vea cómo entran estos productos. A mí me gusta que no vengan todos a la vez, pero lo hacen consecutivamente. Eso es bastante bonito. De acuerdo chicos, pasemos a otra cosa. Chicos, sólo quería hacer un punto aquí sobre la UX. No estaré cubriendo esta fase en esta lección, pero es extremadamente importante que antes de empezar realmente con el diseño visual, firmes un documento UX, también llamado documento de arquitectura de la información. Tienes que firmarlo con un cliente antes comenzar con el resto por lo que la estructura es muy clara. Eso te va a ahorrar tiempo más adelante, y es la mejor manera de mantenerte productivo. 6. Web | Configuración de tu documento: Bien, así que voy a empezar con el diseño. Haré eso en Photoshop si ustedes chicos se sienten más cómodos usando Sketch o Adobe XD, Figma, cualquiera de esos adelante. El software no debe ser en ningún caso un handicap. Crearé un nuevo documento al que llamaré Página principal. Hagámoslo un documento web, así que ya es un tablero de arte. Normalmente uso estas resolución media web, que es de 1440 veces 900. El fondo, solo hazlo un poco gris, así como así. Ese es nuestro tablero de arte. Si no tienes mucha memoria RAM en tu laptop, tal vez puedas trabajar sin tableros de arte y simplemente convertirlo en un tablero de arte si lo necesitas al final, eso debería ser posible. Primer paso, diría que crear algunos lineamientos. Normalmente comenzaría con [inaudible] aka 12 columnas grilla. Eso es un clásico y debería funcionar bastante bien para el diseño web, y cualquier resolución. Empezaré con eso y veré cómo se ve eso. Esta nueva guía las propiedades de diseño en Photoshop son geniales porque solo necesitas introducir los números aquí y se crea automáticamente. Quizás, usaré estas 24 columnas, y esa sería la línea de base, que en este caso está hecha de 10 píxeles. Para el móvil, eso podría cambiar a un poco menos, tal vez creo que ocho píxeles serían geniales, pero para el escritorio, estoy bien para ir con eso. Ahora que tenemos configurado el documento, voy a trabajar muy rápidamente en el shell, estos elementos comunes a todas las páginas. Ese va a ser nuestro menú, que colocaré al lado izquierdo en este caso, y luego tendremos un llamado a la acción a la tienda y voy a botón. Centrémonos primero en el menú, llamemos a este shell, dentro del shell, llamemos a este menú. Ya tenemos este fondo blanco y voy a tirar del logo de Illustrator. Hagámoslo 60 píxeles de ancho para que encaje en ese diseño. Voy a pegarlo como un objeto inteligente. Sí, bien. Entonces me gustaría hamburguesas menú aquí en el medio. Yo sí preparé ese activo ya, así que no nos quedamos atrapados en lo básico. Nombremos estos archivos para que más adelante no tengamos que pasar por él. Voy a menú, bien. En la parte inferior de esta navegación izquierda, voy a usar los idiomas. En este caso, van a ser idiomas libres. Usaré la herramienta de tipo que los hará negros, algo así en realidad. Ya está en la tipografía que quería así que eso es genial. Estaré usando el mono de tela, y luego necesitaré esto en inglés, español, y catalán, sí, así como eso. Colóquelo aquí, y digamos que el inglés podría ser nuestro idioma predeterminado, para que eso pudiera ser seleccionado. Ya tenemos esta navegación izquierda la cual creo que se ve, quizá un poco demasiado apretada. En realidad lo haré un poco más grande. Si ahora tiene 60 pixeles de ancho, sí, lo haré tal vez 72 en ese ancho. Entonces simplemente colóquelos fuera de nuestro guía aquí. Puedo arreglar esto para que esté alineado al medio. Este, es muy grande. Hagámoslo 72 píxeles de ancho así. Sí, esto se ve mejor. Creo que ya tenemos nuestra navegación izquierda aquí. Como ya han visto, acabo de romper algunas reglas. Acabo de colocar en una rejilla que yo que acabo de romper. Esto sucede a veces, no tengas miedo de estar para romper las reglas. Los guías están justo ahí para ayudarte. Está bien. 7. Desglose de diseño web |: Muy bien chicos. Entonces como se puede ver, rara vez sucedió mágico, en este documento. Tengo la mayoría de las páginas ya diseño. Entonces déjame hacer un pequeño avance y de alguna manera podemos analizar cada página. Empezaré con una página de inicio, algunas de las ideas detrás de esta página que ya he descrito antes en ese documento de inspiración. Entonces básicamente, lo que ves aquí es la navegación izquierda con la que ya estás familiarizado, y este va a ser el aterrizaje. Entonces vamos a tener un aterrizaje dinámico, donde el cliente va a poder cambiar esta imagen en cualquier momento por otro. Entonces eso podría convertirse incluso en un slider, y luego tendremos algunos elementos comunes como este. Hazlo tú mismo, juguetes, que serán variables e interactivas como hemos visto antes. Tengo otro así un sello de calidad, que te puedo mostrar aquí en un poco más de detalle. Tan solo para agregar un poco más de artesanía a esta página de inicio, y algunos otros elementos aquí que serán comunes a toda la página web, Jagadish el botón shop now, que será un enlace externo a una página de Shopify, donde podrán comprar todos los juguetes, y luego tendremos la cuota en flotar, los iconos sociales aparecerán. Entonces estos básicamente el aterrizaje. Déjame ir a otra página, sí, ese es el menú, cuando hagas click en el menú de hamburguesas, se mostrará este menú, y aquí puedes navegar por el sitio. Entonces tenemos estas cinco categorías que hemos descrito antes, y la idea aquí es que estoy en albergar cualquiera de estas categorías. En realidad, la imagen del lado derecho podría cambiar así como los colores. lo mejor aquí, es un buen lugar para empezar a hablar de tipografía, estoy usando esta condensada semivolt sans-serif para los títulos, que me gustó mucho. Entonces estaré usando estos monoespacio uno para la copia pequeña, no para la copia corporal, sino para los subtítulos. Cuando se trata de color, he presentado este rosa. En realidad hice una paleta de tres colores, que podemos ver en la siguiente página, que es ésta. Por lo que me gustaría asociar cada uno de los personajes a nuestro color. Entonces por ejemplo, este tipo Hubert, podría venir en el color verde, este tipo llamado Western, podría venir en el rosa y el espinoso, pertenecerá al anaranjado. Esta es la página con este frito antes, donde los personajes estarán en 3D, lo que el usuario podrá girarlos en 360, por lo que el usuario podrá girarlos en 360, y al usar tu ratón, podrás pasar de personaje a personaje. Por cierto, me acabo de dar cuenta de que probablemente necesiten algunos indicadores de interfaz de usuario, así que te das cuenta por cuántos personajes estás desplazando. Bien, entonces pasemos por otra página. Sí, esta es la página de colaboraciones, por lo que el artista de largometraje será esta página. Entonces este será un pergamino horizontal, solo imagina una enorme tira de juguetes que navegará de derecha a izquierda en el desplazamiento. En este espacio habrá varias colecciones a las que podrás llegar más rápido utilizando este indicador anterior. Sí, por lo que la página anterior, en realidad tendrá un look más editorial revista. Por lo que primero presentaré lo que se paga juguetes tienen fuera. Al desplazarse, creo que este personaje será en realidad una secuencia PNG, por lo que podemos hacer girar. Creo que eso debería ser divertido. Como pueden ver, he introducido otra tipografía aquí para la copia corporal. Por lo general, no uso más de dos tipografías, pero eso es algo que puedes hacer si te sientes cómodo. Entonces no tengas miedo de usar más de tres tipografía, en este caso, he usado un san-serif muy optimizado para web, y estoy justificando el texto solo porque me gusta el layout, como puedes ver, es [inaudible] en el momento. Entonces veamos qué pasa con los textos reales. Entonces una vez que hemos introducido los juguetes de pago, sólo podemos describir, que en realidad está compuesto por tres piezas. Los que ves aquí en esta imagen podrían ser un GIF animado, desplegando las tres piezas, y esto, solo copia describiendo la sección. Sería parte de la misma sección, sólo algo divertido, pensé que podríamos estar haciendo algo, especie de Max Schott con estos dos tipos que lucen bastante mal culo. Entonces creo que eso es divertido. Mézclalos porque en realidad puedes mezclar tus juguetes cuales deberían ser bastante cool y para terminar, nos centraremos un poco más en el proceso en cómo se producen los juguetes. Por lo que me gustaría explicar estos en cinco pasos sobre este diseño. Apenas muy poca información la gente realmente no lee mucho, y tal vez podamos realzar eso, y un flotando cualquiera de estas imágenes que podría ser un video loop animado. A lo mejor un par o dos segundos. Entonces hablaremos del empaque. Esta imagen no pertenece a juguetes de pago es sólo una referencia. Entonces el cliente sabe cómo podríamos realmente mostrar eso. Entonces hay dirección de la fotografía, y finalmente, hablaremos brevemente de Robert, quien es el artesano, el tipo detrás de los juguetes. Entonces creo que podemos tener tres de forma libre aquí dependiendo de por qué te gustaría llegar a juguetes de pago, futuro mensaje general podría ser éste. Pero quizás una vez que te conviertas en artistas de largometrajes, darás clic aquí y aparecería otra forma, donde realmente puedes escribir en tu portafolio. Lo mismo con si quisieras enviar tu final, tal vez haya incluso un botón, por lo que realmente puedes subirlo y presentarlo. Entonces tu archivo irá directamente al cliente. Bien, entonces eso es todo para esta lección, nos vemos en la siguiente. 8. Consejos de producción y conclusión y conclusión: Chicos, ahora que tenemos nuestros diseños para escritorio probablemente deberíamos empezar a pensar en el resto del flujo responsive. Normalmente comenzaría con el móvil y después de esa tableta. Es bueno que te sientas con tus desarrolladores tan pronto como puedas en el proceso para que puedas empezar a hablar a través de qué ideas tienes en mente. A esto lo llamo patada de desarrollo. Creo que es extremadamente importante para que comunique sus ideas también cuando se trata de animaciones, animaciones de desplazamiento, podría ser transiciones basadas. Después de todo los proyectos web es un proyecto colaborativo. Necesitas tratar de ayudar a tus desarrolladores tanto como puedas. Sé súper ordenado con tu archivo, la forma en que los nombras, la forma en que nombras tus activos, la forma en que los agrupa, la forma en que entregues carpetas con SVG, con imágenes optimizadas para un buen rendimiento y así sucesivamente. También hay algunos consejos que me gustaría darles sobre producción. Algunos plugins que realmente uso a mí mismo o Photoshop o para sketch como Zeppelin o Avocode. Esto es genial porque el desarrollador puede inspeccionar tus archivos y ser más preciso con la forma en que implementan el diseño front-end. Incluso puedes hacer algunas guías de estilo en realidad usando Zeppelin que creo que es mucho de ahorro de tiempo. Puedes poner en esta guía de estilo de color, la guía de estilo de topografía. Eso es algo que el desarrollador definitivamente quisiera saber de ti. Esto es de mi parte. Esa fue mi clase, espero que ustedes la hayan disfrutado. Tengo muchas ganas de ver lo que has diseñado, espero que estés dispuesto a compartirlo. Me pondré a disposición y trataré de responder a sus comentarios y ayudarle en lo que pueda.