Cómo ir más allá del logotipo: mejora la identidad de una marca con una interfaz de usuario eficaz

1. Var más allá del logotipo: una introducción: Hola a todos. Mi nombre es Sofía y soy directora de arte, gráfica, y diseñadora de UI. En esta clase, entenderemos que dar un gran impulso digital a lo que diseñas, puede ser muy sencillo. Durante mi experiencia laboral, me di cuenta de que diseñar un sistema visual fuerte no es suficiente para garantizar la singularidad de una identidad, sobre todo en un contexto digital. Me encontré diseñando mapa interactivo de ciudades, fuera de un patrón gráfico. Creé ilustración vectorial para hablar con el público más joven de una marca. Desarrollé infografías con el fin de que los datos sean fácilmente accesibles, y convertirlos en material para póster de redes sociales. Garantizando siempre la coherencia de la marca desde los medios tradicionales hasta los medios digitales. Por eso no puedo esperar a enseñarte, todos los consejos que necesitas para diseñar una identidad de marca exitosa con un enfoque orientado a lo digital. En particular, descubriremos, todos los secretos para convertir el elemento gráfico de una marca en un sistema de interfaz de usuario único y sobresaliente. Aprenderemos a diseñar un conjunto de iconos adecuado para tener un enfoque tipográfico correcto para integrar animaciones y construir pautas para que sus compañeros sigan. Esta clase es para un diseñador que ya tiene algo de experiencia con Adobe Illustrator y boceto de acero. Pero procederemos paso a paso. Todo el mundo que quiera entender cómo diseñar con un toque digital, encontrará mucho que aprender. ¿ Listo? Vámonos. 2. Nuestro proyecto: Hola a todos. Me alegra que hayas elegido iniciar este viaje conmigo. En esta introducción, voy a explicar rápidamente lo que vamos a lograr juntos al final de esta clase. Podemos tomar nuestra breve descripción como punto de partida. En efecto, ya resume de manera concisa, dos de los principales focos de nuestras lecciones. Una es la identidad de marca, decir en nuestro caso específico, los principales rasgos visuales que definen el tema que vamos a elegir para nuestro proyecto. Podrían ser elementos de marca existentes u otras características visuales que convertiremos en experiencias digitales significativas. El segundo es una interfaz de usuario efectiva, lo que significa el sistema digital sobresaliente en el que transformaremos los elementos de identidad de marca que hemos resaltado en la diapositiva anterior. Todo lo que aprendemos juntos sobre identidad e interfaz de usuario eventualmente se reunirá en un proyecto especial que construirás y completarás lección por lección. El proyecto es una gran página web homepage. Espera, no dije una página de inicio, dije una gran página de inicio porque, como veremos, no es tarea fácil hacerlo bien. Para recapitular lo que hemos dicho hasta ahora, partiremos desde la identidad de la marca y a través de un diseño de interfaz de usuario efectivo, obtendremos una gran página web de inicio. Enfriar. Pero como aprender mientras se divierte es lo más importante, nuestro sitio web sería uno común. Me gustaría que eligieras un personaje que te guste profundamente o te interesa mucho, ya sea real, ficticio, humano, no humano, divertido, incluso romántico, valiente, y construya su propia página web homepage. Lo más importante a recordar a la hora de elegir un personaje es que debe estar visualmente bien definido con muchas características interesantes para ser utilizado con el fin de construir esta presencia digital. Eventualmente, veremos cómo estos asombrosos estudios del personaje y en general, lo que aprenderemos en esta clase podría considerarse fácilmente como un entrenamiento para lo que todos debemos hacer mientras nos ocupamos de una tarea de trabajo real. ¿ Te gustaría ver un pequeño adelanto entonces? Yo lo sabía. Bueno, podría empezar a revelar. Escogeré a Henri Matisse como mi personaje. Lo estudiaré con la ayuda de un tablero de humor a partir del cual diseñaré colores, tipografía, y estilos gráficos reconocibles. Posteriormente, usaré estos elementos para diseñar la interfaz de usuario de mi futura página de inicio, definiendo, por ejemplo, su conjunto de iconos. Gracias a un breve viaje por las maravillas de la arquitectura de la información, los viajes de los usuarios y las interacciones, definiremos paso a paso nuestra maravillosa página de inicio. Es por eso que si eres un diseñador gráfico súper hábil o un director de arte brillante y quieres aprender a dar un impulso digital a las identidades de marca que diseñas, esta es la clase para ti. Alguna experiencia con Adobe Illustrator y XD será genial. Pero como vamos a proceder paso a paso, todos los que estén interesados en entender cómo diseñar una identidad con un toque digital, encontrarán mucho que ganar. ¿ Listo para empezar? Estas son algunas pequeñas sugerencias que me gustaría darles antes de que pasemos por este viaje juntos. Siempre diviértete mientras experimentas con tu diseño, trabaja en algo que realmente te guste y quieres descubrir profundamente, y nunca te rindas nunca cuando algo no está funcionando al principio. acaso te gustaría saber aún más sobre lo que vamos a hacer juntos, te sugiero que eches un vistazo a algunos de los artículos súper interesantes que puse al final de la descripción del curso. Eso es todo por toda esta lección chicos. Prepárate con tu portátil o portátil, y nos vemos en la siguiente lección. 3. Éxito en línea: Hola a todos y una cálida bienvenida a la primera lección de esta clase. En la siguiente diapositiva, comenzaremos nuestro recorrido con algunos grandes estudios de casos. Gracias a ellos será mucho más fácil entender de qué estamos hablando cuando decimos identidad digital exitosa. En la primera parte de la lección, examinaremos cuatro grandes ejemplos de marca que construyen una identidad muy cohesiva desde los puntos de contacto físicos hasta los digitales. En tanto que en la segunda parte, comenzaremos a atender los primeros pasos de nuestro proyecto. En primer lugar, ¿por qué debemos enfocarnos en la consistencia de la marca? Bueno, porque en la era digital es muy probable ver que nuestra identidad se pierda dentro de un universo lleno de contenidos, por lo tanto, debemos garantizar que nuestras marcas mantengan su unicidad y fuerza en cada expresión visual. Todas estas expresiones también deben ser consideradas con mucho cuidado porque hoy, necesitamos dar valores a nuestros clientes, no sólo salidas visuales. Estos valores se pueden transmitir gracias a todas las características que construimos en torno a nuestra identidad de marca. En tercer lugar, no debemos olvidar que una marca hoy en día también es social, conectada, y más rápida. Toda expresión de marca debe ser un reflejo de este desarrollo interminable, pero al mismo tiempo ser consistentes entre sí. ¿ Por qué no deberíamos comenzar nuestro viaje a partir de los casos prácticos que seleccioné para ti? Desde la consistencia visual hasta las animaciones, desde las redes sociales hasta las pautas de marca, te guiaré para descubrir las claves de su éxito. La primera marca de la que me encantaría hablarte es AESOP. Personalmente me encanta y realmente creo que como caso de estudio, te puede dar una gran cantidad de inspiración. Porque cuando miras sus embalajes o entras dentro de una de sus hermosas tiendas de diseñadores, tienes esta misma sensación de elegancia y belleza que percibes cuando desplazas su feed de Instagram, o simplemente cuando te fijas en su logo. Como podemos suponer a partir de sus embalajes, por ejemplo, sus principales características visuales son muy esenciales y simples. Los diseñadores de la AESOP son realmente súper buenos en mezclarlos siempre de una manera súper equilibrada y elegante. También es fácil ver cómo lograron traducir todos los elementos gráficos que podemos encontrar en el universo físico AESOP al digital. También se preocupaban por encontrar la mejor contraparte digital de su tipografía institucional. Aquí te dejamos un corto viaje por su página web. Como puedes ver todo lo dice AESOP, desde la coincidencia de colores hasta las transiciones suaves, imágenes de producto decoradas, y la tipografía limpia. Aquí hay otro ejemplo. Cambiemos completamente la perspectiva y hablemos de un gigante dentro del universo digital. Google, ¿quién mejor que ellos nos podría dar alguna buena inspiración? Por supuesto, sé que Google ya es un producto digital, pero es muy interesante ver cómo las personas en Google son capaces de diversificar y expandir la marca, curando hasta los detalles más pequeños. Como se puede ver, sus identidades juegan alrededor una topografía icónica en cuatro colores muy distintivos. Estableciendo esos como punto de partida y con gusto por el uso de formas geométricas y animaciones logran hacer viva su identidad. Aquí puedes encontrar una breve recapitulación de lo que dijimos antes. Cuatro colores, líneas gráficas esenciales. Si nos profundizamos explorando estos, descubriremos que gracias a un uso increíblemente hábil de animaciones y transiciones, realmente hacen que las formas hablen de tal manera que es perfectamente comprensible desde una amplia gama de usuarios. Utilizando esta declinación de su identidad digital, van más allá de las palabras y los lenguajes. Otro historial de casos que me encantaría mostrarles es Kinfolk. Kinfolk es reconocida mundialmente como una de las revistas más refinadas que puedes encontrar en las librerías. Se ocupa principalmente del estilo de vida, el hogar, y la cultura. En estos días se refleja la palabra de las personas destacadas en su interior. Lo que realmente llama la atención a primera vista es el uso increíblemente sabroso y equilibrado de la tipografía, cuadrícula editorial, y las bellas imágenes, que te sorprenderán página tras página con soluciones siempre diferentes e inteligentes. Si tratamos de resumir, las principales características visuales del diseño editorial de Kinfolk, absolutamente debemos mencionar la cuadrícula, el uso de espacios en blanco, y elegantes emparejamientos tipográficos. Estas mismas características son las que definen y hacen que su identidad digital sea tan altamente única y reconocible. El grid está presente y ayuda a distinguir entre los lanzamientos principal y secundario. El uso del blanco y negro y los experimentos tipográficos se utilizan para transmitir la misma elegancia y equilibrio que puedes encontrar en el papel. El último ejemplo que me encantaría compartir contigo, es Monki. Monki es una marca relativamente nueva del grupo H&M con un objetivo consistía principalmente en mujer joven que quería expresarse y sus valores a través de la moda. Lo que más llama la atención de esta marca es una comunidad fuerte que rápidamente creció a su alrededor. Aquí tienes una visión tan pequeña y no exhaustiva de su cuenta de Instagram. Como puedes ver el uso de una paleta de colores diversa pero consistente con parcelas y tonos femeninos junto con experimentos de tipografía cohesiva funciona muy bien. Es hermoso ver en particular, qué se puede hacer con una sola fuente, si decidimos rechazarla creativamente, pero sin distorsionarla. Al final, lo realmente interesante de Monki es que comunica audacia, autoestima y diversión con un enfoque cohesivo e impactante, tanto desde el tono de voz como desde los puntos de vista de dirección artística. Ahora que hemos visto muchos grandes ejemplos de identidades digitales, ¿ estás listo para sentar las bases de tu propio proyecto? Ha llegado el momento de elegir a nuestro personaje, los protagonistas absolutos de nuestro diseño. Espera, espera, espera, no entres en pánico. Sé lo que significa partir de una pizarra en blanco. Es por eso que en las siguientes diapositivas, voy a revisar algunos consejeros que estoy seguro serán de ayuda. Al elegir a tu personaje recuerda lo que dijimos en el último video. Realmente podría ser cualquiera que te inspire. Podría ser real, ficticio, humano sobre humano, gracioso, malvado quien quiera contar una historia. Será incluso sencillo si sigues estas reglas. Uno, elige a alguien que realmente admires y quieras explorar profundamente, te convertirás en su fan número uno. Dos, tus resultados serán aún más impresionantes si tu personaje tiene algunas características reconocibles. Tres, diviértete, y deja que tu imaginación se vuelva salvaje. Como estaba mencionando en el video anterior, mi elección será Henri Matisse por más de una razón. Cuando descubrí sus recortes mientras visitaba una exposición, me enamoré de sus formas orgánicas, composiciones demográficas, y sus explosiones de color. Creo que tienen todas las características para ser mi inspiración para construir sitio web de Matisse. Enfriar. Bueno, ahora es tu turno. Ahora que has elegido a tu personaje, te guiaré a través de la creación de su moodboard. Un moodboard es una herramienta súper útil que reúne en un solo lugar toda la inspiración visual que describe la dirección de tu proyecto. En nuestro caso, recogerá las imágenes más icónicas que representan a nuestro personaje. Estamos hablando de una herramienta muy útil que te ayudará a mantener una consistencia visual mientras te ocupas del diferente paso de tu proyecto, pero también ayudará a tus clientes, permitiéndoles entender claramente lo que está pasando en tu mente. Para construir el moodboard perfecto siempre recuerda que no necesitas muchas imágenes para expresar tu idea. Pocos pero bien elegidos son suficientes. Tampoco necesariamente tienes que apegarte a un universo visual. La inspiración puede provenir de muchas fuentes diferentes y puede transmitirse a través de diferentes medios. Después de una conspicua colección de imágenes, decidí que éstas me hubieran ayudado en la construcción de la identidad del sitio web de Matisse. ¿ Por qué? Bueno, dos de ellos pertenecían a su propio cuerpo de trabajo. Es importante tener al menos algunas referencias originales para evitar ir demasiado lejos de tu punto de partida. Pero estas imágenes también hablan mucho de colores, coincidencia de colores y formas orgánicas. Estas otras dos imágenes son en cambio referencias adicionales que me ayudarán a construir mi paleta de colores y definir mi estilo gráfico. Yo quiero que sea suave, orgánico y hecho a mano. ¿Estás listo? Es hora de empezar a recolectar imágenes y seleccionar las que mejor representen tu estilo de personaje. Una vez que los consigas, póngalos en una tabla de ánimos y mantente atentos para la siguiente lección. Nos vemos en el siguiente capítulo, chicos. Gracias por ver esto. 4. Encuentra tu estilo: Hola a todos, bienvenidos a nuestra tercera lección. Juntos entenderemos cómo definir la característica visual de nuestro proyecto, partiendo del tablero de humor que hemos definido durante la segunda lección. Como se puede ver en las próximas diapositivas, aprenderemos muchas cosas con el fin de tener toda la base para construir una identidad visual consistente. Pero antes de empezar, permítanme recordarles una vez más que nos estamos centrando principalmente en un paisaje digital. ¿ Qué necesitamos para construir nuestra identidad digital considerando una perspectiva visual? Para descubrirlo primero debemos analizar nuestros valores de marca. Los valores son las palabras clave para comunicar nuestro proyecto, y nos ayudarán a diseñar de una manera más efectiva. Para definir valores necesitamos estudiar y familiarizarnos muy con nuestra marca o en nuestro caso específico con nuestro carácter. El primer paso que debemos dar para encontrar la palabra que represente nuestro proyecto es analizar nuestro tablero de humor. Por cierto ¿recuerdas la pizarra de humor que preparamos durante la última lección? Recopilamos la imagen representativa utilizada para resumir nuestro trabajo de personajes. Yo elijo Matisse. En lo que a Matisse se refiere en primer lugar podemos notar por nuestra pizarra de humor que su pincelada no suele ser precisa especialmente sus recortes. En segundo lugar, podemos suponer que el trabajo de Matisse se caracteriza por una forma muy mínima y sencilla de representar las cosas. Los colores son lisos y las líneas se reducen a lo esencial. También podemos decir que en términos generales estamos mirando una obra muy elegante, pero sin la impresión de que sea demasiado compleja e inalcanzable. Llamémoslo un estilo sin pretensiones. Al final de nuestro análisis hemos recogido, pues, estos tres puntos clave, imperfectos, sencillos e esenciales, y sin pretensiones. Estos son los valores que usaremos para comunicar nuestro proyecto. Ahora que tenemos nuestros puntos clave, los usaremos como punto de partida para construir nuestro lenguaje visual. Para que esto suceda necesitaremos colores, tipografía, y un estilo gráfico sobresaliente. Los colores son la base de nuestro diseño, los necesitamos para reforzar la calidad, para comunicar acciones, y dar información. Al elegir colores, recuerda que menos es más, obtendrás mejores resultados si tu paleta de colores se pega al máximo tres colores primarios. Cuanto más color uses más complicado será administrar tu diseño. Si es demasiado difícil elegir siempre puedes usar un esquema de color, 60 por ciento para tu tono dominante, 30 por ciento para el color secundario, y 10 por ciento tiene que usarse solo para los colores de acento. Recuerda siempre prestar atención a la cultura visual en la que estás trabajando. Por ejemplo, en la India el naranja lleva una serie de significados que no debes ignorar. Antes de descubrir cómo elegir los colores para nuestro proyecto, tengo alguna otra recomendación práctica para ti. Para simplificar la selección de colores, intenta partir de lo que tienes como el material que ya has recolectado. También es importante tener siempre en cuenta al público para el que estás trabajando, y para evitar el color del competidor, te ayudará a destacar entre la multitud. Volviendo a nuestra amada Matisse, si estas son las imágenes que ya hemos seleccionado, estos podrían ser los colores a considerar para nuestra tarima inicial. Para que quede claro, recuerda que si no estás 100 por ciento seguro de algo puedes cambiar de opinión en cada paso del proyecto. Estamos siguiendo el camino específico porque nos ayuda a definir un proceso en el diseño de nuestro sitio web, pero siéntete siempre libre de experimentar y cambiar ideas. Además de los locos buenos colores que sacamos del tablero del estado de ánimo, es esencial incluir también los grises en nuestro diseño sobre todo porque estamos trabajando para el mundo digital. Por lo general es mejor elegir al menos dos tonos de gris, uno oscuro y uno claro. Para elegirlos puedes seguir un método fácil desarrollado por aplastar editorial, en esta diapositiva puedes encontrar el enlace para ver el método. Aquí estamos con nuestra paleta de colores final no tan difícil, ¿verdad? Ahora estamos listos para ir al segundo capítulo de nuestra lección, la tipografía. El diseño web es de 95 por ciento de tipografía como dijo Oliver Reichenstein. tipografía es esencial para garantizar la legibilidad y accesibilidad, y para darle a tu página web un correcto equilibrio gráfico. Como dijimos con respecto a los colores, uso de más de tres tipos de letra puede hacer que su aplicación o sitio web se vea ocupada y no estructurada. Es mejor limitar el número de familias de fuentes, dos es suficiente, una suele ser suficiente. Para crear ritmo a la hora de seleccionar tipografía comienza con dos fuentes muy diferentes, porque el contraste y las diferencias crean equilibrio. Por último, ten en cuenta elegir el tamaño de fuente adecuado con cualquier método que prefieras pero recuerda que las dimensiones de menos de 14 puntos podrían llegar a ser difíciles de leer. Por regla general recuerda que el texto corporal es el elemento más común en un producto, esto es lo que verán y experimentarán todos tus usuarios. En consecuencia el aspecto y la sensación de tus textos corporales tendrán el mayor impacto en la calidad de tu diseño. Al igual que hicimos con los colores, empecemos por las referencias que hemos encontrado. Asegúrese de seleccionar fuente el con letras distinguibles para garantizar la legibilidad. No es inusual de hecho encontrar tipografías con formas de letras confusas específicamente con I y L. Si echamos un vistazo al viejo cartel de exposiciones de Matisse podemos dirigir nuestra investigación de fuentes. Podemos, por ejemplo, buscar fuentes de escritura a mano similares a la firma de Matisse o podemos seleccionar fuentes Serif para comunicar la elegancia natural de su pintura. Para crear contraste será genial si seleccionamos ambos son Sans-Serif y una fuente Serif. Por ejemplo, encontré estas increíbles fuentes libres en línea, podría ser una buena opción ya que tiene dos pesos diferentes que cambian mucho en términos de estilo. La versión ligera me recuerda detalles de Art Nouveau y Liberty, mientras que la regular es más audaz y legible. Ahora que tenemos colores y tipografía, es hora de pensar en nuestro estilo gráfico lo que nos ayudará a estructurar mejor toda la dirección artística del proyecto. En este momento no es necesario definir todo el aspecto de estilos, pero podría ser útil delinear al menos el concepto principal. El estilo gráfico es un punto clave de un diseño porque ayuda a comunicar la personalidad de la marca. ¿ Recuerdas los tres valores que seleccionamos al inicio de la lección, cada elección de estilo gráfico los anunciará y los subrayará. Es por eso que cuando construyes una marca necesitarás definir mucho aspecto diferente, desde la fuente hasta los signos, botones, y hasta las imágenes. Todo necesita ser hermoso y consistente. Encontrar el estilo gráfico correcto es algo que te ayudará durante todo el proceso de dirección y diseño del arte. Es una primera exploración visual para empezar a imaginar la dirección que seguirá tu proyecto. Una vez más para definir tu estilo parte de lo que tienes y no te limites. Por ejemplo, puedes pensar en desarrollar patrones particulares o elementos gráficos específicos para ayudarte a imaginar los pasos futuros de tu proyecto. Pero siempre es importante no exagerar al principio, mantenerse sencillo. Recuerda que hay que pensar por digital donde todo necesita estar listo para ser transformado. Si volvemos a echar un vistazo a lo que hemos recopilado, podemos aislar entidad única y empezar a imaginar formas y líneas que se pueden aplicar a nuestro diseño. Por ejemplo, a partir de los recortes de Matisse, podemos aislar formas orgánicas planas para ser utilizadas dentro del proyecto y algunas líneas indefinidas. También podemos pensar en un tamaño fotográfico que lleve bien con las elecciones que hicimos anteriormente. Bueno, llegaremos al final de nuestra tercera lección, ¿no tan difícil? Ahora es hora de que empieces a practicar lo que has aprendido hasta ahora, no puedo esperar a ver tus resultados. Manténgase atentos y nos vemos en nuestra próxima lección. 5. Tráelo en línea: Hola a todos y bienvenidos a nuestra lección Número 4. Prepárate y abróchate el cinturón de seguridad. Este va a ser muy emocionante. Por fin estamos saltando al mundo de la UI. Como siempre hacemos, para seguir un proceso paso a paso, la primera parte de la lección se centrará en una introducción básica sobre el significado real de la interfaz de usuario y en algunos estudios de casos muy buenos. La segunda parte en su lugar, estará enteramente dedicada al desarrollo de nuestro proyecto. Como mencioné antes, entender lo que realmente significa el término UI es uno de los principales objetivos de la lección de hoy. Todos sabemos cómo rápidamente se convirtió en un término muy familiar, pero asegurémonos de usarlo correctamente cada vez que nos encontremos hablando de ello. Usar este término correctamente es esencial ya que la interfaz de usuario es la forma en que como diseñadores, nos aseguramos de que estamos satisfaciendo las necesidades de nuestro cliente y al mismo tiempo, aseguramos una fruición fácil e intuitiva de los productos digitales que diseñamos. último, pero no menos importante, en esta lección, me gustaría que comprendieran que aunque diseñemos dentro de algunos límites y reglas, esto no significa que nuestros resultados sean peores o menos creativos. En cualquier momento encontramos una buena manera de fusionar las mejores prácticas y las necesidades de branding, ahí es cuando creamos valor real. Empecemos de una recapitulación muy rápida de lo que hicimos juntos durante la tercera lección, que fue el estilo de nuestra identidad digital en cuanto a colores, tipografía, y elementos gráficos. También recogimos algunas referencias fotográficas. Si lo desea, puede recoger todos los materiales en una tabla y mantenerlo a mano durante esta lección. Realmente tenemos todo lo que necesitamos para empezar, así que vamos a descubrir UI. ¿ Qué es exactamente la interfaz de usuario y por qué es tan importante construir una identidad digital? diseño de la interfaz de usuario es el proceso de hacer interfaces digitales con un enfoque en looks o estilo. El objetivo del diseñador para crear diseños usuario encontrará fácil de usar y placentero. Es exactamente lo que necesitamos. Para que las cosas sean aún más claras, aquí se puede ver un gráfico sencillo desde el que se puede entender la diferencia entre el diseño de UI y UX. Estos términos a menudo se confunden, pero como se puede ver, la diferencia es bastante visible. UI dentro de UX es lo que necesitamos para definir específicamente el aspecto y la sensación resultantes de nuestro diseño. Si quisiéramos ser aún más específicos, también hay una parte más pequeña de la interfaz de usuario llamada, la interfaz gráfica de usuario, que se relaciona con todo lo referente a la percepción visual. Hablando con un enfoque más práctico, podríamos decir que la interfaz de usuario en realidad puede involucrar muchos de esos elementos. Tendremos que construir un sitio web. Pero para no abrumarte con demasiada información, me atendré a esos tres. Ambos porque son los más utilizados y conocidos y porque nos permiten divertirnos mientras pensamos en cómo diseñarlos. No obstante, podríamos establecer algunas reglas doradas antes de empezar a examinar profundamente los botones, los iconos y las formas. Recuerda ser cohesivo en lo que diseñas. Si crees que un comportamiento en particular se ajusta a tu propósito, entonces apégate a él. El usuario se lo agradecerá porque podrá encontrar cualquier cosa que necesite sin que alguien explique dónde buscarlo. Comencemos nuestro análisis desde botones. El primero que debes saber es que deben diferir de otros elementos de página, por lo que pueden ser fácilmente notados, recordados y utilizados. En muchos sitios web, ya sean comerciales, institucionales o informativos, los botones son por diferentes motivos el punto de destino del usuario. Simbolizan el logro de la tarea del usuario. Por eso deben ser reconocibles, fáciles de encontrar y explicativos. En mi opinión, una marca que realmente usa botones de la manera más clara posible es Spotify. Pero antes de mostrarles la siguiente diapositiva, me encantaría hacer un experimento juntos. Trata de pensar en tu Dashboard de Spotify. ¿ Cuál es lo primero que te viene a la mente? Uno recuerda la atención de cualquiera a primera vista es obviamente la diferencia entre el fondo oscuro y los botones verdes. ¿ Hay una mejor manera de hacer que las cosas se den cuenta? A lo mejor no siempre es tan fácil ser tan explícito con botones. Realmente depende de los elementos de nuestra identidad digital. En otros casos, los iconos, nos pueden ayudar. Los iconos son vehículo súper importante para tu identidad digital. Te ayudan a construir el imaginario alrededor de tu marca. Puedes utilizarlas para reforzar su característica visual y para apoyar a los usuarios mientras navegan por tu sitio web. último pero no menos importante, recuerda que también son una herramienta increíble que te permite ir más allá de las barreras culturales y hablar con cualquiera. Aquí podemos ver un buen ejemplo de refuerzo de identidad a través de iconos. Uber afirma que el diseño de sus iconos está inspirado en el transporte. Aquí te presentamos un video rápido que muestra la cuadrícula en la que gente de Uber diseñó su sistema de iconos de pared. Como veremos en la segunda parte de esta lección, usar una cuadrícula es una gran manera de asegurar consistencia entre las composiciones gráficas de los diferentes iconos. Este es un resumen rápido de su sistema de iconos. Como se puede ver, inmediatamente pueden ser reconocidos como parte del mismo universo visual. Tienen rasgos consistentes, detalles equilibrados, y sobre todo, hay pegadizos inmediatos y una guía real para el usuario. No los malentenderás por casualidad. El tercer y último aspecto que me encantaría analizar contigo, es uno que quizá podría ocultarse a primera vista, pero eso revelará su importancia estratégica cuando analices profundamente un diseño bien hecho. Estamos hablando de formas. Las formas son muy interesantes de considerar, no sólo desde una perspectiva de consistencia, sino también porque tienen el poder de transmitir un significado real en términos de comunicación y expresión. Al igual que los iconos, las formas pueden hablar. Aquí tienes un ejemplo de una aplicación: Santuario, diseñado siguiendo un uso cohesivo de formas. Podemos ver cómo los ángulos son la base de muchos elementos de la interfaz de usuario dentro de la aplicación. Partiendo de iconos a botones, bordes, y otras pequeñas gemas puedes encontrar dispersas por todo el diseño. También Spotify puede proporcionar un buen caso práctico cuando se trata de formas. Personas de Spotify tomaron como punto de partida alguna característica visual de fase tipo circular alguna como nuestro punto de partida. Creo que este es un enfoque súper inteligente para asegurar un gran resultado de la interfaz de usuario. Aquí podemos ver cómo tomaron patrones gráficos recurrentes para letras y hojas, y los tradujeron en el diseño del sistema de iconos de la pared. Los mismos bordes, los mismos ángulos, el mismo aspecto y tacto generales. Después de todos estos grandes ejemplos, creo que estamos realmente inspirados. ¿ Y comenzar con la base de UI de nuestro proyecto? En esta sección, te mostraré cómo se me ocurrió mis resultados en cuanto a iconos, botones y formas. Me encantaría que tomaras esta consideración tal como está y generalmente guías para tu propio proyecto, aunque el look y la sensación general que eliges es muy diferente al mío. Empecemos por los iconos; para empezar a construir el sistema, configuremos una cuadrícula de 24 por 24 píxeles. Este será tu patio de juegos de diseño. Dentro de la cuadrícula, definamos un área segura de 20 por 20 píxel. Esta es la zona en la que van a tomar forma tus principales diseños. Yo solo recomiendo integrar tu cuadrícula con otros elementos. Hablo de guías, verticales, horizontales y diagonales, y otras formas geométricas que crean una interacción útil que puede convertirse en rasgos distintivos para tus iconos. Aquí está mi primer icono. Siguiendo la cuadrícula utilicé forma redonda como borde principal. Diseño con un ángulo de 45 grados y trato, en términos generales, de apegarme a las reglas que configuré en las etapas anteriores. En cuanto al aspecto y tacto gráfico, elijo un trazo grueso y líneas suaves que, como veremos, coincidirán con mis formas gráficas. Pequeño indicio, como se puede ver, el look y la sensación y consecuentemente, lo que los iconos comunican, puede ser muy diferente con tan solo un ligero cambio de algún parámetro, como por ejemplo, trazo. Por eso es tan importante elegir cuidadosamente tu estilo de icono. Para completar el diseño, elijo de mi paleta de colores, los tonos adecuados para las diferentes partes de mi ícono y como toque final para abrazar y resaltar aún más los valores reconozco el trabajo de Matisse. ¿ Te acuerdas de la lección tres? Decidí darle un giro difuso al área coloreada de mi diseño usando el efecto ojo de pez de Adobe Illustrator. Aquí, puedes ver algunos otros ejemplos de mi sistema de iconos. Para que coincida con el estilo que he elegido para mis iconos, voy con algunas esquinas redondeadas y aspecto y tacto suaves en general, también para botones. En Adobe XD, seleccioné una esquina de radio de 35 grados para todos los diferentes botones. En cuanto a las formas para realzar aún más el uso de elementos redondeados más suaves, decidí hacer de este estilo gráfico un patrón definitorio desde la página de inicio de mi sitio web, haciéndolo visible en muchos módulos diferentes a lo largo de la página. Por ejemplo, aquí puedes ver cómo decidí integrar mis formas en el módulo de calendario. Un truco agradable y fácil, pero muy útil para reforzar mi identidad digital. Aquí estamos chicos, al final de esta lección muy intensa. No puedo esperar a ver subidos tus resultados y a conocerte en el siguiente capítulo. 6. Entrar en el flujo: Hola a todos. Bienvenidos a nuestra nueva lección. En las siguientes diapositivas, hablaremos sobre cómo identificar los comportamientos de los usuarios con el fin de construir un viaje perfecto del usuario. Descubriremos a qué nos referimos con diseño centrado en el ser humano y cómo funciona. Entonces definiremos nuestro estereotipo objetivo, que llamaremos nuestra persona. Para definir al final de nuestra lección nuestra arquitectura de sitios web. Podemos considerar la estructura del sitio web como su esqueleto y necesitamos seguir un proceso paso a paso para definirlo. En esta lección, hablaremos de tres de esos pasos necesarios. En primer lugar, definir los objetivos de nuestra página web con el fin de definir qué estamos haciendo y por qué. Segundo, establecer un objetivo que identifique para quién estamos diseñando. En tercer lugar, entendiendo el viaje, el camino que hará el usuario para alcanzar sus objetivos personales que hicimos en nuestra página web. En primer lugar, empecemos de la definición de diseño centrado en el ser humano. diseño centrado en el ser humano es la práctica que pone al usuario en el centro del proceso de diseño como su personaje principal, considerando siempre sus necesidades, ocultas o no, sus deseos, propósitos, y cuestiones. Como dije antes, para aplicar un diseño centrado en el ser humano, necesitamos conocer a nuestro usuario y por lo tanto estudiarlo. Para poder hacerlo con éxito, necesitamos la llamada investigación de usuarios, que podría hacerse siguiendo un enfoque cuantitativo o cualitativo. El enfoque cuantitativo se basa en números, generalmente las personas leen reportes, recopilan y analizan datos. El enfoque cualitativo, por el contrario, se basa en un menor número de usuarios, pero suele ir más profundo gracias a la entrevista específica y observación directa y con la ayuda de talleres y reuniones. No obstante, a veces puede suceder encontrarnos sin tiempo o recursos suficientes para encontrar personas reales para entrevistar. En esos casos, para garantizar los resultados de nuestra investigación, podemos hacer un ejercicio de imaginación. Podemos empezar definiendo una serie de preguntas para saber mejor para quién estamos diseñando y cuál es el objetivo final de nuestra página web. Al principio, es mejor investigar a diferentes usuarios para diversificar las respuestas y dar un espectro más amplio de posibles salidas. Por ejemplo, para el sitio web de Matisse, puedo imaginar que el usuario podría ser un coleccionista, un crítico de arte moderno, un estudiante, o simplemente un amante del arte. En segundo lugar, podemos preguntar por qué estas personas están interesadas en el arte moderno. Dándonos una respuesta, todos ellos llevarán una perspectiva diferente. hacer un ejemplo, el coleccionista se acercará al mercado del arte contemporáneo para hacer una inversión económica, mientras que el estudiante tiene que profundizar en la materia por necesidades educativas. Siguiendo este método, podemos seguir haciendo preguntas e intentar responderlas para conocer mejor a nuestros usuarios. Por ejemplo, podemos preguntar dónde se enteran de Matisse, o qué lo están buscando y sobre todo por qué necesitan descubrir Matisse. Esta pregunta es particularmente importante para entender en qué medida Matisse es diferente de otros pintores en nuestro tamaño de usuario. Para el próximo ejercicio, escogeremos a uno de los personajes que respondieron a nuestras preguntas e intentaremos construir un mundo real a su alrededor, por lo tanto, transformaremos a un usuario genérico en una persona real armada con sus necesidades y objetivos, vamos a construir una persona a partir de él. Para definir mi persona, elijo al crítico. Me imagino darle un rostro y edad para hacerla hablar y le agregué algunas citas a su perfil. Para comprenderla mejor, defino sus necesidades y sus objetivos racionales y emocionales. Tiene que escribir algunos artículos para un periódico local, pero sueña con descubrir un nuevo arte Avanguardia y ser recordada como la mejor crítica de la historia. Ahora que hemos definido claramente nuestra persona, podemos empezar a crear tu viaje de cliente, llevándola por el camino que seguirá dentro del sitio web para llegar a la información que necesita y satisfacer sus metas finales. Para crear un viaje correcto del cliente, podemos imaginar dividir una línea de tiempo en diferentes momentos y arreglar algunos puntos dolorosos dentro de ella. Los puntos de dolor son momentos difíciles para el usuario donde nosotros, como diseñadores podemos actuar con el fin de resolver problemas. Esa es esencialmente la razón por la que partiendo de un viaje de usuario, podremos obtener una lista completa de requisitos para nuestra página web. Este es un ejemplo de cómo estructurar un viaje del cliente. Como puedes ver cada fila representa un tema diferente relacionado con el usuario que necesita ser rellenado. Por ejemplo, seleccioné para Camila, cinco momentos diferentes durante su viaje. En cada uno, traté de imaginar unos pensamientos y emociones posibles y usé emojis para tener una reacción más visualmente definida. Como puedes ver en el momento en que lee artículos y publicación, nuestro emoji expresa confusión, esto podría ser considerado en un punto de dolor y por lo tanto se convierte una gran oportunidad para que pensemos en una manera de hacer su viaje más fácil. Cuando diseñaremos nuestro sitio web, nos preocuparemos por dar información en palabras clave de la manera más fácil y clara posible. Para llegar a una conclusión con nuestra investigación de usuarios, tenemos un último ejercicio que hacer, se llama la declaración only-ness. Only-ness es, con mucho, la prueba más poderosa para definir una posición estratégica. Las marcas necesitan un posicionamiento fuerte porque el cliente tiene preferencias, si no destacas, las pierdes. Para ganar el juego de posicionamiento, tienes que contestar una simple pregunta, ¿qué te hace el único? Para nuestro sitio web de Matisse, la declaración de unly-ness sonará así, “el sitio web de Matisse será el único portafolio en línea sugiere y relaciona con temas de Matisse para curadores que quieran escribir algo inteligente”. En este punto de la lección, hemos sabido suficiente sobre nuestro usuario final y metas, es hora de estructurar experiencia nuestro sitio web. A la disciplina, a la estructura, se le llama el diseño de interacción. Al lado, también necesitaremos otra técnica clave, que se llama la arquitectura de la información. diseños de interacción tratan de definir a los usuarios posibles pensamientos y comportamientos, así como la forma en que el sistema les responderá. De manera más específica, el diseño de interacción utiliza la arquitectura de la información para representar y visualizar subdivisiones, grupos y relaciones que existen dentro del sistema del sitio web. Arquitectura de la información también conocida como IA, define el esqueleto de la página web mostrándonos la diferente sección que lo divide. En ciertos casos en los que nos enfrentamos a un sistema más complejo, nos ayuda a desarrollar flujos de un usuario. Para flujos, nos referimos a los entregables visualizando la ruta completa que los usuarios siguen a través de toda la solución. Existen diferentes tipos de arquitectura de la información, los más comunes son el sistema jerárquico, el secuencial, y el uso de una matriz. Tratemos de imaginar, por ejemplo, el IA de nuestra página web. Estos podrían seguir una organización secuencial, donde los usuarios se desplazan entre diferentes temas en el mismo nivel. Por el contrario, éste podría ser la visualización de los mismos contenidos en un diagrama jerárquico donde los usuarios pueden ir paso a paso por los contenidos para cumplir sus tareas. ¿ Estás listo para construir las bases de tu página web? Complete el ejercicio que pasamos en esta lección y prepárese para que vengan los, espere a que en el siguiente capítulo. 7. Vamos a la esquía.: Hola a todos, bienvenidos a nuestra sexta lección. Ha llegado el momento de poner en práctica lo que hemos aprendido hasta ahora. Entonces vamos a enmarcar alambre. En las siguientes diapositivas, procederemos paso a paso como primer paso, pero estableceremos nuestra mesa de trabajo Matisse. Después de eso, veremos cómo definir los módulos que alimentarán tu página de inicio y fuera para colocarlos dentro de una alambrada. Al hacerlo, siempre debemos recordar nuestro objetivo final de diseñar la página principal para los sitios web personales de nuestro personaje. Esa es la razón por la que durante esta lección, mantendremos un ojo tanto en el lado del diseño como en el contenido. Veremos cómo están profundamente vinculados entre sí. En primer lugar, necesitamos elegir en qué dimensiones queremos diseñar nuestra página principal. Por supuesto, al ser o un sitio web, se puede ver desde diferentes dispositivos y debe funcionar para cada uno de ellos. Pero en mi caso, por mostrar razones, diseñaré para una pantalla de escritorio. Aquí puedes ver los más comunes son, que es la resolución más grande para esta clase. Al llegar a los sitios móviles, probablemente habrás oído hablar de la primera expresión móvil. Pero, ¿qué significa? actualidad, la mayoría de las personas disfrutan del sitio web directamente desde sus teléfonos. Muchos diseñadores prefieren bosquejar primero para móviles en lugar de para pantallas de escritorio y aquí se puede ver la resolución que representa los dispositivos más vendidos y más populares. En otros casos y para algunas experiencias particulares, como las editoriales o interactivas. En cuanto por ejemplo, una realidad virtual suceden tamaño de tableta podría ser más adecuado para diseñar, sugeriré descargar la versión de prueba de Xd, un software licenciado por Adobe que se lo ha lanzado a nuestros diseñadores para crear fácilmente su diseños. También sketch es una gran herramienta cuando se trata de diseño de diseño de una manera rápida y súper precisa. El periodo de prueba de boceto es gratuito para el primer mes. Después de eso, puedes pagar $99 por tu licencia personal. Si no tienes tiempo para aprender un nuevo programa, también, Adobe Illustrator o Photoshop podrían ser herramientas adecuadas para diseñar. Pero calurosamente te sugiero que aprendas en tu boceto porque son realmente intuitivos y extremadamente útiles cuando se trata de digital. Entonces chicos, vayamos con nuestro proyecto de clase. Construyamos una estructura alámbrica. En resumen, podríamos decir que el wireframe es el esqueleto de nuestra página de inicio que recoge y organiza todos los elementos de nuestro layout. El primero que hay que hacer para construirlo, es volver a nuestra arquitectura de la información y tenerla en cuenta al diseñar. Por ejemplo, si pensamos en Matisse y el objetivo final de su página web, que es mostrar su obra y estos son poesía. Probablemente usaremos imágenes grandes, muchos signos gráficos y textos grandes. En primer lugar, el espacio en la parte superior de la página albergará el encabezado. El otro, es un elemento esencial porque permite al usuario llegar a cada sección del sitio web en cualquier momento que yo pudiera ser variable, generalmente se diseñaron el máximo 100 pixel i para una resolución de escritorio. El primer elemento imprescindible dentro del otro es el registro de la marca, que suele redirigir a la propia página de inicio. En mi caso, colocaré la firma de Matisse como logo. Otro elemento necesario, por supuesto, es el menú o más bien todas las etiquetas que enlazan a las diferentes secciones de nuestra página web. En este momento, en particular, en el que las redes sociales desempeñan un papel tan importante en la comunicación. Permítanme sugerir colocar dentro ahí, también hay algunos iconos sociales. Necesitan ser muy visibles en tu página web. Colocarlos dentro ahí, podría haber una opción válida. En mi caso, estos iconos estarán directamente vinculados con la red social de Matisse. Por encima del otro también podríamos proporcionar algún espacio para una diapositiva comercial en la que informar al usuario, por ejemplo, sobre noticias o próximos cielos. Por lo general, el espacio está utilizando sitio web comercial para informar a los clientes sobre servicios de entrega u ofertas especiales. De acuerdo, ahora es el momento de pensar en la primera gran área visible de nuestra página web. Dado que este será el primer contenido que tu usuario verá aterrizando en el sitio web, debe ser audaz. Invite al usuario a continuar desplazando y descubriendo otros contenidos. Por esta razón ahí, lo general se pueden encontrar videos, imágenes grandes, o un carrusel de imágenes. Este es el momento de vender. En cuanto a la copia, piense en un título notable. Todo miembro a añadir siempre un llamado a la acción. Si el usuario no se desplaza, es porque quiere hacer clic. En el segundo pergamino, presentaremos al personaje, en mi caso, Matisse. No exageres con las palabras. El central es que a la gente no le gusta leer algunas palabras, pero bien pensado sería suficiente para el usuario entienda rápidamente de qué estamos hablando. En esta sección, también decidí ahorrar algo de espacio para la nube de ataque. Podría ser útil si quieres darle al usuario la oportunidad de llegar de inmediato a lo que busca y al mismo tiempo, entender de un vistazo de qué se trata el arte Matisse. Después de ser atractivo e informativo con nuestra primera sección, es momento de mostrar nuestro contenido real con una serie de módulos dispuestos la pantalla interna de la columna Chu. Mostraré algún ejemplo notable del trabajo de Matisse. Como se puede ver, cada módulo está conformado por una imagen, un texto con título de proyecto y breve descripción y algunos textos. Estos módulos potencialmente son replicables sin fin. Pero permítanme sugerir de nuevo no exagerar la atención de la gente es muy fugaz. Lo bueno es que si el usuario ha estado desplazando tu sitio web hasta este punto de la página, es probable que continúe hasta el final y si se desplaza hasta el final, probablemente querrá visitar la próxima exposición de Matisse. Es por eso que colocar su módulo de calendario en este punto de la página, podría ser una elección inteligente al final del sitio web, trate de no perder la atención del usuario. Sugiero darle una visión rápida del universo de las redes sociales junto con un resumen del otro, para que pueda seguir descubriendo otras secciones de su sitio web. No olvides ahorrar espacio en el pie de página para infos legales más antiguos, y ahora es el momento de llenar este alambre. Esto significa que en las siguientes diapositivas, veremos cómo integrar contenidos de acuerdo a las decisiones que ya tenemos para clave en términos de estilo gráfico y aspecto y tacto. Si recuerdas, durante las cuatro lecciones, recogimos todos nuestros elementos visuales en un tablero. Lo que ven aquí, es mío, relacionado con Matisse. Tengo dos teléfonos diferentes. En cuanto a tamaño y estilo una gran paleta de colores con dos grises diferentes, formas irregulares y algunas imágenes con luz natural y el ambiente romántico y sí, este es mi llenar la página. En cuanto al adder, decidí ir con una solución transparente porque prefiero ver mi maravillosa imagen en pantalla completa. Elegí este cuadro en particular para expresar el poder del arte matisse, gracias a su color y composición y por su complejidad, necesito títulos, textos, y llamada a la acción para destacar claramente. Por eso elijo el blanco para los textos y el gris oscuro para los botones. Como recordarán, mis botones tienen esquinas redondeadas para anunciar una juguetona Matisse. Este es mi segundo scroll donde el usuario puede encontrar una introducción sobre Matisse. Por razones visuales, decidí dar más espacio para detectar la nube. Como se puede ver detrás de todos los contenidos a lo largo de la página, decidí colocar las formas irregulares que caracterizan al estilo Matise, cuanto a los aspectos más destacados del trabajo, opto por utilizar diferentes tipos de fotografía para equilibrar la narración. Por ejemplo, para las vidrieras, seleccioné una fotografía, un interior y para la litografía, utilizo directamente una imagen de autores. Para detalle desde la gavilla. Tan sólo para hacer otro ejemplo. Utilizo una fotografía la cual fue tomada durante una exposición. Como pueden ver, elijo usar los iconos que diseñé, los aztecas. Esos mismos iconos que puedes encontrar en la franja [inaudible] justo debajo de la otra. Para no perder el vínculo con las secciones anteriores, decidí poner mis formas gráficas también dentro del módulo de calendario de exposiciones. En el último módulo, encontramos los feeds sociales Matisse en los que podría haber una mezcla de fotografías, exposiciones y obras de arte y en la parte inferior de la página, se encuentra el pie de página con un fondo gris oscuro a diferenciarlo de la explosión de color de la página de inicio. En mi caso, decidí destacar el módulo de suscripción al boletín. Cuantos más seguidores seamos capaces de recolectar, más nuestro mensaje se difundirá en todo el mundo y eso es todo por esta lección, chicos. ¿Qué opinas? ¿ Estás listo para construir la página de inicio de tu personaje? No puedo esperar a ver tus obras de arte. Recuerda dejar algunos comentarios si te gusta esta lección o si solo tienes dudas, no dudes en ponerte en contacto conmigo y subir tu trabajo. Nos vemos en el siguiente capítulo. 8. Animación: Hola chicos, aquí estamos. Esta es nuestra lección número 7 y como nos acercamos al final de la clase, es hora de agregar algunos toques finales a la hermosa página de inicio que hemos diseñado. Sí, vamos a hablar de animaciones y cómo van a dar un impulso a los elementos de la UI en nuestra página. A lo mejor al final, será algo realmente sencillo, pero créanme, será suficiente para mejorar tu experiencia de usuario. Esta lección también es para mostrar y demostrar que el trabajo de los diseñadores no termina con el diseño. Nuestra misión es asegurar que la marca sea percibida también por estos pequeños pero significativos detalles. Todos ellos sumados, pueden ser una forma adicional de llegar a su público. Pero estos detalles también son necesarios para los usuarios ya que entablan un diálogo con ellos y hacen que su experiencia digital sea clara y fácil, pero no inusualmente o tan divertida y gratificante. Por supuesto, aunque ésta pudiera ser una parte emocionante del trabajo, es importante no abrumar al usuario. Entonces no agregues toneladas de efecto ni animaciones súper complicadas. Recuerda siempre que menos es más. Empecemos desde la base. En las siguientes diapositivas, veremos algunas definiciones esenciales de micro interacción y retroalimentación de acción, aprendiendo cómo funcionarán sustancialmente. Para ser claros desde el principio, en este diagrama, encontramos una definición de la diferencia entre ellos. micro interacciones se desencadenan por una acción o por una alteración en el estado del sistema. La retroalimentación de acción es una respuesta a este desencadenante, que se comunican visualmente al usuario, generando así un ciclo virtual. Además, la retroalimentación es necesaria para mantener informados a los usuarios, permitiéndoles estar seguros de lo que está sucediendo en un momento específico durante una acción. Incluso si no te das cuenta, sobre todo cada producto digital se llena con micro interacciones. Si no las notas mientras usas una app, bueno, podría ser significante que son buenas. Antes de continuar, aquí te presentamos una breve recapitulación de la recomendación y las mejores prácticas que mencionamos en las diapositivas anteriores. Si bien piensa en animaciones, recuerda, es muy importante crear hábitos para que el usuario pueda acostumbrarse fácilmente a la experiencia digital que está viviendo. No exageres las animaciones de redundancia, pero asegúrate de que los usuarios se comuniquen con la interfaz y la entiendan. Bueno, después de esta recomendación, ahora es el momento de ver algunos grandes ejemplos de interacciones, animación y retroalimentación. Espero que te hagan entender cómo hasta el giro más pequeño podría marcar una gran diferencia en cuanto al éxito de la marca digital. Aquí estamos otra vez. Esta es la lista que vimos en la lección 4. Cuando conocimos por primera vez nuestros elementos de interfaz de usuario, como se puede imaginar, cada uno de ellos podría tener su propio efecto animado el cual puede mejorar su rendimiento y dejarlo claro al usuario. Pero por supuesto, ya que tenemos poco tiempo, pasaremos rápidamente por una visión general. Partiendo de la animación más simple y común puedes encontrar hasta algunas complejas que podrían ayudar al usuario a percibir tu marca en toda su totalidad. Por eso elijo un ejemplo para mostrarles, que están más relacionados con los elementos que ya hemos diseñado durante nuestra clase. Seguro que te explicarán cómo esta animación realmente puede contribuir a construir tu identidad digital, dando significados adicionales a tus diseños. Empecemos por los iconos. En la lección número 4, vimos cómo cambiar algunos parámetros mientras diseñamos, podemos hacer también cambiar los valores que comunican. Lo mismo se puede decir para una animaciones ya que podemos diseñarlas de acuerdo a nuestro posicionamiento de marca. Por ejemplo, podemos percibir a primera vista la diferencia entre los iconos de la parte superior y los de la parte inferior de esta página. Si bien los primeros son de corte claro, los segundos son suaves y fluidos. Aquí, seguro, los de arriba, dan una sensación inmediata de diversión, mientras que el de abajo parece correr antes de expresarse plenamente una vez que se llenan, dando una percepción más dinámica. Sí, podemos decir bastante lo mismo también para los botones. En esta diapositiva, por ejemplo, mientras que el contorno es muy tranquilizador, guiando al usuario hasta que se realice la acción, el segundo es directo e informativo también con la ayuda del color verde al final. Porque sí, la retroalimentación también se puede dar por colores. Aquí te presentamos dos ejemplos interesantes en los que la interacción se conecta visualmente a lo que realmente significan de manera literal, comunicando sus valores con formas y colores. cuanto a los campos de texto, podemos decir que existen diferentes formas en las que podemos impulsarlos dando, por ejemplo, un giro más formal o informal a la acción de llenar un simple insumo de texto. Pero como decíamos antes, no sólo se pueden aplicar micro interacciones para proporcionar a los usuarios una percepción más precisa de nuestra marca. Algunas animaciones pueden estar directamente relacionadas con nuestra identidad digital, como las relativas al logotipo y otros elementos de la página. Por ejemplo, hablemos del logotipo. Todos lo consideramos la expresión más obvia de nuestra marca. Pero, ¿alguna vez pensamos en animarlo ya que estamos actuando sobre un entorno digital? Aquí te presentamos dos animaciones de logotipos diferentes. Como hemos visto para iconos y botones también la forma en que animamos el logotipo puede expresar los valores de nuestra marca. En estos casos anteriores, mientras que Mailchimp es más inmediato y compactado, logotipo de Ubers consigue su camino siendo llenado línea tras línea. realidad hay muchas otras cosas que podemos hacer al hablar de animaciones para elementos de interfaz de usuario. Mira el primer puerto de vista del sitio web de Hola lunes por ejemplo. Todo en la porción del habla, podemos ver además de la ilustración principal, la animación de texto y la apertura de la barra lateral con la siguiente interacción sobre las voces del menú. Como puedes ver, todo es muy suave y suave y se adhiere a una paleta de colores blanco y negro. Aquí hay otro ejemplo que muestra cómo la simplicidad también puede entregar mucha información. Basta con echar un vistazo a la animación del menú. Cuando ordenes en una etiqueta, inmediato puedes tener una vista previa de lo que verás en esa sección, lo cual es muy útil para que el usuario justo a donde quiere ir. Ahora, es nuestro turno. Sé que cuando hablamos de animaciones no todos se sienten cómodos. Siempre parecen difíciles de hacer. Bueno, profundizemos en eso para ver qué podemos hacer juntos. En primer lugar, recuerda que una gran parte de la animación que ves en un sitio web se realizan directamente con código modificando parámetros con CSS. Esto significa que nuestro papel como diseñadores es el de proporcionar a los desarrolladores una idea clara de lo que queremos hacer. Podemos darles enlaces directos a algunas referencias en línea que nos gustan o prototipos de algo. Para esta segunda opción, contamos con diferentes herramientas que podemos utilizar. Adobe After Effect es genial ya que nos permite ser muy precisos en proporcionar un simulacro de lo que nos gustaría ver en línea. Para las animaciones más simples son, por ejemplo, gifs. También podemos utilizar Adobe Photoshop. Pero, para cubrir una amplia gama de animaciones, ahorrando mucho tiempo, principio será el mejor. No tan inmediato, pero seguramente vale la pena el esfuerzo. Utilizé Adobe After Effect para crear dos ejemplos de animación que me encantaría ver en mi sitio web de Matisse. El primero es el llamado a las acciones sobre efecto. Para registrar la lúdica y las líneas imprecisas, reconocemos que como icónico del estilo Matisse, decidí usar una transición suave para hacer que el botón responda a mi acción. También quería animar los iconos. Vemos dentro de los botones tecnológicos para estos elementos, opto por enfatizar el campo de color poco preciso, dándole como movimiento movido al pasar por encima de los botones. ¿ Y los elementos de tu página de inicio? ¿ Cuál y cómo quieres animarlos? No olvides subir tus resultados en los comentarios. Entonces aquí estamos chicos. Este es el final de esta lección. Ahora ven conmigo al siguiente. Te estoy dando algunas mejores prácticas generales para completar nuestro proyecto. 9. Mejores prácticas: Hola a todos. Bienvenidos a esta nueva lección. Dado que nuestro trabajo se realiza en este punto, en las siguientes diapositivas, les estoy dando algunos consejos útiles para la gestión general del proyecto. Como se puede ver, básicamente serán un recapitulación de buenas prácticas. Para ser precisos, entenderemos qué significa el diseño con perfección de píxeles, y cómo construir lineamientos gráficos y fotográficos. Cada uno de estos puntos son necesarios para garantizar consistencia dentro de su sitio web. En esta etapa de la clase estamos hablando de los siguientes pasos que te permitirán a ti u otros diseñadores de tu equipo llevar adelante el gran trabajo que hiciste, y diseñar nuevas páginas del mismo sitio web. Por eso necesitamos reglas a seguir junto con claros lineamientos gráficos y fotográficos. De hecho, mirando lo que hemos hecho, es fácil entender que probablemente estamos justo al inicio de nuestro trabajo. Necesitamos completar nuestro sitio web, diseñando las páginas restantes las cuales tienen que ser consistentes con la página principal y parte del mismo sistema. Por supuesto, la primera regla que necesitamos seguir es la perfección del píxel. Esto no está directamente relacionado con la consistencia, pero nos permitirá trabajar con base sólida de diseño y evitar problemas futuros. Como ya sabrás, un píxel es el elemento controlable más pequeño de una imagen representada en la pantalla con 1,920 píxeles por 1.080 píxeles. Por ejemplo, podemos tener 1,080 columnas y 1,920 filas de píxeles. Por lo tanto, el número total de píxel será de 2,073,600 píxeles en pantalla. Seguir un método perfecto de píxel significa tener exportaciones más nítidas y obras de arte más precisas. Pixel se comporta como una cuadrícula súper diminuta y tenemos que apegarnos a esta rejilla para asegurarnos de que nuestro diseño será perfecto. Lo que tenemos que hacer para ser pixel perfecto es, primer lugar, mantener un ojo en los números. Nuestra dimensión exterior y los de todos los elementos que diseñaremos en la página necesitan estar llenos sin comas. Los iconos también deben diseñarse dentro de una cuadrícula de píxeles precisa y no se superponen en los bordes. Por ejemplo, teniendo una mirada hacia atrás a nuestros iconos, podemos ver que ya hemos diseñado dentro de la cuadrícula. Establecemos algunas guías de geometría y las usamos para dibujar nuestros iconos, respetando límites y direcciones. Nuestro método de llenado se superpone a la cuadrícula, pero esto puede considerarse una elección de sitio gráfico, y no interfiere con el método que seguimos para diseñar nuestros iconos. Ahora, que sepamos asegurar una gran cortesía de diseñador, vamos a entender cómo fusionar en una guía de estilo gráfico todas las reglas que necesitamos para diseñar nuestro sitio web. Si miras empresas como Dropbox, Google, y Spotify, notarás que cada una de ellas tiene su propia estética única. A través de todos sus productos, existe un fuerte sentido de consistencia y uniformidad. Esto sucede también porque tienen pautas claras que respetar, pero ¿qué es exactamente una guía de estilo? Podemos pensar en ello como un documento que resume todo el sistema de diseño y actúa como guía, tanto para el diseño de nuevos elementos como para la siguiente implementación. Una guía de estilo en su conjunto puede tener varias secciones y explorar un gran número de temas, pero para este propósito de clase, haré sólo algunos ejemplos relacionados con los elementos en los que ya nos hemos enfocado. Claramente, cuanto más entres en detalles, más consistente será tu diseño. Hablemos por ejemplo, de colores. En esta guía de estilo, podemos recopilar todas las decisiones que anteriormente tomamos en términos de paleta, y definir para qué elementos los diseñadores deben utilizar un color específico. Por ejemplo, las acciones de capa siempre se mostrarán en su gris oscuro para el estado predeterminado. Tiene para tipografía, podemos definir una lista de tamaños a utilizar a través de todas las páginas. Por ejemplo, cada título grande estará en Panamera Regular 120 punto. El cuerpo en cambio siempre estará en Panamera Light 36 punto. Para facilitar las cosas hay algunos códigos que podemos usar para referirnos al uso de títulos particulares. Por ejemplo, H1 suele estar vinculado a títulos primarios, H2 es cuatro secundarios, y así sucesivamente. Para los botones, necesitamos especificar dimensiones y márgenes, pero también tenemos que definir cómo cambian en consecuencia a su estado. Podemos, por ejemplo, asociar un color diferente cuando el usuario haga clic en él y definir cuál comunica que se puede hacer clic en el botón. También puede ser muy útil tener algún ejemplo de interacción dentro de la guía de estilo. De esta manera, podemos asegurar que las animaciones extranjeras se diseñen en consecuencia a este estilo que hemos definido para el primero. Como dije antes, esto es sólo una muestra de lo que puede ser una guía de estilo, pero a partir de estos ejemplos, podemos ganar algunas reglas doradas útiles. En primer lugar, recuerda que la guía es una salida que viene después del proceso de diseño. Resumiendo, por lo tanto, diseña hasta que estés satisfecho, luego estandarizalo. Podría ser genial si también incluyeras algunos principios de diseño que te inspiraron durante el proceso de trabajo, junto con algunos nuevos estudios con el fin de que otros diseñadores y desarrolladores entiendan cuándo usar elementos específicos. Ahora es el momento de entrar en el último capítulo de esta lección, los lineamientos fotográficos. Las pautas fotográficas definen qué tipo de imágenes usted y otros diseñadores deben usarla para transmitir correctamente la voz y la identidad de su marca. Uber, por ejemplo, dedica mucho espacio a la fotografía dentro de sus lineamientos de difusión, yendo muy profundo en detalle y considerando diferentes categorías. Como puedes ver, las personas de Uber dividen la fotografía en subcapítulos los cuales están relacionados con cinco temas principales, interacciones, composiciones, casting, iluminación, color, y ubicaciones. cada subcapítulo se incluyen las mejores prácticas y recomendaciones para ese tema específico. Del estudio de caso de Uber podemos aprender mucho. En primer lugar, mantén siempre tu marca en el centro. hora de elegir imágenes, pregúntate, Siguiendo los principios de mis marcas, qué imágenes serán buenas para su comunicación? Entonces recuerda definir los tipos de tema que se verán en tus imágenes y en qué contexto actuarán. En tercer lugar, definir luces y tonos que son esenciales para transmitir emociones y sentimientos específicos. Probemos las categorías de Uber en nuestra página web. ¿ Te acuerdas de los valores de la marca Matisse? Dijimos que eran imperfecciones, sencillez, y falta de pretensiones. Probablemente en lugar de mostrar solo obras de arte podríamos suponer que también mostramos otros tipos de contenido. Bueno, considerando las imágenes que ya hemos puesto dentro del layout, podemos decir que nuestros ajustes se abrirán en espacios modernos con toboganes naturales y cálidos. La gente que quiera ser el centro de atención pero el arte Matisse lo será, por lo tanto la gente no será reconocible. Preferir, por ejemplo, gente borrosa de fondo. Su interacción con el arte será inmersiva y contemplativa. Para finalizar este capítulo, aquí te presentamos algunos consejos adicionales que me encantaría darte. Siempre se trató de proporcionar contenidos originales de alta calidad. Será un super plus para tu marca y los usuarios lo reconocerán. Si estás con un presupuesto, considera catálogos de stock, algunos de ellos son de libre acceso y te permiten descargar grandes imágenes en alta resolución. De lo contrario, no olvides que también, ilustración puede transmitir tu identidad de marca. Dales un estilo distintivo y ya estás listo para ir. Chicos, ahora estamos al final de esta lección. No olvides escribir algunos comentarios si te gusta. Espero que me sigan a la siguiente, que marcará el fin de nuestra clase juntos. Nos vemos. 10. Consejos y conclusiones: Hola mis queridos amigos, aquí estamos. Esta es la última lección de nuestro viaje. Estoy muy triste, pero al mismo tiempo, también estoy bastante seguro de que aplicarás todo lo que hemos aprendido juntos para diseñar algo increíble. Antes de despedirnos unos a otros, tengo algunos consejos sobre el proceso de diseño que me encantaría darles como conclusión de su PAF. De hecho, es útil saber que existen herramientas y mejores prácticas que nos pueden apoyar durante las diferentes etapas del desarrollo del proyecto. En esta lección, veremos algunas herramientas populares para compartir, tanto con nuestro equipo como con el cliente, el desarrollo en curso de nuestro proyecto, y algunas mejores prácticas para exportar adecuadamente activos con el fin de que los desarrolladores hagan su mejor trabajo. Además, también descubriremos que existen algunas reglas fáciles de seguir para garantizar un ambiente de trabajo alegre entre los miembros del equipo. Realmente necesitamos estar conscientes de todo esto, simplemente porque la mayoría de las veces no vamos a trabajar solos. Por lo tanto, es súper importante aprender a colaborar adecuadamente con los diferentes actores involucrados en nuestra obra, como el equipo de diseño, clientes y desarrolladores. A lo mejor no siempre será fácil y divertido. Necesitaremos mucho tiempo para aprender a manejar un proyecto. Pero cuanto más tengamos experiencia, más podremos manejar situaciones diferentes y complicadas. Para colaborar, lo primero a considerar es cómo compartir salidas sin ser demasiado caótico. En esta sección, tendremos una vista rápida de dos de las herramientas más conocidas que utilizan los equipos de todo el mundo para compartir todo lo relacionado con el diseño, desde el concepto hasta nuestros tableros, hasta comentarios y especificaciones. Esta recomendación es realmente importante y siempre debe ser tenida en cuenta. Tenga siempre en cuenta que al final de la fase de diseño, el trabajo no está terminado en absoluto. Por ejemplo, puedes usar InVision para compartir tus diseños, que es un servicio web que ayuda al diseñador a exhibir y crear prototipos de productos digitales, le gusta el sitio web y las aplicaciones de una manera muy rápida, fácil e intuitiva. El primer subir es abierto y accesible para todos, ¿por qué? Para más de un proyecto, necesitarás una suscripción. Cuando subes tus pantallas, InVision las muestra de una manera que imita una experiencia de navegación real. Aquellos que tengan acceso al proyecto también pueden inspeccionar los diferentes componentes de su diseño, y dejar unos comentarios correctos para mantener un diálogo fácil y directo respecto al proyecto. InVision es bastante útil porque nos permite crear prototipos y compartir la vista previa de los productos con el cliente u otros miembros del equipo. Los clientes pueden dejar comentarios, y estas características permiten una conversación clara entre personas que a menudo ni siquiera hablan el mismo vocabulario. Con InVision, también puedes convertir directamente tus mesas de trabajo en specs-all de diseño, y comunicarte con los desarrolladores sin ninguna otra herramienta. Para compartir salidas, también puedes usar Zeplin, otra gran herramienta online que funciona junto con los programas de diseño más comunes. Al igual que en InVision la primera subida del proyecto es gratis. Para que puedas probarlo y entender por qué es tan increíble. Zeplin nos permite subir, organizar, inspeccionar y comentar nuestro diseño. El interfaz es súper limpio y no te permitirá perderte durante las diferentes etapas de tu trabajo. característica más sorprendente de Zeplin es que puedes exportar tus archivos directamente desde el software de diseño, ya sea que estés usando Sketch, Adobe XD, Figma o Photoshop. Con tan solo un plugin, genera automáticamente especificaciones a medida que puedes recolectar en guías de estilo organizadas. Para que todos en el equipo puedan acceder a los últimos recursos de diseño y recibir notificaciones cuando se produzcan cambios. Lo que hemos visto hasta ahora son herramientas que entre sus características nos dan la oportunidad de obtener activos sin las molestias de exportarlos manualmente de manera individual. Pero en caso de que necesites exportar tus activos uno por uno, lo que puede suceder fácilmente, hay algunas cosas que debes saber para hacerlo bien. Una vez que los consigas, nada te detendrá, y serás el héroe de los desarrolladores. ¿ Estamos seguros de que todos sabemos cuáles son los activos? Por activos, nos referimos a todos los materiales que necesitamos para entregar con éxito un proyecto. De acuerdo con la terminología de diseño y desarrollo web, los activos típicamente se referían a contenido de texto, gráficos, fotos, videos, archivos de audio y bases de datos. Para garantizar un resultado perfecto de píxel, los activos necesitan tener una doble resolución porque pantallas retina tienen una densidad de píxeles más alta que las tradicionales. exportación de alta definición puede convertir la velocidad de carga de tu sitio web muy pesada, lo que podría influir en la experiencia de revisión del sitio web o aplicación. Puede resolver fácilmente este problema utilizando herramientas en línea apropiadas para cambiar el tamaño de las imágenes. Por ejemplo, TinyPNG puede bajar el peso de tus imágenes sin menoscabar la calidad general. Al exportar activos, recuerde seleccionar el formato correcto. Por ejemplo, SVG funciona para archivos vectoriales como iconos, pero no puede funcionar para imágenes. Es mejor elegir un formato PNG o JPEG. También el modo de color es muy importante. Por lo que recuerda exportar siempre en RGB, estamos trabajando para el mundo digital. Aquí está la tercera parte de nuestra lección, por último pero no menos importante. Ya que nadie tiene éxito solo, es posible que se te pida que firmes tu ego creativo y empieces a pensar en una perspectiva orientada al equipo. Pero, ¿por qué garantizar un ambiente de trabajo fresco es tan importante? Durante tu carrera, es probable que te encuentres trabajando dentro de un equipo, es muy importante tener en cuenta que si eres el gran jefe o el joven interno, tendrás que cumplir tu propia tarea de lo mejor, y en consideración de la dirección general del equipo. Entonces si estás a cargo de un equipo, intenta conocer a tus compañeros, y cuáles son las cosas que les gusta hacer. Recuerda que cada miembro de tu equipo es un experto en su propia disciplina. Por lo tanto, estar abiertos a sus opiniones e insumos. Sé ese tipo de persona con la que otras personas quieren trabajar, asegurándose de que todo el equipo se sienta cómodo y seguro para expresarse. Entonces aquí estamos al final de esta clase. Espero que mis insumos hayan sido útiles. Estoy aquí por todo lo que puedas necesitar, y me encantaría ver si estás usando algo que hemos aprendido juntos en un trabajo específico. Por supuesto, me encanta ver tu resultado. Entonces no tengas miedo de contactarme, y nos vemos en la siguiente clase.