Diseño web para principiantes: cómo diseñar un sitio web en Adobe XD (UX/UI)

1. ¡Hola!: La mayoría de la gente piensa que tienes que gastar miles de dólares en un grado de diseño o campamentos de entrenamiento inmersivos para obtener tu estrella en la industria del diseño hoy en día, ese ya no es el caso. Si entiendes los fundamentos del buen diseño e implementas esas estrategias de diseño, proyecto de diseño de interiores, te prometo que podrás tener éxito en tu carrera de diseño. Mencioné con acero y soy una diseñadora gráfica autodidacta que dirige mi negocio a tiempo completo para mi laptop, lo que esencialmente me da el tiempo libertad para hacer más de las cosas que amo en un lugar más base frecuente. Me enfoco principalmente en branding, diseño web y redacción de café de ventas para empresas y las industrias de salud, bienestar y coaching. Y he trabajado con clientes incluyendo el laboratorio de piel clara, la cita futura, Sophie, querida, armonía Qian y mucho más. No tengo una licenciatura en diseño y en teoría, no tengo las credenciales adecuadas para poder llamarme diseñador. Pero prácticamente me he enseñado todo en el trabajo implementando estrategias que he aprendido en cursos como este, mi cartera demuestra el punto de que puedes convertirte en un diseñador pase lo que pase. Si está listo para obtener su estrella en la industria del diseño, necesitará aprender a ser ingenioso, hacer el trabajo y comenzar a implementar las estrategias para mostrar su cartera de una manera que permita usted para mostrarse con confianza en el terreno de juego o servicios a sus clientes ideales. Realmente creo en el aprendizaje activo, por lo que he creado para los informes del cliente para el proyecto de clase a lo largo de las diferentes lecciones de este curso, podrás seguir e implementar tus aprendizajes en los proyectos de clase que he creado para ti. Este curso está diseñado para cualquier persona que quiera iniciarse en una industria del diseño web, ya sea freelance o en el mundo corporativo, o para aquellos que quieran aprender un poco más sobre el sitio web proceso de prototipado y Adobe XD. Gracias por elegirme para ser parte de tu viaje de diseño, y no puedo esperar para comenzar. 2. Preséntate: Ahora que sabes un poco de mí, quiero conocerte a un nivel más personal. Preséntate en la sección de discusión abajo con tu nombre, edad, experiencia en diseño, de dónde eres y qué cosas de la industria del diseño te excitan más. Será una gran oportunidad para conectarse a la red con otros estudiantes que también están tomando esta clase que están en una temporada similar de su carrera a la tuya o para establecer contactos con personas que están en las industrias que aspiras a ser. Yo iré primero. Yo soy Angélica, tengo 25. Soy diseñadora gráfica freelance que se especializa en branding, diseño web y copia, y he estado en la industria por más de tres años y contando, me encanta poder desafiar mi creatividad prácticamente en el día a día y trabajando con múltiples clientes en múltiples modelos de negocio diferentes, en múltiples estados y países diferentes. Una de mis cosas favoritas de todos los tiempos sobre mi negocio de diseño es poder ayudar a emprendedores de todos los ámbitos del negocio a establecer una base de operaciones que les permita presentarse con confianza para sus clientes y difundir su misión en el mundo. Ahora es tu turno. Asegúrate de presentarte en la sección de discusión a continuación. 3. Tus proyectos de clase: He creado un PDF de clase que va junto con todos los diferentes resúmenes de proyectos que reviso en esta clase. Para que pueda hacer referencia fácilmente a las asignaciones en su propio tiempo. Asegúrate de ir a la sección de Recursos para descargar tu PDF y luego podremos sumergirnos en la sección de proyectos de clase. Dentro del PDF, podrás encontrar los cuatro resúmenes de clientes, así como los diferentes parámetros de diseño y desafíos que tienes que acompañan a cada tarea. También encontrarás una lista de recursos que vincula todas las diferentes plataformas que se utilizan en el día a día en mi negocio de diseño. En esta clase, repasaré todo mi proceso para cada resumen del proyecto. Y también podrás seguir e implementar esas estrategias en tu propio proyecto de clase, project brief one es un estudio de yoga llamado alquimia yoga. No tienen activos de marca, lo que significa que no hay imágenes, colores, café o branding, pero quieren crear un sitio web que se sienta neutral y orgánico proyecto breve para es el restaurante mediterráneo llamada captura 35. Tienen activos de marca existentes como el logotipo, menú, las imágenes y el café. Y llevan más de diez años en el negocio y quieren modernizar su sitio web. Y esencialmente vas a tomar sus activos de marca existentes y modernizar su sitio web de una manera que te sientas un poco. En el resumen de proyecto tres, tienes riendas creativas completas para diseñar un sitio web y tu propio estilo. Tendrás dos opciones. opción uno es rediseñar el sitio web de un negocio o marca de su elección. Y la opción dos es diseñar un sitio web para la existencia de un cliente soñado o hacer creer que este proyecto está diseñado para ayudarte a descubrir tu propio estilo de diseño en la industria que aspiras a estar en un experimento con diferentes elementos de diseño que te atraen naturalmente. Y el resumen del proyecto es diseñar tu propio sitio web. Como diseñador, el desafío será usar tus propias imágenes y escribir tu propia copia de sitio web que te diga como diseñador buscado, encontrarás mi proceso exacto sobre cómo me acercaría cada informe del cliente basado en los parámetros que se le dieron a los proyectos. Y también podrás seguir e implementar todas esas diferentes estrategias basadas en lo que aprendiste en cada uno de los resúmenes de los clientes. Estoy muy emocionada de empezar. Asegúrate de descargar el PDF en la sección de recursos. Y te veré en el siguiente video. 4. Recursos de diseño gráfico: Entonces, antes de lanzarme a mostrarles mi proceso exacto para diseñar sitios web, quería guiarlos rápidamente a través de algunos de mis recursos más queridos al diseñar un sitio web y crear prototipos un sitio web en términos de inspiración de diseño, si has estado en el espacio de diseño, probablemente hayas oído hablar de muchos de estos recursos, pero obviamente Pinterest es un gran lugar para encontrar inspiración. Simplemente puedes buscar en la barra de búsqueda o diseño web y diseño de marca , diseño editorial. Y también te voy a mostrar que en mi proceso de diseño más adelante, Behance es otra plataforma realmente genial para diseñadores gráficos en general, puedes encontrar inspiración de diseño web, diseño de logotipos inspiración, y también conectar con otros diseñadores también. Y regatear con tres Bs también es un recurso realmente genial para los diseñadores. Puedes usarlo como un centro para encontrar inspiración para aplicaciones, para sitios web, para marcas, prácticamente cualquier cosa relacionada con el diseño que puedas encontrar en Dribble también. Así que esos son los tres principales recursos de inspiración de diseño que utilizo día a día en mis proyectos. Y todos son muy, muy útiles en términos de dónde encontrar fuentes, iconos y otros activos de marca. Utilizo dos recursos primarios. El primero son los elementos Envato. Por lo que tengo una suscripción mensual a Envato Elements. Creo que merece la pena porque pagas una suscripción mensual, pero luego tienes acceso a todo tipo de fuentes, todo tipo de gráficos, todo tipo de plantillas. Y realmente puedes usar esto como un recurso para encontrar iconos también. Entonces, aunque vaya a plantillas gráficas, también verás que hay maquetas que podrías usar en tus proyectos de branding. Y me encanta esta plataforma y realmente uso en el día a día para encontrar inspiración para todos mis proyectos. Puedes encontrar iconos, cualquier cosa que se te ocurra, probablemente puedas encontrar en elementos Envato. Realmente me encanta esta plataforma. Honestamente, esta es mi plataforma de referencia para todo lo que uso en cuanto al diseño, Creative Market es otro lugar realmente genial para encontrar. Fuentes, iconos, plantillas de gráficos y demás. He comprado paquetes de fuentes aquí antes. Y lo que realmente me encanta de Creative Market es que tienen muy buenas plantillas para branding. Más específicamente, diría, pero prácticamente puedes encontrar en la mayoría de las cosas en Creative Market desde plantillas de redes sociales, maquetas, currículums, presentaciones, cualquier cosa relacionada con el diseño también, que puedes encontrar en Creative Market. Entonces esos son los dos primeros lugares que utilizo para encontrar fuentes, iconos, a veces imágenes libres de derechos de autor, a veces videos libres de derechos, muy a menudo maquetas para mis proyectos de branding. Entonces, si quiero exhibir uno de los logotipos que he diseñado en un escaparate. Tienen maquetas donde puedes hacer eso. Entonces esos son mis dos recursos principales sobre dónde encuentro que la mayoría de mis activos de marca, y honestamente son mis dos recursos más queridos los que uso todos los días en términos de encontrar una paleta de colores. Entonces coolers.co es un foro de lugar realmente genial para tratar de encontrar paletas de colores. También uso esto en el día a día. Lo que es realmente útil también es que tienen nombres coloreados. Entonces, si estás diseñando una guía de marca, también podrías usar esto ya que algunos de ustedes son nombres de color en su guía de marcas. Entonces coolers.com es un recurso realmente genial para encontrar colores y el generador de paleta de colores en Canva. No estoy muy seguro de cómo llegas aquí desde la página principal, pero por lo general solo soy el generador de paleta de colores de Google Canva y esto aparece. Lo realmente bueno de esto es que podrías subir cualquier imagen y luego te mostrarán una paleta de colores basada en la imagen que hayas elegido. Entonces esto es realmente útil si tus clientes tienen sus propias imágenes y quieres sacar colores de sus imágenes, este es un gran recurso para eso también. 5. Cómo diseñar un sitio web de alta conversión: Entonces, antes de entrar en mi proceso de diseño, quería guiarte rápidamente a través de diferentes características que te ayuden a crear un sitio web de alta conversión en esta época. No solo tienes que hacer algo bonito, sino que también tienes que hacer algo estratégicamente comercializar la marca con la que estás trabajando. Entonces, si sabes cómo diseñar tus sitios web con una mentalidad de embudo, podrás mostrar resultados para tus clientes en más formas que solo un sitio web bonito. Entonces solo voy a guiarte a través de algunas de las características, lo que tengo en la mayoría de mis sitios web. Entonces, lo primero es lo primero, queremos hablar de crear un embudo estratégico en tu página de inicio. Si eres diseñador y no tienes experiencia en marketing, quizás no sepas realmente qué es un embudo. A básicamente un embudo de marketing ayuda a crear un enfoque más estratégico entre conseguir que alguien que no conoce la marca a conocer realmente la marca, llegar realmente a las marcas, trabajar juntos. Posicionar estratégicamente a alguien para llegar realmente a la marca para la que estás diseñando un sitio web para que pueda aumentar las ventas, reservar una llamada, comprar un producto y cosas a lo largo esa naturaleza. Entonces la clave es asegurarse de que realmente tomen medidas sobre cualquiera que sea la acción principal que quieras que lo tomen. Por lo que la página de inicio de un sitio web es una primera impresión e introducción a la marca, por lo que es sumamente importante diseñarlos de una manera que canalice a las personas a través de todo el sitio web. Una cosa a tener en cuenta es que su página de inicio debe tener una descripción de alto nivel de cada página del sitio y, naturalmente, debe animar a las personas a dar el siguiente paso, que es navegar a través del resto del sitio para aprender más o para tomar algún tipo de acción al final de todo. Entonces, en términos de tu página de inicio, tu página principal debe enlazar a cada página interna que tengas. Entonces, si tengo una página de servicios, quiero asegurarme en mi página de inicio, toco en la página de servicios. Si tengo una página de portafolio, quiero asegurarme de tocar la página Portafolio en mi página de inicio. La página de inicio sirve como embudo al resto de tu sitio web. Entonces, cualquier edad que tengas en tu navegación, quieres asegurarte de tocar ese punto en la página principal. Entonces, algunas formas de lograr esto es asegurarse designar una sección en la página de inicio para cada página del sitio web. Como ves en el lado derecho, hay llamadas a acciones prácticamente en cada página y cada sección hace referencia a esas páginas diferentes. Entonces, si miras de cerca por aquí en el lado derecho, verás que esas llamadas a acciones realmente enlazadas a las diferentes páginas que están en la navegación principal. Otra cosa es asegurarse de que el 80% de las secciones de tu página de inicio deben tener un llamado a la acción. Y eso es para llamarlos a la acción. Para dar click en la página siguiente Para conocer más sobre la marca, para llegar a la marca para adquirir productos. Lo principal en tu página de inicio es asegurarte de que la mayoría de las secciones de tu página de inicio tengan algún tipo de llamado a la acción para que podamos canalizar estratégicamente a las personas hacia la siguiente página del sitio web. Y luego finalmente, siempre, siempre, incluir siempre el llamado a la acción final en todas las páginas del sitio. Ahora, la mayoría de los sitios web tendrán una llamada a la acción principal, especialmente cuando recién estás comenzando, pero a veces pueden tener múltiples llamadas a la acción. Así que digamos, por ejemplo, tienes una página de servicios así como una página de curso. En la página de servicios, desea asegurarse de que el pie de página tenga el llamado a la acción para reservar una llamada de ventas, o ponerse en contacto para obtener más información sobre cómo pueden trabajar juntos. Y luego en la página del curso quieres llamar explícitamente a la acción el hecho de que quieres que alguien compre. Entonces ese debería ser el llamado a la acción final en nuestra página del curso. Asegurarse de tener un llamado a la acción en cada página principal. Esa no es tu página de inicio. Esto se está poniendo un poco prolijo, pero todo esto tendrá sentido una vez que realmente pase por mi proceso. Y entonces también siempre puedes hacer referencia estos puntos más adelante cuando entres a diseñar tu propio sitio web, lo siguiente es asegurarte de tener un gancho cautivador y una copia cohesiva, el héroe de tu sitio web, que es todo lo que está por encima del pliegue. Lo primero que veas al aterrizar en un sitio web debe escribirse de manera clara y cautivadora. Deben servir como el gancho de toda tu marca para asegurarte de que estás atrayendo a la gente. Básicamente es un factor decisivo sobre si el prospecto interesado debería seguir leyendo a través de tu sitio web o si deberían seguir adelante y pensar que tal vez esto no sea para mí. Asegúrese de que su copia esté escrita estratégicamente de una manera que describa lo que ofrece la marca y el punto de dolor en sí. En el lado derecho, cuando mis clientes, Sophie, quien es la entrenadora de autoestima, creamos esta sección de héroes para asegurarnos de que estábamos aprendiendo en las personas correctas a las que sirve. Y si no encajan bien, por lo general podrán saberlo desde la primera sección del sitio web. Y es mejor asegurarse de disuadir los clientes que no encajan bien tan pronto como pueda. Así que asegurarse de que tu héroe realmente llama a la acción a tus clientes del alma gemela o la marca es súper, súper crítico. Entonces en este sitio web que tenemos, puede haber miles de cosas en su lista de tareas pendientes. Solo hay uno tú, como entrenador de autoestima, te ayudo a diseñar una vida que sirva tus dones únicos y visión de vida para que puedas vivir la vida. No puedes dejar de pensar en ello. De alguna manera crea un sentimiento que cautiva los intereses de alguien que podría pensar, oh, sí, soy digno de vivir en una vida más plena. Y voy a ir a leer más sobre lo que este entrenador tiene para ofrecer algunas cosas para asegurarse de que incluyas en tu héroe es lo que es, qué es exactamente lo que hace la marca. Para quién es? ¿A quién llamas a la acción y por qué lo necesitan? ¿Qué punto de dolor estás resolviendo? Entonces esas son las principales cosas que tu gancho debe cubrir en la sección principal por encima del pliegue. Lo siguiente es tres a cinco colores de marca y consistencia en todo momento. Por lo que los colores obviamente juegan un papel masivo en la cohesión de un sitio web, por lo que es absolutamente esencial elegir una paleta de colores y apegarse a ella. Cuando nos apegamos a una paleta de colores consistente, somos capaces de ayudar a dar vida a una marca a través los colores y evocar diferentes emociones en función de los colores que elegimos. El lado derecho ves la cohesión está realmente unido por los colores principales. Entonces tenemos tres colores principales, como el azul, el amarillo y el naranja. Y luego tenemos los colores de acento, que es el color blanco y blanquecino para crear ese contraste. Entonces yo diría dos o tres principales a colores vibrantes. Y entonces puedes tener blanco, blanquecino y negro. Esos suelen ser los que utilizo en mis paletas de colores. Si una marca quiere ir un poco más vibrante de lo que tendré tal vez una paleta de colores secundaria. Pero en su mayor parte, especialmente en un sitio web, es muy importante que elijas no más de tres a cinco colores de marca. Así que puedes mantener esa consistencia en todo momento. Entonces algunas formas de lograrlo, como mencioné en el video anterior, coolers.com es una manera realmente genial solidificar los colores de tu marca. Y luego otra vez, asegurándote de usar tres a cinco colores consistentes como colores primarios de tu marca. Lo siguiente es una cohesión de elementos visuales e imágenes. imágenes evocan emociones sin tener que decir nada y juegan un papel crucial en entregar la personalidad de la marca. Es muy importante que un sitio web tenga elementos visuales cohesivos, tenga elementos visuales cohesivos, ya sea a través de imágenes libres de derechos, una sesión de fotos de marca, ilustraciones o iconografía, lo que sea que elija tu sitio web en el que estás trabajando, es esencial que todos trabajen juntos. Entonces estos dos proyectos en la esquina inferior derecha son dos proyectos en los que trabajé. Obviamente enfoques muy diferentes para lo que estábamos tratando de lograr para el laboratorio de piel clara, queríamos que fuera realmente divertido, juguetón y femenino. Para clave en la armonía. Era un poco más techie y queremos que vaya por la ruta de la ilustración, que fue realmente genial. Y obviamente esas ilustraciones van muy bien juntas. Para las ilustraciones, las encontré en Envato, y luego para estas imágenes las encontré en Pexels, que es realmente un gran sitio web de imágenes libres de derechos de autor. Entonces, algunas formas de lograrlo es intentar animar a tu cliente a invertir en una sesión de fotos. Realmente podrías ayudarlos a curar escribir esto encontrando inspiración de Pintereses y creando un mood board y luego dárselo a tu cliente, para dárselo al fotógrafo con el que elijan trabajar. Así que realmente se trata de asegurarte de que eres capaz de capturar la esencia de la marca a través de imágenes cuando se trata de pedirle a tu cliente que invierta en una sesión de fotos, otra forma es asegurarse de que ilustraciones de origen o imágenes de un Creador. Para el laboratorio de piel clara, se puede decir que muchas de las imágenes funcionan bien juntas porque las realizan uno o dos fotógrafos principales que encontré en Pexels. Así que me tomó un tiempo encontrarlos. Pero obviamente cuanto más tiempo se dedique a tratar de encontrar buenas imágenes, más se mostrará a través la marca Qian armonía también. Mismo ilustrador, actualicé un poco los colores, pero luego realmente dio vida a la marca principal, que fue muy, muy genial de ver. Lo siguiente es una barra de navegación clara y concisa. En el lado derecho, tenemos un montón de marcas diferentes con las que he trabajado en el pasado y los diferentes diseños de navegación que hemos creado para cada una. Entonces, básicamente, su navegación debe ser clara para navegar y darle su audiencia y comprensión de lo que sucederá una vez que haga clic en una nueva página. Si un sitio web tiene varias ofertas diferentes, es una buena regla general categorizar las cosas en carpetas con una flecha desplegable para mantener su barra de navegación lo más mínima posible. Entonces, algunas formas de lograr esto es crear sesiones desplegables para categorías que sean similares. Entonces, si tiene varios cursos, por ejemplo, puede crear un menú de cursos con un menú desplegable que vincule todos sus diferentes cursos para asegurarse de que esa barra de navegación esté relativamente limpia. Otra forma es asegurarse de preguntar explícitamente a sus clientes qué páginas internas imaginaron para su sitio web. Realmente ayuda a tus clientes a comunicarte lo que esperan lograr con el sitio web como diseñador. Y otra cosa es que quieres asegurarte de que los elementos del menú luzcan cohesivos en toda la estructura del sitio web. Entonces, por ejemplo, el laboratorio de piel clara tiene tres llamados a la acción, y cada llamado a la acción es una serie de palabras. Pero eso está bien porque funciona para esa marca. No tendría sentido si tuvieras varias series de palabras y luego una palabra para el siguiente elemento de navegación. Así que asegurándose de tener ya sea un menú de una palabra o menú con varias palabras, si eso tiene sentido. Entonces, como que miras a través de estos diferentes elementos de menú y barras de navegación y ves qué cosas te gustan en términos de diseño. Sí, también es muy útil en ese sentido. Sé que lo mencioné al principio del video, pero un singular llamado a la acción en cada página es tan, tan, tan crítico. Quieres preguntar a tus clientes cuál es el principal llamado a acción que quieres que tome un prospecto cuando lleguen a tu sitio web. Este es un muy buen punto de partida para garantizar que pueda diseñar un sitio web de una manera que funcione estratégicamente y cree éxito para sus clientes. Así que asegúrate de incluir esto siempre al pie de página de tu página y luego dar una idea de por qué alguien debería apresurarse o por qué alguien debería estar comprando, o ¿qué debería hacer a continuación? Básicamente. Un sitio web o una página de ventas o lo que sea que estés diseñando para animar a alguien a tomar alguna acción, a promocionar una marca, a vender un producto, a vender un servicio. Y el llamado a la acción principal debe repetirse no sólo en todo el sitio web y en toda la página de ventas o a lo largo de esa página, sino también en el pie de página para reiterar el principal llamado a la acción, quieres que alguien tome. Otra parte realmente grande e importante del diseño de sitios web es asegurarse de romper cualquier gran parte de texto. A menudo, unos pocos tienen un cliente que está tratando de comunicar lo que ofrecen, las palabras y la copia pueden llegar a ser muy, muy prolijos. Entonces, es tu trabajo como diseñador asegurarte de ayudar a tus clientes a dividir grandes fragmentos de textos en diferentes secciones. Entonces lo principal debería ser que la copia en el sitio web debería ser muy fácil de digerir. nadie, y quiero decir, nadie le gusta leer párrafos y párrafos de contenidos. Así que quieres asegurarte de poder comunicar tu mensaje de la manera más sencilla posible para asegurarte de transmitir tu mensaje. Algunas formas de dividir grandes cantidades de impuestos, dividirlos en diferentes secciones, o con viñetas, iconos e imágenes. En el lado derecho, puedes ver que esta sección obviamente son todas palabras, pero como la he desglosado con diferentes secciones, ayuda a que sea un poco más fácil de leer. Todavía son muchas palabras, pero luego son muchas palabras divididas en secciones más pequeñas lo que suele animar al lector a leerlas. Si todo esto estuviera listado como una sección blanca en blanco, simplemente se vería como un documento de Word y a nadie le gusta leer. Las personas se sienten naturalmente atraídas visualmente por las cosas en función de su apariencia. Entonces, algunas formas de lograr esto obviamente es usar viñetas cuando sea posible, dividir grandes trozos de textos en más secciones y asegurarse de utilizar una jerarquía de tipos clara y consistente. Entonces en el lado derecho también se puede ver la jerarquía de tipos. Tienes subencabezados, tienes la fuente de encabezado principal, tienes la fuente de párrafo, tienes la fuente de llamada a la acción. Tienes la sección de avisos en la parte inferior. Esa es una fuente diferente también. Así que simplemente tratando de hacer visualmente los grandes trozos de textos más agradables visualmente como puedes hacer. Entonces lo siguiente es la jerarquía de tipos. Y honestamente, una de mis partes favoritas del proceso de branding es seleccionar estratégicamente fuentes para ayudar a crear una personalidad de marca y una marca más memorable. Así que es muy importante que te asegures de tener una fuente para tus encabezados, una fuente para tus párrafos, 1 fuente para tu llamada a acciones, una fuente para tus subencabezados, generalmente si usas una fuente serif, así como una fuente swirly como la que uso en mi encabezado, es bueno usar una fuente sans serif en forma de párrafo. Y a medida que diseñes más sitios web y diseñas más marcas, obtendrás una mejor comprensión de qué fuentes suelen ir bien juntas. Entonces, por lo general, si usas una fuente serif Eso es un poco más ondulante que usar una fuente Sans Serif más mínima. Los párrafos son, el sub encabezado es algo ayuda a romper esos grandes trozos de textos y también hace que las cosas sean un poco más interesantes visualmente. Entonces esas son las secciones principales. Asegúrese de revisar el final de su libro de trabajo de clase para encontrar más recursos de diseño y sugerencias útiles. Y entonces siempre podrás volver y hacer referencia este video más adelante una vez que pases por el proceso de diseño. Pero recorreré todos estos diferentes aspectos del diseño de un sitio web a medida que reviso resúmenes de mis proyectos de cliente más adelante en esta clase, solo que rápidamente quise cubrirte y guiarte a través de algunas de las características principales antes de sumergirnos en esos videos de proceso. 6. Página de inicio Copiar las indicaciones y la anatomía: En este video, voy a repasar las indicaciones de copia. He creado este recurso para que puedas usar en tus proyectos de clientes para esta clase, así como para futuros proyectos de clientes, ya sea freelance o dentro una corporación o negocio que seas trabajando en. Esencialmente esto te ayuda aquí, ¿verdad? La copia del sitio web que utilizará para los sitios web de sus clientes y realmente conducirá la experiencia del usuario. Esa mensajería tiene un diseño web general. Entonces tendrás algunos clientes que no tienen idea de cómo escribir su propia copia de sitio web. Entonces, en este video, tenía muchas ganas de cubrir muy rápidamente el flujo de usuarios típico en la mensajería general de la marca. Obviamente va a cambiar en base a la industria que está el cliente en la que estás diseñando un sitio web para. Pero esto te dará una idea general. Así que saliendo de los diseños UX que creamos en el último video, también creé un aspecto similar aquí también y lo he desglosado con diferentes párrafos de textos que podemos usar para ayudar a curar la tasa de copia. Esto es increíblemente útil. O tus clientes, si no tienen su copia. Y lo que normalmente hago en mis proyectos de diseño es poner estas declaraciones directamente en un Google Doc y colaborar con mis clientes hasta que estemos contentos con la dirección de la copia. Así que sólo voy a pasar por esto contigo. Siéntase libre de usar estas indicaciones de copia en sus diseños para sus proyectos breves de clientes más adelante. O simplemente podrías usar esto en tus proyectos de clientes con tus clientes reales. Yo sólo voy a caminar por ahí. Obviamente tenemos el logo en la esquina superior izquierda y la cabecera principal. Entonces esto incluirá tu logo, tu menú, tu llamado a la acción principal. Si estás trabajando con una marca de comercio electrónico, también podría incluir un enlace al carrito o una barra de búsqueda. Estas son solo características generales de campo que tendrías en tu encabezado principal. Y entonces tienes la imagen de héroe, que es esencialmente el lugar principal por encima del redil. Lo primero que ve la gente cuando llega a tu sitio web. Entonces, lo que quieres asegurarte a hora de copiar y de lo que quieres que tus clientes hagan es asegurarte de tener una declaración muy poderosa sobre la marca que enganchará la atención de tu audiencia. Esto es muy importante porque el héroe de tu sitio web es básicamente cuando alguien que está visitando tu sitio web, un prospecto o un usuario o alguien en tu audiencia además, Oh, este sitio web es para mí. Parece que es para mí. O tal vez piensen, oh, este sitio web, ¿resuena con lo que estoy buscando en este momento, puedo seguir adelante. Entonces quieres asegurarte en esta declaración en tu sección de héroes, estás hablando específico, hola flota a los puntos débiles que estás resolviendo a quién estás atendiendo y qué es exactamente lo que ofreces. Es tan importante y mucho tiempo como diseñadores, a veces nos alejamos de las cosas que se centran en la mensajería porque nos atraen las cosas bonitas. Pero la regla número uno que tengo en el diseño web es asegurarme de que tengas sitios web que conviertan. Y por eso siento que me ha ido tan bien en mi carrera es porque todo lo que diseño se centra en canalizar a las personas hacia una acción principal que hacia una acción principal que queremos que nuestra audiencia tome en un sitio web. Para este sitio web, por ejemplo, esto podría ser para un proveedor de servicios o creador de cursos. Esencialmente, quieres asegurarte de que el copywritten realmente ayuda a nutrir ese viaje del usuario para asegurarte de que lleguen a tu formulario de contacto o que hayan comprado un curso, o que lean sobre tu servicios. Básicamente queremos moverlos por el embudo para que se acerquen a pagar o pagar un servicio o trabajar contigo. Entonces la primera sección es el héroe, y luego tenemos otra sección aquí que es una descripción más profunda que ayuda a construir una conexión emocional. Tan crítico que tu sitio web comunica la misión y mensajería de tu cliente de una manera que suena realmente auténtica. Solo estás vendiendo, vendiendo, vendiendo sin abordar realmente los puntos débiles que resuelves, podrías ahuyentar a tus clientes. Básicamente estás diciendo, soy el mejor sin enfocarme realmente en las razones egoístas por las que tu audiencia podría estar buscando a alguien como tú. Entonces nuevamente, otra introducción, otra característica común es introducir los diferentes servicios u ofertas. Entonces digamos, ofrecemos diseño web y branding, pero también tenemos un curso en línea o algo así. Queremos asegurarnos de que tenemos secciones dirigidas a cada una de las páginas internas específicas que tengas. Entonces como pueden ver aquí arriba en mi navegación, tengo suficiente sobre servicios cartera de blog. El recorrido del usuario de mi página de inicio seguirá el mismo formato. Entonces tenemos la sección Inicio, que es el héroe. Tenemos una breve sección Acerca de. Tienes una sección de servicios. Esto introduce el blog, y luego tenemos un portafolio. Más información sobre la marca y la final ponte en contacto. Entonces puedes ver un poco que este diseño web y este aviso de copia realmente embudos y se adapta a todas las diferentes piezas, todos los diferentes enlaces en la barra de navegación. Entonces otra vez, tenemos al héroe, tenemos un poco sobre la marca. Tenemos una introducción a los servicios. Tenemos duction al blog, tenemos la cartera, hemos conocido al fundador y luego ponernos en contacto. Entonces esto es algo que puedes construir cuando estás construyendo la anatomía del sitio web en el que estás trabajando. Y esto también es muy útil para si estás creando una plantilla que quieres usar una y otra vez. Porque muchas veces realmente, lo único que cambia en los sitios web a veces son las imágenes que cambian por completo la sensación general y el aspecto de una marca, o la fuente o los colores. Entonces este es un muy buen punto de partida. Nuevamente, construyendo a partir del diseño de la UX. De nuevo, tenemos la UX, pero en cambio hemos copiado las indicaciones. Así que siéntete libre de usar estas indicaciones de copia. He vinculado este archivo en Google Drive, la sección de proyectos de clase. Así que asegúrate de descargarlo junto con tu libro de trabajo. Y también podrás utilizarlos en tus proyectos de clientes. Entonces solo quería mostrarte este recurso porque es una buena visual de cómo puedes diseñar un sitio web sin ninguna imagen, con colores muy simples, con fuentes muy simples. Y luego también ayuda a tus clientes y ayudándolos, bien, así que los mensajes correctos para ellos. 7. Reseña 1: un estudio de yoga: Bienvenido a customer brief one, donde trabajaremos con un estudio de yoga. Para que puedas encontrar este prompt de proyecto en tu libro de trabajo que te he proporcionado en la sección de descarga de clases. También voy a repasar el resumen del cliente y lo general y recorrer todo mi proceso contigo para que realmente puedas entender cómo me acerco a los proyectos de los clientes cuando acuden a mí, obviamente, la experiencia de un cliente cambia en función del cliente. Así que realmente quería representar eso en los diferentes escritos de clientes que te presenté. Así que tenemos algunas tareas diferentes que puedes elegir entre Orfeo gratis para elegir todas ellas o siéntete libre de elegir una de ellas, o viceversa. Sólo voy a acercarme aquí para que realmente podamos conocer la primera pregunta. Entonces cliente brief one es un cliente llamado alquimia yoga. Son un estudio de yoga con sede en Portland con la misión de aportar una sensación de calma a la vida de más personas de todos los ámbitos de la vida. Creemos que el yoga puede transformarte tanto dentro como fuera de la colchoneta. Visión del sitio web de los clientes. Quiero que el sitio web sea muy neutral pero aún así se sienta muy terroso. Me encanta una estética mínima porque siento que emana una sensación tranquila, acogedora y equilibrada. El yoga alquimia es un espacio donde personas de todos los ámbitos de la vida pueden venir a practicar y encontrar una sensación de calma ahí dentro, a veces días agitados y ocupados. Realmente quiero que eso aparezca en el sitio web para que la gente se sienta invitada instantáneamente a la marca y al espacio que practicamos. Entonces, algunos adjetivos que describen el yoga alquimista serían conscientes, terrosos, orgánicos, neutros, invitando a una sensación de calma, calidez y confianza. El principal reto del proyecto es porque la marca es una startup. No tienen ninguna imaginería. Esto es muy común en el espacio de diseño web, especialmente cuando estás trabajando con startups o nuevos dueños de negocios, o personas que solo están tratando de lanzar tu idea de negocio desde el suelo. Por lo tanto, necesitan ayuda para obtener imágenes libres de derechos que puedan usar como marcador hasta que puedan hacer su propia sesión de marca. Tampoco tienen experiencia escribiendo copias del sitio web y una guía para ayudar a formular el mensaje de la marca a su audiencia. Estos son los principales retos con los que nos encontramos con los proyectos de este sitio web. Esto ocurre muy comúnmente cuando alguien acude a ti. Quieren un sitio web hermoso, pero aún no tienen bellas imágenes. Si este es el caso, puedes animar a tu cliente a invertir en una sesión de marca con un fotógrafo local y su área. O puedes configurarlos con imágenes libres de derechos que puedan usar por ahora y luego pueden usar como inspiración para nuestra futura toma de fotos de marca con un fotógrafo cuando esté listo para invertir en un marca shoot. Entonces ese es un reto de proyecto primario para la asignación. Quiero que diseñes y prototipos de la página de inicio del sitio web de alchemy yoga en Adobe XD o cualquier herramienta de prototipado que estés usando. Estaré usando Adobe, pero siéntase libre de usar Figma o cualquier otra plataforma que se sienta cómodo usando. Así que algunos útiles sugerencias y proyectos pasos. Lo primero sería asegurar tu fuente de imágenes libres de regalías. Es muy importante que pases algún tiempo buscando imágenes que usarás. Porque muchas veces las imágenes, la sepsis, el tono de los colores, seleccionarás las fuentes, seleccionarás el posicionamiento de cómo vas a estar diseñando el sitio web. Y eso servirá de fundamento. A menudo selecciono los colores de mi marca para un sitio web basado en imágenes. Entonces este es un buen punto de partida y es un punto que estaré comenzando cuando camine por mi proceso. Lo siguiente sería elegir una marca de colores a base de imágenes. Entonces acabo de mencionar esto. A menudo me gusta elegir los colores de mi marca en función las imágenes porque ayuda a crear y mantener un aspecto más cohesivo y luego prototipar la página de inicio del sitio web. Entonces para este proyecto en particular, solo estaré haciendo la página principal del sitio web si quieres hacer todo el sitio web por todos los medios, ve a por ello. Pero para este proyecto, debido a que es nuestro primer proyecto cliente, sólo me voy a centrar en la página principal. Un desafío opcional en el que puede optar por participar o no participar sería usar las indicaciones de copia proporcionadas en esta clase y escribir la copia para sus clientes. A menudo es muy desafiante para los diseñadores porque como diseñadores no necesariamente nos enseñan a escribir café, sino que lo que nos enseñan es cómo hacer que las cosas sean visualmente agradables. Entonces, si quieres desafiarte a ti mismo y realmente llegar a Mark copy para alquimia yoga. Siéntete libre de hacerlo y realmente puedes ayudarlos a formular su mensaje de marca. Y esto es algo que también es muy común en el espacio de diseño. Si puedes escribir, copiar y diseñar sitios web, más poder para ti, venderás muchos más servicios. Así que siéntete libre de asumir ese reto opcional. Personalmente solo estaré usando bombas de copia en mi prototipo de sitio web, pero siéntete libre de hacer lo contrario. Entonces lo primero es lo primero, voy a empezar por encontrar inspiración. Aquí es siempre donde empiezo todos mis proyectos de diseño porque realmente quiero tener una idea de lo que existen las cosas. Obviamente, soy diseñadora desde hace bastante tiempo, así que ya sé en qué tipo de dirección quiero ir. Pero si esta es tu introducción al diseño, siempre es una muy buena idea inspirarte en el yoga, simplemente hacer fluir esos jugos creativos para que realmente puedas tener una idea de lo que diseñas va a estar creando. Estaré buscando el sitio web de Yoga y también haré lo mismo en Pinterest. Y ahora hay montones de diferentes sitios web que podemos empezar a usar para inspirarnos. Ahora bien, algunos adjetivos que usaban eran muy terrosos, mínimos y limpios. Entonces realmente me encanta este look y solo voy a seguir sacando inspiración que siento que representan los diferentes adjetivos enumerados en el brief del cliente. Para que realmente pueda imaginarme la marca y la dirección que vamos. De nuevo, solo voy a seguir adelante y abrir algunos estilos minimalistas de diseño de sitios web que me gustaron mucho el aspecto, pero que no parezcan demasiado cliché. Siento que a veces en el espacio de diseño es casi demasiado básico. Si eso tiene sentido. Quiero que sea mínima. Quiero que esté limpio, pero no quiero que se vea demasiado cliché. Yo solo voy a seguir adelante y comenzar a abrir diferentes estilos minimalistas de diseño web. Así que voy a hacer un diseño web mínimo y buscaré eso. No es necesario buscar diseños de diseño web en el espacio de yoga. Puedes buscar diferentes estilos de diseño de sitios web y luego recrearlos en yoga, es más común recrear un estilo o un tema que encontrar particularmente inspiración para un sitio web, particularmente en tu nicho para el que estás diseñando. Así que de nuevo, voy a seguir buscando diseños mínimos de sitios web. Este me gustó mucho. Voy a seguir buscando, voy a escribir algunos adjetivos diferentes en Pinterest solo para asegurarme de que me están mostrando cosas diferentes, realmente como esta. Me encanta la textura ahí. Entonces ahora tengo algunos diseños diferentes que me gustan y me gustaron mucho los colores aquí. Tenemos colores muy neutros, colores muy suaves. Y porque algunos de los adjetivos utilizados, bélicos, orgánicos, mínimos, confiables, limpios, simplistas. De veras quiero que eso se cruce. Entonces ahora tengo inspiración de diseño web. Y otra vez, sólo voy a mirarlos más de cerca. Estás en Pinterest y ves un sitio web que te gusta. De hecho, puedes desplazarte hacia abajo y de hecho te recomendarán más que se vea similar a la que te gusta. Así que eso también es muy útil cuando buscas inspiración para el diseño web. Realmente me encantó esa línea. Siento que las vibraciones veraniegas son muy buenas. También me encantaron los viernes de verano y sí, así que eso es todo por ahora. Entonces lo siguiente es, tengo alguna inspiración de diseño que puedo usar como base. Nuevamente, no tengo imágenes, no tengo colores de marca. No tengo nada. Estoy empezando completamente de cero. Entonces, lo siguiente que voy a hacer es encontrar imágenes libres de derechos. Entonces voy a abrir una nueva pestaña e ir a píxeles. Esta es mi opción para obtener imágenes libres de derechos de autor. Probablemente son muchos otros sitios web en los que puedes encontrar imágenes libres de derechos de autor. También hay plataformas pagas en las que pueden encontrar imágenes. Yo uso pixeles. Esto es lo que uso para casi todos los proyectos de cliente que tengo que necesitan su propia fuente de imágenes, pero siéntase libre de usar cualquier otro de su elección. Voy a buscar profesor de yoga porque de nuevo, queremos comunicar que estamos trabajando con una marca de yoga y todavía no tienen ninguna imagen. Solo queremos tener una idea de qué tipos de imágenes pueden usar para representar su marca. A mí me encanta este, y solo voy a seguir adelante y empezar a descargarlos. Así que sólo voy a hacer clic en Descargar. Voy a hacer esto por más o menos un montón de imágenes diferentes. Realmente me encanta esta sensación terrosa, al aire libre, siento que se siente como si fuera un centro de retiro de bienestar. Entonces voy a descargar esa. También me encanta esto. Aquí me encantan los colores terrosos, así que voy a descargar estos también. Y muchas veces lo que encuentras es que obviamente puedes decir que esto lo hace el mismo fotógrafo. Entonces, si hago clic en esto en una nueva pestaña y la abro, en realidad comenzarás a ver imágenes del mismo fotógrafo exacto. Así que podrías seguir adelante y descargarlos, o incluso puedes abrir el fotógrafo real e ir directamente a su colección. Y entonces tal vez tengan aquí una colección que sea específica de la imagen particular que estabas buscando. Así que realmente amo a Pexels. Siento que aquí hay muchas fotos realmente buenas. Y trato de alejarme de las imágenes muy básicas. Entonces aquí tenemos entonces toda una colección de imágenes que es cohesiva, que comunica un mensaje. Realmente vende la idea del bienestar y yoga matutino y todas esas vibraciones terrosas realmente agradables. También hay videos aquí, lo cual es genial. Eso me encanta. Me encanta esa foto. Así que voy a descargar eso. Básicamente solo voy a seguir descargando imágenes que siento que representan la marca. Por lo que lleva algún tiempo intentar buscar diferentes imágenes de yoga. No tienes que copiarme exactamente. Siéntete libre de hacer esto a tu propio ritmo y tómate un tiempo para averiguar qué tipo de marca de yogurt quieres crear. Entonces, si voy a Pexels, tal vez haya un conjunto diferente de imágenes que me gustó mucho el aspecto de. Y también puedo mirar eso. Me gustó mucho la idea de que un maestro se ajuste. Siento que también comunica lo general. Objetivo de un estudio de yoga. Siento como decían, gente de todos los ámbitos de la vida. Creo que algo que también sería realmente único. Es encontrar una imagen que, Oh, esta me encanta. Creo que otra cosa que sería realmente única es encontrar imágenes de personas de todos los diferentes grupos de edad, todas las diferentes diversidades, todos los géneros diferentes, etnias, todos estos cosas diferentes para comunicar realmente el hecho de que la alquimia, yoga mencionó específicamente que les importa a personas de todos los ámbitos de la vida. Entonces no queremos que todo sea demasiado flexible porque no queremos atraer solo a personas súper flexibles. Obviamente quieren atraer a personas de todos los ámbitos de la vida. Así que de veras quiero comunicarlo. Entonces voy a buscar tal vez clase de yoga y ver qué cosas aparecen. Se va a desplazar hacia abajo. También me encantaron estas imágenes de mal humor para tener una idea de tal vez las clases que me encantan esta clase votaron. Así que voy a salvar eso. Y básicamente, probablemente no usaremos la mayoría de estas fotos. La mejor idea es usar realmente estos como la base de su marca y su sitio web. Así que de nuevo, sólo voy a desplazarme y voy a buscar más clase grupal Kodos. Entonces me encanta este. También me encanta este. Y obviamente estos son todos del mismo fotógrafo. Se pueden ver los mismos modelos, la misma escena. Quiero que detengas este video hasta que termines de obtener imágenes libres de derechos de autor. Esta es la primera tarea de los proyectos de este cliente y es esencial para sentar las bases del sitio web. Entonces quiero que encuentres todas las imágenes que crees que representan el yoga de alquimia. Y una vez que lo hayas hecho, quiero que revises este video y luego podamos continuar con el resto de la clase. Entonces ahora tengo toda una carpeta de un montón de imágenes diferentes que representan alchemy yoga de mi interpretación de la marca. Ahora obviamente, si estás trabajando con un cliente, probablemente obtendrás información mucho más específica sobre la marca que el brief del cliente que te presenté. Pero este es un punto de partida realmente genial. Entonces tenemos las imágenes y también tenemos la inspiración de diseño web para usar como punto de partida para la marca. Así que voy a mirar a través de algunas de estas ideas y realmente empezar a jugar con los diferentes UX en mi archivo Adobe XD. También me encanta este, así que simplemente voy a abrir ese también. Me encanta esta fuente de script y las formas y las texturas. Entonces quiero comenzar con esto. Solo voy a seguir adelante y dividir las pantallas, abrir mi archivo XD y básicamente empezar a jugar con esto. Así que volviendo a como estaba prototipando ya sea UX tengo un sitio web, básicamente voy a hacer lo mismo aquí y enfocarme en los diferentes elementos de un sitio web. Entonces tenemos un cuadrado aquí, otra forma aquí para representar esa forma artística. Y nuevamente, vamos a redondear las esquinas. Entonces voy a seguir adelante y dar click aquí y redondear las esquinas. Perfecto. Entonces esas son formas diferentes. Entonces también me voy a asegurar de que aquí haya un logo. Entonces logo, encuentra solo una fuente que pueda usar por ahora como logo. Ahora bien, esto no tiene que ser perfecto porque lo afinaremos de nuevo más adelante. Pero nuevamente, solo queremos tener la idea general de la dirección en la que vamos. Todo esto tendrá sentido a medida que continuemos pasando por los diferentes elementos de diseño. Pero sólo voy a mantenerlo como esa por ahora porque es muy mínima. Entonces tenemos eso. Y ahora lo que voy a hacer es abrir las diferentes indicaciones de copia porque como mencioné en el resumen del cliente, este cliente no tiene ninguna copia, así que queremos asegurarnos de representar la copia de una manera específica de alquimia yoga. Entonces voy a abrir esas indicaciones de copia. Y tengo abiertas las indicaciones de esta copia. Y lo que voy a hacer en realidad es simplemente copiar y pegar estos en mis otros documentos para que pueda copiar y pegar esto y pegarlo aquí. Lo bueno de Adobe XD es que puedes copiar y pegar entre archivos, que lo hace realmente fácil. Entonces voy a cambiar el color de las fuentes a negro. Voy a alinear a la izquierda esto y cambiar el tamaño solo para que se ajuste a este diseño en particular. En realidad quiero representar un botón aquí también. Esperando esto de aquí, me pongo negro. Y nuevamente, podremos cambiar estos colores a medida que vayamos atravesando. Pero nuevamente, este es un muy buen punto de partida. Y tengo otro aquí. Quería guardar el botón, ponerlo en negrita y asegurarme de que esté en blanco para que pueda verlo. Una forma rápida de cambiar a esta herramienta selectora es haciendo clic en V. Y automáticamente seleccionará este botón aquí, lo cual es realmente útil para arrastrar y soltar eso. Entonces tenemos eso. Y entonces también voy a usar esta misma fuente para la navegación también. Va a ir a traer eso de nuevo aquí también , hacer eso negro. Entonces queremos representar realmente una marca de yoga aquí. Entonces, ¿cuáles son algunos de los diferentes elementos de la barra de navegación sería el hogar? Tal vez. Sobre tal vez las clases, el yoga, tal vez las clases de yoga son lo mismo. Entonces yoga contact book ahora, clases sobre tal vez en lugar de sobre, voy a poner filosofía solo a tipo de adaptada directamente a la oferta real que tiene la marca. Y entonces también me voy a asegurar de centrar estos y distribuirlos. Entonces voy a centrarlos verticalmente y luego distribuirlos horizontalmente. Y luego voy a abrir también mi grilla. Así que si hago clic en Comando Shift apóstrofo, podemos abrir nuestras cuadrículas y podemos comenzar a alinear las cosas a nuestra cuadrícula que tenemos ahora arriba, también quiero alinear esto a la cuadrícula exterior para que realmente tener esa mirada que queremos lograr. Entonces tenemos eso. Tienes el logo aquí. Así que voy a poner eso en línea aquí. Y voy a volver a cerrar las rejillas. Entonces tenemos una declaración poderosa. Y ahora lo que quiero hacer es esto. Entonces voy a abrirla. Entonces en este momento esto es considerado el héroe del sitio web. Y nuevamente, la parte más importante de los sitios web. Quieres asegurarte de que visualmente cautivador. Entonces ahora lo que quiero hacer desde aquí es poner en imágenes para poder entender mejor los diferentes colores que podemos usar a lo largo de la página web. Entonces voy a ir a abrir mi pestaña Finder. Tenemos imágenes aquí. Y quiero jugar con lo que quiero usar como encabezado principal de los sitios web. Voy a arrastrar y soltar esa porque siento que representa una clase. Tal vez ajustar esto para que podamos verlo mejor. También me encanta este también. Así que quiero jugar con diferentes imágenes para que pueda tener un poco una idea de la dirección. Se puede ver que las fronteras están puestas. Entonces voy a resaltar las imágenes y asegurarme de que el borde esté desmarcado. Esos son un poco demasiado similares. Así que en realidad quiero obtener una foto diferente que tenga algún tipo de textura. Voy a tomar esta imagen. Y de hecho me gusta mucho cómo esa forma tipo de esquinas de la esquina del sitio web. Así que en realidad voy a mantener esa como, como por ahora. Para estirar esto un poco. También voy a alinear un poco más la barra de navegación principal barra de navegación principal en la parte superior. Solo voy a sugerir que siento que no necesariamente me gusta esto, como tipo de look descentrado, voy a experimentar con cómo se vería si eso estuviera centrado. Y esto es perfectamente vertical. No estoy seguro de que me guste eso. Pero tal vez en realidad solo quiero conseguir el árbol. Así que voy a ampliar esto y tal vez sólo conseguir los árboles de esta foto. Porque quiero crear algún tipo de textura. No es exactamente así como quiero que se vea. Pero siento que definitivamente quiero algún tipo de textura orgánica neutra aquí. Entonces voy a seguir adelante y volver a ir a Pexels. Y voy a buscar textura estética y ver qué surge. Ojalá pueda encontrar algo que pueda ser utilizado en ese espacio. Y podría llevar algún tiempo jugar con diferentes palabras clave porque obviamente esto no es lo que estoy buscando. Es demasiado colorido. Entonces solo voy a teclear estética y ver qué surge. Como esto podría ser bueno, pero no es exactamente lo que estoy buscando. Así que sólo voy a abrirlo en una nueva pestaña. Me encantan estos colores, muy minimalistas, neutros. A lo mejor si busco mínimo, surgirá otra cosa. Sí, esto es exactamente lo que estoy buscando. Sólo voy a descargar algunas de estas fotos de textura. Siempre podemos ajustarnos una vez que realmente lo incorporamos al diseño. Pero definitivamente quiero tener algo que sea muy neutral, muy elegante. Tal vez incluso buscando algunas sombras solo para obtener esa textura orgánica neutra que el breve cliente discute. Quiero encontrar algo que lo represente. Tal vez orgánico es otra palabra clave. Puedo mirar hacia arriba. Orgánico, estética mínima. Oh sí, aquí me encanta la sombra. Ya sabes, a veces se necesitan algunos intentos de diferentes palabras clave para que aparezca lo que estás buscando. Entonces realmente es solo un juego de adivinar el SEO. Entonces me encanta la sombra y algo esa línea sería perfecto para lo que estoy buscando. Entonces esto definitivamente está mucho más alineado con la vibra que espero lograr. También me encanta esta toalla de aquí. Es una toalla o tal vez una manta. Pero de nuevo, quiero crear textura, pero de una manera orgánica muy neutra. Así que voy a ir con eso por ahora. Voy a ver si aquí hay alguna sombra similar, que son, lo cual es genial. Me encanta la mirada de sombra diferente. Así que voy a seguir adelante y seguir descargando algunos para poder jugar realmente con todas estas texturas diferentes en el diseño. Así que volviendo a mi archivo Adobe XD, voy a conseguir sine esas texturas que encontré y simplemente voy a reemplazarlo aquí. Entonces definitivamente me gusta más el aspecto de eso. Pero siento que todavía está un poco oscuro, así que voy a apagar un poco la opacidad para que podamos obtener ese efecto, pero de una manera un poco más neutra. Obtenemos esa textura un poco, pero es un poco más fría y más suave. Entonces sólo voy a jugar con la opacidad. Y siento que esta imagen no necesariamente coincide con ese color. Quiero que algo sea similar en el sentido del color, pero también representativo de la marca. Realmente solo estamos jugando con imágenes hasta que algo se siente bien. Voy a ajustar esta opacidad para verte. Eso podría ser mejor. De hecho me gusta mucho el aspecto de eso hasta ahora. También voy a simplemente expandir esto para que la textura esté un poco más desteñida. A lo mejor voy a conseguir el rincón oscuro. Genial. Eso me encanta. Ligeramente se desvanecen un poco. Y eso no me gusta, la forma se superpone así. Así que en realidad voy a agregar una frontera aquí. Voy a hacer 20 con borde y de hecho voy a hacerlo blanco así que parece que se mezcla. Yo estoy amando, amando, amando eso hasta ahora. Y esta es una buena base que luego podemos usar para luego elegir los colores de la marca. Entonces estoy contento con esta sección de héroes del sitio web y ahora voy a seleccionar colores, realmente reunir la cohesión de este sitio web. Entonces lo primero lo primero, como mencioné, es elegir colores a base de imágenes. Así que sólo voy a dibujar cuadrado aquí arriba, apagar el borde, y voy a usar esta herramienta cuentagotas para escoger un color de esta pantalla. Entonces voy a jugar con esto. Nuevamente usando la herramienta cuentagotas. Sólo voy a tratar de seleccionar colores de las imágenes que podría ser capaz de utilizar en este sitio web. Ahí atrás hay algo de verde. A lo mejor quiero traer eso al diseño. Sólo voy a tratar de encontrar un montón de colores diferentes. Y luego podré usar una herramienta de selección de color para finalizar realmente la cohesión del sitio web en términos de colores. Entonces tal vez hasta un tono más claro aquí abajo, lo mismo. Tal vez esta pared trasera de aquí que pueda representar, ¿verdad? Entonces ya puedes ver que eres capaz de ver la cohesión de algún sentido en términos de colores solo seleccionar colores de las imágenes. Obviamente, la buena fotografía tiene sentido por los colores que contienen. Así que elegir colores a partir de imágenes es un punto de partida realmente genial. Una vez que lo haya hecho. Entonces también voy a un sitio web llamado coolers.com, que es un generador de color realmente genial para elegir paletas de colores de una manera súper rápida. Este es uno de mis sitios web de referencia para elegir paletas de colores. Así que solo voy a seleccionar este color y copiar el código hexadecimal y pegarlo aquí. Entonces voy a cerrarlo. Una vez que haya ingresado el código hexadecimal, entonces podrá generar paletas de colores basadas en el código hexadecimal que he puesto. Entonces digo que también quiero ponerle este color verde porque me gusta mucho y siento que sería un color de marca realmente genial. Entonces puedo poner estos uno al lado del otro, cerrar eso. Entonces los siguientes colores que me serán presentados serán los colores que van con él. De hecho siento que esto podría ser demasiado oscuro. Entonces voy a intentar usar solo un color verde para ver qué diferentes colores realmente resuenan con la marca que estoy creando. Así que de nuevo, realmente vamos por una mirada mínima aquí. Así que realmente quiero encontrar colores muy neutros. Entonces me encanta este color champagne, así que voy a bloquearlo, continué presionando la barra espaciadora hasta que esté contento con la paleta de colores final. Entonces esto no es necesariamente lo que tienes que hacer para elegir colores. Es un gran recurso para comenzar si estás teniendo dificultades para encontrar colores cohesivos, tenemos un ojo para los colores Eso también es realmente genial y también puedes hacerlo por todos los medios. Así que sólo voy a copiar esto en. Una buena regla general es asegurarse de seleccionar no más de cinco colores. Entonces puedes ver que este color y este color son muy similares. Así que en realidad voy a quitar esa y reemplazarla por esta. También siento que esto es un poco demasiado oscuro y definitivamente quiero traer también negro para el texto. Entonces voy a sustituir eso por un color negro. Entonces vamos a tener negro, ligeramente verde. Me gusta organizarlos de los más oscuros a los más ligeros para que realmente los pueda ver uno al lado del otro. No necesariamente me gusta este color pálido, así que voy a seguir adelante y tratar encontrar un tono diferente. En realidad me gusta mucho ese color. A mí me encantan estos dos colores. Y entonces tal vez sólo vayamos con el General blanco. Otra cosa que me gusta hacer cuando estoy tratando de obtener el tono correcto es elegir el mismo color del color que estoy tratando de igualar previamente. Y luego ir al selector de color y mover lentamente mi cursor hasta encontrar un color con el que estoy relativamente contento. Me gusta mucho ese tono de blanco y es muy, muy , muy sutil, lo cual me encanta. Voy a ir con eso. Y nuevamente, esto es sólo un punto de partida. Digamos que si reviso todo el proceso del sitio web y estos colores en realidad no encajan ni coinciden con el resto de las imágenes, entonces puedo ajustarlo más tarde. Guarde esto como una paleta de colores final. Estoy contento con ello. Puedo ir por aquí a los colores y hacer clic más unos. he resaltado todos y después podré seleccionar los colores muy fácilmente cuando esté editando algo. Así que digamos por ejemplo quiero cambiar el color de este botón para que sea verde. Se cambia automáticamente ahí, quiere cambiar toda su barra de menú también ser verde. Se puede hacer ahí. Si quiero cambiar todo el color de fondo para que sea gris, puedo hacerlo también, pero no lo soy porque quiero que solo sea blanco. Esos son algunos recursos para encontrar colores. Entonces estamos empezando a conseguir un poco más de una mirada cohesiva aquí. Y lo que voy a hacer en realidad es extender esto un poco más y hacer esto un poco más grande. Lo siguiente que quiero hacer es volver a las indicaciones de copia y luego voy a construir la siguiente sección del sitio web. Sólo voy a copiar y pegar toda esta sección porque quiero que sea de formato similar. Y suele ser una buena regla general asegurarse de que tienes posiciones alternas. Entonces digamos si el texto está en el lado derecho, la siguiente sección, el impuesto debería estar en el lado izquierdo, o en columnas de tres textiles diferentes alternando es realmente, realmente importante. Entonces tenemos eso. Voy a borrar eso y en realidad voy a hacer de esto un componente. Entonces voy a agruparlos juntos, hacer de eso un componente y arrastrarlo y soltarlo aquí. Nuevamente, queremos algún tipo de imaginería que tenga sentido aquí mismo. Entonces voy a seguir adelante y a lo mejor dibujar cuadrado, porque a lo mejor quiero un cuadrado en esta sección de aquí. Quiero asegurarme de que esté alineado con el centro. Así que sólo voy a arrastrar y soltar. Voy a encender mi grilla para poder ver dónde estoy en mi diseño. Y voy a alinearlo al centro. Abre mi fotografía y mira qué tipo de foto quiero agregar aquí. Nuevamente, me encanta esa mirada, esta es demasiado alta. Entonces, lo que estoy viendo ahora y algo que no me gusta particularmente en este momento no significa necesariamente que esté mal. Es algo que no necesariamente me gusta es que esta parte blanca va todo el camino hacia abajo. Entonces lo que quiero hacer en realidad es jugar con este fondo siendo de un color diferente. Entonces voy a simplemente dibujar una caja aquí, apagar el borde, y tal vez seleccionar un color diferente y enviarlo a la parte de atrás. Así que eso no me gusta mucho. A lo mejor este color blanquecino puede ser bueno aquí. Bien. Eso me gusta en realidad. Entonces me voy a asegurar que la frontera coincida. Entonces voy a elegir así el selector de cuentagotas del borde. Entonces parece que realmente es cohesivo en ese sentido. Eso me gusta bastante. No estoy seguro si me gustan estos dos colores juntos. Así que en realidad voy a jugar un poco con este matiz, y quiero que coincida con este color. Entonces voy a seleccionar eso y poco a poco subir hasta encontrar algo que me parece realmente natural en cuanto a coincidencia de colores. Es muy sutil. No quiero que sea completamente blanco, pero definitivamente quiero que tenga un poco de matiz ahí para mostrar diferentes secciones. Entonces me encanta ese color. Creo que es muy neutral. También coincidiré con la frontera. No necesariamente me encanta el verde, así que voy a reemplazar eso aquí, desagruparlo, y luego voy a seleccionar la barra de relleno. Y nuevamente, solo voy a usar el seleccionador de color hasta que encuentre algo con lo que esté contento. Me encanta ese color, no del todo verde, pero aún así conseguimos esa sensación terrosa. Es un poco más ligero, lo cual me encanta. Voy a seguir adelante y agruparlo, copiarlo y pegarlo y ponerlo aquí abajo. Así que definitivamente estoy consiguiendo un aspecto mucho mejor cohesivo. Y estoy muy contento con la dirección que vamos hasta ahora. Así que sigamos adelante. Sólo voy a ajustar ligeramente estos logotipos. Y luego la siguiente sección, voy a volver a las indicaciones de copia y copiar estas diferentes secciones y colocarlas aquí y luego continuar construyéndola aquí. Ahora me voy a centrar en la sección de Ofertas, y luego voy a hacer otro rectángulo caído detrás de aquí y enviarlo a la parte de atrás. Entonces, si hace clic con el botón derecho y hace clic en Enviar al Atrás, puede hacerlo, o puede hacer clic en estos comandos, que es Mayús de comando y el corchete izquierdo, y luego debe ir a la parte posterior. Y luego otra vez, quiero jugar con los diferentes colores. Estos colores aún no son perfectos, así que en realidad no quiero comprometerme con ellos todavía, pero definitivamente, me encanta el aspecto de eso hasta ahora. Voy a Todo y voy a hacer que el texto sea blanco, y también voy a hacer que el borde sea blanco también. Y nuevamente, aquí estamos teniendo una mirada mucho más cohesiva. Realmente me encanta este estilo de diseño y siento que realmente estoy obteniendo la sensación mínima que espero producir con este diseño en particular. Así que de nuevo, no es perfecto. Finalizaremos los estilos de texto al final. Pero de nuevo, es un punto de partida realmente, realmente genial. Entonces tenemos eso. Yo sólo voy a seguir adelante y agregar eso aquí. Lo que quiero hacer es en realidad traer de nuevo esta textura. Voy a copiar esto, pegarlo aquí abajo, y expandirlo para que volvamos a tener esa textura. Y lo que quiero hacer es a lo mejor esta sea una sección de contacto o sobre una sección Acerca de, pero algo que me permita diseñar algo que sea permita diseñar algo realmente único para el sprint. Así que voy a volver a abrir mi cuadrícula y dibujar un rectángulo aquí porque mi cuadrícula y alinear esta al centro. Y voy a apagar el borde y asegurarme de que el relleno sea blanco. En realidad, sabes qué, tal vez sí quiero un borde, pero en vez de que sea ese color, quiero que sea ese color. Así que voy a hacer 20. Y nuevamente, crea un aspecto cohesivo. Una buena regla general es asegurarse de que no tiene más de cinco colores de marca en un sitio web para asegurarse de que todo sea cohesivo. Entonces solo voy a seleccionar esto como negro porque siento que no necesita ser ese color en el centro. Esto voy a ajustar esto un poco, hacerlo más alto. Voy a terminarlo ahí en realidad. Voy a hacer de eso una página de contacto, el formulario de contacto. Adelante y ve aquí, copia eso, ponte en contacto o reserva tu próxima clase. Voy a llenar esto aquí. Copiar y pegar centrar eso. Entonces otra vez, copia el botón. Tenemos todo eso en el centro. Estoy bastante contento con cómo resultó esto. Y ahora lo que quiero hacer es finalizar la fuente. Entonces voy a seguir adelante y hacer clic en todos los que vea. Y sólo voy a repasar las fuentes y ver qué cosas me gustan, qué cosas no les gustan. Y realmente trato de encontrar una fuente que represente lo que quiero que sea esta marca. Realmente no estoy exactamente seguro de qué tipo de fuente de estilo me gustará el aspecto. Pero voy a jugar y ojalá me encuentre con algo que me guste. Me gusta mucho esa fuente. Siento que es muy mínimo. Voy a hacerlo un poco más pequeño porque a lo mejor me gusta un poco más. Sí, me gusta el aspecto de eso. Siento que tiene esa vibra mínima que espero crear. Tienes eso. Y entonces también voy a cambiar, desagruparlos estos porque estos están agrupados. Y asegúrate de que esa es la misma fuente. Entonces, para facilitarme las cosas, voy a agregarlo a Estilos de Carácter. Voy a seleccionar todos estos haciendo clic en uno y luego manteniendo presionado Mayús y luego haciendo clic en todos ellos. Después voy a hacer click de nuevo. Después lo seleccionaré en blanco. Y hasta ahora me encanta esa mirada. Sólo para hacer las cosas un poco más cohesivas, voy a agregar en un sub encabezado aquí arriba. Entonces sólo voy a escribir algo. Realmente no me gustaron estos botones. Texto de estos botones. Me gusta como hasta ahora Proxima Nova coincide con eso, pero no me gusta la fuente del botón, así que voy a seguir adelante y cambiarlo dando click aquí, aquí. Aquí. También voy a dar click aquí. Y a lo mejor voy a hacer que sea semi negrita o tal vez mediana. Y también voy a cambiar el espaciado entre letras porque a lo mejor no es eso lo que no me gusta de él. Y tal vez hacerlo un poco más pequeño. Tal vez vuelva a cambiarlo a semi negrita. Y siento que eso es mucho, mucho mejor. Va a seguir adelante y centrar estos. Sólo resálcalo. Haga clic en estos botones aquí que se centra fácilmente en aquí. puede ver que ahí es un poco de frontera. Así que voy a justo entonces voy a cambiar los logotipos. Entonces solo voy a usar una palabra marca ese logo por ahora para mantener las cosas simples y correctas, alquimia, yoga. Entonces esta es exactamente la misma fuente que usé aquí, solo en mayúsculas. Y realmente me encanta cómo se ve. Alquimia, yoga. Entonces también voy a hacer que ese color coincida con esto solo para mantener esa cohesión. Y estoy muy contento con cómo resultó. Ahora solo quiero echar un vistazo más de cerca para poder ver que aquí hay una frontera. 8. resumen de 2: un restaurante mediterráneo: Un breve dos, estamos trabajando con un restaurante llamado catch 35. Entonces voy a leer el resumen del cliente y luego les mostraré chicos los diferentes activos con los que estarán trabajando. Y luego a partir de ahí, te guiaré a través todo el proceso de mi sitio web para crear prototipos de un sitio web completo y Adobe XD catch 35 es un elegante Lounge bar y restaurante mediterráneo ubicado en la ciudad de Chicago. Tienen una cocina abierta y un ambiente de moda para que sus clientes disfruten y han estado atendiendo a los clientes por más de diez años. Quieren cambiar la marca de su sitio web para sentirse un poco más atemporal, moderno y moderno. La visión del sitio web para el cliente, mi visión para el nuevo sitio web de catch 35 es modernizar el aspecto general del sitio web. Nuestro interior es muy monocromático y de estilo, así que me encantaría verlo venir a través de nuestra página web. Quiero que el sitio web sea muy visual con copia mínima del sitio web para ayudar a crear una sensación más moderna, lujosa y moderna. Estoy realmente inspirado en los diseños editoriales que son new age y trendy. Algunos adjetivos describen el estilo general que buscan es elegante, moda, maduro, moderno, íntimo, un ambiente animado con una decoración elegante. El reto del proyecto es que debido a que el restaurante lleva algunos años abierto, el restaurante tiene activos de marca existentes de los que no quieren separarse. El logotipo y los activos de la marca existentes se imprimen y exhiben en varias partes del negocio, incluidos los menús, las tarjetas de presentación de la tienda y los anuncios locales. Las imágenes también son una gran parte de la marca y queremos exhibir ese restaurante de una manera muy visualmente interesante. Para esta tarea, quiero que diseñes y prototipos del sitio web full catch 35 para que podamos visualizar completamente el sitio web y navegar por la siguiente página del sitio tal como estaba en vivo. Entonces, algunos consejos útiles para ayudarlo a comenzar es investigar inspiración del diseño de sitios web editoriales para tener una idea de la dirección que le gustaría ir con los activos. Tenemos otra cosa, como se mencionó en el anterior brief del cliente, siempre me encantó elegir colores de marca a base de imágenes y porque ya tienen imágenes de su interior, ese equipo, la comida que oferta, realmente quiero asegurarme de que los colores se elijan en base las imágenes porque es una parte tan grande de su marca que quieren retratar. Y entonces lo tercero es que quiero que prototipos de todo el sitio web en Adobe XD. Te guiaré a través todo mi proceso de diseñar no solo la página principal, sino también las páginas internas, además de vincularla para que cuando presente esto a tu cliente antes de entrar en modo de desarrollo o si estás trabajando con un desarrollador, realmente puedes simular lo que quieres que interactúe el sitio web y sentir que como un usuario está pasando por cada página del sitio web. Así que voy a seguir adelante y mirar a través de todos los diferentes activos que tenemos. Aquí. Tenemos la copia del sitio web, tienen una página de inicio, un menú, y sobre el horario de página y ubicación, y la posibilidad de hacer una reservación. Entonces 12345 páginas, parece que no hay mucho. Así que realmente quiero mostrar la sub-marca de una manera muy agradable visual usando imágenes. Entonces echemos un vistazo a las imágenes. Puedes ver esto en el Google Docs, pero ya lo he descargado a mi escritorio. Entonces solo voy a mostrarte unos activos de marca diferentes. Entonces tenemos el logo, muy simplista. Tenemos el menú existente, especie de tener una idea de las diferentes cosas que ofrecen. Y luego tenemos algún tipo de textura. Si queremos usar este gris, si no queremos usar esto, también está bien. Pero solo algo que tienen de su anterior diseñador de logotipos que se usa para su menú. Entonces tenemos los activos de la marca. Entonces tenemos un montón de diferentes imágenes aquí. Así que realmente nos ponemos oscuros, íntimos, vibra, acogedores, citas nocturnas, comida muy elegante, chefs profesionales. Así que realmente quiero mostrar todas estas cosas diferentes en el sitio web. Y una gran cosa, como se menciona en el resumen del cliente, es que hay ambiente. Es un muy lujoso, verdad me encanta el aspecto de la misma. Y todas estas son imágenes libres de derechos de autor. Entonces notarás que no todos encajan perfectamente, pero siéntete libre de usar cualquiera de estos para retratar realmente el aspecto que quieres tener. A menudo, cuando tenemos informes de clientes en los que estamos trabajando, tenemos un montón de diferentes imágenes basadas en diferentes fotógrafos, algunas imágenes pueden no necesariamente ir con otras. Tu trabajo para emparejar las imágenes con el diseño que estás haciendo. Entonces para empezar, voy a seguir adelante e ir a Pinterest para que pueda empezar a inspirarme. Algunas palabras clave que habían dicho eran diseño editorial, diseños de restaurantes. De veras quiero mostrarlo. Y así voy a seguir adelante y buscar diseño editorial. Y luego voy a abrir otra pestaña porque también quiero buscar diseños de restaurantes. Quiero crear una fusión entre un sitio web editorial que normalmente se usa para moda de alta gama con un restaurante. Entonces voy a seguir adelante y buscar restaurante y diseño web. Y luego también voy a ir aquí al diseño editorial. Diseño editorial, restaurante. Tendremos algo que ver. Estoy viendo muchos menús, que no es necesariamente lo que estoy buscando. Solo voy a seguir adelante y mirar los diferentes diseños web de restaurantes. Entonces tenemos esa. Sí, me encanta este. Queremos que sea de naturaleza muy simplista porque habrá muchas imágenes. Entonces no recomiendo usar muchos colores o patrones visuales porque sí tienen muchas imágenes. Quiero que la marca se exhiba a través de las imágenes existentes porque eso es esencialmente lo que la gente paga cuando va a este restaurante. Me gusta bastante el aspecto de eso. Solo voy a seguir abriendo las cosas en nuevas pestañas hasta que encuentre algo que realmente me inspire. Me gusta mucho el aspecto de eso. Y es realmente útil cuando haces clic en diseños que te gustan , te presentan una nueva búsqueda completamente diferente. Realmente toma eso en tu ventaja. Normalmente me gusta abrir las cosas en nuevas pestañas. Siéntase libre de crear su propio tablero para el proyecto en el que está trabajando. Normalmente lo hago para los clientes para asegurarme de tener todo en un solo lugar y poder abrir las cosas cuando estoy trabajando en un diseño de sitio web en el lapso de unas semanas o unos meses. Pero ella lo pone muy fácil. Sólo voy a seguir mirando a través de todas estas cosas. Me gustó mucho la vibra oscura y malhumorada y creo que eso es lo que quiero retratar en el sitio web. Pero nuevamente, puede cambiar en base a las imágenes que elegimos. Me gusta mucho esta fuente de escritura gruesa con esta fuente alta sans serif. Entonces eso es algo que podría ser realmente genial que mostramos. Entonces básicamente tengo algunos sitios web diferentes. Obviamente vamos por una vibra muy oscura y malhumorada porque eso es lo que mencionaron que querían en el diseño de su sitio web. Entonces ahora que tengo algunas piezas que puedo usar para inspirarme, voy a seguir adelante y abrir archivo. Ahora. Sólo voy a tomar algunos de los activos de la marca y ponerlos en el diseño. Entonces lo primero es lo primero, voy a poner en el logo, que está aquí arriba. Y muchas veces obtendrán un proyecto de diseño de sitios web con activos de marca existentes. A veces algunos también son diseñadores de marca. Los clientes pueden llegar a ti con marcas, pero a veces también, las personas ya pueden tener activos existentes. Y si te especializas solo en diseño web y luego intentas tomar sus activos existentes, rediseñarlos de una manera nueva sin alejarse demasiado de los activos originales de la marca. Esa es una habilidad realmente útil para tener también. Ahí tenemos el logo. Y porque muchos de los sitios web que saqué para inspirarme tienen un fondo de imagen como el héroe. Voy a jugar con eso también en mi diseño. Entonces voy a seguir adelante y dibujar cuadrados para que quepa toda la sección de héroes, apague la frontera. Entonces voy a seguir adelante y abrir mis imágenes. Tengo muchas ganas de encontrar algo que comunique lo general y más allá y el sentimiento de esta RAM. Entonces realmente quiero que encuentres algo que muestre que realmente me encanta este interior. Entonces voy a poner esto como fondo. Voy a mandar eso a la parte de atrás porque esto es sobre un fondo oscuro. En realidad quiero cambiar el logo a la variación de logo blanco. Así que voy a seguir adelante y subir eso ahí. Y definitivamente me gusta un poco más el aspecto de eso. Ahora voy a seguir adelante y abrir las indicaciones de copia del sitio web para ver qué secciones quieren. Voy a copiar esto para que tenga la opción pegarlo en mi archivo XD abajo. Da click en esto que realmente puedo simular el diseño que quiero hacer. Voy a seguir adelante y crear un cuadro de texto, pegar eso ahí. Ahora vamos a jugar con la fuente. Así que sólo voy a agarrar un color de aquí y hacer este 22. También quería tener una fuente de encabezado diferente. Así que tal vez quiero crear mis propios encabezados porque algunas de las cosas en el Google Doc realidad no tienen encabezados, tiene párrafos. Así que en cuanto al diseño, sé que los encabezados ayudan a romper diferentes secciones del diseño. Entonces, aunque mis clientes solo me dieron esta copia, todavía puedo agregar diferentes piezas de copia para embellecer un poco más el sitio web. Entonces tenemos eso. Y también voy a crear otro cuadro de texto aquí arriba. Elaborando experiencias excepcionales. Voy a convertir eso en un tamaño de encabezado. Y luego ahora voy a encontrar fuentes que siento que representan la marca. Y tal vez hasta yo quiero eso encima de esta sección principal aquí, que sí vimos en las piezas de inspiración que encontramos por ahora voy a ponerlo ahí para que realmente pueda ver la diferencia. Y solo voy a ir a la parte superior de mis fuentes y hacer clic para ver realmente lo que estoy esperando. Yo también, porque todavía estoy en la etapa experimental, voy a experimentar con diferentes tipos de textos y tal vez quiero mayúsculas, lo que crea una Experiencia diferente . Entonces voy a tener a los dos. Son solo para que pueda ver el texto. Voy a crear una ligera superposición en esta imagen. Así que sólo voy a dibujar otro bloque sobre este mismo. Hazlo negro. O incluso voy a sacar un color de esta imagen. Así que vuelve las nueces, arregla enviar con la espalda, y también arregla este Enviar al Atrás. Ahora voy a cambiar la opacidad de mi superposición. Así que conseguimos una experiencia de color más personalizada, pero aún manteniendo el aspecto general. Y también permite que nuestro texto salga aún más. Voy a seguir adelante. Ahora voy a jugar con fuentes. Voy a expandirlo un poco más para que no se superpongan. Todavía quiero que coincida con el logo así como la marca, así que no tiene que ser perfecto aquí si tenemos abierto Ryan's para elegir nuestras fuentes y nuestros colores. Pero nuevamente, realmente queremos asegurarnos de que coincida con el logotipo porque ese es el principal activo de marca que tienen. Queremos asegurarnos de que el sitio web coincida con eso también. Así que me gusta mucho esta fuente alta, así que voy a seguir adelante y ponerla a lado porque tal vez quiera usarla más tarde. Todavía voy a mirar a través de las fuentes solo para ver si hay algo más que me llame la atención. Sí me gusta esta fuente script. Quizá quiera usarlo para embellecer. Así que también voy a poner eso ahí arriba. Y realmente se trata de tratar de encontrar fuentes que se combinen bien. A menudo, es muy bueno combinar diferentes estilos de fuentes para diferentes tipos de textos. Entonces, un encabezado, por ejemplo, si tiene un encabezado serif, es posible que desee usar una fuente de párrafo sans serif o viceversa. Y ahora quiero crear una página de libro ahora porque es un restaurante, el llamado principal a la acción será reservar. Entonces quiero mostrarlo aquí. Puede que ese no sea un color que use aquí, pero puede que lo use en otro lugar de la página. Yo sólo quería ver cómo se vería. Entonces voy a copiar y pegar este botón aquí arriba por ahora. A veces así es como se ve tu espacio de diseño. Es solo poner un montón de diferentes activos que te pueden gustar y es posible que quieras usar como referencia a medida que comienzas a finalizar tu diseño. Entonces tal vez no quiera eso ahí, pero podría querer que en una sección blanca diga que tal vez mis secciones blancas tengan un llamado a la acción amarillo. Mis secciones más oscuras tienen un llamado a la acción blanco. Entonces voy a hacer esto blanco y negro. También quiero seguir adelante y hacer mi cabecera. Así que a casa sobre Menú, sobre Menú, sobre horas y ubicación. Y quiero una sección que se refiera al botón de reservar ahora. Entonces voy a seguir adelante y copiar esto. Ponlo por aquí. No estoy seguro si me gusta esta superposición de imágenes, así que voy a seguir adelante y copiar esto y pegar una nueva opción aquí para que realmente pueda comparar diseños. Así que voy a seguir adelante y mover esto hacia abajo. Y entonces también voy a dibujar un rectángulo detrás de él que todavía tengo ese efecto oscuro, pero está en su propia barra de menú. Voy a usar la herramienta cuentagotas de color para seleccionar un color y enviarlo a la parte posterior. No estoy seguro de que me guste todavía, pero está bien. Todavía estamos en esa parte del proceso de diseño donde está bien que las cosas aún no estén perfectas. Y se trata de la experiencia de aprendizaje realmente todo centrado. Voy a quitar ese botón de aquí arriba. A lo mejor quiero que esto sea blanco. Así que voy a jugar un poco con este color. Entonces realmente quiero que sea un ónix Negro. Y en realidad no me gusta esta fuente. Así que voy a seguir adelante y cambiarlo por otra cosa que me pueda gustar. Y me gusta esta fuente, Bélgica. Entonces voy a usar esto como mi fuente primaria de llamada a la acción. Hazlo todo en gorras para crear ese aspecto cohesivo. Ampliar esto. A lo mejor voy a cambiar esto para reservar una mesa. Genial, eso me encanta hasta ahora. Y ahora puedo elegir una fuente para ir con ella. Entonces tenemos un header fonts, tenemos un call to action fonts y menu font, y no necesariamente tenemos un párrafo encendido todavía, así que voy a seguir adelante y copiar esto, pegarlo ahí. Voy a guardar esto en mis colores para que finalmente pueda cambiar los colores por aquí. Voy a salir de esto. Te voy a cambiar esto 44. Entonces también voy a agarrar aquí este botón de llamada a la acción. Entonces solo voy a agregar este color al lado izquierdo. No estoy seguro de si lo voy a usar, pero definitivamente lo quiero como referencia. Voy a seguir adelante y agarrar ese color de aquí y hacer esto, bien. Voy a seguir adelante y mover eso. Entonces ahora queremos encontrar un párrafo simplista. Creo que eso me gusta, pero voy a jugar con la altura de la línea. No del todo espacio fuera suficiente. Tenemos una llamada a la acción de mesa de cubo aquí quiero probar cómo sería esto con este llamado a la acción amarillo. Voy a seguir adelante y mover eso aquí arriba. Y en realidad quiero hacer estas opacidades un poco más. Eso no es lo que quiero. Entonces voy a hacer esto del mismo color ahí. Sí, me gustó mucho ese look de ónix oscuro, muy oscuro. Siento que ayuda a crear una sensación más lujosa. Y creo que verlas lado a lado, definitivamente me gusta este lado derecho mucho, mucho, mucho más. Así que voy a seguir adelante y seguir adelante con este. Tenemos un libro de mesa llamado a la acción. Entonces tenemos el menú. Por lo que a menudo vas a ir a sitios web para ver el menú. Entonces tenemos eso aquí y quiero mostrarlo para esta sección. Ahora quiero crear un collage porque una gran parte de este sitio web es la experiencia gastronómica. Así que quiero crear un collage de algún tipo que muestre las diferentes comidas que ofrecen y los diferentes alimentos que pueden escuchar. Así que voy a dibujar un montón de cuadrados aquí y realmente ojalá sea capaz de crear ese collage. Mira. Aún no sé si esto es como el perfecto Lee en su lugar. Pero por ahora parece que me gusta. Así que solo voy a seguir adelante y ajustar esto aún más. Y por el momento, en realidad solo estoy mirando las cosas. Esto está totalmente bien porque siempre podemos encontrar melodía más adelante. Para esta sección, tengo muchas ganas mostrar todos los diferentes aspectos de las marcas. Así que voy a seguir adelante y hacer esto más grande. En realidad. Voy a seguir adelante y abrir los diferentes activos que tenemos. Y sí mencionaron que querían que una gran parte del sitio web fueran imágenes. Así que de veras quiero mostrarlo aquí. Quieres una mezcla de bebidas, comida, y todo lo que incluye básicamente la experiencia culinaria o da una idea de lo que ofrece la marca. También queremos algunas personas, así que todas estas son fotos realmente hermosas, pero también quiero crear un ambiente look and feel. Así que eso suele aparecer cuando hay gente en las imágenes. Tenemos eso y voy a apagar la frontera en las imágenes están en su lugar. De hecho voy a hacer este ancho completo así. Alinea esto a la parte inferior para crear ese efecto de collage completo. Prohibición del mismo ancho. También voy a ajustar cesárea para que todos creen un collage. Eso me gusta hasta ahora. Siento que todavía no es el collage perfecto, pero eso está totalmente bien. En realidad voy a abarcarlo para que sea un poco más pequeño. Entonces tenemos un patrón paralelo como este, abarca todo el ancho, abarca todo el ancho, y entonces esto no. Así que un poco quiero crear el mismo efecto aquí. A lo mejor aquí hacemos esto un poco más ancho, bonito. A lo mejor quiero ver cómo se vería eso si eso es de altura completa. Bien. Creo que eso me ha gustado hasta ahora. Solo quiero ver cómo se vería si ambos abarcaran altura completa. Sólo un poco fría. Eso me gusta porque todavía tiene esa mirada paralela. Otra cosa que podría estar apagada es el hecho que esto está ligeramente sobrecentrado. Entonces voy a seguir adelante y verificar con mis cuadrículas y alinearlas para que parezca un poco más centrada. Entonces tenemos ese look de collage y definitivamente comunicamos el ambiente del sitio web. Así que voy a seguir adelante y hacer girar esto aún más. De hecho voy a embellecer esto con un impuesto lateral. Entonces soy un gran admirador del texto lateral. Casi lo uso y la mayoría de mis proyectos de diseño para mis clientes porque ayuda a crear una apariencia diferente. Así que voy a seguir adelante y escribir. Entonces voy a centrar esto, agruparlo y luego resaltar todo esto. Centrarlo verticalmente. Entonces me encanta eso. Definitivamente como el aspecto de eso. Y luego voy a seguir adelante y agarrar el siguiente ejemplar para la página principal y ponerlo aquí. Entonces esta es en realidad una sección para ver el menú. Entonces voy a quitar este menú llamado a la acción aquí porque hay copia para ver el dinero. Voy a poner una mesa, voy a copiar esto, pegarlo aquí abajo. Y quiero usar este mismo negro, pero en vez de que tenga una superposición de opacidad, solo voy a hacerlo completamente negro y luego voy a hacer que el texto sea blanco. Así que ahora voy a volver por aquí a mi Google Doc y escribir en esta sección. Voy a seguir adelante y agarrar esta sección aquí arriba porque todavía quiero un sub-encabezado. Entonces voy a seguir adelante y rotar eso. Te pones blanco y lo arrastras hasta aquí. Voy a centrar todos estos centros. Entonces tenemos eso y definitivamente me está gustando el aspecto de este sitio web hasta el momento. Entonces finalmente, tenemos la última llamada a la acción de este Google Doc. Entonces tenemos capacidad para reservar una mesa. Entonces otra vez, sólo voy a copiar y pegar esta sección aquí arriba, pegarla aquí abajo. Alinea todo a la izquierda porque quiero que rompas este centro. Mira, se puede ver un poco que esto está centrado, esto está centrado, esto está centrado. Entonces quiero poder crear algo que nos permita romper ese saldo central. Entonces voy a seguir adelante y hacer esto alineado a la izquierda. Y otra vez, sólo voy a copiar y pegar una imagen, poner eso por aquí. Voy a sustituir eso por una imagen de algún tipo. Así que me encanta eso hasta ahora. Así que en realidad quiero intentar experimentar con esto siendo de ancho completo. Entonces voy a simplemente copiarlo y pegarlo de nuevo para que pueda comparar fácilmente mis diseños. Esto es realmente crítico si estás tratando comparar diferencias muy sutiles en InDesign. Así que sólo voy a abarcar este ancho completo. Entonces voy a mantener el turno y automáticamente lo abarcará de ancho completo si no presiono Shift y escalará, pero no escalará las imágenes. Entonces sostener Shift te permite realmente crear ese efecto que también voy a mover esto hacia abajo para ver si me gustaría y no me gusta. Entonces voy a moverlo un poco hacia arriba así que todavía tenemos ese efecto. Alinea esto a la parte inferior y definitivamente me gusta que el ancho completo se vea mucho mejor. Entonces voy a seguir adelante y seguir diseñando con esto en mente. Todo se ve muy bien hasta ahora. Entonces estoy contento con la forma en que se ve esto. Y ahora quiero crear la página del menú. Así que solo voy a ajustar esto hasta que sepa con certeza que es perfecto ir a mover esto allá arriba. Y estos dos regresan. Me gusta mirar hacia arriba que estoy contento con la forma en que se ve todo. Entonces ahora voy a seguir adelante con este diseño. Estoy contento con ello. Definitivamente es mi favorito entre estos dos. Así que solo voy a seguir adelante y eliminarlos si quieres mantenerlo en tu caja de herramientas y referencia para que realmente puedas ver la progresión, entonces solo puedes mantenerlo ahí. Pero por ahora, lo voy a mantener ahí y voy a mover esto hacia abajo porque este es el diseño con el que voy a seguir avanzando. Entonces solo voy a nombrar esto haciendo doble clic aquí y tecleando la captura 35. A continuación, voy a copiarlo y pegarlo para que sigamos teniendo ese aspecto cohesivo. Y la siguiente página en la que vamos a trabajar es el menú. Tenemos el menú aquí y los activos, y en realidad no necesita ser tan especial. Lo que queremos hacer aquí es sólo escaparate. No hace falta que sea perfecto porque esto es solo algo que ya han diseñado. Así que voy a simplemente arrastrarlo y soltarlo. Y lo voy a poner aquí así. Voy a renombrar esto para coger el menú 35. Tenemos nuestro menú aquí. Y siento que quiero crear algo que visualmente sea un poco mejor de ver. Entonces tenemos el menú y quiero que se pueda hacer clic en el sitio web. Pero por ahora, también quiero una imagen diferente aquí para retratar las diferentes partes del menú. Así que voy a dibujar este cuadrado y hacer una pantalla dividida aquí. Soy un gran fan de estas secciones de pantalla. Y luego voy a capturar algunas de estas fotos por aquí para mostrar realmente una marca. Voy a hacer esta opacidad y voy a agarrar el mismo bloqueo de color desde aquí, copiarlo y pegarlo, y arrastrarlo hasta aquí para que aún podamos crear esos efectos oscuros y malhumorados. Voy a mandar eso a la espalda. Entonces ese es el bate. Voy a tomarlo para que no se muestre en el menú. De hecho voy a mover el menú aquí abajo para que pueda ser completamente clicable y abra mi cuadrícula y abarque esto para que sea el ancho completo de la cuadrícula. A lo mejor no el ancho completo porque va a ser demasiado grande, pero a lo mejor voy a poner eso aquí abajo. Voy a poner aquí algún tipo de texto. Voy a copiar y pegar esto porque es el mismo diseño. Y solo para que esto y esto tengan un aspecto ligeramente diferente, voy a experimentar con que este sea un fondo amarillo. Podría ser demasiado y eso está bien. Pero solo quiero experimentar con él para jugar con el look que vamos por. Bien, no demasiado, no demasiado grande de un fan. A mí me gustó que el amarillo fuera sutil, pero sí quiero que este blanco sea ligeramente diferente de esta sección. Entonces solo voy a dibujar una caja aquí, apagar el borde, enviarlo a la parte de atrás y variar ligeramente ligeramente, ajustar esto para que quede un tono más oscuro. Entonces estoy contento con la forma en que se ve. Acabo de copiar esta pieza de textos de aquí. Eso está totalmente bien. Esto solo te dará la oportunidad de animar a tu cliente a crear un nuevo párrafo de texto. Entonces, si quieres, puedes seguir adelante y cambiar esto. Pero para el caso de uso de este proyecto, voy a hacerlo así como así. Y en realidad voy a abarcar este menú para que sea el ancho completo de la grilla. Y entonces ahora tenemos la página acerca de. Entonces voy a seguir adelante y copiar la página de inicio nuevamente y crear la página Acerca de al final de este video. Una vez que crees cada página, podré mostrarte cómo vincular el sitio web completo. Y esto es muy útil cuando creas maquetas para tu cliente. Y realmente muestra la marca, lo cual es muy, muy útil. Entonces tenemos la página acerca y vamos a seguir adelante y mirar la copia que voy a quitar. En realidad, voy a quedarme con eso, pero voy a mover esto hacia arriba, desagruparlo y hacer esto blanco. Voy a quitar esto y dividirlo en dos secciones diferentes. Y luego voy a cambiar el fondo aquí nuevo con otra pieza de imaginería. Me encanta el aspecto de eso. Y romper esta sección creada con amor y pasión. Y ahora quiero mostrar a los dueños. Entonces voy a dibujar dos cuadrados dentro mi cuadrícula y alinearla a cada una de las cuadrículas. Entonces voy a tener dos fotos de cada uno de los hermanos. Siente que esos están demasiado juntos. Así que sólo voy a estar en ello. Entonces tenemos blanco. Voy a hacer esto todo gorras y luego hacer este centro mucho más grande que lo mismo por aquí. Entonces voy a seguir adelante y volver a ir a nuestras fotos. Adelante y apague mis fronteras. Entonces tenemos otra foto del otro hermano. Entonces tenemos eso. Entonces tenemos horario y ubicación. Así que quiero exhibir eso ahí también. Así que voy a seguir adelante y copiar la pieza principal también. Así que ahora nos estamos enfocando en el horario y la ubicación. Así que me hemos dejado volver a la copia ahora está en la ubicación. Voy a agarrar este de aquí porque ya está alineado para esta sección, en realidad quiero intentar crear una sección de mapa aquí. No se podrá hacer clic aquí, pero solo quiero mostrar un mapa. Así que quiero exhibir algunos horarios y ubicación. Tenemos esa sección y voy a seguir adelante y abrir Google Maps. Y solo por el bien de esto, voy a seguir adelante y acercarme. Y yo sólo voy a poner este mapa aquí. Este es un cliente falso, así que en realidad no tienen una ubicación, pero solo voy a fingir que está por aquí en alguna parte. Sólo voy a fingir que es gordo y voy a tomar una captura de pantalla. Y luego voy a agarrar eso de mis capturas de pantalla de escritorio y moverlo aquí. Quiero poder exhibir una Mac aquí para que la gente pueda abrirla fácilmente en Google. Voy a mover esto juntos, centrarlo verticalmente. Así que tenemos nuestro horario y ubicación listados ahí. Voy a ver cómo se vería esto si lo giro de ancho completo. Y se ponen mucho mejor cuando está arreglado, entonces voy a copiar y pegar esta sección y moverla por aquí para que tengamos sección final que podamos agregar. Eso se ve bien hasta ahora. Entonces tenemos el libro una página de mesa. Así que voy a seguir adelante y copiar y pegar eso. Y luego voy a crear una forma. Entonces los detalles del formulario son número de personas, fecha, hora. Entonces tenemos esto, sólo voy a copiar y pegar eso otra vez. Déjame agrupar este libro una mesa. Sólo voy a mantener esta sección muy, muy sencilla. Así que voy a dibujar sólo unas cuantas cajas aquí. La fuente del párrafo principal lo hace negro. Entonces tenemos número de personas, fecha y hora. Así que en realidad quiero estos a la izquierda. Guárdalo tal como está. Después reserve una mesa. También voy a dibujar un triángulo porque quiero que estas fechas y horas sean un desplegable. Así que voy a seguir adelante y dibujar un triángulo, rellenar esto de negro, girarlo, y moverlo aquí, y luego lo voy a hacer más pequeño para que se vea natural, no hacer lo mismo donde la sección de tiempo, esto solo significa que hay una sección donde podemos ingresar la fecha y la hora. Entonces tenemos eso. Y lo que quiero hacer en realidad es crear este mismo efecto en el fondo. Entonces voy a mandar eso a la parte de atrás. Y lo que en realidad quiero hacer es crear un cuadrado interior para que se vea un poco más como una forma. Apaga eso, céntralo dentro de esta sección y esa es la parte de atrás. Y una vez más, voy a enviar los antecedentes a la parte de atrás. Y luego tenemos el hecho aquí que nos permite reservar realmente una mesa. Entonces voy a agrupar esta sección. Voy a mover estos hacia abajo en realidad. Una vez más, voy a destacar esta sección, agruparla. Entonces voy a centrar todas estas diferentes secciones. También quiero crear un efecto que tenga un borde porque esta es una pieza importante de la marca. Así que sólo voy a hacer un borde amarillo. Ella lo hace un poco más único y significa un llamado a la acción. Tengo un libro, una mesa, y ahora tengo todas mis páginas diferentes. Entonces tenemos el Inicio, el Menú, el sobre las horas y ubicación, y luego El libro, una página de mesa. Ahora que tengo esto, estoy feliz de eliminarlos, pero realmente se puede ver por dónde empecé versus dónde terminé. Y eso es solo parte del proceso de diseño. Tu primer diseño no se verá perfecto, pero a medida que sigas moviéndote por las diferentes secciones de las páginas de manera más cohesiva, se verá ahora que estoy viendo esto uno al lado del otro, Veo que he usado esta imagen dos veces, así que solo voy a reemplazar esta imagen por otra diferente. Entonces voy a borrar estas secciones aquí arriba. Además, me di cuenta de que estas son también las mismas imágenes, esa porque sí copié y pegué eso. Entonces voy a sustituir esta imagen. Así que diferente imagen sólo para tener un aspecto y sensación ligeramente. Yo amo, amo, amor, amor. Cómo ha resultado esto hasta ahora. Entonces ahora quiero prototipar el sitio web. Tengo cada una de mis páginas diseñadas. Y ahora lo que quiero hacer es asegurarme de que se pueda hacer clic en todos los botones aquí para que cuando alguien haga clic en este botón, conduzca a un libro, una página de tabla. Entonces, para toda la llamada a las acciones, básicamente quieres asegurarte de que todos los botones en los que quieres hacer clic estén agrupados. Entonces, debido a que el texto y este rectángulo son dos elementos diferentes, quieres asegurarte de agruparlos. Entonces, si haces clic en la fuente y mantienes presionada Mayús y luego también haces clic en el rectángulo, podrás agruparlos y podrás hacerlo con todos los diferentes botones de tu página. Y esto es realmente útil para la siguiente sección, que será prototipando el recorrido real del usuario de este sitio web. Entonces haremos lo mismo por esto. Tenemos el y, pero hemos agrupado todos los diferentes elementos juntos. Ahora seguimos adelante y hacemos clic este botón prototipo en la esquina superior izquierda. Y ahora podremos asegurarnos de que todos los botones se vinculen de nuevo a donde necesitan ir. Entonces tenemos la barra de navegación principal y ahora queremos asegurarnos de que cada elemento del menú en la navegación realmente apunte al lugar correcto que queremos que vaya todo. Así que voy a seguir adelante y hacer clic en Inicio. Y quiero que esto se canalizar a esta página de inicio. Voy a seguir adelante y hacer clic en Inicio. Y luego para el menú, quiero que esto vaya a la página del menú. Así que voy a seguir adelante y tomar esa flecha y señalar ahí. Y verás que una vez que haga clic en ese botón, debería ir al menú. Haré lo mismo con la página acerca de, les señalé sobre la página de horarios y ubicación. Ir a horario y ubicación, y luego reservamos una página de mesa. Iremos a reservar una mesa. Entonces ahí lo tenemos. Ese es el menú completo. Y lo que queremos hacer entonces es hacerlo. Lo mismo para todos los botones de aquí abajo. Entonces tenemos mesa de reserva y quiero que eso embudo para reservar una página de mesa. Voy a seguir adelante y tirar de eso por ahí. Esto se trata de gatos 35. Entonces voy a poner eso a la página acerca de. Esto dice ver nuestro menú. Entonces voy a poner eso en la página del menú. Entonces éste por fin vuelve a decir mesa de cubo. Entonces voy a poner eso al libro una página de mesa. Por último, porque queremos que este menú se exhiba en todos los diferentes diseños, voy a seguir adelante y tomar esto y convertirlo en un componente. A partir de ahí, podré eliminar todas estas diferentes secciones. Así que voy a seguir adelante y hacer eso. Voy a arrastrar y soltar este componente aquí. Verás que mucho de él ya está configurado para canalizar a las páginas correctas. Hay alrededor de que hay horas y ubicación. Lo único que falta, sin embargo, es esta casa. Entonces quiero asegurarme de que el hogar vaya a esta página. Entonces eso va a la casa. Y haremos exactamente lo mismo con este libro un botón de mesa. Esto irá al libro una página de mesa. Haremos lo mismo con este menú. Entonces voy a eliminar este menú y reemplazarlo con el componente. Entonces tenemos la página de inicio. Entonces voy a hacer doble clic en eso otra vez y voy a asegurarme de que vaya a esta página. Y no se puede hacer clic en la página acerca de porque estaremos en esa página y luego tenemos esta sección de tabla de folletos. Entonces otra vez, canalizar eso al libro una sección de mesa. Y luego haremos lo mismo por las horas y ubicación. Elimine esta sección aquí, agarró esta pieza componente, haga exactamente lo mismo. Todos esos están apuntados en la misma dirección. Y luego tenemos el hogar. Quieres asegurarte de que va a la página principal. Tenemos horario y ubicación, y luego tenemos una mesa, luego reservar una mesa. Y luego por último pero no menos importante, hacemos exactamente lo mismo para esta página. Tome la pieza componente, arrástrala y suéltela en el libro una página de tabla. Y luego queremos tomar el botón Inicio y asegurarnos de que esté canalizado hacia el hogar. Y luego vamos a editar esto y ajustar esto. Porque por alguna razón esto es. Permaneciendo del todo, tenemos eso. Y finalmente, ahí lo tenemos. Entonces ahora podemos realmente fluir a través este sitio web como si fuera un sitio web real y te mostraré exactamente cómo funcionó eso. Pero esto es realmente útil cuando estás presentando un sitio web a tu cliente por primera vez, es mucho más fácil hacer ediciones de diseño en esta etapa de tu proceso de diseño web cuando estás wireframing solo en el diseño, si finalmente quieres desarrollar sitios web para tus clientes también, es mucho más fácil hacer las ediciones aquí. Luego, después de haber codificado o desarrollado un creador de sitios web que está utilizando, siempre encuentro que necesita finalizar cualquier edición o revisión cuando esté creando este sitio web prototipo realmente te ayuda a hacer eso. Entonces voy a seguir adelante y destacar todo así. Y luego voy a seguir adelante y presionar play. Entonces estaré en este libro, una página de tabla solo porque esa fue la última que edité. Pero si hago clic en Inicio, verás que irá a mi página principal y podré desplazarme por cada uno de los diseños como si se tratara de un sitio web real. Entonces, si sigo adelante y hago clic en reservar una mesa, llevará a reservar una mesa como sobre. 9. Reseña 3: descubre tu estilo de diseño: El resumen de proyecto tres es básicamente hacer lo que quieras en tu propio estilo. Por lo que la tarea principal es rediseñar un sitio web de un negocio o marca que te guste en tu propio estilo. O puedes diseñar un sitio web para un cliente soñado, ya sea existente o imaginario. Entonces, si hay un influencer que realmente te gusta, o un entrenador o un mentor que realmente, realmente te gusta. Puedes crear un sitio web simulado para esa persona o puedes crear una persona falsa de alguien en la industria a la que te encantaría trabajar en el proyecto. Para este proyecto, tienes las riendas creativas para ir en cualquier dirección que elijas, elige una marca en una industria en la que te encantaría trabajar para que puedas obtener la experiencia completa de lo que cambiar la marca de un sitio web se vería así. Puedes elegir entre esencialmente todo tipo de industrias como salud, bienestar, tecnología disruptiva, moda, coaching minorista y desarrollo personal, médicos de diseño de interiores, dentistas, abogados, y la lista sigue y sigue. Entonces esas son solo algunas industrias para meter tus intereses en proyectos de inundación que quieres hacer para qué industria y para qué tipo de clientes. Entonces aquí hay dos opciones. opción uno es rediseñar la página de inicio o sitio web completo de un negocio o marca de su elección. Entonces, si hay una marca de comercio electrónico que realmente te gusta, o si hay una marca personal que realmente te gusta idear una idea de sitio web rediseñada para esa persona, pero luego diseñarla de una manera que me gusta entrar. Entonces realmente explorando con qué estilos de diseño resuenas y también tratando encontrar inspiración para algo que despierte tus intereses como tu estilo de diseño. Esto es realmente solo explorar tu estilo de diseño y ver qué cosas te atraen naturalmente. opción dos es diseñar la página principal o un sitio web completo para un cliente de ensueño y una industria en la que te encantaría trabajar. Y obviamente he enumerado un montón de industrias arriba. Podrías idear una persona de cliente falsa o puedes elegir una persona que conozcas que básicamente sería tu cliente ideal. Entonces estas son las dos opciones que puedes hacer solo la página de inicio o puedes hacer el prototipo completo del sitio web como lo hicimos en resumen del proyecto a algunos consejos útiles para opción uno es buscar un negocio marca que te encanta y rediseña su sitio web y tu propio estilo. Siéntete libre de usar sus imágenes, copia, etc. pero asegúrate de acreditar el diseño original si quieres exhibir en tu portafolio. Así que realmente no puedes decir, oh, diseñé un sitio web para Google, por ejemplo, si solo estás rediseñando Google y tu propio estilo, pero sí, básicamente solo asegurándote de acreditar el original el divertido proyecto que querías recrear. Si no puedes pensar en una marca, también puedes buscar inspiración para sitios web en Pinterest, Behance o regatear y rediseñar. Uno de los sitios web que te gustan ahí o uno de los sitios web de una industria que te gusta, están en tu propio estilo. Para la Opción dos, tienes la opción de crear una persona de cliente para un cliente de ensueño y construir a esa persona un sitio web. Se puede formatear de manera similar a cómo se presentan estos escritos de clientes en esta clase. O puedes escribirlo o si no quieres escribirlo, vas a por ello. Otra opción para esta persona de moneda falsa es encontrar imágenes libres de regalías para los clientes de este sueño y mostrarlas en su diseño web. Entonces podrías mostrarlo realmente a través de una copia que hayas escrito que represente a un cliente falso. O puedes usar las indicaciones de copia que también te he mostrado en esta clase también. Entonces voy a ir con la opción dos. Voy a llegar a una persona de cliente falsa y tipo de mostrarte cómo me acercaría a ella. Todavía no sé con qué industria voy a ir. Pero creo que a medida que encuentre inspiración en Pinterest , más podré averiguar con qué tipo de cliente quiero trabajar. Así que sólo voy a buscar un diseño neutral de sitios web. Como diseñadora, mi estilo, diría que es mucho más minimalista y neutral. Así que realmente me atraen las marcas Inspire más femeninas con colores neutros. Entonces eso es típicamente lo que me atrajo. No sólo he trabajado con marcas en esas, sino que me encanta diseñar de una manera muy neutral. Entonces esto está totalmente a mi estilo, solo los colores neutros y todas estas cosas son realmente lo que me encanta. Así que solo voy a abrir algunos de estos para que pueda empezar a inspirarme en lo quiero que se vea el sitio web que creo. Me encantan los colores aquí, me encantan los cuadrados dentro cuadrados así como esta sección de imagen aquí, creo que lo que voy a hacer por esta marca en realidad está diseñado algo para un entrenador. Ya he diseñado montones de sitios web para montones de diferentes entrenadores y montones de diferentes espacios. Y yo diría que una de mis especialidades es crear sitios web para entrenadores independientemente de Spicer en así que voy a mostrarte cómo paso por ese proceso a la hora de diseñar un sitio web. Entonces voy a empezar yendo a Pexels y descargando algunas imágenes. Además, si no eres muy específico sobre el tipo de cliente para el que quieres crear. También puedes simplemente mirar a Pexels y ver qué buenas imágenes finas. Y luego crea la persona partir de las imágenes que encuentres, como si esta chica estuviera haciendo velas. Si encuentro muchas buenas imágenes con alguien haciendo velas, puedo crear un sitio web para un fabricante de velas, por ejemplo, porque las imágenes juegan un papel masivo en lo que estamos creando. Así que solo voy a seguir descargando imágenes que siento que resuenan con mi estilo y mientras me atrae, y luego la tomaremos a partir de ahí. Ahora tengo un montón de imágenes que encontré en Pexels. Sólo voy a empezar a jugar con el sitio web basado en las imágenes que encuentro. Y luego voy a crear mi persona de cliente ya intenté explorar diferentes direcciones de diseño a las que podría ir con esta marca porque es un haz esto en tu propio estilo y no hay parámetros de diseño. Solo voy a usar esto como un ejercicio exploratorio para desafiar mi proceso de diseño. Entonces voy a ir con esa dirección. Entonces voy a seguir adelante y abrir un archivo XD. Así que solo voy a seguir adelante y dibujar algunos rectángulos aquí arriba para poder arrastrar y soltar algunas imágenes que me gustaron, solo voy a copiar algunas para poder hacer referencia fácilmente a las fotos que me atraen y luego crea un mood board de imágenes antes de sumergirme en el proyecto. Porque obviamente hay muchas maneras diferentes en las que puedo ir con el diseño de este sitio web, pero quiero asegurarme de que todos los colores e imágenes vayan juntos porque solo estoy usando principalmente derechos de autor imágenes. Así que quiero asegurarme de crear ese mood board con imágenes que conozco y siento que pueden funcionar juntas. Voy a ir a echar un vistazo a esto, realmente me gusta este color. Y quiero ver si hay colores que pueda encontrar en ese estilo. Entonces obviamente hay muchos pasteles Hanks. Todavía no estoy muy seguro de cuál sería esta marca. Quiero que sea divertido y juguetón en cierto sentido. Entonces cualquier cosa que tenga estos divertidos y vibrantes colores pastel que pueda usar en mi sitio web. Entonces solo voy a seguir arrastrando y soltando. Algunos de estos podrían no ser exactamente lo que estoy buscando. Entonces ves un patrón aquí. Todas estas imágenes van juntas y todavía no estoy muy segura de cuál debería ser la marca, pero sí me gustan estos colores y me inspiran estos colores. Así que voy a seguir adelante y empezar a jugar con lo que me lleve. Esto podría ser, definitivamente me estoy inclinando más hacia una marca creativa de algún tipo, ya sea un ilustrador, alguien en el ámbito creativo, porque hay muchas formas realmente divertidas y dibujo y personajes y cosas creativas interesantes. Así que quiero asegurarme de que esta marca se presenta como una muy creativa y divertida. Así que ahora usando estas imágenes, voy a volver a Pinterest y buscar un poco más de inspiración, el reino creativo. Así que puedo simplemente jugar con diferentes diseños. Entonces voy a abrir Google, pero a Pinterest y luego escribir sitio web colorido. Y a lo mejor en esta, yo haría página web pastel. Me gustaron estas cosas a cuadros y los colores neutros. Esta es realmente genial. Esta es realmente genial. Voy a seguir adelante y usar esto como inspiración. Me encantan, minimalismo, pero luego los pequeños toques de color. Y voy a usar esto y combinarlo con algunas otras cosas que sé de diseño y ojalá poder crear algo realmente único. Sólo voy a ajustar mi pantalla para poder hacer clic fácilmente entre los dos. Entonces solo voy a escribir un nombre, historia del arte. No lo sé, solo un nombre aleatorio que represente la vibra de la marca por la que vamos. Entonces también voy a jugar con diferentes logotipos. Así que voy a usar esto en minúsculas también, Justicia, y luego jugar con algunas fuentes diferentes. Nuestra diversión y creatividad. Sólo voy a ir a la parte superior de mi lista de fuentes. Muchas de mis fuentes que uso en mis proyectos han sido compradas en Creative Market o Envato Elements ya que tengo tantas fuentes en mi repertorio ahora desde que llevo tanto tiempo diseñando, Acababa de pasar por mis fuentes tal cual, y luego explorar qué cosas me gustan. Pero si no tienes ninguna fuente y yo diría que definitivamente explora recursos como elementos Envato o Creative Market para encontrar el estilo de fuente con el que quieras experimentar. Hay un montón de paquetes de fuentes que se pueden usar en varios proyectos diferentes. Así que definitivamente recomiendo invertir en fuentes personalizadas. Definitivamente, en realidad no me gusta este nombre, así que tal vez voy a experimentar con otra cosa así que solo voy a usar ambos y luego ver qué cosas me gustan, algo así como esa. Pero quiero algo un poco más creativo que unas fuentes mínimas. Así que sólo voy a seguir pasando por este tipo de cosas así. Creo que podría ser divertido si se usa correctamente. En su mayoría solo va a cambiar esto a negro. Entonces es un poco más fácil para mí ver en términos de estilo. Aquí no solo estoy buscando fuentes para el logo, sino que también estoy buscando fuentes que potencialmente podrían ser buenas para los encabezados principales y párrafos también. Entonces voy a ir con una de estas fuentes. Muévalos a todos aquí dentro. Realmente me gusta esto. Siento que es muy artístico. Bueno, vamos a ver. Yo sólo voy a experimentar primero con ello. Sólo centrarlo. Voy a dibujar rectángulos para poder intentar seleccionar un color de una de mis imágenes de arriba dentro de eso y fuera del borde. Y entonces sólo voy a hacer esto un poco más completo de ancho. Y entonces voy a apagar el borde, usar mi selector de relleno, tal vez jugar con algo de amarillo y rosa. Oye, vamos con eso por ahora en un selecto esto y hazlo blanco de algún tipo. Entonces voy a tratar de encontrar una esposa desde uno de estos tal vez hasta ese color. Así que sólo voy a copiar y pegar, intenté seleccionar diferentes blancos. Realmente me encanta esta foto, así que voy a ver cómo se vería. Y obviamente me gustó mucho esta foto, así que voy a poner eso aquí por ahora. Ahora lo principal aquí es que estoy buscando colores que me gusten. Entonces vamos a ver. Quiero que sea muy artístico. Se necesitan estos para ser utilizados. Ahora voy a tratar de seleccionar un color de una de estas imágenes. De esta manera. Quiero que este sea el encabezado principal y voy a tratar de encontrar un color que me guste, tal vez como ligero tono, más oscuro, tal vez para agregar color. Voy a seguir jugando con algunos otros también. No del todo. Sí. Así que en realidad me gustó ese contraste. Y luego obviamente lo saqué de ahí. Así que sólo voy a quedarme con eso por ahora cuando dibuje botón. Para que podamos tener algún tipo de llamado a la acción. A lo mejor jugar con el borde siendo de color oscuro tres. Entonces voy a dibujar touch. Y entonces voy a tratar de encontrar la fuente minimal. Juega con el espaciado. A lo mejor quiero probarlo sin frontera. Color de relleno, T, color de pantalla. Y entonces este botón para que esté bien, definitivamente me gusta mucho más eso. Así que sólo voy a ajustar esto un poco. Ahora. Yo también voy a ajustar esta fuente. Y luego solo prueba ser ese color. Eso me gusta hasta ahora. Y quiero jugar con la forma aquí. Entonces voy a seguir adelante y hacer eso. Enciende mi rejilla para que pueda alinearla a un lado. Voy a abrir Pinterest muy rápido y buscar algunos diseños diferentes, inspiración creativa, diseños. Así que voy a ir a Pinterest y revisaré algunos de estos para ver cómo puedo crear de manera única un efecto que crea algo que también es interesante. Entonces voy a experimentar con una sección principal que cruza y luego tres imágenes a continuación. Voy a seguir adelante y abrir mi archivo XD. Mueve esto abajo un poco aquí abajo para estirar mi archivo un poco más. Toma esta copia y pega, baja esta sección, haz esta verde. Entonces voy a tomar esta fuente. Yo tengo eso. Voy a hacer esto un poco más pequeño porque creo que es demasiado grande. Entonces toma esto, pegarlo por ahora. Yo solo voy a hacer texto Lorem Ipsum aquí e ir a Google y buscar generador de Lorem Ipsum, copiar y pegar este irregular, el medio, apagar el espaciado entre letras, aumentar el tamaño, cambiar la altura de la línea, estire esto. Puedo experimentar volteando esto a un lado para crear ese look que quiero lograr, copiar y pegar esto y poner esto del otro lado también. Centrar todos estos verticalmente. Fresco. Me gusta el aspecto de eso hasta ahora voy a agregar un botón aquí. Agrupar esto, centrarlo verticalmente. Pagar. Hasta ahora me encanta el aspecto de los bots. Sí, eso me gusta mucho. Voy a seguir adelante e intentar agregar un menú aquí arriba. Así caballo verde. Y luego voy a añadir un botón por aquí. Vamos a bloquear ese fondo para que no pueda cambiarlo haciendo clic en Comando L o agrupando este botón y luego alinear verticalmente las cosas. Y entonces voy a simplemente mover esto un poquito y luego distribuirlos por igual. Entonces sólo quiero ver este espaciado. Voy a hacer el espaciado 80 pixeles entre cada sección. Voy a hacer de esto una marca personal. Centrarlo verticalmente, centrar esto dentro de la rejilla. Entonces me encanta el aspecto de eso hasta ahora, en realidad quiero experimentar con tener esto en el centro. Entonces solo quiero ver cómo se vería. Yo soy más o menos así. Entonces voy a simplemente dibujar una línea aquí porque a lo mejor quiero separar el encabezado de la sección principal e incluso tal vez hacerlo pegajoso. Así que voy a experimentar con eso. Tal vez abarquen esta imagen. Estas son alturas iguales en lapso, esto para ser ligeramente elevado, ligeramente más alto. Yo sólo voy a desbloquear este fondo porque lo cerraron antes. Y luego voy a alinearlo a esta sección para poder centrarlo todo verticalmente. Centrar verticalmente y luego voy a copiar y pegar esto. Haz lo mismo por la parte superior porque eso realmente ayuda a romper esas secciones, centrarlas verticalmente. Y luego voy a mandar a ambos fondos por la parte de atrás. Genial. Eso me encanta mucho hasta ahora. Lo siguiente que quiero hacer es tocar los diferentes servicios. Así que sólo voy a mantener esta sección aquí, copiarla y pegarla tres veces, encender mi grilla para que pueda alinearlas. Fresco. Ahora lo siguiente que quiero hacer es mover las imágenes a estas imágenes. Así que voy a seguir adelante y abrir esto. Entonces me gusta mucho esta imagen a color. Sólo voy a mover eso aquí abajo, pero tal vez quiero usar eso para después. Lo siguiente que quiero hacer es que voy a dibujar algunos rectángulos aquí. Y voy a hacer esto del mismo color que se encienda la parte superior. En realidad, voy a hacer esto del mismo color que este verde, tal vez tenga un borde, pero que sea ese color blanquecino, cambie el tamaño a diez. Y luego voy a copiar y pegar este color de fondo. En realidad sólo voy a experimentar con un borde exterior. Entonces voy a copiar y pegar esto y presionar Mayús para expandirlo un poco. Sólo voy a bloquear este fondo para poder jugar con lo que estoy haciendo. Voy a quitarme el relleno, encender un borde y hacer que sea verde. Entonces voy a hacer el borde tamaño Chu, y después voy a centrarlo. Entonces quiero experimentar con tener esta línea exterior en estas imágenes. Así que definitivamente me está gustando eso hasta ahora. Voy a copiarlo y pegarlo a las otras imágenes y hacer lo mismo aquí también. Enciende mi rejilla y asegúrate de que borde exterior esté alineado con la rejilla. Entonces definitivamente me gusta eso. Definitivamente es un aspecto mucho más limpio que con lo que estaba experimentando antes porque hay líneas aquí abajo ahora quiero asegurarme de que sean del mismo tamaño. Entonces esta era una línea de dos píxeles. Entonces voy a asegurarme de que esta línea en el borde también sea de píxeles solo para asegurarme de que tenemos esa consistencia en términos de grosor de línea. Entonces lo siguiente es, voy a tomar esta sección y copiarla y pegarla. Agarra ese color verde. Haz esta talla. ¿O tal vez aprendes curso para tomar esta descripción? Desbloquea ese fondo, abarcarlo por debajo de un experimento que abarque esto. Tal vez hacer esto un poco más pequeño porque es una sección de párrafo más pequeña. Y luego centrar todo esto verticalmente, horizontalmente. Así que voy a moverlo un poco hacia abajo, luego agarrar un botón también. Entonces voy a agarrar este botón desde aquí arriba. Sólo por el bien del diseño, voy a abarcar esto para que sea este ancho completo aquí. Siento que en realidad no quiero una descripción y tal vez quiera agregar esto como subencabezado. Así que aprende a tu propio ritmo. A lo mejor que creo que este botón es un poco demasiado. Entonces lo que voy a hacer en realidad es dibujar una flecha porque eso básicamente significaría lo mismo, pero de una manera más simple. Así que voy a asegurarme de que sea verde. Acerque un poco, cópielo y pégalo, ajústelo ahí, y luego haga lo mismo de este lado. Asegúrese de que estos puntos alrededor de eso para que podamos crear un borde puntiagudo alrededor de estos también. Entonces voy a agruparlos juntos y mantener eso como está. Y siento que definitivamente es una forma mucho más simplista de mostrar lo que alguien está aprendiendo. Definitivamente me gusta el aspecto de eso hasta ahora me encantaron los colores, minimalismo también me encantan las fuentes y bloquear el fondo. Sólo voy a mover esto hacia abajo y quiero ver cómo se vería eso si eso sí, así que me gusta un poco. Entonces voy a mantener eso solo voy a agruparlos juntos. Entonces voy a añadir también en sección de alarma Ipsum aquí. Centrar eso. Y luego voy a copiar y pegar esta línea aquí. Y porque quiero ayudar a romper esta sección también. Así que desagrupa que tal vez abarquen esto para ser la altura completa. Parece que estas líneas son quizá de diferentes colores. Así que sólo voy a tratar de experimentar con eso. Usted agrega es un color diferente. Se va a enfriar, eso se ve mejor. Entonces creo que eso significa que esta línea es la incorrecta. Color también. Así que solo voy a asegurarme de que ese pedido esté seleccionado. Entonces me encanta el aspecto de esto hasta ahora. Solo voy a mover esto porque tal vez incluso podría cambiar las fuentes más adelante o jugar con una fuente diferente. Entonces voy a copiar y pegar este color aquí abajo. Y otra manera realmente genial de seleccionar colores es tomando el color principal que estás usando e intentando encontrar el mismo tono pero en un color diferente. Así que voy a seguir adelante y solo mover esto para ver si hay algún color que me guste. Y ya se puede ver que estos colores parecen funcionar juntos solo porque son de un tono similar. Va a cambiar la opacidad de la misma. Sí me gusta ese color, pero siento que no funcionará en esta sección a menos que tenga una imagen más clara ahí. Entonces voy a ver qué otras imágenes tengo. Y si trabajaran aquí, voy a volver a ese tono de verde. Y luego otra forma de elegir colores que sea útil es usando el mismo color, pero luego moviendo el buscador de colores otro lugar de la pantalla. Por lo que aún mantiene esa cohesión de color. Algo así como un color verde apagado. Bastante contento con eso. Voy a apagar esta sección fronteriza y tal vez tratar de dividir esta sección. Ahora, copia y pega esto aquí, desagruparlo. Enciende mi grilla para que pueda alinear todo. Voy a simplemente agregar este color a un lado para que pueda seleccionarlo un poco más fácil. Voy a volver a mi generador de Lorem Ipsum, copiar esto, ir a XD. Siento que ese color sigue siendo un poco demasiado cercano porque hace que sea un poco más difícil de leer, pero aún así quiero usar ese color verde como los colores principales de los textos. Así que sólo voy a tratar de encontrar un color muy ligeramente más claro. Otra cosa con la que puedo experimentar es tomar este color claro y encontrar un tono de ese solo un poco, un poco, un poco más claro. O simplemente podemos hacer full white porque en realidad me gustó mucho el aspecto de eso. Así que voy a usar eso por ahora. Y luego voy a agarrar el llamado a la acción desde arriba. Otra cosa con la que quizás quiera experimentar es tratar de seleccionar esto como uno de los colores. Yo sólo quiero experimentar con esto. No sé si es exactamente lo que voy a hacer, pero quiero esto aquí abajo y ver cómo se vería. También era de color rojo. Al igual que, se ve lo suficientemente cohesivo como para que parezca que tiene sentido o si no lo hace en absoluto. Entonces me gustan los tonos juntos, podría encontrar un tono ligeramente diferente de esos mismos colores. Entonces creo que es un poco demasiado aleatorio. Así que voy a volver a este color principal por aquí. Uy. Sí, no lo creía. Voy a hacer esta pantalla y luego tal vez hacer un ligero matiz más oscuro de ese verde. Solo mantenlo como está, y entonces tal vez solo usa esto como nuestro tono diferente. Muy, muy ligera diferencia de sombra ahí. No es exactamente por qué, sino un offline. Y luego mueve esto un poco hacia arriba y solo centra esto verticalmente. Fresco. De hecho estoy muy contento con la forma en que se ve. Sólo voy a agregar en otra sección aquí porque sí tengo un llamado a la acción que sí menciona talleres. Entonces voy a sumar en bosques. Los talleres, como lo hice antes, aseguran de que todo esté a 80 píxeles de distancia. Va a resaltar esa sección, centrarla porque se ve ligeramente desequilibrada. Entonces voy a hacer este Servicios, este curso. Estoy muy contento con la forma en que ha resultado similar a como lo hice en una de las lecciones anteriores. Voy a hacer de esto un encabezado pegajoso. Entonces solo voy a agrupar esto y traer esto al frente. Y luego por aquí en el lado derecho, voy a hacer clic en posición fija al desplazarme. Entonces, cuando presiono play y realmente veo el prototipo, en realidad puedo ver cómo se vería. Así que sólo voy a mirar a través de todo solo para ver si hay algo más que quiera cambiar por ahora. Creo que estoy contento con la forma en que resultó, así que solo voy a seguir adelante y presionar Reproducir, hacer esto de ancho completo. Y me encantaron absolutamente los colores. Me encanta cómo se desplaza. Me gusta el minimalismo, me gustan los colores. Las fuentes funcionan muy bien juntas. Y sí, estoy muy contento con la forma en que resultó. Así que voy a seguir adelante y salvar eso. Es mi escritorio. Entonces si hago clic en este título, puedo nombrarlo Página principal de Vanessa. Y luego si hago clic en Comando E, entonces puedo seguir adelante y guardarlo en mi escritorio. Y luego a partir de ahí podré subirlo a la sección de proyectos de clase y como caminar por el proyecto decidí crear para quién es, por qué lo hizo y el objetivo con él. Y luego, sí, espero que te gusten ver mi proceso para crear este layout. Y estoy muy emocionada de ver qué cosas creas si eliges trabajar en este resumen de proyecto para tu proyecto de clase, no olvides subirlo a la sección de proyectos de clase. No puedo esperar a ver lo que creas. 10. Reseña 4: tu marca personal: Entonces, para el resumen del proyecto, vas a estar diseñando y creando prototipos de un sitio web para tu propia marca personal como diseñador, tener tu propia base como diseñador es realmente importante porque permite que los futuros clientes puedan conocerte realmente a ti y a tu marca, así como el tipo de proyectos en los que has trabajado en el pasado. Al poder exhibir tu portafolio. Para esta tarea, o bien tienes dos opciones. Puedes diseñar la página de inicio para tu propia marca personal como un diseñador que viene a la moda. O puedes diseñar un prototipo completo de sitio web interactivo, similar a como lo hicimos y proyectar brief para tu propia marca como diseñador personal, el mayor reto aquí es que quiero que escribas tuyo copia del sitio web para presentar su punto de venta único a los clientes de sus sueños. Esta es una manera realmente genial de practicar cómo te presentas en el mundo como diseñador. Por lo que se siente seguro en lanzar los servicios que brinda. Esto también te dará la oportunidad de dirigirte a las diferentes industrias y tipo de cliente con el que siempre has soñado trabajar. Siéntase libre de usar las indicaciones de copia que le he proporcionado anteriormente para ayudar a guiar su proceso de escritura. Entonces ya tengo mi propio sitio web de marca personal, pero estoy trabajando en otro proyecto de diseño. Entonces voy a estar trabajando en eso para estos proyectos de clase en particular y para este sitio web, particularmente voy a diseñar solo la página de inicio. Y aquí hay algunos ejercicios para ayudarte a empezar. Las ideas clave son ayudar a generar ideas sobre cómo quieres que se sienta tu marca. Voy a abrir un archivo Adobe XD y poner esto lado a lado solo para poder anotar algunas ideas diferentes que tengo para la marca de diseño que estoy creando. Entonces tengo un archivo Adobe XD en blanco y solo voy a anotar algunas ideas diferentes. Entonces, ¿tal vez quieres tener una marca o quieres que solo te conozcan bajo tu propio nombre? Tengo mi propia marca, lado mamá, pero también estoy construyendo un negocio de diseño separado, así que voy a estar haciendo eso para este proyecto. Entonces tengo el hub de marca que es el nombre del negocio que voy a construir. Y solo quiero anotar algunos adjetivos. Quiero que sea mínimo, moderno, sofisticado, elegante, de nuevo, nutritivo. Por ahora, esos son los principales adjetivos que quiero que se vea esta marca. Ahora, obviamente llevo bastante tiempo pensando en esta marca. Entonces ya sé que una dirección de diseño en la que quería ir. Pero sólo para reunir algunas ideas, como siempre, voy a empezar en Pinterest y a regatear y ser manos para que pueda encontrar inspiración. Así que voy a seguir adelante y abrir Pinterest, la página principal y buscar sitios web de diseñadores. Y tal vez ni necesariamente me gusta el aspecto de esto. Pero si hay diseñadores a los que sigues en Instagram, por ejemplo o TikTok, y te gustó el aspecto de su sitio web. Siéntase libre de usar su sitio web como inspiración también. También tengo un montón de recursos en mi Pinterest. Entonces, si vas a mi Pinterest, también podrás ver todos los diferentes tableros que he creado para montones de proyectos diferentes. Tengo uno sobre inspiración de diseño web, diseño de landing page en todos estos diferentes aspectos en el mundo del diseño. Así que también siéntete libre de usar esto como recurso. Solo voy a entrar en mi tablero de inspiración de diseño web y ver qué cosas puedo encontrar aquí. Realmente me encanta este aspecto moderno y limpio, y solo voy y voy por ese estilo. Realmente quiero que sea neutral en blanco y negro porque siento que para la marca que estoy creando, tiene más sentido. Entonces voy a seguir abriendo sitios web que son una especie de estilo. También he seleccionado un tablero de Pinterest con algunas ideas de diseño para imágenes, topografía, diseños de sitios web. Así que voy a seguir adelante y buscar a través de eso también. Tengo mis propias imágenes que voy a utilizar en este proyecto. Pero por ahora, voy a seguir adelante y empezar a jugar con diferentes diseños. Entonces tengo algunas que he abierto aquí. Realmente me encanta este look editorial de aquí, así que voy a jugar con eso. Voy a dibujar algunas casillas. Esos son solo algunos marcadores para imágenes en este momento. También voy a escribir la marca aquí arriba. La marca lo hace grande y de hecho voy a jugar con ella algunas fuentes diferentes en algunos estilos diferentes. Entonces quiero jugar con eso en mayúsculas, y también quiero jugar con eso en mayúsculas. Entonces, obviamente, no estoy pasando por la marca aquí, así que voy a elegir una simple marca de palabras para empezar. Así que solo voy a seguir adelante y tratar encontrar una fuente que me haya gustado el aspecto de ir a hacer este negro poder verla un poco mejor, pero así. Así que solo voy a copiar y pegar esto y luego seguir adelante hasta que encuentre algunas otras fuentes que realmente me gustaron el aspecto de. Sólo voy a acercarme un poco para que pueda ver. Me gustó mucho este look minimalista aquí. Voy a copiar eso. De hecho me gusta la fuente minimalista aquí, así que voy a ir con esa por ahora. Nuevamente, siempre puedo cambiar esto después. Esto es sólo un punto de partida. Si te estás enfocando en construir tu propia marca, entonces puedes pasar algún tiempo aquí. Absolutamente. Pero para el caso de uso de este proyecto, ya que no me estoy enfocando más en la marca en los diseños de sitios web, solo voy a usar esa marca de palabras simplista por ahora, que realmente me encanta. Creo que es un poco demasiado grande. Yo sólo voy a centrar eso. Y luego voy a jugar con topografías. Y luego voy a seguir adelante y crear un cuadro de texto y escribir mi gancho. Entonces quiero explicar para qué aficiona la marca y para quién es. Quieres crear un gancho basado en lo que estás diseñando. El hub de la marca para mí va a ser un lugar donde ofrezco plantillas de diseño web y plantillas de branding de todo tipo. Entonces quiero poder comunicarlo en el gancho primario del proyecto. Entonces voy a elegir una fuente diferente para este encabezado. De hecho me gustan bastante estas fuentes editoriales. De hecho voy a seguir adelante con eso. Entonces también voy a crear otro cuadro de texto para el síndrome de fuente de párrafo. Y luego voy a cambiar esto a 22. La marca es su tienda integral para todas sus necesidades de diseño. Y voy a acercar y cambiar esto a una fuente más mínima. Su ventanilla única para todas sus necesidades de diseño. mí y a lo mejor no necesariamente me encanta esta fuente, así que voy a seguir adelante si hay demasiado grande. Entonces tal vez voy a pensar que son 24, cambiar la altura de la línea a 40. No, eso no necesariamente me encanta juntos. Entonces voy a cambiar fuente de párrafo y en realidad no creo que esté obsesionado con esta fuente, así que solo voy a crear una copia de la misma para que tenga en caso de que quiera volver a ella, pero también voy a experimentar con algunos otros diseños. Podría gustarme esa fuente, así que voy a volver a visitarla. Y yo solo lo puse aquí abajo. Voy a hacer esta pantalla completa para que ustedes puedan obtener el efecto completo. Ahora quiero que este sitio web tenga un aspecto bastante exclusivo. Entonces quiero que sea muy moderno, simplista, limpio, y de verdad quiero que eso se muestre en su topografía. La topografía es realmente importante para este caso. Quiero que no sea demasiado extremo, pero tampoco quiero que sea demasiado básico. Y luego ir con eso por ahora. Ahora, en realidad voy a hacer barra de navegación. Tan hogar nucleico sobre caballos. A lo mejor aquí voy a poner el contacto de caballos de cartera. Entonces voy a distribuir esos horizontalmente y un poco ver qué tan lejos están estos. Voy a asegurarme de que estén todos a 100 pixeles uno del otro. Voy a hacer lo mismo de este lado. Si solo mueves las flechas en tus teclas, cuando te hacen clic en algo, puedes moverlas, elegir un píxel a la vez. Y ahora voy a seleccionarlos y hacerlo más pequeño, cambiar el espaciado entre letras sería de 40, 6 mil. Tal vez cambiarlo a semi perno. Entonces tenemos eso. Y en realidad quiero hacer la barra de navegación. Así que voy a seguir adelante y dibujar una caja aquí atrás, apagar el agua e ir aquí. Pero no lo quiero como completamente Onyx Black. Lo quiero como negros un poco necesarios. Entonces tienes eso, envíalo a la parte de atrás. Entonces puedes ver un poco los textos ahí. Entonces voy a destacarlo. Si hago clic en Mayús y hago clic en el fondo, desseleccionará el fondo solo seleccionará el texto que es realmente útil. Entonces voy a centrar eso. Genial. Me encanta cómo se ve eso hasta ahora. Entonces voy a arrastrar y soltar imágenes. Entonces tengo un montón de fotos aquí que he tomado con un fotógrafo y voy a usar algunas de ellas en mi página web. Así que voy a seguir adelante copiando y pegando algunos de estos. Y quiero volver a hacer esa forma redondeada. Apague la frontera. Y también voy a agarrar algo de textura que me pareció ver el yoga de alquimia. Así que voy a agarrar esa, me encantó, que se desvanezca un poco. Así que es como una muy, muy, muy sutil, en realidad voy a hacer que esto abarque la pantalla completa y asegurarme de que esté centrada. Quiero que esto esté aquí. De hecho voy a quitar este estilo. También me pregunto cómo se vería si abarcara esto para ser el ancho completo. Ahora me encanta que aquí tenga algo de textura. Sigue siendo muy neutra y blanca, pero ahora hay una textura muy, muy ligera ahí. Entonces quieres crear un borde solo para realmente conseguir ese efecto que yo quiero. En realidad no creo que quiera la frontera y no creo que quiera el radio. Voy a apagar eso. Sólo voy a abarcar esto para ser la mitad de la pantalla para mostrarme como una línea de marca personal. Los que quedan en realidad alinean esos centros. De hecho voy a hacer clic en Comando Z porque preferí el otro diseño. Así que voy a volver aquí y hacerlo de esta manera. Voy a apagar eso otra vez. Apaga eso. Todavía quiero ese efecto ahí, pero por dentro voy a poner esto de este lado. Entonces quiero crear un botón aquí. Y quiero que se llene de blanco. Hacer un botón de línea exterior, exterior, va a copiar el botón de menú y cambiar el color de relleno a negro. Escriba eso como ponerse en contacto. Voy a hacer que el borde también sea negro también. Fresco. Eso me está gustando hasta ahora. No estoy seguro si me encanta esta foto de aquí, así que voy a tratar de encontrar una diferente. Voy a poner este por aquí. Arrastre y suelte ese. A lo mejor hacer el borde negro, cambiarlo a 50. Y siento que eso está resonando un poco con el aspecto que quiero lograr un poco más. No estoy seguro de que me guste esto. Ponte en el botón táctil, así que voy a cambiar esto. Rellene el color para que sea negro, cambie el texto para que sea blanco. Todavía no me encanta esa foto. Entonces solo voy a seguir adelante y cambiarlo a algo así tal vez. Y siento que eso definitivamente va mano con la vibra de ello más. Así que voy a apagar la frontera y de hecho abarcar esto para ser una caja llena en el Hyrum. Me encanta cómo se ve eso hasta ahora. Voy a ver cómo se ve sin estos antecedentes. Y creo que se ve un poco más limpio y todavía quiero que esto sea un acento, así que voy a abarcarlo a todo el ancho y tenerlo como parte de la siguiente sección. Entonces tenemos eso. Me encanta el aspecto de eso hasta ahora. Yo sólo voy a centrar esta increíble, creo que este logo un poco demasiado grande, así que solo voy a hacerlo un poco más pequeño. Voy a combinar este negro, el negro que está en mi playera aquí. Entonces voy a apagar esto, hacer clic en este selector de color y seleccionar ese negro. Y definitivamente ves que ayuda a unir los colores un poco más de una manera cohesionada. Entonces voy a hacer lo mismo con los botones. Eso me encanta hasta ahora. Ahora voy a ir a ver mi inspiración de diseño web para ver qué secciones podría querer a continuación. Entonces veamos aquí tenemos una tienda de servicios y un blog. Un poco sobre ti. ¿Qué más está pasando aquí? ¿Quiénes somos? Voy a desplazarme hacia abajo para ver qué cosas me gustan y qué cosas no me gustan. Voy a abrir esto en una nueva pestaña porque me gustan mucho los bordes aquí y también me gusta mucho que todas las etiquetas H1, como las etiquetas de encabezado estén en minúsculas. Así que también podría experimentar con eso, y posiblemente incluso con una fuente diferente. Me encantan los colores aquí y me encantan las imágenes. Diseño realmente genial comisariado para el emprendedor del corazón ya escalar su negocio para el éxito a largo plazo. Y también voy a simplemente experimentar con diferentes textos porque no estoy completamente vendido en este texto. Sólo voy a seguir adelante y ver qué cosas me gustan. Y nuevamente, no hay que seguir este proceso exacto. Mi proceso prácticamente cambia en función del diseño que estoy diseñando, pero realmente varía. A veces pienso que me gusta una fuente. Y luego en cuanto termine con el diseño completo, decidí que tal vez no me gustara tanto como pensé que lo haría. Así que es muy importante confiar en tu intuición mientras diseñas. Y cuanto más practiques, más ojo tendrás para las cosas que te gustan y no te gustan. Y además, otra cosa a tener en cuenta es que solo porque te gusta, no necesariamente significa que a tu cliente le gustaría. Por lo que es muy importante no apegarse tanto a tus diseños y no ser perfeccionista. Creo que eso es muy difícil para las personas en el ámbito del diseño y la creatividad en general. Porque obviamente nos gusta hacer cosas bonitas y donde nos atraigan las cosas bonitas, ahí la industria en la que estamos. Pero es muy importante no ser demasiado perfeccionista porque aunque lo presentes y creas que es el sitio web más perfecto, tus clientes aún puede que no les guste. Y eso es solo parte de ser diseñador y parte del proceso creativo. Así que definitivamente sobre todo al principio, asegúrate de diseñar cosas que te gusten, pero no necesariamente te apegen demasiado a ellas. Así que sólo voy a seguir adelante y seguir tratando de buscar una fuente que me guste. Sé que siempre es un poco más difícil cuando estás diseñando para ti mismo para no ser perfeccionista. A menudo los diseñadores en realidad entregan su propia marca en sitios web u otros diseñadores porque podemos y simplemente ser como en nuestra cabeza sobre los diseños que estamos creando. Así que sólo voy a seguir pasando por esto hasta que encuentre algo que me guste. Quiero una fuente de estilo más editorial, tan larga y alta. Podría gustarme esa fuente, así que sólo voy a copiarla y ponerla a lado porque quizá sea sí, eso me encanta. En realidad no me gusta esta minúscula de aquí, así que sólo voy a hacer ese examen. Definitivamente me gustó el aspecto de eso. Debe sentir que esto también podría ser un poco más grande. Ajusta esto y tal vez quiera jugar con esto siendo todo centrado. Escuchen eso. Y en realidad no puedo ajustar esto porque a pesar de que esto parece ser un cuadrado, aquí no hay una cuadrícula real, así que voy a dibujar un cuadrado poder centrar ese texto. Siempre podría borrarlo. Entonces voy a centrar eso. Eso me encanta hasta ahora. Y luego voy a hablar sobre para quién es esto y qué es exactamente lo que alguien podría estar buscando cuando acuda a este sitio web. Entonces, básicamente como diseñador, tu objetivo es asegurarte de que tus clientes sepan exactamente a quién ayudas, en qué te especializas. Y las dos primeras secciones siempre deben ser sobre tu negocio y las soluciones que ofreces. Entonces voy a seguir adelante y solo agregar en una sección aquí, hacer esto un poco más largo. El centro de la marca para mí va a ser una tienda de plantillas que atiende específicamente a empresas que recién están comenzando. A lo mejor no tienen suficiente dinero para pagar por un paquete de diseño completo. A menudo, la marca y el sitio web pueden ser de más de cinco a 10,000 dólares. Y tal vez si una marca apenas está comenzando, no tienen los fondos para poder gastar en. Marca curada de vestuario, especialmente si no saben que su idea de negocio funcionará o simplemente lo están haciendo un poco de lado y probando y experimentando con cosas diferentes. Así que quiero crear la marca tuvo que convertirse en un hub para las personas que recién están comenzando. Entonces cualquier cosa, desde cursos hasta plantillas, hasta branding, cosas, eso es esencialmente para lo que quería crear el hub de marca. Entonces de eso es de lo que quiero hablar en el ejemplar. Sé que ese es el reto de esto y tal vez quieras diseñarlo sin la copia primero, pero como esta es mi propia marca, siento que puedo escribir la copia como estoy diseñando y luego voy decir voy a ser capaz de obtener una mirada cohesiva completa de todo lo que tengo para ofrecer. Quiero que los botones estén en mayúsculas, así que lo escribí en minúsculas. Pero si hago clic en esto y automáticamente hará todo en mayúsculas, que es exactamente lo que quiero. Y en realidad siento que el texto del párrafo es muy pequeño en comparación con el texto del encabezado. Entonces solo voy a ajustar esto ligeramente y también tal vez ajustar el espaciado. Y también siento que necesito ajustar esto también. Voy a sólo 70. Increíble. Así que en realidad voy a guardar estos como estilos de personaje para que pueda editarlo fácilmente. Y luego voy a hacer lo mismo aquí con estas piezas de contenido. Voy a cambiar eso y también a cambiar eso. Agrupar eso juntos. Y entonces todavía voy a hacer lo mismo para centrar el texto en esta sección. Eso lo tenemos. También siento que tiene que haber algún tipo de embellecimiento aquí. También. Siento que esto no está en la fila. Voy a asegurarme de que estos estén en línea porque este es el héroe. De hecho, podría hacer que la fuente sea más grande porque podría considerarse una etiqueta H1. No es perfecto. No estoy muy seguro de si estoy como amarlo, amarlo, pero podría volver a visitar esto. Siento que muchas veces como diseñadores, podemos ser tan perfeccionistas y todavía no me encanta, encanta esta sección, pero está bien. Podría volver a visitar esto al final, o tal vez sea porque se trata de tres líneas. Entonces tal vez pueda quitar esto porque siento que lo he dicho de todos modos, soluciones de diseño, comisariado personalizado para el emprendedor. Y también piensa en la copia. Juega un papel en el diseño. Así que quieres asegurarte de que todo esté diseñado a la par. Y siento que esto realmente necesita ser dejado solo. Sé que me centré, alineé para, pero en realidad creo que eso es lo que no me gusta de ello. Entonces voy a seguir adelante y la línea central esos y luego a la izquierda alinear los párrafos. Y definitivamente siento que eso me está gustando mucho más. Sólo voy a alinearlo a la grilla para asegurarme de que funcione. Y voy a probar, volviendo al otro texto. Y luego en realidad hasta 55. A lo mejor es un botón voy a probar abarcando el botón de ancho completo, dándole a esto un poco de espacio extra. Podría hacer algún tipo de icono aquí porque siento que este es un buen espacio, pero podría poner un icono aquí, así que voy a dibujarlo como marcador de posición por ahora. O también puedo probar tener un sub-encabezado a veces que ayuda a romper el espacio negativo. Así que en realidad voy a dibujar eso aquí. Bienvenido a la marca. Hazlo todo gorras. Bien, solo voy a dejar eso como está por ahora y podría volver a visitarlo más tarde. Esta sección me está gustando hasta ahora, pero quiero agregar algo de embellecimiento en el lateral para ayudar a personalizarla un poco más. Así que voy a tomar este cabezazo y de hecho girarlo de lado. Entonces, si vas a esta sección circular aquí y haces clic en Mayús, girará automáticamente 90 grados. Eso es exactamente lo que quiero hacer aquí. Y quiero este mismo embellecimiento en el costado. Así que voy a seguir adelante y rotar eso por aquí también. ¿Sabes qué? De hecho creo que no me encanta esto es tener eso no centrado. Creo que porque es como un gran pedazo de textos sobre los que aterrizar, quiero alinearlo al centro y luego agregar los adornos en los lados. Así que voy a intentar hacer eso y ver cómo me gustó el aspecto de la misma. Y un poco quiero hacer un collage. Entonces tal vez eso sea algo con lo que pueda experimentar aquí. Entonces esto probablemente cambiará. Yo sólo voy a ajustar estos. Voy a cambiar esto en un look de arco y voy a abrir mi carpeta de fotos y voy a arrastrar y soltar. Entonces ya tengo una sección con un montón de piezas de portafolio. Voy a simplemente seguir adelante y mirar, ver si hay algo que me guste. Realmente me gustó este porque el color podría no necesariamente ir exactamente con el diseño, pero siempre podemos afinar eso más tarde. Este sería mejor ahí y luego una especie de embellecimiento ahí. De hecho quiero hacer un efecto de borde que quiero que sea blanco. Entonces voy a usar la herramienta cuentagotas, así se ve natural. Un poco más pequeño. Y puedes borrar esto y ver cómo se verá si es perfectamente paralelo como ese menos para que pueda centrar ambos. Definitivamente siento que ya estoy resonando con eso, mucho más. Entonces voy a simplemente copiar y pegar esto porque quiero quedarme con esta sección y creo que copiando tus diseños, siempre puedes volver atrás si no te gusta algo. Así que simplemente lo copié y pegué. Da clic aquí arriba, haz clic en Comando C y luego en Comando V para pegarlo. Y luego voy a añadir esto si quisieras cambiar algo aquí. Entonces voy a hacer el mismo efecto que antes intenté hacer. Y luego voy a alinear a la izquierda, izquierda alinearla, mi grilla. Y voy a redefinir esto y agregarlo. Voy a hacer el mismo efecto que hice en el diseño anterior. Pero lo que voy a hacer es tenerlo en esta sección que voy a copiar y pegar esto y ponerlo por aquí para que también puedas arrastrar y soltar entre secciones, lo cual es muy útil. Voy a abordar la opacidad aquí porque a lo mejor es esta textura la que en realidad no me encanta. Entonces voy a hacerlo muy, muy, muy, muy sutil. Llegué hasta el momento. Entonces quiero ir a hablar de mis servicios. Así que voy a poner eso aquí. Quiero hacer esto cohesivo, así que en realidad voy a agregar un sub-encabezado aquí también. Quiero tener como un salto de línea aquí, así que voy a seguir adelante y dibujar esta línea. Tengo las diferentes plantillas que voy a estar ofreciendo y luego las voy a vencer horizontalmente. Voy a hacer esto un poco más grande porque es una cabecera pero unas cabeceras más pequeñas. Entonces voy a hacer como 24. Haz esta fuente, y voy a hacer este motor en realidad, en realidad, voy a quedarme con el tal cual y pegarlo abajo. De hecho voy a cambiar estos dos números para crear más datos sobre los clientes. Entonces 1234, voy a cambiarlo en realidad, voy a poner esto en la parte superior y hacer estos números. Voy a simplemente agregarlo eso para que realmente pueda alinear estos correctamente. Entonces voy a copiar y pegar esto varias veces. Entonces voy a alinear estos y distribuirlos horizontalmente para que todos sean iguales. Apágalo y agruparlos a todos. Y entonces puedo seguir adelante y editarlo o dos. Esto es realmente bueno de hacer. Me siento un poco más cohesionado de branding y redacción publicitaria. Entonces estas son las diferentes plantillas que estaré creando marcas semi personalizadas que puedes actualizar. Tu historia real de Instagram y plantillas de publicaciones. Marca Instagram fuerza real para mantener un look cohesivo. Es una buena regla general asegurarse de que los párrafos cuando estás diseñando tengan la misma longitud. Pero solo para mantener ese aspecto cohesivo, cambiará en función del tamaño de pantalla en el que se esté viendo el sitio web. Pero de nuevo, ayuda a mantener esa cohesión y unión. Entonces eso es lo que yo sé. Lo siguiente que quiero mostrar es mi portafolio. Y debido a que un portafolio es muy visual y como diseñador, tenemos muchos colores diferentes en nuestros diseños. Te recomiendo presentar tu portafolio sobre un fondo claro. Entonces lo que voy a hacer ahora es dibujar cuadrados aquí y de hecho hacer esto negro. Entonces la siguiente sección puede ser blanca y para volver apagar el borde, luego usar el color de relleno. Para ello, voy a destacar todo y hacer eso blanco, hacer el borde y también. Y un poco quiero hacer esto ligeramente descolorido. Solo quería probarlo para ver si realmente me gustaría. Quizá hasta he intentado usar un color de relleno de una de las fotos, ver si va a funcionar. Yo sólo voy a mantenerlo negro en realidad porque no creo que los colores vayan bien ahí, pero voy a cambiar esa foto porque obviamente eso es solo una copia de la de arriba. Así que echa un vistazo a mis diferentes imágenes. A mí me gusta este, pero siento que necesito estar del otro lado. Así que voy a seguir adelante y mover esto por aquí y luego cambiarlo. Voy a hacer esta opacidad aún más ligera, tal vez hasta cinco. Entonces seguimos obteniendo esa textura, pero sigue siendo muy ligera. De hecho voy a hacer esto un poco más alto para que podamos tener un poco más de esa foto. Increíble. Así que definitivamente me gusta el aspecto de eso hasta ahora porque me gusta de esta manera más de lo que me gusta este. De hecho voy a darle la vuelta a esto y borrarlo, así no tengo que verlo más y definitivamente lo vemos juntarse. Así que me encanta eso hasta ahora. Lo siguiente que quiero mostrar es mi portafolio. Voy a copiar y pegar este centro aquí, centrar su cartera, trabajo reciente. La puerta. Ahora quiero mostrar mi portafolio. Tengo un montón de piezas aquí en mi sección de cartera. Entonces quiero exhibirlo aquí. Yo quiero. Sibley. Y realmente quiero crear un efecto de desplazamiento, así que te voy a mostrar cómo hacerlo. Así que en realidad voy a hacer que este lapso sea el ancho completo. Voy a tomar dos más de estos y asegurarme de que se salgan de la red. Entonces verás que aquí hay una plaza, pero se va fuera de la red, lo cual está totalmente bien. Te voy a mostrar cómo podemos hacer un efecto de desplazamiento en Adobe XD, lo que puede ser muy útil para representar algo que quizás quieras diseñar una vez que estés en modo de desarrollo. Así que solo voy a repasar algunas de mis diferentes piezas de portafolio y ponerlas aquí para mostrar realmente la marca y lo que estoy creando. Así que voy a poner eso ahí. Quiero mostrar gran parte de tu trabajo diferente de una manera muy singular. Si necesitas dedicarte algún tiempo a crear imágenes como esta, suelo hacerlo y pasar algún tiempo al final de mi proyecto creando cosas que pueda publicar en redes sociales. Y creo que siempre es muy útil hacer esto. Voy a apagar la frontera. Entonces tenemos todas las piezas de nuestro portafolio y quiero mostrarte cómo crear un efecto de desplazamiento. Entonces esto puede ser realmente útil cuando intentas presentar un concepto a un cliente. Y quieres mostrar el hecho de que quieres crear cuando lo estás desarrollando, o si quieres comunicarle a un desarrollador qué efecto quieres que tenga esta sección en particular. Entonces tengo seis piezas en mi cartera. Voy a destacarlo para poder crear un grupo. Entonces, si haces clic en el comando G, lo agrupará automáticamente. O si haces clic con el botón derecho, puedes hacer clic en grupo aquí. Entonces verás que están todos agrupados. Y para crear el efecto de desplazamiento, usa estos botones aquí. Entonces tenemos scroll horizontal. Esto es si quieres un scroll vertical, y esto es si quieres tanto un scroll horizontal como vertical para esta sección, quiero crear un scroll horizontal. Entonces voy a seguir adelante y elegir scroll horizontal. Y voy a ajustar esto también borde aquí. Y realmente quiero comenzar esto al principio de la grilla para crear esos efectos completos. Entonces solo voy a encender mi grilla para que tenga la capacidad de mostrarla. Y en realidad quiero dibujar una flecha aquí para significar que esta es una sección de desplazamiento. Voy a hacer eso negro. Ahora tengo una flecha aquí para significar este efecto de desplazamiento. Si sigo adelante y presiono Reproducir aquí arriba en este sitio web. Entonces voy a seguir adelante y hacer clic en este título aquí arriba, presione Reproducir. Y ahora estamos viendo el sitio web. Yo sólo voy a hacer esta pantalla completa para que podamos verla. Tienes eso y ahora realmente podemos desplazarnos por lo cual es realmente útil para poder exhibir tu trabajo. Entonces me encanta ese efecto. Y luego finalmente tenemos la página de Contacto. Entonces sólo voy a seguir adelante y copiar esta sección y esta sección. Oh, en realidad, antes de hacer eso, quería crear un botón aquí para enlazar a la cartera. Y tenemos la sección de contacto final. Entonces tenemos que ponernos en contacto. ¿Por qué? Voy a centrar eso y voy a centrar esto el uno al otro. En realidad quiero hacer esto más pequeño, este similar en ancho. Y voy a centrarlos a los dos, voy a mover eso hacia un lado. Y quiero crear ese efecto de embellecimiento que intenté hacer antes en este video. Así que voy a seguir adelante y girarlo hacia la izquierda mantenga pulsada Shift para asegurarme de que esté perfectamente a 90 grados, voy a encender mi grilla para poder ver dónde estoy. Voy a hacer lo mismo del otro lado. Así que voy a copiarlo y pegarlo, rotarlo manteniendo pulsada la tecla Mayús, y entonces tenemos ese mismo efecto por aquí. Entonces me encanta este look minimal hasta ahora. Y lo que en realidad quiero hacer es hacer este encabezado pegajoso. Así que voy a seguir adelante y agrupar esto por completo y quiero arreglar la posición al desplazarme. Eso significa que a medida que me desplace, esto seguirá estando en la parte superior, que hace que sea muy fácil navegar por el sitio web. Normalmente tengo esta característica en la mayoría de mis sitios web solo porque creo que es importante que un cliente pueda navegar a otras páginas de su sitio web sin tener que desplazarse hasta arriba volver al menú. También realmente crea una experiencia de marca porque los logotipos se mantienen en la parte superior. Entonces he agrupado esta sección y si hago clic con el botón derecho, quiero asegurarme de que esté todo el camino al frente para que esté encima de todos los diferentes elementos debajo de ella. Entonces sigues adelante y haces clic en traer al frente y luego hacemos clic en exposición al desplazarte, esto significa que queremos que este sea un encabezado pegajoso. Ahora, si seguimos adelante y presionamos play para ver el prototipo, entonces tenemos ese aspecto de encabezado pegajoso que lo hace sentir realmente como una experiencia realmente de marca. Y en realidad estoy viendo que ahora que tengo este encabezado pegajoso, no me gusta cómo se ve el encabezado en algunas de estas imágenes para, para crear una separación, en realidad quiero crear una en la parte inferior de la cabecera. Entonces voy a desagrupar esto, hacer esto un poco más pequeño porque creo que todavía es un poco grande. Mueve esto la parte superior ligeramente para que tengamos un encabezado más pequeño. Centrarlo verticalmente. Y entonces lo que voy a hacer en realidad es trazar una línea en la base del encabezado. Entonces, si estás codificando y quieres aprender a codificar, esto no es un hecho que puedas hacer con CSS, así que lo hace súper fácil. Voy a hacer que el borde sea blanco para que no lo veas, pero podrás verlo una vez que lo agrupemos y lo hagamos un encabezado pegajoso. Entonces voy a agrupar todo esto y hacer lo mismo, llevarlo al frente, y asegurarme de que haga clic en posición fija al desplazarse. También voy a centrar esto porque ahora esto está un poco descentrado. Entonces voy a seguir adelante y ver mi página web. Y me gusta si la altura de esa barra de navegación un poco más. Y luego como ves ahí, borde muy, muy, muy ligero que crea separación a medida que te desplazas. Y creo que solo permite experiencia un poco mejor y coincide con este mismo orden aquí, especialmente negro sobre negro, ayuda a crear esa separación. Y luego tenemos la cartera. Y esta sección obviamente, como se mencionó anteriormente, te permite desplazarte y realmente eres capaz mostrar un diseño interactivo con esos elementos. Entonces espero que eso tenga sentido. Espero que hayan disfrutado viéndome crear este video y este proceso para crear mi propia marca. Así que voy a seguir adelante y exportarlo para poder subirlo a nuestra sección de proyectos de clase. Si hago clic en el título y hago clic en Comando E, abro automáticamente mi Finder y voy a nombrarlo sitio web de marca personal. Y luego a partir de ahí puedo subirlo y compartirlo a través de mis plataformas de redes sociales. Entonces ahí lo tienes. Así es como diseñaría mi propia marca personal. Espero que hayan disfrutado de este video de proceso y espero que hayan encontrado información útil y los efectos de desplazamiento personalizados. Y los veré chicos en el siguiente video. 11. Gracias: Y eso es una envoltura. Muchas gracias por elegirme para ser parte de tu viaje de diseño. Y no puedo esperar a ver tus creaciones. No olvides subir tus proyectos de clase a la sección de proyectos de clase. Como realmente me encanta dar retroalimentación sobre tus diseños y también ver qué cosas estás trabajando. Si disfrutaste de esta clase, te lo agradezco mucho. Si me pudieras dejar una reseña para que pueda mejorar de manera consistente y también ver qué cosas resuenan con los alumnos que toman mis clases. Asegúrate de seguirme en Skillshare para estar al día de mi próxima clase que publique, y conectarme conmigo en redes sociales en Angelica steel en Instagram, TikTok, o echa un vistazo a mi sitio web en Angelica steals.com. Gracias por elegirme para ser parte de tu viaje. Y no puedo esperar a ver tus proyectos de clase.