Website-Design für Anfänger in Adobe Xd | Aleksandar Cucukovic | Skillshare
Menú
Buscar

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Website-Design für Anfänger in Adobe Xd

teacher avatar Aleksandar Cucukovic, Improving lives, one pixel at a time.

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Kurs-Einführung

      1:15

    • 2.

      Kursübersicht

      3:18

    • 3.

      Das Briefing

      17:28

    • 4.

      Analisys 1

      9:05

    • 5.

      Analisys

      11:31

    • 6.

      Analisys 3

      10:15

    • 7.

      Was ist eine Landing

      2:45

    • 8.

      Warum Konversionswert wichtig ist

      2:49

    • 9.

      Funktion über Schönheit

      11:33

    • 10.

      Seitenstruktur

      6:24

    • 11.

      Was du berücksichtigen sollst

      4:09

    • 12.

      Planung

      2:47

    • 13.

      INSPIRATION

      6:24

    • 14.

      Moodboard

      10:58

    • 15.

      Skizzieren

      6:31

    • 16.

      Dateivorbereitung

      3:36

    • 17.

      Wireframe 1 erstellen

      9:36

    • 18.

      Wireframe 2

      6:31

    • 19.

      Wireframe 3

      7:38

    • 20.

      Wireframe 4

      6:15

    • 21.

      Wireframe 5

      16:58

    • 22.

      Wireframe 6

      5:48

    • 23.

      Wireframe 7

      6:23

    • 24.

      Wireframe 8

      13:44

    • 25.

      Wireframe erstellen

      13:22

    • 26.

      Bildstruktur

      1:03

    • 27.

      Design erstellen

      4:38

    • 28.

      Design erstellen

      2:46

    • 29.

      Design erstellen

      6:07

    • 30.

      Design erstellen

      4:20

    • 31.

      Design erstellen

      10:44

    • 32.

      Mit Komponenten arbeiten

      8:01

    • 33.

      Entwerfen von Dropdowns

      16:26

    • 34.

      Kalender erstellen

      13:21

    • 35.

      Organisation

      4:41

    • 36.

      Prototyping 1

      7:18

    • 37.

      Prototyping 2

      5:11

    • 38.

      Prototyping

      12:18

    • 39.

      Stil-Leitfaden erstellen

      18:43

    • 40.

      Teilen mit dem Kunden

      10:12

    • 41.

      Verpackungsstruktur

      2:24

    • 42.

      Exportieren

      12:00

    • 43.

      Kundenservice

      4:50

    • 44.

      Schlussbemerkung

      3:31

    • 45.

      Links und Ressourcen

      1:37

    • 46.

      YouTube-Kanal für mehr Inhalte

      0:49

    • 47.

      Begleite meiner kostenlosen Facebook-Gruppe

      2:16

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

1.816

Teilnehmer:innen

--

Projekt

Acerca de esta clase

Wenn du eine Website entwirfst, ist es wichtiger, dass sie sich überwindet, dann zu haben. Weil website oder Produkt verkaufen muss, und du musst das beachten sollte.

Das Aufbauten einer Seite für hohe Umwandlung ist wirklich wichtig, denn es macht dich für den Kunden und den desirable als Designer:in wertvoller Die Erstellung von Adobe Xd bietet dir unbegrenzte Möglichkeiten, weil es frei ist, um Plattformen, vector und vector zu haben und sie in regelmäßigen Updates zu bekommen.

.

Hey es ist Alex und in diesem Kurs lernst du:

  • Geheimnisse des guten Design-Kurses

  • Was die gute Landing hervorbringt.

  • So erstellst du Landing-Seiten, die konvertieren

  • Wie du diese Prinzipien auf den Plan anwenden kannst, zeichnen und erstellst einen Drahtrahmen

  • Bildung, Symbole und Schatten hinzuzufügen, um ein Design zu erstellen

  • Dann Bewegungen und Übergänge zur Erstellung von Prototypen

  • Teile die Arbeit mit dem work um Feedback zu erhalten

  • Und abschließende Überlegungen für Entwickler

.

Du brauchst keine Vorkenntnisse in UI oder Adobe Xd, wir werden alles in diesem Kurs behandeln. Alles, was du brauchst, ist ein Interesse in diesem Feld und du wirst am Ende dieses Kurses gut machen.

In diesem Kurs lernst du auch wichtige Ressourcen, die du in deiner Arbeit verwenden kannst, was dir Stunden und manchmal sogar Monate deiner Projekte sparen wird. Stunden, für die du extra koste, während du Zeit hast.

.

Worauf wartest du also noch? Anmelden und ich werde dich im Kurs sehen werden.

.

Viel einen kreativen Tag

Aleksandar

Triff deine:n Kursleiter:in

Teacher Profile Image

Aleksandar Cucukovic

Improving lives, one pixel at a time.

Kursleiter:in

For the last 10 years i have designed websites, products and apps for different companies, big and small.

With my wife i have started 3 startup companies and through the process met some amazing people from all over the world.

For the last five years i have created over 500 design products, improved the lives and workflows of over 100.000 designers from around the world.

Now my mission is to improve the lives of others, and to pass on my knowledge back to the community and to all those who want to learn about the amazing worlds of design and business.

Thank you for reading and have a creative day!

Alex

Vollständiges Profil ansehen

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción a la clase: Cuando diseñas un sitio web, es más importante de lo que convierte entonces para tener un diseño de moda porque sitio web está ahí para vender servicio o un producto, por lo que hay que diseñar con eso en mente. Saber estructurar una página para alta conversión es realmente importante porque te hace más valioso para el cliente y más deseable como diseñador. uso de Adobe X'd creado te da posibilidades ilimitadas porque es gratuito basado en factor de plataforma Cross , y tiene actualizaciones regulares. Hola ahí. Mi nombre es Alex, y en este curso aprenderás secretos del buen diseño. Breve. ¿ Qué hace la Good Landing Page? Cómo crear páginas de destino que conviertan cómo aplicar esos principios para planear, dibujar y crear un marco de alambre. Tenía imágenes, iconos y sombras para crear el diseño que el anuncio movimiento y transiciones para crear prototipos. Comparte el trabajo con tus clientes para obtener comentarios y finalmente, cómo exportar tus activos para desarrolladores. Este curso está dirigido a personas con poca o ninguna experiencia en el diseño ur ux porque en el discurso aprendes todo lo que necesitas saber para convertirte en diseñador de UX. Ah, espero que estés listo para aprender Adobe X D y el increíble mundo de ur ux design y te veré en clase 2. Descripción general de la clase: aquí allá y bienvenidos al curso. Mi nombre es Alex, y en este video, quiero cubrir rápidamente lo que vamos a cubrir en este curso. lo que al inicio del curso, vamos a recibir el logo de nuestro cliente y nos vamos de pie, recibir alguna información básica, y les voy a hacer algunas preguntas cruciales que nos van a ayudar a estructurar y crear el mejor diseño posible para este proyecto en particular. Entonces cómo vamos a hacer esto, vamos a usar el resumen de diseño, y vas a conseguir esta plantilla de breves de diseño vacía, que puedes usar y rellenar con todos tus proyectos futuros. Y vamos a hacerle la pregunta correcta a nuestros clientes. Y cuando reunimos toda esa información, entonces nos vamos de pie, nos inspiramos y creamos alguna pizarra de humor básica con las imágenes relevantes con los colores relevantes sobre este proyecto. Después de hacer eso, nos vamos a mover en sección de enmarcado de alambre de remolque, y vamos de punta, crear algunos marcos de alambre básicos usando simplemente bolígrafo y papel, y vamos a estructurar nuestros marcos de alambre usando alguna página de aterrizaje técnicas que expliqué a fondo en el discurso. Entonces una vez que no lo hagamos vamos a seguir adelante y básicamente crear lo que dibujamos aquí dentro de Adobe X'd y vamos a colocar estos elementos en varios lugares diferentes, utilizando la lógica detrás del resumen de diseño y detrás de este proyecto en particular. Entonces vamos a seguir adelante y a las imágenes a las sombras en diferentes iconos y cosas diferentes las cuales van a hacer pop este diseño, que van a hacer atractivo a este diseño para los potenciales visitantes y clientes potenciales fuera este negocio. Y cuando terminemos con eso, vamos a crear una guía de estilo, cual va a ser útil para sus desarrolladores porque en ella se podrán ver todos los diferentes colores. Utilizamos todos los diferentes fondos, diferentes iconos, diferentes botones, sombras y demás, y eso va a ser extremadamente útil para ellos más adelante, cuando empiecen a desarrollarse y este sitio web y hagan ella la vida. Y después de todas esas cosas se iban a mover en modo prototipado del dedo del pie y nos vamos pie incluyen algunas animaciones diferentes y algunas transiciones diferentes. Para realmente dar vida a este diseño y para explicarle al cliente cómo todo esto va a funcionar, porque cuando mandas la estática diseñada al cliente, no es necesario que ellos entiendan tu lógica y el pensamiento detrás ese diseño . Es realmente una bonita adición si puedes crear algún tipo de animación y si puedes mostrárselo porque de esa manera van a poder entender tu lógica y todo lo interviene dentro de este proyecto, y ellos podrán para luego darte una retroalimentación adecuada si están contentos con ello o no, y luego simplemente dentro de Adobe X'd, podrás cambiar todo ese dedo del pie, actualizarlo y enviarlo de vuelta al cliente para una revisión. Y podrán darte comentarios sobre esas revisiones básicamente en tiempo real. Por lo que esperamos verte en el curso. De verdad espero que le saquen algún valor, y no puedo esperar a compartir con ustedes toda esa información de la que acabo de hablar. Entonces te veré en el curso 3. El resumen: en este video, voy a pasearlo por el breve de diseño. Voy a explicar quién es el cliente, Qué requieren de este proyecto, así como qué vamos a buscar cuando empecemos a diseñar y empezar a planear. Entonces, sin más preámbulos, empecemos. Por lo que a la izquierda se verá breve de diseño, que se llena breve de diseño, que es entrevistado. Cliente. todas las preguntas y creé este breve de diseño mientras que a la derecha tienes la plantilla vacía que puedes usar para todos tus futuros clientes. Entonces si acerco un poco más, se puede ver en qué consiste este breve de diseño. Por lo que todos estos elementos, puedes agregarla. Se puede hacer doble clic en el texto y se puede agregar Texto. Se puede cambiar el color de estos iconos. Puedes cambiar los espaciados si quieres. Puedes eliminar porciones enteras de esta plantilla breve de diseño y finalmente, aquí mismo en la parte inferior. Puedes ver la línea de tiempo y puedes eliminarla si no la necesitas, pero dejar saltar rápidamente y mostrarte nuestro resumen de diseño. Por lo que es Hedonistas boutique hotel. Entonces ese es un pequeño hotel en la isla frente a Mykonos, que está en Grecia. Y el 12 de octubre es la fecha límite para la terminación del proyecto. Y aquí mismo puedes ver el perfil de la empresa. Por lo que son una pequeña empresa de Mykonos, Grecia, y tienen un pequeño hotel boutique en la isla. Tienen seis empleados y que buscan expandirse para atender a la gran temporada. Y no lo harán empleando a cuatro personas más y volviendo a seis cuando termine la temporada , lo que significa que en la temporada alta, realmente hay mucho trabajo por hacer. Por eso necesitan más gente. Y esto es importante solo para entender lo grande que es la empresa para que puedas tener eso en tu mente cuando empieces a diseñar. Su principal potencial son hermosas vistas y bonito jardín, que tienen perfecto para bodas y fiestas más pequeñas, pero también desde mantas y reuniones de empresas más pequeñas. Preparan su propia comida pero externalizan los pasteles y el alcohol a socios externos, ya que no producen su vino, que es cosa en Grecia y en mansedumbre, muchos de los pequeños hoteles boutique ponen eso como la U. S. B, que es su principal punto de venta. Por lo que quieren que vengas allí y experimentes su vino hecho a mano. Pero esta empresa no lo tiene y no producen su propio vino, por lo que lo externalizan de socios externos. Tienen un pequeño estacionamiento, pero cuando sí albergan eventos más grandes, rentan el patio cercano a su vecino de al lado, que es básicamente un pasto, y ahí estacionan los vehículos. Están buscando sumar otro piso en el próximo par de años para ampliar su capacidad. Por lo que quieren hacer el hotel más grande para que puedan acomodar aún más gente y tener aún más habitaciones dentro del proyecto hotelero o tú. Entonces, ¿qué necesitan de nosotros? Como diseñador, necesitan el diseño del sitio web, empezando por la página principal para atraer más leads y alejarlos de las grandes reservas Rex . Sitios web tocan su propio sitio web para cobrar pagos más grandes y mantener a los clientes a largo plazo porque están buscando dedo del pie, atraen vacaciones repetidas cada año y construyendo el abogado basado en el cliente. Volverá año con año porque no tienen los presupuestos para hacerlo las grandes campañas de marketing cada año, pero preferirían que los asistentes existentes regresaran año tras año. Lo que todo esto significa es que tienen acuerdos de reserva. Lo mismo, como cualquier otro hotel en el mundo lo hace sería reservar respaldos sitios web como booking dot com, Expedia y los demás jugadores de la industria. Pero el problema con esos es que te alinearon contra tu competencia. Entonces de verdad, hay muchas más posibilidades de que te pierdas algunas de esas leads. Se irán a tu competencia si tienen imágenes más bonitas. Si tienen mejores ofertas. Algunos de estos chicos actualizan ofertas a diario. Entonces si estás dirigiendo un hotel boutique más pequeño como lo hacen estos chicos, lo más posible es que no tengas mucho tiempo para actualizar tus ofertas en todos estos sitios web . Algunos sitios web lo hacen automáticamente, pero otros no. Por lo que tienes que asegurarte de que tienes una persona dedicada contratada para hacer eso a diario y más sitios web tienes tu hotel ofrecido sobre más trabajo que hay para ellos, y tienes que pagarles mensualmente incluso fuera de temporada, porque quieres atraer gente reservando para el próximo año y para la próxima temporada, toda la temporada y todo el año, para el caso. Entonces por eso quieren mantener la base de clientes clientes existentes básicamente, y quieren que vuelvan año con año para que no tengan que gastar grandes presupuestos de marketing en promociones y en marketing en redes sociales y campañas y videos y así porque ya cuentan con base de clientes abogada existente, que está preparada para volver año con año, dedo del pie en su hotel y para quedarse ahí a continuación. Tenemos metas y objetivos. Entonces lo que quieren y lo que necesitan de este diseño. Quieren más conversión de sus clientes existentes. Descubrieron que su tasa de rebote es demasiado alta porque la gente no se desplaza más allá de la imagen del héroe y quiere que baje y explore la página. Objetivo más principal es crear landing page que mantenga a los visitantes comprometidos y haga hacia abajo para dejar su correo electrónico para explorar un poco más lo que tienen toe oferta en este hotel para que puedan enviarles material promocional y evitar grandes reservando sitios web para que puedan volver a cobrar ingresos. Estamos tratando de evitar grandes sitios web de reservas porque quieren mantener más ingresos de ellos mismos y evitar esas comisiones de afiliados así como la competencia de otros hoteles. ¿ Quién es su público objetivo? Tan personas de mediana edad que buscan lugar para bodas, Empresas más pequeñas que buscan una conferencia Cuando ustedes personas mayores buscan un hotel tranquilo en el que pasar sus vacaciones para que no vean gente más joven aquí, no ven niños aquí. Por supuesto, las familias son bienvenidas, pero cuando están trayendo a sus propios hijos y no solo mandando a los niños por su cuenta, porque estas personas quieren mantener el ambiente tranquilo del hotel y quieren existir clientes para mantenerse contentos y mantener la calma porque realmente le toca a los clientes relajarse y no Esto no es algún tipo de fiesta cuando tú así que quieren mantener esa toallita. Como se puede ver la edad. Donde es de 35 a 65 género, 40% masculino, 60% femenino. Eso se debe a que si estás buscando boda cuando tú, hay mayores posibilidades de que las mujeres estén buscando esos lugares porque generalmente las mujeres son las que están planeando los lugares de la boda y los detalles de la boda. Empresas más pequeñas que buscan conferencia cuando vuelves a tener persona dedicada que busca esos tipos fuera cuando se usan, y suelen ser femeninas porque las hembras generalmente se ocupan de ese tipo fuera de tareas mejor que las masculinas. Toda la gente otra vez las hembras están ahí un poco más que los machos porque a las hembras les gusta explorar un poco más y ver y planear de antemano a dónde quieren ir con su esposo y con su país familiar de residencia. Porque el hotel es bastante caro Europa occidental y EE.UU., porque quieren apuntar a esos públicos. Los países de habla inglesa son preferidos por el cliente, pero si no nada va a hacer Básicamente ciudad fuera de los residentes. Estas apenas principales ciudades de los países occidentales. Tanto tiempo el Nueva York duplicando todo lento entra en juego porque vieron a AH, gran número de europeos del norte entrando a su hotel en años atrás y, por supuesto, a los dueños del lugar de trabajo o de la empresa de París o a los individuos de trabajo de vendedores superiores. Por lo que 60 niños, 60 k al año en adelante hábitos de consumo de medios, 60% instagram, 30% YouTube y 10% Facebook. Por lo que estas personas pasaban la mayor parte de su tiempo en Instagram mirando videos de YouTube, y están menos en Facebook que en estas otras redes de redes sociales. Y finalmente tenemos hábitos diarios. Entonces estas están ocupadas. Los individuos ayudarán a desvelar el estilo de vida orientado. Entonces una vez más no quieren dedo del pie ir allá fiesta del dedo del pie. No quieren ir allí a emborracharse ni a tomar drogas o algo así. Quieren ir allá a relajarse y a los pies. Olvídate de sus trabajos. Olvídate de su vida, durante el tiempo libre de sus vacaciones. A continuación, hemos diseñado requisito, por lo que necesitan ah diseño del sitio web Columna de retiro. Gran sistema. Eso es lo que son desarrolladores requeridos de dimensiones y resoluciones de activos de Estados Unidos. Para el inicio, necesitamos 1920 píxeles, blancos y sensibles. Toby diseñó más tarde, si estuvo de acuerdo, porque aún no hemos estado de acuerdo con el cliente sobre el responsive. Ellos lo quieren ver. Quieren ver cómo se ve porque la mayoría de estas personas vienen de los dispositivos móviles. Por lo que tienen eso en mente. Pero quieren ver el diseño, cómo se ve primero en la página web y en la computadora de escritorio y después de él. Si les gusta, quieren. Quieren que diseñemos un responsive para formatos de archivo posteriores móviles. Tenemos Adobe X'd como archivo de proyecto, y los activos se van a exportar también en SPG. A exceso de velocidad G para imágenes requieren paleta de colores. Quieren que creemos paleta de colores, que va a ser realmente neutral y realmente ver y orientado al hotel tan realmente mínimo. Activos de imagen realmente bonitos y limpios, Toby incluido. Vamos a utilizar imágenes gratuitas hasta que su fotógrafo termine de retocar y nos proporcione sus imágenes finales. Y por último, tenemos documentos de copia asociados, por lo que entregarán una copia final. Pero los marcador de posición se van a incluir en su lugar. Entonces en lugar de grandes párrafos, que son carne personalizada, vamos a incluir algo de texto ipsum caliente en su lugar, hasta que entregaron la copia final. Llévanos. Y finalmente tenemos presupuesto y horario. Por lo que el presupuesto se rompe en tres partes, igual que el propio proyecto. Por lo que 2400 para la exploración, planeación, diseño de página de aterrizaje y preparación. Esa es la primera parte de este proyecto. 3600 para el diseño completo de la página web y la creación del responsive 50% por delante 50% después de la entrega de activos . Entonces podría estar pensando ¿dónde está la tercera parte? Bueno, la tercera parte va a ser el diseño o para las páginas de redes sociales, el diseño para los dispositivos móviles, si es posible, y si es necesario. Y vas a proporcionar algunos videos más adelante porque vamos a hacer algo básico de edición de video para ellos. Y, por supuesto, eso no está incluido dentro de este curso. Pero quiero mencionarlo de todas formas, porque esa es la parte de este proyecto después de todo. Entonces aquí lo tenemos desglosado. Por lo que para la primera parte del proyecto, así explosión, planeación, diseño de página de aterrizaje y preparación fuera de curso incluye preparación para otras páginas. Porque vamos a crear una guía de estilo, vamos a crear unos colores. Vamos a crear algunos fondos y algunos tamaños de combinaciones de fondos. Entonces uno para que qué preparación es la preparación para otras páginas que se van a diseñar en una segunda etapa fuera de este proyecto. Por lo que la planeación es de cinco días. Muy búsquedas tres días. La investigación del público es de tres días de diseño, cuatro días de presentación, dos días de revisiones, cinco días y entrega. Por lo que la longitud total fuera de este proyecto para la primera parte es de 22 días. Entonces lo que quiero decir con esto es planeación Así que vamos a hacer alguna planeación básica. Entonces nos vamos a presentar al mercado hotelero. Vamos a presentarnos a la ubicación. Entonces, ¿dónde está la mansedumbre? ¿ Por qué es famoso? Queremos saber de la cultura local. Queremos saber de los propios dueños, de la empresa. Entonces esa es nuestra investigación de planeación. Entonces vamos a hacer básicamente investigación sobre la competencia. Queremos saber quiénes son. Queremos saber qué están utilizando sus propuestas de venta únicas. Entonces nosotros la paz. Queremos saber de su ubicación. Por lo que queremos saber la ubicación de toda la isla, qué puede hacer ahí la gente. Y queremos conocer la ubicación fuera de los competidores también, porque queremos ver qué tan lejos están de nuestro hotel y de nuestro cliente, y queremos ver qué están ofreciendo. Por lo que tal vez podamos sugerir algo al cliente para que pueda incluir eso en su oferta también . A continuación, tenemos investigación del público, y se puede hacer esto de diversas maneras diferentes. Por ejemplo, puedes contactar a diferentes empresas más pequeñas y simplemente preguntarles si te gustaría venir aquí. Si quieres venir aquí, ¿qué te gustaría ver? ¿ Qué te gustaría hacer? ¿ Qué tipo de oferta tendrías para que podamos? No, lo que estas personas quieren de la oferta. Lo que esta gente quiere del propio hotel. ¿ Qué tipo de comidas tienen? También tienen Así, por ejemplo, comidas más pequeñas. ¿ Tienen comidas más grandes? ¿ Comen todos juntos? ¿ Les gusta el estilo buffet? ¿ O les gusta ver a un mesero? Estar ahí todo el tiempo. Entonces ese tipo de cosas. Si conoces a alguien que se va a casar, puedes preguntarle porque ese es el público objetivo para este hotel está bien y puedes preguntarle . ¿ Qué te gustaría de esta ubicación? ¿ Qué te gustaría para tu boda y hacer la investigación del público en lo que especificamos aquí mismo. Entonces si puedes encontrar a alguna de estas personas y ponerte en contacto con ellas, entonces puedes hacer la investigación de tu audiencia correctamente. Y también puedes saber qué tipo off colores les gusta a estas personas ¿Qué tipo de estilos de diseño Puedes incorporar así sucesivamente? Porque todo está bien y bien si lo estás. Si tu último proyecto, por ejemplo, incluía algunos INTs Grady y algunas ilustraciones bonitas y algunas texturas modernas y algo así, eso es todo. Estamos realmente amables. Pero quizá a estas personas no les interesa ese tipo de estilo y ese tipo de diseño. Por lo que hay que tener eso en consideración, y hay que diseñar para este público en particular. Por lo que se sienten como en casa y tienen la menor tasa de bombas que las personas anteriores que visitaron este sitio web, porque ese es nuestro principal objetivo. A continuación, tenemos diseño, así que vamos a diseñar todo esto en cuatro días. Entonces básicamente, lo vamos a dibujar en papel. Vamos a crear marcos de alambre y contactar al cliente, les hicimos algunas preguntas más en el camino y luego finalmente crear un diseño que vas a enviar al cliente usando nuestra presentación. Por lo que los vamos a presentar y pasamos dos días en revisiones de presentación. Van a tardar aproximadamente cinco días. A veces esto puede ser un día, así que básicamente una sola religión o ninguna religión en absoluto, y a veces puede ser más larga, así que ten eso en consideración. Si tienes un plazo apretado para tu proyecto. Y finalmente tenemos la entrega. Entonces básicamente toma de 1 a 2 días si el proyecto es más grande. Pero debido a que este es más pequeño, sólo puede tomar como, 30 minutos o una hora exportar todo y dedo atrás y prepararse y enviarse a sus clientes y a sus desarrolladores. Entonces, básicamente, ese es nuestro resumen de diseño. Este video corrió un poco más, pero quiero compartir con ustedes todo de lo que hablamos con el cliente. Para que sepas qué preguntas hacer a tus clientes para que puedas entender mejor lo necesitan, lo que quieren, lo que no sabían que necesitan o quieren. Y puedes sugerirles todo eso. Y tu objetivo para esto es puntera entregar la más alta calidad posible fuera del puntera de diseño, hacer feliz a tu cliente y hacerlos volver. Entonces, por ejemplo, en nuestro caso, si quieren crear una aplicación móvil o quieren crear algunos carteles o cualquiera que sea , puedes mantener a los felices, y puedes tener el cliente regresando regresando a ti para el próximo proyecto que pudieran tener y también puedes aprender y entender a su público objetivo y lo que puedes hacer para traerles el mayor valor y mantenerlos en esta página por el mayor tiempo en los próximos pocos videos iban dedo del pie hacer combatir su análisis y básicamente ver lo que los competidores fuera de este hotel tienen toe oferta en sus sitios web para que podamos entender mejor. Entonces, por ejemplo, paletas de colores, están usando imágenes ahí usando titulares. Están usando collares de fondo, colocaciones y demás para que nos familiaricemos porque antes de entrar en el proceso de diseño para este proyecto en particular, así nos vemos ahí. 4. Competitor Analisys 1: en estos videos. Queremos hablar de la competencia por nuestro hotel. Así que 1er 1 es carbono AKI Hotel en Afganistán. Aziz, puedes ver esta barra de parada para la navegación aquí mismo. En mi opinión, debería tener más espacio. Debería tener más claridad porque en esta imagen azul oscuro, por ejemplo, se puede ver que ahora tienen libro. Botón. Es azul sobre azul, y no es fácilmente irritable. También aquí mismo, los textos sobre Lee dice en el corazón fuera haciendo este pueblo. Pero, ¿qué hay en el corazón de la mansedumbre abajo? ¿ Qué podemos hacer en este hotel? Por lo que toda esa información se debe mostrar aquí mismo en la parte superior, porque si no te gusta nada de esta información, solo vas a rebotar y salir de este sitio web y aumentar la tasa de rebote. Y eso es lo que queremos eliminar para nuestra página web. Además, solo tienen que imágenes y estas flechas son amables con una especie de forma extraña, y no sabrías si hay flechas si no les pinchaste. Además, el blanco sobre blanco no funciona tan bien, así que todas esas cosas tienen que ser consideradas. Además, tienen un desplegable aquí mismo en el alojamiento. Y como se puede ver en el hover, cambia de color a azul. Por lo que una vez más, tenemos azul sobre azul. No es brisa fácilmente legible. Tienen este menú de idiomas aquí mismo. Pero sólo tienen inglés en Grecia. Podríamos querer la posición del dedo del pie que un poco mejor en el diseño de arte. Por lo que pasando, tienen reserva online justo aquí, lo cual es bonito, pero en mi opinión, debería combinar un poco más de información aquí mismo. Por lo que tienes solo habitaciones y también habitaciones. Está bien. Yo quiero una habitación. Pero, ¿cuál? No tienes ninguna de esa información. Si hace frío, se pueden ver todas estas habitaciones diferentes. Pero, ¿qué habitación? A. Mi reserva. Aquí mismo. Entonces yo, en mi opinión, deberían poner esto justo aquí. También adultos. 1234 Pero y si quiero traer a mis Hijos no puede llevar a mis Hijos a este hotel. Y también, este libro ahora no se ve realmente igual que este libro ahora así como este libro ahora. Por lo que tal vez quieras considerar la jerarquía y usar los mismos botones en algunos lugares y diferentes botones en otros lugares. Entonces moviéndonos hacia abajo tenemos sobre nosotros, que es sin ninguna imagen y ¿por qué elegirnos? Por lo que pondría estos en sus diferentes secciones separadas porque realmente está todo agrupado. Si me desplaza sólo un poco hacia abajo en esta área, tienes bastante texto fuera. Además, este texto es mucho más pequeño que este texto. Los espaciados están un poco apagados por lo que puedes ver este basing aquí mismo. Esto aquí mismo y estos son un poco diferentes. Entonces, en realidad, deberíamos cambiar todo lo que vemos aquí mismo para nuestro sitio web y hacer que el espaciado y el uso del espacio en blanco sea un poco mejor para que los potenciales visitantes y clientes puedan leer y escanear un poco mejor de lo que está aquí mismo. En cuanto a la organización fuera de las páginas de aterrizaje para los elementos de la página de aterrizaje, vamos a hablar de eso en la siguiente sección llamada Landing Page Another me, donde vamos a entrar en profundo detalle sobre lo que necesitas incluir dentro de tu páginas de aterrizaje, no importa que nutren tu en. Pero en esta sección y en estos próximos videos, solo queremos hablar de los principales competidores para nuestro hotel. Qué están haciendo y qué errores debemos evitar cuando empezamos a diseñar nuestro sitio web. Por lo que moviéndose un poco hacia abajo, se puede ver unas habitaciones justo aquí. Pero una vez más, queremos saber más información sobre estas habitaciones y no tenemos imágenes fuera de las habitaciones. Entonces, por ejemplo, tienes flores aquí mismo. Pero, ¿por qué? ¿ Por qué me puedes mostrar cómo se ve la habitación aquí mismo? Además, contamos con habitación económica. ¿ Qué es una habitación económica? A lo mejor en el hover en lugar de esta imagen. Zoom manera. Podemos tener un poco más de información sobre la habitación en sí para que podamos saber cuál es la habitación económica, porque quizá sepas qué es. Pero yo, como visitante, ciertamente no lo hago. Y no quiero perder el tiempo simplemente yendo pinchando dentro de todas estas habitaciones. Deberíamos tener alguna información básica para cada una de estas habitaciones justo aquí en la página principal para que podamos saber si queremos esa habitación o no. Entonces, como pueden ver, tienen siete habitaciones diferentes aquí mismo. Entonces si quieres invertir tu tiempo para aprender más sobre cada una de estas salas, tienes que ir a siete páginas diferentes en lugar de aprender solo la mayoría de la información aquí mismo desde la página de inicio. Entonces tal vez en su lugar, fuera de este bonito efecto de zoom de imagen. A lo mejor si tienes algunos textos aquí mismo, abajo y por ejemplo, rangos de precios. Por lo que esta habitación va de este precio a este precio, puede acomodar a esta mucha gente. Tiene estas muchas camas, no tiene baño, sí comparte un baño con otra habitación. ¿ Es de fácil acceso? ruedas de dedo, por ejemplo. No tiene algunos niños un área de juegos o algo así. Entonces toda esa información, en mi opinión, debería estar aquí mismo en la página principal antes de que puedas hacer clic y luego ir a explorar porque no tengo tanto tiempo. Y como se puede ver, hay bastante fuera de la competencia en oferta. Entonces si no me gusta lo que veo una vez más, me voy a ir e incrementé la tasa de rebote que queremos dedo a menor para nuestro cliente . Ahora puedes ver aquí mismo tienen vivir Ah, experiencia en casa lejos de casa, lo cual es genial. Pero, ¿qué tiene que ver con todas estas imágenes? no cuenta ninguna historia que necesitemos saber. No nos da más detalles sobre este hotel y estas habitaciones. Entonces, ¿por qué solo por qué pusiste esto aquí? No sirve a ningún propósito aparte de tal vez alguna inspiración. Pero si eliges ponerlo como inspiración, ¿por qué no pongas atrás la imagen de tu hotel para que podamos inspirarnos con tu hotel? Porque estamos aquí para reservar su hotel. Si quiero leer algunas cotizaciones, iré a Instagram o a Pinterest y buscaré inspiración. Cotizaciones ahí. Estoy aquí para reservar un hotel, así que sólo dame las imágenes del hotel. A continuación, tenemos algunas críticas y críticas son cosas bonitas de tener. Pero quizá puedas incluir algunas imágenes aquí mismo para incorporarnos una vez más a tu hotel para que podamos ver hotel más alto. Parece que no solo pones algunas palabras al azar y puedes ver algún logotipo de Trip Advisor aquí mismo . Pero si no sabes nada de Trip Advisor, te estarás preguntando qué es esto. Entonces tal vez ponga alguna imagen aquí mismo en el fondo, o ponga imagen en un lado y luego una reseña en otro lado para que podamos saber que esto es para su hotel. Entonces a continuación tenemos un mapa y que es bueno. Pero una vez más, no tiene ningún formulario de contacto. Simplemente cuenta con datos de contacto y ubicación. Y si hago click en ubicación , me mostrará ubicación aquí mismo. Pero, ¿por qué? Una vez más, ¿por qué? ¿ Por qué lo pusiste ahí? Entonces a continuación, tenemos suscripción y lo cual es bueno, pero no es realmente prominente. Y quizá quieras incluir ah, abajo aquí mismo para incentivar a la gente a suscribirse a tu newsletter. Y finalmente tenemos una foto aquí mismo, que es sólo un pie de página básico sin más información. Entonces, por ejemplo, si quiero contactarte si extraño esto, entonces pero ¿qué es esto? ¿ Aquí mismo? Todo lo que tienes son algunas coordenadas y coordenadas del mapa. Y si no sabes qué son, para qué sirven, podrías saltarte esta parte por completo. Ahora esto es lo puedes ver ho lo diseñó, y es realmente agradable que se promovieran. Pero no trae ningún bien a este hotel. Por último, nos hemos caído justo aquí en la parte inferior que también es bonito dedo del pie tienen, pero no de esta manera. Y quizá quieras pensar en quitarle algo de información a Heather y ponerla en la foto, especialmente información que no son realmente importantes para el Header Toby dentro de la navegación. Entonces eso es todo para el primer hotel. En el siguiente video, vamos del dedo del pie, analizamos segundo hotel. Entonces queremos dar vuelta. Y cuando lo hayamos hecho, vamos a pasar a la sección de anatomía de la página de aterrizaje del curso. Y voy a explicar qué elementos debes incluir dentro fuera de tus páginas de aterrizaje. ¿ Cómo debes estructurar tu copia y así uno? Entonces te veré en el siguiente video. 5. Competitor Analisys 2: a continuación, tenemos un hotel, Nicholas, que es básicamente que están usando. El diseño similar es el sitio web anterior, pero no tienen ningún texto aquí en absoluto. Por lo que si aterrizas por primera vez en este sitio web, tal vez quieras Tal vez te estés preguntando qué es esto. Entonces esta es su tercera diapositiva donde escriben Ah hotel siguió al sol en mansedumbre tan grande. Pero aterrizamos en este tobogán, que está completamente vacío y no sabemos qué es. Entonces si no nos levanto, simplemente no sabemos lo que estamos buscando. También, han escondido esta navegación aquí mismo dentro del menú de diciembre. Y este color amarillo realmente destaca como un realmente fuerte y ataca tus sentidos básicamente. Por lo que realmente no me gusta. Deberían usar algo un poco más oscuro. A lo mejor poner algo de superposición sobre la imagen para que no te quedes ciego cada vez que visites el correo electrónico. Perdón, el menú. Yo lo voy a cerrar. Y como puedes ver, usan ese color en toda su página web. Esta información aquí mismo es buena porque la ponen justo aquí en la parte superior. Pero creo que deberían organizarlo un poco diferente y un poco mejor y no tener todo este espacio vacío y usar solo para el libro. Ahora botón siguiente arriba, Nos estamos moviendo hacia abajo y puedes ver que tienen hermoso hotel de diseño tomando en Meekness island, Grecia, lo cual es genial. Pero la organización fuera de estas secciones no está realmente tan bien. Entonces, una vez más, lo que me estás ofreciendo como visitante, ¿me ofreces algunas habitaciones exclusivas? ¿ Me ofreces vino y cena experiencia para ofrecerme solo una habitación? ¿ O tienes tu propio restaurante? ¿ Es éste un café que puedo ver aquí mismo? ¿ O es un restaurante dedicado para los visitantes del hotel? ¿ Es ésta la piscina interior o la piscina exterior? ¿ Qué me puedes explicar de un vistazo para que pueda tomar mi decisión, fomentar, y tomar mi decisión mejor para mí? Además, estos botones leer más simplemente no son tan legibles. Y se puede ver que este texto es realmente bastante pequeño y no tan legible. No hay titulares, así que no sé lo que estoy respirando Y si solo se desplaza hacia abajo, todo lo que puedes ver son estas imágenes y podrías saltarte este importante mensaje que podrían tener para que leas. Entonces, ¿no lo sabes? ¿ Esta es la habitación principal? ¿ Esta es la segunda habitación? Está bien, tienes alojamiento y dulces. Pero si lo cambio aquí mismo, tienes habitaciones y dulces. OK, pero estas imágenes se ven realmente similares. A lo mejor deberías dedicar toda la sección fuera de tu página de destino. Dos habitaciones y dos suites y dedo del pie. Explícame sus diferencias. A lo mejor para poner algunos precios para que yo pueda saber. ¿ Cuál es la diferencia entre habitaciones y suites? ¿ Puedo traer a mis Hijos allí? ¿ Hay entrada accesible para silla de ruedas o no? ¿ Recibí mi propio estacionamiento? Ninguna de estas informaciones están ahí. Y toda esa información es realmente importante cuando estás tomando tu decisión porque vas a pasar tus vacaciones en esa habitación. Por lo que 10 14 días, siete días no importa. Aunque solo un día vas a gastar tu dinero y tu tiempo viviendo en ese espacio básicamente y no sabes lo que es tienes remolcado también. Después entra en cada página de una sola habitación y explora un poco más allá. Entonces es sólo una pérdida de tiempo. Quiero saber todo lo que pueda todo lo que necesito en esta primera página. Entonces en esta página de aterrizaje, antes dedique mi tiempo y más tarde mi dinero dedo del pie este hotel. A continuación, si te desplazas hacia abajo, tenemos un libro de visitas. Y una vez más, realmente molesto por este color amarillo y se puede ver todas estas diapositivas igual. Por lo que esta imagen se desliza igual que ésta. Testimonios aquí mismo. Por lo que puede ser dedo del pie realmente molesto. Entender cuál es cuál se mueve esto. Esto se mueve. Por lo que simplemente no puedes dedicar tu atención dedo del pie una sección en particular de esta página de destino a la vez porque quizá quieras leer esto, pero esto sigue moviéndose. Entonces tu vista se mueve de aquí a aquí, luego de aquí a aquí. Y realmente no se puede enfocar en ninguna sección en particular fuera de este sitio. Y todo simplemente sigue moviéndose. Y no puedes leerlo correctamente porque estoy en mi computadora. Si pongo aquí mi ratón, esto debería dejar de moverse. Pero como pueden ver, aquí está mi cursor del ratón y sólo se sigue moviendo sigue moviéndose, y simplemente no puedo leer todo lo que tal vez quiera leer esto. Es un poco más largo, pero huyó de mí y no logré leerlo. Por lo que ahora soy un poco molesto. Voy a desplazarme hacia abajo y se puede ver en esta sección tienen instalaciones y saborear Mediterráneo. Entonces, ¿cuál es agradable, pero facilidades para qué? Entonces, ¿esto es un restaurante? Está bien, es que dice el desayuno junto a la piscina. Entonces, ¿no deberías justo restaurante justo aquí en lugar de instalaciones. Y tal vez puedas poner algunos platillos aquí mismo, tu cocina local dentro. A continuación tienes alberca. Pero, ¿qué tipo de piscina? Simplemente vemos a un tipo aquí mismo disfrutando? Pero no veo ninguna piscina aquí mismo. A lo mejor quiero ver algunas imágenes más de un vistazo aquí mismo. No quiero ir a pago dedicado solo para ver cómo se ve lo simple. Quiero verlo aquí en la página principal antes de tomar mi decisión. Entonces esto leer más? Es realmente redundante, en mi opinión. Entonces aquí mismo Dice cócteles brillantes. Pero, ¿por qué? Puedo tomar cócteles en el restaurante, ¿verdad? ¿ Por qué tienes un ligero dedicado para ello. Realmente no tiene ningún sentido para mí. Y a continuación tenemos gustos gustativos del Mediterráneo. Por lo que tienes tres toboganes para la comida y bebida, y un tobogán es para la piscina. ¿ Por qué se puede separar eso en dos secciones? Entonces, por ejemplo, tenemos un restaurante y luego puedes explicar estas tres cosas por dentro allá y después tener sección dedicada para la alberca. Si ese es tu principal punto de venta fuera de este hotel así que realmente no tiene ningún sentido para mí. Pero eso es lo que vamos de pie explorando estos videos. Eso es lo que estamos tratando de lograr es entender cómo los competidores están haciendo sus sitios web, en nuestra opinión, lo que están haciendo mal y lo que podemos tratar de mejorar en nuestra página web para nuestro hotel y para aumentar las conversiones y reducir la tasa de rebote porque evitamos esos errores. Por lo que queremos guiar a nuestros visitantes a través de toda la experiencia a través de toda la página de aterrizaje hasta que lleguen a su decisión antes de que se alejen de nuestra página de aterrizaje. A continuación, tenemos noticias, así que tenemos algunas noticias aquí mismo. En mi opinión, esta sección realmente no tiene lugar en la página de aterrizaje del hotel. Pero en realidad, depende de ellos las actividades. ¿ Por qué las actividades están hasta aquí abajo? Si vengo a Mykonos, quiero saber qué puedo hacer sobre la mansedumbre. No quiero desplazarme todo el camino hacia abajo en esta página solo para ver qué puedo hacer ahí. Es realmente todo bonito y bien mostrarme tu restaurante en tu encuesta. Pero si vengo allí, ¿qué puedo hacer? Son ¿Por qué las actividades están hasta aquí abajo? Por qué no están en la cima. Está realmente más allá de mí y también actividades A. Así que puedes ver esta sección tiene este párrafo, que en realidad no es fácil de leer, y el texto es demasiado pequeño. Es blanco sobre blanco sobre algún tipo de fondo crema. De verdad no se lee muy bien. Estas imágenes no explican tanto. En mi opinión, esto debería ser un poco más de vida en ellos. Pero todo depende del fotógrafo que se los llevó y hasta estas personas que sí cuerno el hotel leyó. Más botones no son realmente fácilmente legibles a través de toda la página de aterrizaje y un voto al mismo. Un poco diferente. Date de alta para recibir newsletter. Como puedes ver, es realmente raro. El texto es camino a la izquierda. Esta caja está justo aquí en medio. Y estos iconos de las redes sociales están aquí mismo. Por qué están ahí. Tan solo necesitamos inscribirnos al boletín informativo. Debe ser limpio, sencillo captar la atención. ¿ Por qué están aquí los iconos de las redes sociales? No deberían estar ahí porque los tenemos aquí. Y porque se trata de una navegación de desplazamiento. Si me desplazo aquí mismo, puedes ver que los tenemos aquí y aquí. Entonces, ¿por qué? Por qué desperdiciar ese espacio cuando se puede utilizar ese espacio. Ah, mucho mejor incluir la información que realmente importa a este sitio web. A continuación, tenemos unas bonitas imágenes aquí mismo. Pero una vez más no nos cuentan ninguna historia. Podemos ver a un tipo justo aquí junto a la piscina y a estas personas acostadas al sol. Pero, ¿dónde están estos? ¿ Es esto dentro del hotel? ¿ Está fuera de las instalaciones del hotel? ¿ Dónde está esto? ¿ Está junto a la piscina? Porque no se parece. ¿ Esta es la playa? Entonces, danos un poco de contexto. Explícanos porque estamos aquí por primera vez. No conocemos tu hotel. No sabemos si queremos hospedarnos en su hotel para nuestras vacaciones. Por lo que sólo intenta persuadirnos más con más información, lo cual es relevante. Remolque con nosotros. Y por último, tenemos un pie de página, que es mejor pie de página que en este primer ejemplo que les mostré. Pero aún así no tan genial, porque les falta alguna información principal aquí mismo. Entonces, por ejemplo, podría querer enviarle rápidamente un correo electrónico. ¿ Cómo puedo hacer eso? ¿ Hay correo electrónico en el que puedo hacer click? Sí, está justo aquí. Pero si no tengo a mis clientes configurados qué mayoría de la gente no, no saben montar. No se puede enviar a estas personas por correo electrónico. A lo mejor quieres dedo del pie. Envíales una pregunta sobre Ok. A mí me gusta este cuarto, por ejemplo, Y como estas actividades, así que quizá quieras preguntarles. ¿ Cuánto cuesta montar a caballo en Mykonos? Si me quedo en tu habitación 10 días, ¿cómo puedes hacer eso? Tienes que llamarlos por teléfono y tienes tow email ellos justo aquí. Pero hay que seleccionar este correo electrónico. Copiarlo es, puedes ver que es elige todo el asunto. Realmente no es tan útil para tus potenciales visitantes. Por lo que tienes que tener mejor estructurada tu landing page para que puedan tener la información que más necesitan a simple vista sin salir de tu landing page sin pasar por múltiples páginas solo para que puedan conseguir que tan importante información que necesitan. Entonces eso es todo. Para este segundo ejemplo, en el siguiente y último video, les voy a mostrar el ejemplo de tortuga, que es mucho mejor que estos dos pero aún carece de mucha información, que, en mi opinión, se debe incluir en primer lugar, así que te veré ahí. 6. Competitor Analisys 3: en video perturbado y final. Nos vamos de pie Analizar Porto Mykonos Hotel y se puede ver que lo hicieron lo hicieron un poco diferente y un poco mejor que estos otros sitios web de hoteles que te mostré. Pero aun así hay muchas cosas mal con este sitio web en mi opinión y algunas cosas que vamos a evitar cuando empecemos a diseñar y planificar nuestro sitio web. Entonces justo aquí en la parte superior, dentro de la navegación. Como puedes ver, todo está bastante agrupado. A mí me gusta cómo hacen esto porque cualquiera que sea la imagen que incluyan aquí esta navegación se va a trabajar del pie. Pero aún así tiene mucho en para mucha información que no son necesarias en mi opinión. Por lo que tienes galería justo aquí. ¿ Por qué restaurante y bar? ¿ Por qué instalaciones Ok? Pero, ¿por qué? Al igual que este botón de libro en línea no es realmente prominente en stands aquí mismo. Además, ¿por qué tienes tu logo como aquí? Porque simplemente come tanta información del resto fuera de la página web. ¿ Por qué no simplemente lo pones dentro de la navegación para que puedas liberar ese espacio. Tienen algún texto, ¿verdad? aquí en la imagen del héroe. Pero como puedes ver, realmente no es fácil de leer. Y tampoco nos dice mucho. Entonces tal vez queremos saber información sobre ¿Puedo traer a mis Hijos allí? ¿ Dispones de estacionamiento? ¿ Qué tipo de hotel es este? Entonces, por ejemplo, si voy allí con mi familia, ¿me voy a estar mezclando con alguna gente de negocios o alguna otra familia, o estaré ahí junto con mi familia? Entonces sólo tráeme cualquier información que pudiera necesitar aquí mismo en la página principal y dentro de la imagen del héroe. Y dentro de esta primera diapositiva, si tienes un slider o tal vez incluyas un video aquí mismo mostrando tu hotel mostrándome quién se hospeda ahí y toda esa información. Como se puede ver, ninguno de estos tres sitios web está haciendo eso. No tienen ningún video aquí en la parte superior. Simplemente tienen estas imágenes estáticas. Simplemente no contamos ninguna historia y no nos da ningún detalle importante que pudiéramos necesitar. Entonces como puedes ver, sólo me escribe pobre. Cierra el ideal. Mi Mick. Hotel de pueblo honesto. Genial. Pero, ¿qué pasa con estos dos? Acabo de encontrar tres fuera de este ideal me Coniston Hotel. ¿ Por qué es mejor tu tuyo que estos dos? Sólo dame algo de información. Muéstrame. Persuadme para que reserve en línea aquí mismo en su página web. Si te desplazas hacia abajo, me gusta esto porque simplemente le dan al usuario algo más de información. Pero realmente se dice desplazar hacia abajo aquí mismo en lugar de simplemente poner el icono. A mí me gusta más el ícono porque es más limpio. Pero una investigación ha demostrado que cuando pones scroll hacia abajo, gente realmente sabe lo que tienen que hacer. Si eres diseñador, sabrás al instante lo que necesitas hacer. Pero la mayoría de la gente no. Quizás algunos hagan clic en esta flecha aquí mismo. Y si no tienes enlace incluido dentro como lo hacen, gente hace clic aquí y luego se van porque no saben qué hacer. Pero por suerte incluyeron. Entonces si hago clic en el cyberlink aquí mismo, me llevará a la siguiente pantalla. Como se puede ver aquí mismo, tienen un poco fuera de una introducción para ellos mismos. Pero, ¿por qué poner esta pequeña imagen cuando tienes estas bonitas imágenes grandes aquí mismo? ¿ Por qué ponerlo aquí? ¿ Por qué no incluyste video? Simplemente paga a alguien para que cree un video de aspecto agradable. Ponlo aquí. Haz un lindo, grande, letras audaces y un bonito, gran rumbo audaz explicándome lo que eres, quién eres. ¿ Eres para mí o no? Y tal vez incluya algún llamado a la acción diferente y no este. Porque, como puedes ver, este impuesto no lee todo tan bien contra este color, tal vez deberías considerar incluir este color tal vez algunos tonos más oscuros de este color para el texto, tal vez incluso algunos textos más oscuros off. Por ejemplo, este color sólo para que tu botón se limitara un poco más bonito o así este libro en línea blanco sobre el color acero no se sostiene tan bien. Pero una vez más, pondré aquí una sección diferente explicando un poco mejor quiénes somos, qué hacemos y qué tipo de valor podemos traerles como visitante? A continuación, tienen acomodación futura. Entonces, como puedes ver una vez más, no nos dan ninguna información sobre las habitaciones. Tienes que hacer click en la imagen tienes que ir dentro de la página dedo del pie, aprender más sobre cada habitación. Pero no te dan ninguna información aquí mismo en la página principal sobre las habitaciones que tienen en oferta, lo cual realmente creo que es una oportunidad perdida para todos estos sitios web. Y vamos a cambiar eso cuando empezamos a diseñar nuestra página web más adelante. Y como puedes ver, solo tienen estas dos habitaciones. Por lo que tienen esta flecha aquí mismo la cual no hace nada es que se puede ver que estoy pinchando sobre ella no hace nada. A lo mejor podemos hacer click en esto, pero nos lleva arriba en la parte superior. Crea frustración. Como se puede ver, sí tiene otras habitaciones. Pero si no vi esta flecha como puedes ver un click sobre ella. Pero no pasa nada. Entonces, ¿por qué está ahí? ¿ Por qué? ¿ Por qué no solo crear. Si tienes cuatro habitaciones, ¿por qué no te gusta este primer sitio? Pero un poco diferente, por supuesto, y crear para unas imágenes diferentes. ¿ Por qué estás usando este layout sin el saroso? Si alguien está mirando esto desde el desde su dispositivo móvil, es posible que no puedan leer esto y ver esto. Y podrían estar pensando que solo tienes dos habitaciones dentro de tu hotel por lo que moverte en lo más destacado del hotel . ¿ Por qué está esto aquí? ¿ Por qué no está justo aquí en la cima? ¿ Por qué? Tenía que desplazarme hacia abajo solo para ver estos aspectos destacados también, ¿Qué es esto? Ciara? ¿ Qué es esto? Conoce más sobre qué? Magníficas vistas Genial accesible para personas con movilidad reducida. ¿ Por qué no está todo en la cima? ¿ Amigable con la familia? No ladrando amistoso saber por qué? ¿ Por qué no tienes esta información increíblemente importante aquí mismo? ¿ Y si llego en autobús y voy al centro del pueblo? ¿ Cómo puedo llegar a tu hotel? ¿ Y si llego en auto? ¿ Puedo dejar mi auto en cualquier lugar? ¿ Tengo que pagar el estacionamiento externo? ¿ Tienes tu propio estacionamiento? Por lo que toda esa información debe incluirse en la página principal para que la gente pueda saberlo al instante. Ok, esto es para mí o esto no es para mí. Me voy a ir sin perder el tiempo en este sitio web. Pero como puede ver, ninguna de esas informaciones está en ninguno de estos sitios web. Y por último, si me desfilo todo el camino hacia abajo, se puede ver a judíos por dos galería, así que puedo no puedo revisarlos desde aquí. Tengo que ir dentro de las páginas dedicadas para estas galerías. Por lo que una vez no se puede perder oportunidad. Y esta flecha aquí mismo, qué hace si hago clic en ella, me lleva a la cima. Genial. Pero si hago clic en esta flecha, me lleva a la cima. Entonces hace lo mismo. ¿ Por qué esta flecha aquí? Entonces, por ejemplo, imagínense que alguien quiere hacer click aquí mismo. Pero por accidente hacen clic en esta zona aquí mismo, así que solo crea frustración. ¿ Por qué está ahí? ¿ Por qué incluir todos esos elementos sin importancia dentro de tu página? Y de eso vamos a analizar y hablar en la siguiente sección del curso. Cotización landing page, no me digas a dónde voy. Toe caminando por todo el proceso de la página de aterrizaje sobre cuáles son los elementos importantes elementos para evitar qué elementos incluir lo que es la estructura perfecta de la página de aterrizaje y así sucesivamente. Pero para terminar este video, como se puede ver aquí mismo antes de que se hayan suscrito. Pero una vez más, realmente una caja pequeña. Entonces, ¿por qué deberías poner esta pequeña caja aquí sin ninguna visita de botón? nuestro hotel hermano. Genial. Pero, ¿por qué es esto tan prominente? ¿ Aquí mismo? Ellos quieren irse. Quieren que salga de este sitio web y vaya a este sitio web. No quiero que reserve en este sitio web. Pero en este sitio web, así solo crea confusión. ¿ Por qué está ahí no tiene que estar ahí. Puedes ver aquí mismo Tienen información de contacto, teléfono y correo electrónico, lo cual es un poco más bonito que estos otros sitios web. Pero ¿por qué no solo incluir el bonito, sencillo formulario de contacto grande con un mapa junto a él Para que pueda saber cómo puedo contactarte? A lo mejor quiero preguntarte sobre habitación sobre el precio. Por lo que una vez más, si no tienes cliente de correo conectado a tu navegador, tienes que seleccionar toda esta copia hit, luego ir a tu cliente de email y luego escribir tu email allí. En realidad no es tan sencillo de hacer. Y realmente se necesita mucho tiempo para que estos potenciales visitantes lo hagan. Por último, tenemos justo aquí en el pie de página toda esta información una vez más, quien diseñó el sitio web Niza que tienen su Pero ¿por qué? Y por fin todo esto aquí mismo para las páginas de redes sociales y compartir y alguien, pero en mi opinión, realmente no está diseñado todo tan bien y debería ser presentado un poco más agradable y un poco mejor de una manera un poco más lógica para limpiar toda esta navegación y para poner algunos otros elementos dentro del pie de página justo aquí. Entonces eso es todo para la sección de análisis de competidores en la siguiente sección del curso, dijo A ZAY, Vamos a empezar por aterrizar Pekín, no a mí. Y vamos a hablar de lo que es una página de aterrizaje, por qué la conversión importa función sobre la estructura de la página de aterrizaje de belleza, qué considerar quitar y así te veré ahí. 7. Qué es una página de aterque: página de aterrizaje suele ser la primera página de la página de inicio fuera de tu sitio web, y es la primera página en la que aterrizan tus visitantes, por lo que puedes imaginar si te buscan en Google y hacer clic en delinear para buscar en la página de inicio. O la página de destino es la primera página fuera del sitio web que visitarán y el propósito de las páginas de aterrizaje para explicar en el menor tiempo posible de qué se trata tu sitio web, qué estás ofreciendo y quién se beneficiará de tu oferta porque puedes imagina que la mayoría de las personas que vienen a nuestro sitio web no saben de qué se trata. No sabes lo que estás ofreciendo. No sabes cuál es tu producto o servicio, por lo que tienes que explicarlos en la página de aterrizaje de la manera más corta posible y de la forma más concisa y clara posible lo que estás ofreciendo, cómo se beneficiarán de tu servicio o de tu producto, porque si no lo consiguen, se irán. Todo el punto del sitio web es vender lo que estás ofreciendo por lo que ya sea un producto o un servicio y la página de aterrizaje es tu vendedor, para que puedas imaginar a un vendedor saliendo por ahí y vender ya sea el producto o el servicio que es tu página de aterrizaje suelen tener de 3 a 5 segundos cuando la gente aterriza en tu página antes de que se vayan. Por lo que hay que persuadirlos para que se queden y que se desplace hacia abajo. Porque puedes meter tanta información en tu área de cabecera y por encima del pliegue porque mayoría fuera de tu información estará abajo. La información que pongas ahí arriba en la cima será de la más alta calidad posible y la más alta conversión posible en términos de descuento, explicando a tus potenciales prospectos de qué trata y qué les está ofreciendo sus consejos y técnicas desarrolladas por grandes agencias que pueden ayudarte a lograr eso estructurando tu página de aterrizaje de la manera correcta, usando los elementos correctos, lo que significa que engancharás tu potencial, uh, leads, y clientes en el área de héroes. Una vez que estén enganchados, comenzarán a desplazarse hacia abajo, y cuando el desplazamiento hacia abajo, tienes que estructurar esa información de tal manera que entiendan de un vistazo lo que estás ofreciendo, porque afrontémoslo número es leer la información que estás proporcionando. Simplemente están escaneando la página web en busca de la información que necesitan. Por lo que tienes que estructurar esa información de tal manera que cuando se desplazan hacia abajo y el escaneo de tu sitio web, inmediatamente entiendan de qué se trata, qué les estás ofreciendo y cómo se beneficiarán de lo que sea que estés ofreciéndoles. Vamos a discutir todos estos puntos en esta sección fuera del curso. Y en el siguiente video, te voy a mostrar qué es una conversión y por qué importa para tus clientes, así que te veré ahí. 8. Por qué es importante la conversión: por qué la conversión importa la conversión en el sitio web es simplemente girando el dinero del dedo del pie ofreciendo donde es un servicio o un producto. Entonces, por ejemplo, si estás vendiendo zapatos, conversión es con cuando alguien te paga dinero por esos zapatos a través de tu página web, lo que es una buena conversión depende de tu producto o servicio, lo caro lo es, lo valioso que es y si se muestra al cliente adecuado. Entonces, por ejemplo, si estás vendiendo algo que está en un nicho realmente pequeño, puedes. No puedes esperar tu conversión Toby High, porque simplemente no hay suficiente gente en ese nicho para vender una cantidad lo suficientemente grande. Por lo que ya sea fuera de su producto o servicio para satisfacer esa tasa de conversión que tenía en mente . Entonces, solo ten eso en cuenta cuando estés empezando algo. Entonces cuando comienzas a trabajar en un sitio web para reclinar , por ejemplo, tienes que entender qué tan grande fuera del nicho es en el que los clientes intentan vender su servicio o están estacionados. Entonces, por lo tanto, puedes saber qué tan grande de la tasa de conversión puedes lograr con tu página de destino, porque no hay punto de probar sin fin. Si el nicho es simplemente demasiado pequeño. Una buena tasa de conversión realmente depende de tu nicho de industria, pero quieres no solo una celda sino ser rentable y tener dinero para ahorrar por la línea. Entonces por eso digo que tienes remolque. Explora ese nicho, mira lo grande que es y ve tararear cuánta posibilidad tienes fuera de vender dentro de ese nicho. Y solo asegúrate de que tu búsqueda en Google de buenas conversiones en tu industria. Si tus clientes no los conocen y tratan de alcanzar esos objetivos probando tu página de destino, porque en la mayoría de los casos los clientes simplemente se enfocan en el producto, no se enfocan demasiado en la investigación, lo creas o no. Por lo que cuando empieces a vender a través de la página web, estarán esperando algunas cosas mágicas de ti. Pero si no haces tu investigación, cuando no les muestres el potencial fuera de ese nicho en el que están si no investigaron el nicho ahí adecuadamente, entonces pasarás tu tiempo probando e iterando tu aterrizaje sin sentido página, pero no logrando nada porque simplemente no hay suficiente gente por ahí para comprar. Además, tienes que investigar ese nicho para que sepas apuntar y cómo estructurar la información en tu página de destino. Y de eso vamos a hablar a continuación. Función sobre la belleza porque simplemente no hay espacio suficiente para, por ejemplo, InTs Grady o imágenes de buen aspecto en todos los nichos del mundo. Simplemente hay espacio para esas cosas en algunos nichos y no suficiente espacio para otros, y vamos a hablar de eso en el siguiente video. 9. Función sobre la belleza: en este video, vamos a hablar de la función sobre la belleza y por qué es importante enfocarnos en la función fuera de la página de aterrizaje en lugar de lo hermoso que se ve. Por supuesto, es importante enfocarse en el diseño y hacerlo agradable a la vista para los visitantes, pero es mucho más importante enfocarse en la funcionalidad fuera de la página. Entonces les voy a mostrar algunos ejemplos realmente bien conocidos en el mundo online. Y yo voy a caminar por algunos de ellos sólo para mostrarte lo que es una buena página de aterrizaje en una buena estructura de landing page. Entonces aquí estamos, en el primer ejemplo a Shopify picas, y puedes ver de inmediato qué sí vende en línea con Shopify. que sepas que en el 1er 2do aterrizas en esta página web lo que te puede ofrecer, puedes ver el logo aquí mismo. Se puede ver lo que es se puede ver. Es de confianza por más de 100 mil negocios en todo el mundo, por lo que puedes saber que este negocio es bien conocido. Si acabas de enterarte de ello por primera vez y de inmediato, puedes ver que puedes ingresar tu dirección de correo electrónico. Inicia la prueba gratuita y puedes ver aquí mismo sin ningún gran grito requerido para ello en su prueba gratuita de árbol. Por lo que ya te están mostrando sus activos más importantes fuera de su negocio. Por lo que puedes empezar de forma gratuita. Ya puedes empezar. 800,000 personas ya están haciendo negocios con nosotros. Puedes vender online con Shopify todo en los primeros segundos de tu aterrizaje en esta página. Entonces puedes ver la imagen aquí mismo. Entonces ya lo sabes. OK, entonces esto es para sitios web así como para dispositivos móviles. Está bien, Genial. Puedo ver algunos productos aquí mismo para que pueda saber de inmediato qué puedo vender con Shopify justo como ejemplo. Y aquí mismo puedes ver algunas características más importantes que están ofreciendo en su página web. Se puede ver aquí mismo las personas que ya utilizan a su servicista pueden ver quién los está usando y aquí mismo, testimonios de clientes y una vez más, llamar al botón Acción. Empezaríamos prueba gratuita para que veas que no hay INTs Grady no hay fondos salvajes. Ahí no hay imágenes llamativas. No hay radio de fondo sólo está sonando. Desacelerando tu boca abajo. Todo es extremadamente sencillo. Todo es extremadamente sencillo. Esto se hace a través de muchos meses libres de pruebas e integraciones y encuestas a clientes y así sucesivamente . Pero como se puede ver, este sitio web no es particularmente hermoso, pero es funcional y de ahí. El punto principal fuera de la página de aterrizaje es para que sea funcional dedo del pie. Haz que funcione para tu negocio, no solo para tu negocio, sino también para tus clientes, porque cuando aterrizan aquí mismo, tienen que saberlo instantáneamente. qué se encuentra sobre qué pueden hacer en tu sitio web y cómo puede ayudarlos? Porque eso es lo más importante sobre todo, es cómo me puede ayudar como visitante visitando tu sitio web. Entonces ese es el punto principal fuera de la página de aterrizaje. A continuación tenemos Airbnb y puedes ver que es bastante diferente a Shopify. Pero puedes ver aquí mismo el punto principal fuera del sitio web ganar dinero como anfitrión de Airbnb. Entonces ya lo sabes. OK, entonces conseguí un hogar. Puedo rentar y hacer algo de dinero, y aquí mismo al instante, tienes una pregunta y tienes una respuesta y tienes dos grandes botones de llamada roja a la acción con algunos precios para atraerte a empezar. Y básicamente todo lo que ves aquí mismo. Ya te han enganchado como visitante a visitar este sitio web y a empezar a utilizar sus servicios porque eso es lo más importante. Según lo explico. Como dije, para captar la atención de los potenciales visitantes y bajarlos para leer más no hay que leer más. Todo está justo aquí. Pero si quieres ver más, ya te interesa. Y ves la imagen aquí mismo contando la historia. Entonces todo es donde necesita estar. Por lo que si te desplazas hacia abajo, puedes ver un poco más de información. Entonces ahora están explicando cuáles son sus servicios. Tienes el testimonio aquí mismo. Ya puedes ver que te tenemos cubierto. Entonces te están persuadiendo diciendo que te cogimos la espalda. Te vamos a ayudar en cada paso del camino para que puedas ver aquí mismo cómo se realizan los pagos . Simple. ¿ Cómo pueden pagarte para que tengamos un testimonio más aquí mismo. Entonces aquí mismo Tienen algunos datos. Entonces, ¿cuántos anfitriones? Hay estadías promedio y así sucesivamente sobre Airbnb. Entonces sobre ellos ¿Quiénes son? tus preguntas. Por lo que una vez más están respondiendo a tus preguntas todas en esta página, y puedes encontrar más aquí mismo, y tienes una vez más botón de empezar aquí mismo. Entonces todo es realmente sencillo. Una vez más, no hay elementos locos en esta página. No hay transiciones. Ni siquiera son un solo deslizador. Como puedes ver, todas esas imágenes son fijas. Como se puede ver, no hay ni un solo video. No hay nada en esta página, pero es realmente hola página de conversión, y está funcionando maravillas para su negocio. Entonces por eso lo están usando, porque es efectivo y no puedo confiar lo suficiente en esto. Lo más importante en el diseño de sitios web es que el sitio web sea efectivo por lo que se convierta mejor para tus clientes, por lo que les trae más leads y más clientes para su negocio. A continuación, tenemos este año, así que dirigimos es básicamente ah, software y una herramienta para negocios basados en video. Entonces te puedes imaginar YouTube pero para los negocios, y puedes ver aquí mismo lo que están haciendo. Entonces tenemos a esta mujer con la cámara para que podamos saberlo de inmediato. De acuerdo, Se trata de video se puede ver video de palabra aquí mismo. Empezar. Registro, Ver videos. Por lo que todas estas acciones de Coulter son aquí realmente simples y fáciles de navegar por el menú justo aquí en la parte superior. Y aquí mismo puedes ver lo que pueden hacer por ti para que puedan hospedar tus videos. Pueden. Podrás crear nuevos videos rápidamente y creciendo sobre sus habilidades. Por lo que tienen en profundidad guías de hacer marketing aquí mismo. Aquí puedes ver algunos clientes. Entonces, ¿quiénes eran? Sus clientes en el pasado. Y puedes ver aquí algunos videos más sobre cómo puedes empezar y eso es todo. Es realmente simple. Es realmente bastante casi básico en cierto modo. Pero todo lo que necesitas para empezar está justo aquí. Todo es realmente sencillo. Podrás navegar fácilmente por todo para que puedas ver toda la información que necesitas aquí mismo en la página principal sin necesidad de ir del dedo del pie Cualquier página externa en este momento . Solo para que puedas aprender un poco más sobre este negocio. A continuación, tenemos flujo llorado y se puede ver lo que están haciendo aquí mismo. Rompe la barrera fría construye mejores sitios web de negocios más rápido sin codificar, y puedes empezar de inmediato. Aquí puedes ver a sus clientes. Se puede ver cómo se ven algunos de sus sitios web y algunos de los elementos y aquí mismo están explicando lo que se puede hacer en algunas animaciones bonitas. Entonces este es el tipo de ruptura de la regla y esto realmente se ve bien Y ahí, incluyendo algunos videos aquí mismo. Pero una vez más, no puedes ver ningún ingrediente loco, Cualquier video de fondo ralentizando tu sitio web cualquier transiciones agresivas y animación agresiva . Todo es tan sencillo. Todo está tan claro que puedes leer fácilmente este texto contra estos antecedentes. Se pueden ver estas imágenes aquí mismo. Entonces en cada sección, todo está bien explicado para conceder dentro de la sección real para un diseñador para parecer s y e commerce para la interacción. Se puede ver a este tipo desde el domingo lo que está experimentando usando el arma y cómo está satisfecho con ella. Se puede ver aquí mismo el lanzamiento. Entonces, ¿cómo puedes lanzar este sitio web y una vez más desde famosa compañía? Este eventbrite es realmente una gran empresa, y este tipo está explicando cómo está contento con ella. Entonces una vez más tenemos ¿qué? ¿ Por qué? Y los beneficios potenciales para ti como nuevo usuario Fuera de este servicio. A continuación, tenemos crecer. Entonces una vez más, lo mismo aquí mismo. Puedes ver cómo se ve como lo que es, qué puede hacer por ti y cómo puedes beneficiarte de todo en una sola sección, ¿ verdad? Bonito y grande sobre el fondo blanco. Por lo que puedes verlo fácilmente. Escanearlo. Y aquí mismo tienen el recurso es y lo que pueden hacer por ti. Y una vez más, tienes a los clientes anteriores aquí mismo así como agradable. Big get start bottom. Entonces una vez más lo tienes aquí y lo tienes aquí para que puedas ver que no hay informaciones extra . Por ejemplo, ¿cómo puedo compilar mi frío? ¿ Cómo puedo exportar mis imágenes? ¿ Cómo puedo hacer esto? ¿ Cómo puede y hacer eso? Todo está dentro de la página web. Pero la información más importante está aquí mismo en la página principal para que puedas empezar y aprender más más adelante cuando necesites aprender más información. Y finalmente tenemos pruebas de usuario para que puedas tener grandes experiencias de cliente y empiezan con humanos adentro. Por lo que esta herramienta es para las pruebas del usuario, y se puede ver que están usando algunos elementos realmente frescos, limpios, de aspecto moderno aquí en segundo plano. Puedes ver algunas acciones de Coulter aquí mismo. Cualquiera para hit aquí mismo para ocultarlo. Se puede ver que la navegación es realmente agradable y clara. Se pueden ver estas bajadas. Qué bonito Early. Están dispuestas. Se puede ver alguna llamada a acciones. Aquí mismo. Todo se explica aquí mismo. Entonces, ¿qué? Hacemos un poco más sobre lo que hacemos, y puedes probarnos. Y tenemos tres botones de dirección llamados. Aquí mismo. Se puede ver la demo y se puede ver el video fuera del servicio. Se puede ver a los clientes anteriores cómo funciona. Aquí está el problema que usted, como visitante, podría estar teniendo. Y aquí está la solución para tu problema. Y aquí mismo tienen todos sus beneficios. Entonces si quieres una solución para tu problema, aquí te presentamos los beneficios que te ayudarán a resolver tu problema y hacer crecer aún más tu negocio . Quiénes son los socios de estos negocios aquí. Tenemos algunos buenos testimonios grandes para este negocio. Podrás aprender más y tener más. El recurso es y se puede ver este fondo nos está siguiendo mientras nos estamos desplazando hacia abajo. Y una vez más tienes solicitud de juicio aquí mismo. Y puedes ver esta foto tiene toda una información relevante la cual no está incluida. Perforación de estas páginas de destino o desplácese hacia abajo. Pero si quieres conocer más sobre alguno de esos detalles, lo puedes encontrar aquí en el padre porque de eso se trata Fuller. Entonces espero que disfruten de estos ejemplos y espero que tengas lo que intentaba decirte. El diseño es realmente importante y nosotros como diseñadores, estamos tratando de empujar nuestras ideas hacia adelante a los clientes. Pero hay que entenderlo cuando se trata de un sitio web, especialmente las páginas de aterrizaje. La conversión es lo que importa y explicar la información que tienes que explicar de la manera más corta posible, sin dejar de mantenerla realmente simple y fácil para tus usuarios navegar y entender a qué estás tratando de transmitir ellos y lo que intentas explicarles. Entonces en el siguiente video, voy a hablar de algunos elementos de estructura de la página de aterrizaje cómo debes estructurar tus páginas de aterrizaje Y cuáles son los mejores elementos para usar a la hora de estructurar tus landing pages te salsa ahí. 10. Estructura de la página de Landing: en este video, vamos a hablar de la estructura de la página de aterrizaje y que fuera de los elementos debes usar cuando estés estructurando tu página de destino. Entonces lo primero es lo primero, puedes empezar con el titular y el titular es su dedo del pie. Explica tu servicio o tu oferta. Y el tagline está ahí para explicar más a fondo lo que no se puede poner dentro del titular. Entonces esto es para captar su atención. Esto es para explicar más la atención detrás de su producto o servicio y llamar a la acción. ¿ Hay para cerrar el trato? Entonces, como viste en el video anterior en los ejemplos que te mostré, gente está poniendo el llamado a la acción aquí mismo en el área de navegación. Pero puedes ponerlo justo aquí, por ejemplo. Puedes ponerlo justo aquí en medio. De verdad depende de ti y del diseño fuera de tu página. Por lo general hay una imagen acompañada con el titular y el tagline. Si recuerdas del ejemplo de Airbnb que te mostré, están usando la misma imagen del dedo de una empresa, lo que están diciendo aquí mismo en el titular y el tagline. Cada vez más personas prefieren poner un video aquí mismo, así que ya sea en un sitio o por debajo o por detrás. Pero el video está ahí porque puede explicar información que hay que explicar mucho mejor y luego simplemente una imagen Así que el video puede estar fuera de un producto o un servicio o personas explicando el producto o pedido de servicio cliente explicando eso a su clientes potenciales. Y por eso el video es mucho más efectivo, porque la gente está viendo más videos que simplemente mirar imágenes debajo de eso. Nuestros principales beneficios para ti, para ti como visitante por primera vez visitante fuera de este sitio web. Entonces, ¿qué beneficios podemos ofrecerte como visitante que puedan mejorar aún más tu vida, tu negocio o lo que sea que estés ofreciendo para servirlos? Siguiente arriba? Tenemos prueba social, que está ahí para demostrar lo que estás diciendo en los apartados anteriores. Por lo que tienes que demostrar que en la forma off video testimonial video básicamente fuera de tus clientes anteriores diciendo lo bueno que es tu producto o servicio, o una cotización de tu cliente anterior, y esto está aquí solo para hacer cumplir el intención detrás de atraer al cliente potencial o cliente hacia su producto o un servicio. A continuación, tienes que explicar el problema que podrían estar teniendo y la solución que estás ofreciendo y el problema, Por ejemplo, en nuestro caso y en el caso fuera de nuestro cliente, él está encontrando dónde estás va a quedarse en mansedumbre, así que ese es el problema. Y la solución que estamos ofreciendo es nuestro hotel boutique, porque así y así y va a ayudar a resolver tu problema a continuación. Es bueno si tienes una prueba social más justo ahí dentro. Pero si solo tienes uno justo aquí, es bueno porque realmente depende de ti. Tu maquetación de Nietzsche y la industria o cliente está en cuántas pruebas sociales vas a incluir, porque a veces demasiadas pruebas sociales no se convierten tan bien, así que hay que incluir al menos una. Pero si puedes, es bueno si puedes incluir muchos más, porque realmente puede ayudar a convertir su potencial prospecto en remolque. Cliente Siguiente arriba. Cuando haya explicado su problema, explique su solución. Demuestra que puedes resolver ese problema que podrían estar teniendo. Es importante que muestres tus características, para que características que estás ofreciendo que consulten su problema y sean la solución para su problema a continuación, tenemos argumento de cierre. Entonces con este argumento de cierre , puede ser una declaración. Puede ser otra prueba. Entonces, por ejemplo, en nuestro caso, puede ser una buena vista a las playas y lindos precios lloriqueando, cenar, experimentar algo así solo para cerrar esa venta y para cerrar ese argumento para que ellos te recogeré al final del día. A continuación, tenemos un formulario que es ya sea un formulario de pedido o un formulario de contacto para que las personas puedan contactarte fácilmente . Por ejemplo, en nuestro caso, queremos que reserven a través de nuestra página de aterrizaje. Por lo que tenemos una forma agradable, sencilla, fácil de seguir, fácil de seguir, fácil de usar. Pueden llenar y ponerse en contacto con nosotros para que puedan reservar su estancia en nuestro hotel. Y finalmente hemos llamado a la acción, que puede estar dentro de esta forma o de lado. Igual que aquí mismo. Y el llamado a la acción es convertirlos finalmente de ah potencial prospecto en remolque. Un cliente, cuando finalmente se explica en los videos anteriores en el ya te fuera de las páginas de aterrizaje más increíbles por ahí es la carpeta y la carpeta es realmente importante porque toda la información que no necesitas estar justo aquí en la página de aterrizaje irá al interior del padre justo aquí abajo. Y si necesitan alguna información que no pueden encontrar aquí mismo, pueden encontrar aquí mismo. Por lo que te puedes imaginar, tal vez quieran aprender más sobre. ¿ Tienes caja fuerte en la habitación? Entonces tal vez tengan algunos objetos de valor, como oro o dinero o laptop o algo así, y quieren dejarlo dentro de la caja fuerte. No pondrás esa información aquí mismo porque no es demasiado relevante, Pero puedes ponerla dentro del pie donde puedes crear, por ejemplo, por ejemplo, sección F A Q donde tienes todas las preguntas más importantes que podrían estar escuchando contestó por ellos para que puedan dar click ahí mismo y luego conocer más sobre esa información en esa página específica de F A Q. No en esta página de destino, porque una vez más las páginas de aterrizaje ahí para vender el servicio o un producto que estás ofreciendo y respondió las preguntas más importantes. Y para todas las demás preguntas podrían estar teniendo F a Q sección es su formulario de contacto. Es que puede haber chat en vivo es sus páginas de redes sociales. ¿ Hay tantas otras formas en las que pueden ponerse en contacto contigo y conocer más sobre ellas antes de que se conviertan en tu cliente o en tu cliente? En el siguiente video, voy a mostrar lo que puedes considerar a la hora de diseñar landing pages para tus clientes, para una mejor optimización y mejor conversión, así que te veré ahí. 11. Qué considerar: aquí solo algunas cosas que debes tener en cuenta al crear una página de destino. Por lo que los usuarios estructurados para los humanos porque los humanos son los que están buscando y leyendo a través de tu página de aterrizaje. Por lo tanto, no solo tires algunos elementos a la página para que se vea bonita. Hacerlo estructurado. Entonces cuando la gente está leyendo a través de tu página de aterrizaje para que entiendan lo que estás ofreciendo, lo que estás tratando de decirles lo que estás tratando de mostrarles para que disfruten viendo tu página de destino. Entonces no se trata sólo de un aspecto agradable. El diseño es más sobre la estructura, así que guídalos a través de todo el proceso, todo el pensamiento detrás de la página de aterrizaje para que entiendan. Y lo más importante de todo es convertir mejor cuando hay una buena estructura ahí . Entonces dondequiera que tengas el texto, hazlo agradable, legible, hazlo limpio contra los fondos. Sea lo que sea que tengas imágenes las convierten en imágenes. Estás tratando de contar una historia no sólo con algunas imágenes aleatorias como un te mostró al principio de este curso, así que haz que las imágenes destaquen. Si tienes un video, asegúrate de que cuente la historia fuera de la sección fuera de la página de aterrizaje que están visitando en este momento, no solo algún video aleatorio. Entonces, por ejemplo, si estás hablando de beneficios, asegúrate de que si tienes un video que el video sea sobre los beneficios, no sobre la empresa, no sobre el producto y demás. Se acabó, pero específicamente por los beneficios que estás tratando de decirles. Así que camina por toda la estructura y hazlo así para los humanos, no solo arroja algunos elementos A al azar en la página. Creo que hay que considerar es la velocidad de carga porque los navegadores web, especialmente Google, y ser amor la velocidad de carga. Por lo que los elementos más innecesarios que puedes deshacerte se deshacen porque eso mejorará las velocidades de retención. También usan teléfonos web porque las armas están optimizadas para las imágenes de uso Web, las cuales están optimizadas. Y ese es el siguiente punto que trato de decirte es la optimización de imagen. Si no necesitas usar imágenes enormes, no las uses aunque estés usando en, solo asegúrate de optimizarlas por delante antes de tirarlas al diseño, y luego más tarde o envíalas a los desarrolladores porque si las imágenes son optimizado, cargará el sitio más rápido, y Google y otros motores de búsqueda te encantarán por ello porque las personas con conexiones a Internet más lentas van a cargar el sitio mucho más rápido, llegar a la información que necesitan mucho más rápido que si las imágenes no están optimizadas y simplemente están esperando que se carguen para siempre. Y van a salir de tu página web eventualmente. A continuación, hemos llamado a botones de acción. Entonces como explicamos en este y en el apartado anterior, llamado a la acción, los botones son realmente importantes. Así que asegúrate de colocarlos en los lugares correctos. Y te voy a mostrar que cuando empezamos a diseñar nuestra página web y puedes volver atrás y ver los buenos ejemplos que te mostré antes para que veas que no tienen como 20 porras rusas frías diferentes. Tienen dos o tres, pero posicionarlos lugares estratégicos de la industria. Entonces, cuando la gente está visitando el sitio web, sabe qué hacer y sabe cuándo y dónde tomar acción y finalmente echa un vistazo al recurso proporcionado es así al final. Fuera del curso, se puede ver el video sobre enlaces y recurso está en este curso y en el mismo. Te voy a mostrar algunas lecturas más sobre las páginas de aterrizaje. Acerca de algún buen recurso es cuando puedes aprender aún más si quieres sobre la conversión, sobre diferentes elementos que puedes poner en las páginas de destino sobre buenos ejemplos y así sucesivamente hasta ahora. Y también puedes descargar eso en los archivos del proyecto y en el ayuno para el discurso, que puedas explorarlo más allá si quieres. En la siguiente sección fuera del curso, vamos a empezar con el proceso de diseño. Vamos a hacer algo de planeación, inspiración, inspiración, pizarras de humor, bocetos y así sucesivamente. Por lo que por fin vamos a empezar a diseñar nuestro sitio web y ya voy a ver. 12. Planificación: Ahora hablemos de la planeación fuera de nuestro proyecto. Vamos a empezar con la navegación, luego pasar a la sección de héroes. Y como expliqué en los videos anteriores en la sección anterior de este curso, vas a estructurar nuestros botones de llamada a la acción en consecuencia. Entonces tal vez pongamos uno en el de navegación en sección de héroes solo para que podamos encender acción de inmediato. A continuación, abajo de la página, vamos a pasar a las principales características, y vas a explicar cómo nuestro hotel es mejor que el resto de los hoteles de la zona . De lo que les podemos ofrecer a continuación. Vamos a seguir adelante con el testimonio y explicar desde el punto de vista de un cliente lo que experimentó y duro. Les gustó hospedarse en nuestro hotel, y después de eso va la oferta principal. Por lo que estás tratando de persuadirlos después del testimonio, para pasar a la oferta principal. A continuación, tenemos golfistas de apoyo que están ahí solo para apoyar nuestra oferta principal, y voy a explicar que una vez que empecemos a diseñar y una vez que empecemos a enmarcar alambre a continuación tenemos actividades que están ahí solo para apoyar a main y oferta de apoyo por lo que principal oferta está ahí para atraerlos. Las ofertas de apoyo están ahí para persuadirlas, y si las ofertas de apoyo fallan, las actividades están ahí. Por lo que cuanto más divertidas sean las actividades con respecto a nuestros visitantes, más posibilidades hay de que se conviertan y vengan a hospedarse en nuestro hotel. Y después de eso tenemos formulario de reserva Richards ahí obviamente para hacerlos reservar, quédate en nuestro hotel. Y finalmente tenemos formulario de newsletter, que está ahí si les interesa. Pero entonces no van a reservar ahora mismo para atrapar su dirección de correo electrónico para que podamos empezar enviarles correos promocionales y atraerlos a reservar una Estancia con nosotros así porque tal vez alguien está visitando nuestra página de hotel fuera de temporada. A lo mejor quieren venir y quedarse en 6 a 9 meses o algo así. Por lo que el formulario del boletín está ahí solo para mantenerlos interesados, mantenerlos calientes y frescos para nuestro hotel, y seguir recordándoles sobre la reserva y sobre ciertos descuentos, por ejemplo, y cosas por el estilo. Por último, en la parte inferior, tenemos un pie de página que, como se explicó anteriormente, va a contener toda la información necesaria, que no se incluyen en la propia página de aterrizaje para que puedan dar click en los enlaces en el pie de página y acceder a esa información ahí en el siguiente video. Vamos a pasar a la inspiración, y te voy a mostrar cómo puedes inspirarte usando diferentes ejemplos de Internet que vamos a Es ser latas y tal vez regate y tal vez mirar algunas imágenes sólo para que podamos ¿quitarle la idea? Cómo se puede ver Page, así que te veré ahí. 13. Inspiración: en este video. Quiero mostrarles algunas páginas de inspiración que encontré tanto en balizas dribble como algunas imágenes que ayudarán a servir el propósito fuera, inspirándonos para los colores y para las imágenes. Porque vamos a utilizar imágenes gratuitas para este proyecto. Y más tarde, cuando el fotógrafo esté listo con sus imágenes, nos lo van a enviar. Y vamos a incluir eso en el archivo de entrega final cuando realmente enviemos estos archivos al cliente. Pero ahora empecemos y acabo de encontrar estas plantillas aleatorias y quiero mostrarles esta se llama Tripping to y Agencia de Viajes Template. Pero quiero mostrarles estas tarjetas son realmente como están dispuestas ahí fuera realmente simples. Son realmente fáciles de escanear, realmente fáciles de entender. Puedes justo aquí en ellos a tus favoritos si quieres, pero me gusta mucho cómo se muestran estas críticas, cómo están realmente limpias en casa, muchos tours, por ejemplo, ahí en Australia justo aquí. Me gustan mucho estos una vez, así que son realmente limpios, sencillos, fáciles de entender. Fácil de leer. Realmente se puede ver justo aquí básicamente Acaban de agregar las banderas y realmente aparece en la página justo aquí. Se puede ver cómo están estructurados, por lo que es realmente fácil de entender. Es realmente fácil de escanear, y van muy bien con estas sombras de fondo sobre fondo blanco, y creo que lo hará. Realmente se verá bien en nuestro diseño. A continuación, voy a pasar a esta flecha aérea reserva de vuelo eres tú x template y voy a seguir adelante abajo solo un poco y puedes ver justo aquí. Me gusta mucho cómo va este gran texto en contra de las imágenes. Quizás, tal vez ponga alguna bonita, sutil superposición de color aquí y con algunos iconos. De verdad va bien con esto. Mira, si me desplaza todo el camino hacia abajo, puedes ver cómo se ve. Entonces tenemos unasanimaciones muy bonitas y sutiles, animaciones muy bonitas y sutiles, y como puedes ver, está realmente limpio. Simple. Están usando algunos colores neutros, y el texto es realmente muy bien legible, bien espaciado uniformemente colocado en la página. Me gusta mucho cómo se ve eso. Y como se puede ver en estas plantillas de animación, es realmente fácil de navegar. Es realmente fácil hacer click Y, como puedes ver, espacio en blanco está ahí en, ah, grande. A continuación tenemos esta reserva com, un concepto de rediseño, y para este, me gusta mucho esta página. Entonces, por ejemplo, cuando quieres reservar, puedes ver cómo se ve. Y es realmente fácil y simple, y realmente me gustan estas tarjetas aquí mismo, y quizás podamos usar un tipo de diseño similar para nuestras ofertas de apoyo. Entonces, por ejemplo, qué pueden hacer en Mykonos una vez que se alojen en nuestro hotel, me gusta mucho cómo se ven, y realmente podemos mostrarles y, por ejemplo, en la ubicación para que puedan haga clic si están buscando en la computadora de escritorio o utilizando sus dispositivos móviles. Por lo que teléfono móvil o tableta, después pueden hacer clic en esta ubicación y ver dónde está la ubicación adyacente al hotel para que realmente puedan entender lo lejos que está y lo caro o barato que es. Y se puede ver desorden, por ejemplo. Me gusta mucho cómo parece que está realmente espaciado uniformemente, tiene toda la información importante ahí, y se puede ver que escala bien en el teléfono móvil también. Y finalmente tenemos regate. Entonces si hago clic en este, por ejemplo, me gusta mucho este último esmerilado luzco realmente como todo está limpio, fácilmente espaciado. Me gusta esta sombra de fondo en estos botones que se verá bonita y limpia y realmente destacan en la página. Si me desplaza un poco hacia abajo, por ejemplo, en este, éste es uno que acabamos de mirar, y se puede ver la animación aquí mismo. Cómo se ve, así que es el dedo del pie realmente limpio. Encuentra tus ubicaciones, y una vez que lo hagas, puedes ver que es realmente fácil de leer. Es realmente fácil para el espectador encontrar la información que necesita, y puede hacer clic a lo que necesite en la página. Y si hago clic en este, por ejemplo, se puede ver exactamente lo mismo. Es realmente fácil de leer en la página. Como se puede ver, realmente se puede desollar fácilmente lo que es todo, y realmente se ve bonito y limpio. Y por último, quiero mostrarte algunas imágenes de un chapoteo porque el hotel está junto al mar y puedes encontrar alguna inspiración para los colores, por ejemplo, en estas imágenes, que puedas ver claramente mucho acero. Ah, mucho apagado sopló mucho verde en los árboles. A lo mejor poner algo de gracia ligera para el concreto, por ejemplo. Y realmente se puede ver ex sobre todo aquí, porque esto es en Grecia, se pueden ver estos colores azules y este color blanco, por ejemplo, de este verde. Va muy bien con nuestros proyectos. Por lo que estas imágenes están justo ahí para nuestra inspiración. vamos a usar en nuestro proyecto, y me voy de pie, te daré todas las imágenes para que las puedas usar cuando empieces a diseñar por ti mismo en los archivos de práctica. Y te voy a mostrar la estructura de archivos de práctica cuando lleguemos a diseñar parte fuera de este curso. Entonces eso es básicamente todo por la inspiración. Parte es, puedes ver que no vamos a usar específicamente ningún elemento que hayas visto en estos ejemplos. Solo quería mostrarte cómo cuando espacias estos elementos contra el fondo blanco , es realmente fácil de leer, y puedes navegar fácilmente entre las secciones y puedes encontrar claramente lo que eres buscando cuando solo incluir un poco más de información en, en lugar de solo una sola imagen con texto en ella, como te mostré en la competencia. Ejemplo. Videos En el siguiente video, vamos a saltar y empezar a diseñar nuestros tableros de humor, y nos vamos a inspirar para los colores potenciales, la posible topografía. Y les voy a mostrar cómo se ve su logotipo por ahora porque dicen que lo van a cambiar en el futuro. Pero por ahora, tenemos que lidiar con ello, y les voy a mostrar cómo van todos esos elementos cuando creen tablero de humor, así que nos vemos ahí. 14. Junta de inspiración: Empecemos a diseñar nuestro tablero de ánimo cualquiera para saltar al recurso es titular. Esto es lo que tenemos por ahora, pero serán muchos más recursos para el final de los puntajes. Por lo que simplemente saltaré y abriré este archivo de logotipo. Simplemente ábrelo en adobe Eggs D Y una vez que esté abierto, puedo ampliarlo así Y puedo saltar rápidamente aquí mismo a la herramienta del mundo del arte y tal vez crear este 1920 por 10 80. No escuches del todo el tecleado de estado de ánimo porque queremos crear rápidamente un tablero de humor. Puedo usar la herramienta de rectángulo y dibujar dos rectángulos. Entonces tal vez algo como esto puede ser sí, y luego usó la repetición gran futuro. Simplemente dibuja para llorar como así y dos más que como tal tal tal vez pueda aumentar en el espacio entre ellos tal vez todavía algo así, O tal vez incluso dibujarlos un poco más cerca, luego golpear en grupo grande y luego agrandar todos ellos . Entonces, por ejemplo, igual que tal vez los reduzca pero desactive el redimensionamiento de respuesta para que puedan escalar así controlar g para agruparlos así, alinearlos y luego simplemente haga clic derecho y en grupo. O puedes cambiar control G o shift commander si estás en un Mac y estas serán nuestras imágenes, y simplemente voy a incluir algunas imágenes ahora, puedes hacer esto con la repetición. Gran función encendida, y es más fácil de esa manera. Pero realmente no importa para mí, porque a veces me gusta hacer las cosas de esta manera o de esa manera, así que puedes incluir muchas todas estas imágenes a la vez. Una vez que creaste la cuadrícula de repetición, simplemente dibuja. Coloca esas imágenes dentro de violar genial, y se poblará. Pero a veces quieres hacerlo así porque si dibujas solo una imagen y quieres ver cómo se ve en una de estas cajas, es repoblada. Entero. Repito, genial. Y luego tienes que ir un 2do 13141 Así que uno Así que realmente depende de ti cómo quieres dedo del pie crear tus imágenes, pero en realidad no es gran cosa. No obstante puedes crearlos. Y si crees que algunas de ellas no están posicionadas correctamente, por ejemplo, esta siempre puedes hacer doble clic y puedes escalarla, por ejemplo, si quieres, que puedas reposicionarla como Así vamos digamos ahora, vamos a crear nuestros colores. Entonces yo voy a hacer lo mismo. Se repite genial. A lo mejor crear seis como este. Entonces puedo aumentar el espaciado a algún lugar por aquí, tal vez en la cuadrícula grupal. Entonces eso es básicamente todo para nuestros colores. Y tal vez podamos partir de la muñeca oscura. A mí me gusta hacer eso. Entonces tal vez este es nuestro esculler más oscuro. A lo mejor puede ser por nuestros botones de llamada a la acción. lo mejor podemos seleccionar, luego un poco un color más claro. O tal vez incluso podamos elegir este. A mí me gusta cómo se ve con primero. Quitémosle fronteras a todos ellos porque me parecen molestos. A lo mejor podemos seleccionar este color azul, por ejemplo. Se ve bien. Entonces tal vez podamos seleccionar este color concreto como éste. A lo mejor podemos usar este. Y por último, para este, elegamos esto. A lo mejor podemos cambiarlos para que esto pueda ser esto y este podría ser nuestro color concreto. Entonces tal vez como, No, esto es demasiado oscuro. A lo mejor en algún lugar por aquí. Sí, me gusta cómo se ve eso. Entonces, básicamente, así es como te acercas a tus colores. Estos son una vez más simplemente para inspirarte y ver con qué tipo de colores estás trabajando es que puedes ver que tenemos este color crema aquí mismo en este poder estelar. Este blanco no es completamente blanco, pero también es una especie de crema. Tienes todas estas texturas marrones. Como se puede ver, las rocas no son todas blancas, y el cielo está muy bien en bonito y azul justo aquí. realmente puedas jugar con estos colores y explorar todo lo que quieras. Entonces sigamos adelante y controlemos. Ver con este control de logotipo. Nosotros justo aquí por alguna razón, no tenía sabor y logotipo completo, así que vamos a seleccionar el control. Control G control C. Estar justo aquí. Por lo que los agrupo con el control G y ahora lo basté con control. Nosotros, como pueden ver, este es su logotipo. No es nada especial, y dijeron que se van de pie. Rediseñarlo una vez que creemos nuestra página web. Y ahora por fin, vamos a incluir algún texto. Así que comprimí e click En algún lugar por aquí, tal vez podamos usar esto está en titular Vamos a parecer controlar a Tal vez pueda aumentarlo a, por ejemplo, 48. Por lo que es realmente bonito y grande. A lo mejor podemos usar el sentido abierto. Es fácilmente legible. A lo mejor podemos usar perno extra. No, está demasiado oscuro. Puede ser audaz. Sí, así parece. Y tal vez podamos posicionar, como, así controlar de para que puedas hacer un lugar de copia. Es tal vez algo así como aquí. A lo mejor puedes usar 18 o tal vez hasta 20. De acuerdo, vamos a usar un regular, y puedes hacer clic aquí para convertirlo desde el punto X de la zona del dedo del pie texto, y luego puedes arrastrar nuestra zona que quieras incluir Así, por ejemplo, por ejemplo, en algún lugar alrededor de aquí está bueno, y luego con él seleccionado, puedes venir al tapón en la columna vertebral, y puedes usar muchos regalos y bloguear. Si no lo instalaste, simplemente puedes hacer clic aquí y buscar aquí mismo el ipsum a largo plazo. Cuando lo encuentres, simplemente puedes presionar este botón instalado y se instalará, y una vez que lo hagas, luego puedes hacer clic en él. Haga clic en sentir el texto de marcador de posición escalofríos, que están en lo que desea haga clic en insertar texto y se insertará ese texto de marcador de posición en el área que seleccionó. Si crees que esto es demasiado grande, condenas experimento con él y ves cómo funcionan los diferentes tamaños en este texto de párrafo . Pero creo que se ve bien, y tal vez podamos seleccionar este color para los titulares. Está demasiado oscuro, pero podemos jugar con él más adelante una vez que empecemos a explorar nuestros colores y empecemos a diseñar nuestro sitio web. Pero eso es básicamente todo. Puedes incluir algunas otras cosas aquí mismo. Entonces, por ejemplo, fotos del hotel, fotos reales del hotel, puedes colocarlas ahí. Se pueden poner imágenes de las actividades y así sucesivamente un software. Pero esto es solo para nosotros para que podamos echar un vistazo o cómo va a funcionar todo en la página. lo mejor podemos crear un botón sólidos hacer que rápidamente a la herramienta de rectángulo alinear así. Entonces tal vez podamos usar no lo sé, 25 con 60 cualquier cosa que se vea bien y porque podemos teclear cinco o no, usemos cinco aquí. Quitemos la frontera. Usemos este color de sensación, por ejemplo. A lo mejor podemos usar ocho solo para ponernos un poco más alrededor de los botones de control D en este párrafo, girando el dedo del pie texto puntual y luego simplemente moverlo hacia abajo. Voy a escribir, por ejemplo, leer más. Ponlo en el medio. Al igual que así, colóquelo dentro de nuestro botón, como tan selecto. El cuento puede golpear a estos dos para que quede perfectamente en el centro. A ver qué es justo aquí. Y para el texto leer más, podemos convertirlo en blanco, así que simplemente haga clic aquí. Y si haces zoom, puedes ver claramente que ese es el botón. Cualquier presunción mucho más cerca. Se puede leer con claridad, por lo que este color ya funciona bastante bien. A lo mejor podemos incluso elegir este. A ver cómo funciona eso. Pero a mí me gusta un poco más este, así que básicamente eso es todo para este movimiento o proceso. Como dije, se puede ir en profundidad con ello. Puedes incluir tantos elementos como quieras. Puedes incluir algunos elementos como quieras, porque esto es básicamente solo para tu exploración personal, que puedas ver qué elementos funcionan bien en la página. ¿ Qué no va bien qué colores con otros colores, por ejemplo, puedes explorar diferentes tipos de letra y averiguar qué texto funciona bien. Pero porque esta es una fuente gratuita que estábamos usando. Por lo que es sentido abierto, y lo puedes encontrar en los teléfonos Google así como en las fuentes adobe y nuestro enlace las para que puedas descargarlas en un archivo realmente pdf. En el recurso está el video al final de las partituras, para que puedas conocer más sobre las que puedes descargar tantos teléfonos es. Quieres un Explorer, por supuesto, y puedes seguir estas imágenes si quieres un Explorer con diferentes tonos, diferentes posiciones de estas imágenes. Entonces, por ejemplo, puedes voltear algunos de ellos y así sucesivamente y así sucesivamente. Pero este movimiento o procesa solo para ti para que puedas mejorar. Echa un vistazo a cómo se verá tu proyecto una vez que realmente empieces a diseñarlo. Y esto en realidad te cortará la camisa de trabajo. Porque cuando terminas este pequeño tablero y simplemente puedes hacer click justo aquí, golpear control E. Y con exportarnos su saldo electo, puedes seleccionar justo aquí. Ocho a. PNG pdf para Jay Peak y puedes exportarlo dedo del pie, que son la ubicación que quieras y luego en realidad enviarlo a responder int para que puedan repasarlo y ver. De acuerdo, me gusta este color. No me gusta este color. Esto está funcionando. Esto no está funcionando. Cambiemos. hendiduras diurnas incluyen eso. Y justo en este proceso de abordaje de humor, puedes acortar tu trabajo más adelante cuando llegue el momento de las revisiones. Porque obtienes los colores correctos por primera vez. Y entonces realmente se puede aumentar la velocidad con la que se está trabajando en este proyecto más adelante , a la hora de revisiones. Entonces eso es todo para este video. En el siguiente video, vamos a empezar con bosquejos, y te voy a mostrar cómo puedes bosquejar algunas ideas que tienes justo en el papel antes de que realmente empieces a trabajar en los marcos de alambre. Entonces te veré allí 15. cómo hacer bocetos;: en este video. Yo quiero hablar de bocetos porque atrapar es importante en el proceso de diseño porque te da esa libertad que puedes usar cuando comienzas a bosquejar sobre papel porque puedes desechar fácilmente el papel, tirarlo a la basura, empezar de nuevo, incluir algunos elementos diferentes. Prueba algunas ideas hacia fuera. Ve qué funciona, qué no con tu diseño. Y luego puedes probar esas ideas que tienes en el papel dentro de la b x D. Así que aquí mismo simplemente dibujo de elementos a la página, y te voy a mostrar lo que se me ocurrió. Entonces déjame acercarme un poco más. Se puede ver justo aquí en la parte superior. Tenemos navegación simplemente básica y sencilla, fácil de usar, y vamos a utilizar el menú desplegable aquí mismo, por ejemplo, por ejemplo, para las ofertas o para la habitación para que puedan navegar fácilmente desde aquí. Vamos a ver una vez que empecemos el encuadre de alambre. A continuación, tenemos llamado a la acción fondo, lo cual fue realmente claro, bonito y grande para que puedan reservar su estado desde aquí mismo. Debajo de eso, tenemos la imagen de héroe y el área de héroes. Tenemos una bonita llamada de subtítulos de título grande a Action Button e Hero Image y vamos a ver cómo va a quedar esta imagen de héroe y cómo la vamos a incorporar a nuestro diseño una vez que empecemos a diseñar. Pero es realmente importante explicar todo aquí mismo. Por lo que no tienen que buscar ninguna otra información cuando aterrizan en ah homepage porque todo se explica aquí mismo. Debajo de eso, contamos con las principales características del hotel. Entonces tal vez vamos a explicar la ubicación donde todo años y voy a platicar con el dedo del pie del cliente, recoger algunas características principales que vamos a poner aquí mismo. Por lo que esto sólo se enganchan para desplazarse hacia abajo y para conocer más sobre nuestro hotel a continuación que vamos a tener testimonio del cliente anterior que se va del dedo del pie. Dile a todos lo encantados que estaban con estancia en este lugar y vamos a poner libro ahora, llama al botón de acción aquí mismo para que puedan reservar aquí mismo. Debajo de eso, hemos hecho oferta, que son las habitaciones, básicamente. Entonces vamos a poner las habitaciones y poner algo de información básica aquí mismo, y vamos a haber aprendido más para que puedan aprender más sobre un tipo particular de habitaciones cuando hagan clic ahí mismo, y los llevará a la página de la habitación más tarde. Pero esto es solo para mostrarles qué habitaciones son, para que puedan escoger cuáles son habitación que quieren y aprender más al respecto directamente en la página principal. Debajo de eso, vamos a tener algunas características más del hotel. Entonces vamos a explicar, por ejemplo, en su patio vamos a explicar los terroristas es que tienen. Vamos a explicar el restaurante y alguien, pero estas son características de apoyo a la característica principal y oferta principal, que son las habitaciones, porque cuando eligieron las habitaciones, eso es lo que van a conseguir, dependiendo de qué habitación obtengan. Obviamente por debajo de eso, tenemos actividades cercanas. Entonces como pueden ver, no dibujé eso porque me quedé sin espacio. Pero eso es algo que tenía en mente cuando estaba diseñando este dibujo cuando estaba dibujando sobre El papel es que voy a incluir ofertas principales así como unas ofertas de apoyo. Entonces si no se les unen las habitaciones, pueden ver aquí mismo qué están consiguiendo con cada una de las habitaciones, por ejemplo. Y eso podría influir en su opinión fuera de hospedarse en este hotel por debajo de que tenemos actividades cercanas . Entonces si no están persuadidos por las habitaciones de apoyo a las ofertas, tienen actividades cercanas, para que puedan conocer más sobre esas actividades. Y voy a incluir algunos elementos en el diseño, como les mostré en los ejemplos de balizas, por ejemplo. Entonces vamos a ver qué tan lejos está del hotel. Van a poder navegar directamente desde su computadora solo para ver qué tan lejos está y el rango de precios para esa oferta en particular, por ejemplo. Y vamos a tener esto como un slider y ahí se fue a poder usar eso y solo ver nombre de actividad algún texto básico, tal vez lo que puedan hacer y justo aquí, bonita imagen grande, que va a ser un slider básicamente para que puedan deslizarse a la izquierda y a la derecha y ver diferentes actividades por debajo de eso. Vamos a tener el formulario de reserva que va a escribir, por ejemplo, ahorrar hasta un 40% al reservar con nosotros. A continuación, tenemos texto de apoyo y llamada al Botón de Acción, y este formulario de reserva de contactos va a contener toda la información relevante que van a ingresar si quieren reservar su estancia con este hotel. Y finalmente vamos a tener el boletín de noticias inscrito. Entonces, como se explicó en los videos anteriores, si no quieren reservar en este momento, Entonces por ejemplo, es el final de la temporada. Acaban de aterrizar en esta página web en diciembre. Quieren ir a sus vacaciones en junio, por ejemplo, así que realmente es demasiado lejos para que reserven. Simplemente van a dejar su dirección de correo electrónico aquí mismo en el registro de newsletter , y nosotros los vamos a enviar. Los correos electrónicos promocionales iban a enviarles historias, por ejemplo, sólo para mantenerlos interesados. Los mantengo enganchados para este hotel para que puedan reservar cuando necesiten reservar y finalmente en la parte inferior vamos a incluir una foto y carpeta va a incluir toda la información relevante la cual no está incluida en la propia página de aterrizaje. Por lo que cuando quieran aprender más sobre cada uno de estos componentes que quieran, pueden bajar a por y encontrar toda esa información ahí. Por último, vamos a incluir iconos de redes sociales. Por ejemplo, vamos a incluir un número de teléfono, dirección de correo electrónico, el contacto de toma si no usaron el libro con nosotros para y todo fuera de los otros enlaces relevantes , Entonces eso es básicamente todo. Para la parte de dibujo, puedes ser un específico como quieras o tan áspero como quieras. Con esta parte, normalmente no compartes esto con tu cliente. Esto es básicamente solo para ti para que puedas tener alguna estructura básica que luego puedas importar y empezar a trabajar dentro de Adobe X'd. Entonces es realmente un proceso importante, un paso importante en el proceso de diseño, porque realmente se pueden explorar diferentes ideas y poner cosas diferentes en el papel y simplemente realmente trabajar para ver qué funciona, qué hace 't y luego incluir todo eso dentro de su proceso de encuadre de alambre. En la siguiente parte del curso, vamos a empezar con el encuadre de alambre, y vamos a convertir estos bocetos en remolque marcos de alambre realmente de alta fidelidad y más adelante en diseños de remolque, que vamos a compartir con nuestro cliente. Entonces te veré allí 16. Preparación de archivos: en esta parte del curso, vamos a empezar a diseñar nuestros marcos de alambre, pero antes de hacerlo, necesitamos organizar un poco nuestro archivo de proyecto. Entonces voy a incluir todos los diferentes archivos que ya te mostré y los futuros que vamos a crear durante las partituras para que todos ellos estén ubicados en un solo archivo para que si en algún momento necesitas copiar algo, necesitas mirar algo hacia atrás para referencia. Necesitas crear algo nuevo y compararlo con algo que creaste antes de poder hacer todo dentro de un archivo porque Adobe X'd es increíble cuando llega el momento de crear archivos grandes y enviarlos a los clientes porque realmente hicieron su magia con optimización. Y realmente puedes enviar algunos archivos grandes, grandes con tamaño de archivo pequeño a tus clientes. Entonces sin más preámbulos, recordarán este tablero de humor que creé en la parte anterior fuera del curso, y tenemos el logo que nos envió el cliente. Voy a minimizar esto y saltar a nuestro recurso es Padre, que, por supuesto, te vas a poner tan aquí mismo. Tenemos un proyecto, que es este expediente que ya te mostré. Simplemente me adelanté aquí mismo. Ahorradores y guardó mi computadora lo llamó Project, y vas a recibir ese archivo de proyecto al final del curso cuando descargues los archivos. Pero va a contener todo lo que creemos durante este curso. Por lo que voy dedo del pie incluir breve de diseño en el interior. Por lo que voy a hacer doble clic en el archivo breve de diseño. Se va a cargar, y simplemente voy a copiar este, cuál es el resumen de diseño de campo? Porque si recuerdas del video breve de diseño, tienes la plantilla vacía, que puedes usar para tus proyectos. Y tenemos esta plantilla llena la cual vamos a utilizar para este proyecto. Entonces el control. Mira, cuando simplemente seleccionas este nacimiento artístico, voy a saltar aquí mismo. Aleja un poco, golpea el control V, y se va dedo del pie péguelo aquí mismo. A continuación, voy a hacer lo mismo, pero con marco de alambre. Así que déjenme sacar esto rápidamente, dedo del pie de mi otra pantalla, saltar a este archivo, y simplemente voy a arrastrar el dedo del pie y soltarlo aquí mismo en la página para que podamos hacer referencia este amigo de alambre que creamos durante el creación parte fuera del discurso. A continuación, vamos a crear en nuestros puertos, así que voy a dar click aquí mismo. Dice que son pobres Larry King golpeó un en tu teclado y simplemente voy a desplazarme hacia abajo del dedo del pie Web y hacer clic en 1920 y se va dedo del pie incluir todo dentro. Por lo que simplemente yendo del dedo separarlos porque ve esto como en nuestro puerto. Cuando no lo es, es sólo una imagen simple. Entonces me voy a posicionar aquí mismo, y voy a mover esto aquí mismo. Voy a hacer doble click aquí mismo. Y he sido marco de alambre porque este va a ser nuestro marco de alambre y nos vamos a ir de punta a diseñarlo desde cero. Y cuando terminamos con el marco de alambre, vamos a utilizar esos elementos dentro de nuestro diseño. Pero te voy a mostrar que cuando lleguemos a ella más adelante, simplemente estamos yendo del dedo del pie click sobre ella y extenderla hacia abajo y vas a ver esta línea punteada . Y esta línea iniciada es básicamente el pliegue, por lo que todo aquí mismo estará por encima del pliegue. Todo aquí mismo estará por debajo del valor predeterminado. Y por supuesto, puedes configurar esto arriba o abajo como quieras. Si crees que el pliegue va a estar arriba o abajo, si estás creando para múltiples dispositivos y así sucesivamente en el siguiente video, vamos a empezar a diseñar nuestros marcos de alambre y te veré ahí. 17. Crear el trazo de Wireframe 1: derecho. Entonces, empecemos con crear nuestro marco de alambre y lo primero que vamos a hacer cuando se reanude aquí mismo. Puedes seleccionar la nuestra parte simplemente haciendo clic en su nombre. Haga clic aquí. Dice Layout. En las columnas, vas a tener 12 columnas, pero en la canaleta, el ingenio se iba de pie. Entrar 40. Presiona enter y puedes ver que ajusta automáticamente todos estos otros valles, lo cual está bien. Entonces simplemente vamos a acercarnos un poco más. Y en muchos casos, cuando comienzas a diseñar, no puedes ver los elementos porque fuera del script, así que simplemente haz clic aquí donde dice diseño, gran color de columna, haz clic en él y simplemente baja la opacidad fuera de estas líneas a algún lugar por aquí para que todavía las puedas ver. Pero puedes ver lo que estás diseñando justo aquí en la parte superior para que puedas dar click en tu puerto y puedes hacer click aquí mismo en el rectángulo porque vamos a crear navegación . Entonces lo que vamos a hacer es llamar a esto nunca biggie como así porque siempre me gusta el dedo del pie nombre mis capas porque es ah más fácil para los desarrolladores después, y es más fácil para mí si necesito encontrar algo un poco más tarde y necesito cambiarlo. Por lo que le vamos a dar una altura de 150 y posicionarlo del dedo de la parte superior así que vamos a quitar el borde un poco más tarde. Pero dejémoslo por ahora para que podamos diseñar lo que necesitamos para diseñar dentro de esto ahora . Entonces está saltando justo aquí y selecciona un logotipo, así que haz clic en él para controlar el salto de mar justo aquí dentro del control nunca BG y asegurarnos de que esté en la carpeta tal como está. Asegúrate de hacer clic aquí para desactivar las restricciones para cambiar el tamaño de respuesta, porque si las dejas encendidas, te dará algo raro como puedes ver aquí mismo. Así que solo apágalo si quieres escalarlo de manera uniforme. Por lo que al hacer clic en una de las esquinas mantenga el turno para reducir su tamaño a algún lugar por aquí. Asegúrate de ajustarlo a la cuadrícula que acabamos de crear, y puedes seleccionar ambos manteniendo el control y simplemente moverlos en el medio así y se romperá en el medio de este fondo de navegación, como puedes ver aquí mismo . Entonces ese es nuestro ingenio lidiado local. Ahora vamos a crear algo de texto, y tenemos que empezar con una habitación para que simplemente puedas hacer clic aquí escribiendo el novio y voy a elegir algún color algo como esto. A lo mejor sólo algún grandioso básico realmente no importa. Pero usemos algo así como 707070 Simplemente bonito. Gris básico, sencillo, limpio cambia a 24. Asegúrate de que esté en regular como está, y puedes hacer lo mismo. Suponerlo como así seleccionar ambos. Golpea justo aquí en el medio y ahora, porque quiero que esta habitación se baje el dedo del pie para que tenga un desplegable. Pero vamos a crearlo un poco más tarde. Primero creemos estos otros elementos en nuestra navegación para que pueda golpear el control. De a duplicar emisión podría mover la reserva larga y mecanografía porque queremos que la gente pueda reservar su habitación desde aquí. Selecciona ambos, asegúrate de que queden una línea, por lo que cuando escribas, irán de izquierda a derecha. Selecciona este un control de duplicado en este tipo siendo sobre nosotros y una vez más controlar D. Y para este, vamos a escribir en contacto porque queremos asegurarnos de que la gente pueda contactar con nosotros y que son capaz de ponerse en contacto con nosotros directamente desde aquí. Si tienen alguna pregunta para nosotros. A continuación, voy a crear ah, marca de posición de bandera porque vamos a colocar una bandera aquí mismo para que la gente pueda elegir idiomas si así lo desean porque esto es en Grecia. A lo mejor quieren crear un sitio web en griego así como inglés, tal vez un francés o tal vez alemán, dependiendo de dónde vengan sus clientes y de los resistentes. Entonces le voy a dar 40 ingenio 30 como así que asegúrate de llamarlo flanco y asegúrate centrarlo como todo fuera del otro. Asegúrese de que la posicione justo aquí abajo y duplique el contacto. Pedimos rápidamente algunos de estos, por lo que las habitaciones deben estar justo al lado del logotipo. Entonces justo debajo de él en el panel de capas justo aquí reserva debería venir siguiente sobre nosotros debería venir siguiente. El contacto está aquí. Bandera está aquí, así que duplicemos el contacto para moverlo todo el camino hasta aquí porque este va a ser nuestro texto de botón, porque vamos a colocar un botón aquí mismo, así que simplemente haga doble clic en su dedo del pie. Un cambio que escribe en libro ahora como así, y asegúrate de que esto vaya en su centro, por lo que está alineado en el centro. A continuación, vamos a crear un botón, y para ello, vamos a elegir una herramienta de rectángulo escribiendo a 91 que 75 y aquí mismo escriben 10 porque queremos crear alrededor de las esquinas, asegúrate de moverlo hacia abajo. DoubleClick, BT y BG cortos para fondo fondo y vamos a moverlo. Por lo que una línea a lo grande justo aquí y selecciónelos a ambos. Asegúrate de que estén alineados en el centro como las dentaduras postizas. Reserva ahora botón de texto BG y posiciónalo así porque colocará este texto en el medio. Ahora lo que podemos hacer es darle un poco de color si quieres, así que selecciónalo y podemos ir justo aquí y tal vez elegir este color para que puedas dar click en él como así me gusta cómo se ve eso, y puedes quitar la frontera, dar click en el texto, darle color blanco así y ahora lo que puedes hacer es saltar de nuevo a nuestro panel de activos. Pero dice colores haga clic aquí mismo. Te dará un click en color blanco sobre el texto. Te dará ese color click en este texto y te dará color fuera del texto que usamos para este texto aquí mismo. Para que más adelante, cuando quieras cambiar los colores globalmente, Así que imagina que vamos a crear realmente larga página de aterrizaje. Si quieres cambiar globalmente el color de este texto, puedes hacerlo simplemente cambiando el color aquí mismo en lugar de ir uno por uno y luego cambiarlos todos por separado. Entonces ahora que podemos hacer quiero agregar una flecha hacia abajo para que la gente pueda hacer click sobre ella y les dará diferentes opciones. Por lo que ya he creado una flecha hacia abajo para ahorrar algo de tiempo, y lo vas a recibir un poco más tarde. Entonces lo que llevas es simplemente colocarlo en el centro, saltar de nuevo al panel de capas, posicionarlo todo el camino hacia abajo para bandera, y podemos seguir adelante y agrupar este libro Ahora Botón Así controla G para agruparlo y llamarlo un libro No Bt y, por ejemplo, y puedes nombrar a tus capas de manera diferente. A mí me gusta hacerlo de esta manera porque la mayoría de los desarrolladores están creando líneas de fondo de tesis todos modos, así que creo que es más fácil para ellos. Cuando haga eso, asegúrate de que esté en el centro que esté. Entonces asegúrate de seleccionarlo, y lo que queremos es posicionarlo. Por ejemplo, 70 píxeles a la izquierda. De estos botones mantenga pulsada la tecla shift y la flecha izquierda. Quieres seleccionar 1234567 como así entonces puedes seleccionar esta posición de marca de posición 20 pixels como así luego elegir este contacto y alinearlo perfectamente con este vuelo, como así 1234567 y hacer lo mismo por el resto de ellos, que puedas selecciónalos todos y puedes ver dónde es 71 un píxel a la derecha. Puedes sujetar, desplazar y seleccionar o quitar algunas de ellas para que veas que tenemos dos de ellas aquí mismo. Puedo dar click de turno click en la reserva, y se de seleccionarlo Entonces lo que necesitamos para las habitaciones es que vamos a usar esta misma flecha, así que control de para duplicarla. Y puedes mantener el turno y la flecha izquierda y moverlo todo el camino hasta aquí. Amplíe un poco más y puede colocarlo aquí mismo hasta que encaje como vio con el texto . Entonces 1234567 Y vamos a colocar habitaciones. 20 pixeles del dedo del pie a la izquierda de ella. Entonces 12 Y ahí tienes. Has creado tu navegación. Entonces ahora lo que voy a hacer es seleccionar todas estas capas, ordenarlas un poco mejor. Algo que no hice. Todo está ahí. Por lo que una última cosa es sacar la frontera de la navegación. Así que vamos a seleccionar todos los niños control G. No haga clic aquí en la carpeta escribiendo nunca centro. Y ahí tienes. Has creado tu navegación. Entonces en el siguiente video, me voy de pie, te mostraré cómo puedes crear una imagen de héroe y vamos a seguir bajando desde ahí 18. Crear el marco de Wireframe 2: Por lo que ahora empecemos y creemos imagen de héroe. Entonces, una vez más, selecciona un rectángulo, arrástrelo hasta aquí y vamos a darle. Quita el borde y vamos a darle un poco de color para que puedas usar, por ejemplo, E c E C E C presentador, y vamos a usar este color para todas nuestras imágenes para que puedas quitar el grano y ver cómo se ve eso en la página. Y puedes traer de vuelta a lo grande cuando quieras empezar a diseñar. Démosle algo de altura de 900% y el ingenio es 1920 0 lo siento, lo hice por todo el tablero de arte. Por lo que sólo tienes que seleccionar este rectángulo y darle 900 para la altura. Como se puede ver aquí mismo turno entero y moverlo hasta que se encuentre, que el nunca le gusta justo aquí. Colócala un poco atrás y le vamos a dar un nombre a héroe BG. Y es importante nombrar tus capas no solo para desarrolladores sino para ti también , porque más adelante, porque más adelante, cuando nos pongamos el dedo animando en este prototipo para el cliente, necesitamos toe tener los mismos nombres de capa para el auto animado funcion dedo del pie funciona correctamente. Entonces por eso es realmente importante acortar tu trabajo. Y en cuanto diseñes algo, empieza a estratificarlo. Empieza a nombrarlo para que sea más fácil para ti más adelante, cuando llegue el momento de animar para que puedas hacerlo fácilmente cuando tengas nombres de capas desde el principio, luego volviendo a ella y solo imagina que tienes, para ejemplo, 200 nuestros puertos, y necesitas cambiar el nombre de todas las capas dentro de esos 200 puertos nuestros. Entonces, realmente consume mucho tiempo, y es realmente importante que llames a Louis tus capas a medida que avanzas. Sé que a muchos diseñadores no les gusta hacer eso, y se saltan esa parte. Pero dentro de los huevos de adobe, sobre todo cuando se quiere animar parte de ella usando la función auto animate, es realmente importante hacer eso porque de lo contrario simplemente no funcionará. Entonces vamos a saltar atrás, y también creé este ícono para la placa en control de botones, mira, porque este va a ser nuestro video de fondo héroe. Entonces, por ejemplo, empezará a jugar automáticamente o la gente puede hacer clic aquí mismo, y saltará al modo de pantalla completa y comenzará a reproducir el video para en este hotel Sonesta. Vamos a crear algo de texto y puedo saltar justo aquí a la nunca click justo aquí. Control. Ver para que pueda golpear justo aquí. Control. Duplicamos esta capa. Muévelo hacia abajo así, y puedes saltar a su panel de activos y hacer clic en estilos de personaje porque las deudas son estilo de primer personaje y también puedes saltar al libro. Ahora golpea justo aquí. Crea este segundo estilo de personaje porque vamos a utilizar algunos estilos de personaje diferentes a lo largo de este diseño. Por lo que es realmente importante que los tengas guardados como activos porque es realmente fácil, después saltar atrás, hacer algunos cambios, y creará algunos cambios a nivel mundial. Entonces, por ejemplo, si quieres darle un tamaño más grande, eso hará. O si quieres cambiar los colores, lo hará fácilmente, Así que haz click en él. Asegúrate de que esté en el centro. Haga doble clic aquí, escribiendo bienvenido a, e intentó aquí posicionarlo en la posición central en verano y aquí Control D. Vamos a escribir en London East Boutique Hotel porque ese es el nombre de nuestro hotel control de duplicar esta abajo y tipo lluvias. Por ejemplo, Tu hogar lejos de casa, Unos dos muertos mentirosos para este. Vamos a cambiarlo y simplemente lo vamos a cambiar aquí para jugar exhibición justa. Haga clic aquí. Vas a darle talla 70 y lo vamos a cambiar a negrita cursiva solo para dar algún interés para escuchar, porque ya hablé con el cliente y les gusta la idea de tener teléfonos diferentes para los títulos como somos nosotros para el texto. Entonces eso es lo que vamos a hacer ahora mismo, y también vamos a darle un color diferente. Entonces para ello, vamos a usar el 55555% y si hago clic aquí mismo dedo del pie, quita lo grande, puede ver cómo se ve eso, así que se destaca de la página un poco mejor que antes. Así que vamos a bien limpio traer de vuelta el diseño del dedo o puedo dejarlo así porque todo está básicamente en el centro para esta parte. Entonces dejémoslo tal como está, Así que vamos a espaciar todo este texto un poco mejor. Entonces, si acerco un poco más, mantén presionada la tecla de turno hasta que se encaje aquí mismo. Voy a mantener mi tecla de turno una vez más. Nuestro para 1234 lo hacen 40 pixels hasta la parte superior. Haz lo mismo para este como así luego turno. 1234 Como puedes ver, es exactamente lo mismo. Pero para este, vamos a mantenerlo en 80. Entonces démosle el doble. Seleccionarlos todos. Pero primero, ordenémoslos. Así que bienvenido a estar en el hotel boutique superior de Herren. Este texto está en el turno entero de abajo, así que hablé. Todos ellos controlan G Select Hero BG mediante el uso de la tecla de control y simplemente los colocaron así y eso los colocará en su lugar en el medio para esta imagen de héroe en grupo todos ellos. Y es simplemente agruparlos todos de nuevo juntos. Control G L Haga clic aquí. Llámalo héroe así, y eso es todo para nuestra imagen de héroe. Entonces te veré en el siguiente video cuando vamos a empezar a diseñar sobre la sección que irá justo aquí debajo de nuestra imagen de héroe, y básicamente explicará un poco más sobre nuestro hotel. Entonces cuando aterrizan, tienen esta sencilla, bonita navegación. Tienen este bonito, sencillo Heather con el video que pueden reproducir. Pero por debajo de eso, tienen más sobre nuestro hotel y sobre nosotros información. Básicamente, sólo un vistazo para que puedan sacar un poco mejor al Norte sobre las cosas que no estaban en este breve video, Así que te veré ahí. 19. Crear el marco de Wireframe 3: Entonces lo que vamos a hacer ahora es seleccionar esto y voy a utilizar este texto así como mazos control de texto de para duplicarlo y simplemente hacer clic y arrastrarlo fuera de esta carpeta . Quitarlo hacia abajo, mantenga pulsado el cambio y hacia abajo, flecha. O simplemente puedes esconder esto y moverlo así. Y lo que queremos es alinearlo aquí mismo. Mantenga el turno y muévalo hacia abajo. 100 píxeles. Jabón. 123456789 10. Y como pueden ver, se movió 10 100 píxeles hacia abajo porque queremos darle algo de espacio en blanco aquí mismo. Y como puedes ver, incluso puedes aumentar el tamaño del héroe aquí mismo hasta el redil. Pero el pliegue es irrelevante, básicamente porque la gente está viendo este sitio web en diferentes dispositivos. Entonces solo toma el iPad, por ejemplo, apuesto que tiene muchas variaciones diferentes. Igual que el iPhone y sin mencionar nuestros teléfonos Android. no hablar de algunas laptops diferentes. Entonces si estás viendo, si estás viendo este sitio web en laptop, que tiene una pantalla de 13 pulgadas, se verá un poco diferente a si lo miras en una pantalla de 15 pulgadas, pantalla 17 pulgadas y así sucesivamente. Por lo que este pliegue realmente se adapta a diferentes tamaños de pantalla, así que solo ten eso en cuenta. Entonces cuando le das algún bonito espacio en blanco aquí mismo, se adaptará fácilmente a diferentes tamaños de pantalla. Entonces sigamos adelante, y voy a empezar por crear un círculo. Entonces voy a crear un círculo aquí mismo. Simplemente llámelo Circle One, por ejemplo, y dale 1 50 con 1 50 y voy a traer mi gran espalda Sadullah click justo aquí, escribiendo click en el layout y lo que quiero es moverlo, tal vez 80. Por lo que 12345678 desde la línea de fondo fuera de este texto o tal vez hasta 100. Entonces démosle 100 para tener la misma distancia de aquí a aquí, así como de aquí a aquí. Entonces este es nuestro círculo uno Control D. vamos a crear un círculo También vamos a crear un círculo. Simplemente haga clic justo aquí, y lo colocará en el control medio D y creará el círculo número tres y mantenga el turno y posicionarlo aquí así Lo que queremos es posicionarlo porque tenemos 12 columnas en nuestra cuadrícula. Queremos a cada círculo Toby en el centro fuera de estos cuatro. Por lo que este primer círculo va a estar en el centro de estos cuatro. Segundo uno de estos cuatro y 3er 1 de esta por lo que va. Para ello, simplemente seleccione un rectángulo dibujar al cuarto. Se puede acercar un poco más y se puede ver que va de éste. Por lo que 1234 termina en este y simplemente puedes seleccionar círculo rectángulo un clic justo aquí , y colocará el círculo en el medio así, porque puedes hacerlo con guías. Pero esto me pareció mucho más fácil porque, como puedes ver, es realmente sencillo. Seleccionar rebanadora. Tres lugares aquí mismo. Da clic aquí, Lil come. Y eso que has terminado. Entonces me pareció mucho más sencillo hacer las cosas de esta manera, Entonces simplemente seguir adelante y crear algo diferentes guías para este proceso. Porque un zay dijo que me pareció mucho más fácil que eso. Entonces ahora lo que podemos hacer es dar click aquí mismo Controlar trato. Duplicar esto en posiciones como así 12 tal vez incluso cuatro para darle algún control de bateo agradable de posiciones como tan controlado el me gusta. Entonces en este 1er 1 lo llamemos Cama King size como así, y lo que podemos hacer es posicionarla en el medio así y asegurarnos de que sea perno y asegurarnos de que sea de este color más oscuro. Por lo que no lo pusimos así aquí para que puedas seleccionarlo. Da click aquí y es de este color oscuro. Da click sobre él, y aplicará estos colores más oscuros, y podrás hacer lo mismo por estos. Así que golpea aquí y asegúrate de que es perno y finalmente haz clic en él y crea un nuevo estilo de personaje porque antes no teníamos este estilo de personaje. Haga doble clic aquí. Tipo de comida incluida, igual que asegúrate de que está en el centro y un rápido aquí mismo y tecleando acceso a la playa porque van a tener acceso directo a la playa desde este hotel. Entonces, como dije, estos son solo algunos de nuestros principales futuros, y May Fincher está fuera de nuestro hotel, así que básicamente, cuando aterrizan, pueden ver el video y aprender más sobre cómo el hotel mira, cómo se ve el personal, ¿Dónde se encuentra? Apenas algunas de las principales características y que se van a vender en este hotel terminando en simplemente click book. Ahora, si están contentos con ello, o si no, como la mayoría de la gente no lo estará, simplemente se desplazarán hacia abajo y aprenderán más sobre nuestro hotel. Entonces lo que podemos hacer a continuación es hacer click justo aquí, saltar de nuevo al panel de capas para poder ver dónde nos controlan profundamente, y lo vamos a mover justo aquí y a lo mismo. Por lo que 1234 haciendo 40. Y lo que quiero hacer ahora es hacer clic en el texto de área y va a crear el texto de área a partir de este texto, y lo que quiero es que simplemente puedas moverlo así y asegurarte de que sea el ingenio de estas tres columnas, y puedes moverlo al centro, igual que hicimos con este texto. Asegúrate de que está en algún lugar por aquí y puedes saltar a enchufes. Haga clic en El Señor de Algunos lleno de texto de posicionador, haga clic en insertar texto , y una vez más , y una vez más, si no tiene este enchufe, puede hacer clic aquí en el click más justo aquí, escriba en Londres ipsum, y te mostrará que Blufgan simplemente haz clic en instalar y puedes hacer lo mismo. Lo que acabo de hacer, démoslo. Creo que algo así funciona bien. Entonces como dije, está en el medio. Controla a Andi para duplicarlo, y puedes hacer click justo aquí para posicionarlo en el medio, controla la una vez más y asegúrate de que esté en el centro con estos. Y finalmente, volvamos a saltar de nuevo a nuestro panel de capas. Entonces ordenemos algunos de estos arriba. Entonces primero tenemos círculo quiero justo debajo, uh, uh, tu hogar lejos de casa así que va a ir justo aquí. Ahora, Como dije, esta es la parte aburrida, pero es realmente importante pedacito Ordenar estas capas, así que tenemos comida. Se incluye el 2do 1 como este y tienen acceso a la playa círculo y texto dis aquí mismo. Y finalmente puedes agruparlos por separado, pero solo voy a agruparlos así, así que controla g para agruparlos escribiendo sobre nosotros porque esto va a ser sobre nosotros sección y más adelante empezamos a diseñar y vamos a incluir algunos iconos diferentes aquí mismo en estos círculos. Pero como pueden ver por ahora, tenemos cosas moviéndose bastante bien. Como puedes ver, tenemos este diseño agradable, limpio, limpio, consistente por ahora. Y más adelante en el siguiente video, vamos a incluir algunos testimonios, y lo voy a colocar aquí abajo, así que los veré allá. 20. Crear el trazo de Wireframe 4: Bueno, ahora está saltando y crear ese testimonio. Por lo que voy a dar click aquí mismo. Y lo que necesitamos es este texto. Entonces voy a abrir este hedonista y seleccionar este otro texto así Control de para duplicarlos. Muévete aquí mismo. Entonces muévelo justo debajo de aquí y puedes mantener el turno o simplemente ocultar esto y moverlo hacia abajo en posición a algún lugar por aquí. Y lo que queremos es posicionarlo en algún lugar por aquí. Ahora, continuación, quiero que Teoh elija esta imagen. Entonces el control d moverlo así Y luego simplemente posicionarlo hacia abajo así. Y luego puedes moverlo así porque quiero crear un color de fondo más adelante. Empezamos a diseñar porque yo quiero. Este sistema sólo tomó Pop porque quiero mantener su atención. Yo quiero que sigan leyendo esto porque tal vez se aburran cuando lleguen a esta sección. Pero cuando lleguen a este apartado porque tiene ese chapoteo de color, mantendrá su interés y los mantendrá leyendo. Y vamos a tener la imagen aquí mismo de la persona que dijo ese testimonio así Empecemos a diseñar eso. Por lo que 100 como puedes ver, nos da este mismo espaciado que es de aquí. Entonces vamos a jugarle esto y posicionarlo. A lo mejor 12345678 O simplemente darle 100. Entonces vamos a mantenerlo todo consistente. Elige esto. Hazlo desde la izquierda. Entonces esto va a escribir, por ejemplo, Jenny de Londres, así Y lo que queremos es crear un botón de llamada a la acción aquí mismo también, porque tal vez quieran reservar desde aquí. Por lo que vamos a mover este botón de llamada a acción a lo largo de este diseño. Por lo que simplemente seleccionó el control D y se puede con, como, este llamado cambio a Es en algún lugar por aquí. Y cuando lo veas, puedes seleccionarlo desde aquí y simplemente dibujarlo justo aquí justo por encima de cero BG para que realmente lo puedas ver. Y lo que también queremos es crear una cotización tan controlada la posición así y para esta, queremos mantenerla en cursiva. Y queremos crear 36 por ejemplo, y saltar de inmediato creó estilos de carácter a partir de él y simplemente me voy de pie. Elige esta cotización del ejemplo que ya había creado. Entonces como puedes ver, es simplemente una bonita cita de esta persona diciendo lo maravilloso que era hospedarse en este lugar . Entonces démosle un poco de espaciado. 1234 Lo mismo que con él para el resto de nuestro diseño. 1234 Y muévete siempre así Y finalmente, vamos a crear nuestra imagen. Entonces vamos a elegir nuestra imagen para ir de izquierda a derecha. Yo le quité la frontera. Lo que queremos para las dimensiones son 800 peso 500 y puedes dar click aquí mismo. Les vamos a dar tan radio de esquina de 10 y apagado 10 porque esto es un top, ¿ verdad? Esta es una parte de arriba abajo, ¿verdad? Y como puedes ver, si se reanuda un poco más cerca, estos bordes son rectos y estos están alrededor de él porque queremos mantenerlos rectos porque están forrados con este borde izquierdo fuera de nuestra imagen. Entonces lo que queremos en este momento es organizar esto un poco mejor para que podamos agrupar todo este control G. Y podemos usar esto como testimonio. Beachy así y esta va a ser nuestra imagen testimonial. Entonces, así y este va a ser nuestro texto. Entonces lo que quiero hacer es posicionarlos en el centro desde aquí. Entonces lo que podemos hacer es crear otro rectángulo hasta que se alinee con esto. Con esto, el borde inferior también. Y lo que quiero es posicionar mi imagen, así que selecciónalos a ambos. Haga clic aquí. Colocará la imagen en el centro fuera de este rectángulo y hará lo mismo para el texto y la parte inferior así. Después quita el rectángulo y ahí vas. Ahora lo que quiero es alinearlos un poco mejor. Así que haga doble clic en su puerto de arte y haga clic aquí mismo en la cuadrícula de diseño. Entonces lo que quiero es posicionarlos a todos al borde izquierdo fuera de seis. Entonces una vez más, tenemos 12 y esto va a ser al borde izquierdo de seis. Por lo que primera columna, 2ª 3ª 4ª 5ª y luego seis. Entonces éste, básicamente, hasta que se chasqueen en el borde izquierdo de la misma, tendremos uno en el centro el cual estará vacío y luego esta imagen va a llenar el resto del espacio. Por lo que va dedo del pie se ve bien, simple, limpio, inconsistente con el resto fuera de nuestro diseño. Y realmente creo que se ve limpio y fácil de leer. Entonces voy dedo del pie unde grupo esto y voy a seleccionarlos a todos. Es primero. A ver si ordenamos todo correctamente. Tenemos selecto todos ellos controlan G y llamaron a este testimonial así Así que ahora que hemos creado que lo que podemos hacer es mover dedo del pie la sección de habitaciones porque esa es la sección más importante y esa sección se va dedo del pie básicamente vender este sitio web a comer a los visitantes. Entonces en el siguiente video, vamos a saltar y crear una sección de habitaciones justo aquí donde vamos a explorar diferentes habitaciones y lo que tienen la oferta de dedo. Cuando la gente llega realmente a esa sección cuando se desplaza hacia abajo. Entonces te veré allí 21. Crear el trazo de Wireframe 5: eso no es saltar y crear habitaciones ofrecen. Entonces haga clic aquí y voy a elegir a estas dos patrulla D para duplicarlas, moverlas y simplemente mantener el turno y posicionarlas de nuevo. Pero selecciona a ambos como así y asegúrate de que sean 100 iguales como todos los demás. Y aquí mismo, vamos a escribir explora nuestras habitaciones porque la muerte va a ser nuestra principal oferta. Dull click justo aquí. Habitaciones cómodas para aplicación de prueba Alexe porque, como decían, copia es realmente importante y esto va a explicar un poco más allá porque ya saben que quieren venir de las vacaciones a este lugar. Pero si escribes mucho más y explicas mucho más si va a especie de grabado en ese cerebro un poco más cuando les dices lo que realmente quieren de este lugar. Entonces ahora mismo vamos a empezar a crear nuestras imágenes, así que usa un rectángulo. Pero antes de que lo hagamos, no escojas aquí mismo. Haga clic en. Genial! Porque vamos a necesitar son geniales y simplemente vamos a dibujar un dedo del pie rectángulo sentir cuatro fuera de estos y vamos del dedo del pie, Muévelo aquí y llámalo habitación uno porque eso va a ser una habitación Una imagen y 5 24 con está bien y 302 Usemos eso para la altura. Ahora, lo que vamos a usar aquí mismo es 10 on 10 percenter porque vamos a tener radio de esquina superior izquierda y superior derecha Toby a su alrededor, y no queremos usar border. Pero queremos usar el color por lo que se utiliza este color y como no lo creamos, vamos a seleccionar eso así y simplemente haga clic aquí. Dedo del pie. Selecciona ese color, que es el color para nuestras imágenes. Y si hago click justo aquí se puede ver fácil, ve por lo que se seleccionó correctamente. Está cerrado eso porque ya no lo necesitamos. Haga clic aquí. Y como dije, simplemente haga clic en el color, y traerá el toque de color dedo del pie, que son objeto que desee. Entonces si escondo el layout, puedes verlo seleccionado correctamente, así que una vez más incluir el layout, porque lo vamos a necesitar y mover este Toby 100. Y si no puedes ver la flecha inferior tan desplazar. 123456789 10. Entonces, una vez más, tenemos la misma distancia de aquí a aquí. Igual que en todos fuera de estos otros ejemplos. Entonces vamos a golpear control d Llamar a esta habitación, también, y posicionarla en el medio como así control. De llamó a esta habitación tres Sostenga turno y flecha derecha y puedes ponerlo en su lugar así . Y como puedes ver, nos da exactamente la misma distancia de 40 píxeles entre estas imágenes. Entonces si no me gusta aquí mismo, esconde nuestro diseño, puedes ver que tenemos un bonito espaciado entre cada imagen para que la gente no pueda hacer clic accidentalmente en una o en la otra. Entonces lo que queremos ahora es crear algún texto tan controlado D en esta posición uno justo debajo habitación número uno como, así que asegúrate de que vaya de izquierda a derecha. Colóquelo así y asegúrate de que primero sea lo primero. Usó esto fuera de $36 a la semana y llama a esta habitación clásica. Pero asegúrate de que sea un regular y luego simplemente crea otros estilos de personaje hasta aquí. Entonces éste es cursiva, y éste es regular. Así que salta aquí mismo y asegúrate de que estén a 40 píxeles de aquí. 1234 Control de replicado una vez más, y puedes usar este para ser 24 pero regular. Entonces este y nos vamos a ir a escribir, partir de 24 dólares por noche. Por lo que esta habitación va a costar tanto por noche. Entonces, como se explica en los ejemplos fuera del análisis de competencia, es realmente importante que crees valor y que crees interés en tu diseño. Por lo que cuando la gente explora estas habitaciones, pueden saber al instante si pueden pagarlo o no. Por lo que pueden saber que desde aquí porque cuando vean este precio, si está fuera de su presupuesto, simplemente saldrán de este sitio web y no pasarán más tiempo. No se enojarán por ello porque saben que no pueden pagarlo y luego simplemente seguir adelante. Pero si se lo pueden permitir, entonces seguirán leyendo. Y todos estos elementos arriba sirven que los persuadimos. Por lo que aunque no tengan el presupuesto, aún les interesan todos estos elementos y toda la información que ya así lo hacen . Entonces tal vez eso va a pedir prestado el dinero. A lo mejor lo harán, no sé, unieron fuerzas, y tal vez dos o tres de ellos irán en la misma habitación y simplemente compartirán los costos de esa habitación. Entonces vamos a movernos un poco para el abajo. Entonces lo que queremos es crear algunas características aquí mismo para que cada habitación tenga diferentes características en función del presupuesto y en función de qué habitación haya seleccionado. Tan simplemente controlado. En efecto, y voy a bajar esto 40 píxeles una vez más. Entonces esto va a ser 20 porque está cerca. 1234 Esto va a ser 40. Entonces llamemos a esto camas como este Control de. Vamos a duplicarlo, simplemente moverlo una vez o tal vez incluso dos veces, y le da un espacio agradable y escribir uno. Entonces vamos a darle a éste un color diferente. Entonces vayamos de algo así como C cinco c cinco percenter. Bonito. Genial. Si el adulto hace clic justo aquí en altura, las columnas que puedes ver. Es bonito, un simple color gris como así. Entonces si un nudo saltando hace clic aquí mismo dedo del pie, trae mi diseño de vuelta. Lo que quiero hacer es duplicar estos, así que controla el o simplemente puedes sostenerlos, sostenerlos y duplicarlos así. Sostenga el turno en, así tal vez 20 píxeles. Creo que es bueno. Entonces usemos ese atajo una vez más así. Entonces, así, así, así y lo que queremos es tener seis características diferentes. Entonces vamos a crear uno más. Entonces si quieren aprender más sobre esta sala, simplemente pueden hacer clic aquí y ir a aprender más. Entonces vamos a crear eso también. Entonces vamos a dar este 40 l click aquí mismo. No pueden aprender más control. A. Para seleccionar el texto y simplemente haga clic aquí con el dedo del pie. Subrayarlo porque ese va a ser nuestro enlace. Y cambiemos el color de ese enlace para decolorar para que puedan saberlo. Si quieren aprender más. Simplemente pueden hacer clic ahí mismo, y los llevará a la página dedicada para esta habitación clásica. Entonces por eso sigo diciendo que es realmente importante crear interés y ser honesto para que no pierdas el tiempo de la gente para que puedan saberlo de un vistazo. Si se lo pueden permitir, lo que tiene cada habitación, y si realmente quieren aprender más, pueden hacer clic en el dedo del pie del botón, ir y aprender más y luego reservar la habitación en esa página en particular, que ser una página dedicada para esa habitación en particular. Pero si les gusta, y si les gusta lo que ven aquí mismo, pueden hacer clic en libro. Ahora pueden ir justo aquí. Haga clic en Reservar ahora, y habrá algunos más fuera de estos botones de llamada a la acción abajo cuando los diseñamos . Entonces vamos a seleccionar estos y vamos a cambiar parte de esta información. Entonces esto va a ser vista a la playa y va a estar bien? Ninguno. Entonces, vamos a esconderla. Elige mover este. Entonces no, y como lo hicimos, nos vamos a meter de pie así, así que asegúrate que esté forrado como jabón sobre esto se va a decir Terrace y una vez más hacer lo mismo. 12 y se va a llevar. Ya sabes, esto va a ser WiFi y esta pintoresca Muy sí, así. Esto va a ser aire acondicionado así. Ocultarlo más Esto Sí, así. Entonces Como dije, estas son solo características principales. Y si quieren más características, van a ir dentro de la página en particular y luego se informan y ver más imágenes para esa habitación en particular y lo que tiene para ofrecer. Y esto va a escribir dedo del pie. Sí. Entonces ahora tenemos que agruparlos. Entonces localiza las camas, localiza una, y puedes moverlas, como así a las tapas de justo por debajo del precio inicial. Al igual que esta vista a la playa. Y no se muevan como esta terraza y no hay seguro justo debajo entre tú y no Y cinco. Sí, irá por debajo de terraza. Entonces aquí mismo, aire acondicionado va a ir por debajo de WiFi y sí y estacionamiento Y sí, van a estar justo aquí. Y por último, necesitamos esto. Conoce más. Así que muévelo todo el camino hacia abajo y simplemente puedes mantener presionado, desplazar, clic aquí y seleccionar. Aprende más también. Control G para agruparlos. Y tal vez podamos llamar así a estas características. Y ahora lo que podemos hacer es seleccionar todo este control De y podemos mantener nuestra tecla de turno para moverlos, para escuchar posición y así y moverlos todos. Entonces todo lo que seleccionó justo debajo de la habitación a porque una habitación para tendrá estas características hacen lo mismo. Entonces controla el movimiento. Todo ello debajo de la habitación tres, Mantenga el turno como así, como se puede ver, se encaja en posición y esto va a ser habitación familiar. Así que selecciona esta habitación familiar frijol a partir de, y será un poco más cara y será de 36 dólares por noche y esta va a ser habitación más cara. Por lo que Grand Lux Room y empezará desde $48 por noche así. Y, por supuesto, con características diciendo, como con cualquier otra cosa en la vida, básicamente, tienes una terraza va a ser sí para este ejemplo en esta sala, todo esto es va a escribirlo. Sí. Y para esta final, tenemos vista a la playa. Entonces como puedes ver Ah, éste no tiene tantas características. Este tiene más, y éste tiene más. Entonces, básicamente, a medida que el precio sube, los futuros también suben. Entonces lo que necesitamos para entrar por fin aquí mismo es para porque esto va a tener dos camas y esto va a tener cuatro camas porque es la más grande, así y finalmente, vamos a crear un fondo bonito, sencillo. Entonces usemos rectángulo dibujar un rectángulo así y lo que queremos es regalar dimensiones 20. Eso está bien. Y 6 21 Vayamos con eso. Y lo que queremos es darle algo a su alrededor dirección. Entonces aquí mismo va a ser tienda aquí mismo. 10. Por lo que la dirección de fondo va a estar alrededor de ella. Y para estas imágenes, los bordes superiores se van a poner a tierra. Entonces lo que podemos llamar a esto es una habitación uno BG tan más con justo debajo de una habitación uno características y apenas sobre la habitación dos como esta. Entonces habitación uno, BG y lo podemos posicionar puntera la parte superior así, y podemos seleccionar todo este texto y más, que tal vez 20 píxeles a la izquierda. Mucho primero selecciona más viejo, así que así, y sigue abriendo esto sin razón aparente. Pero puedes moverlo así y solo asegúrate de estar a 20 píxeles de este borde izquierdo. Por lo que 12 con tu turno seleccionado, y eso es básicamente todo porque cuando la gente seleccione en esta sala se les dará un fondo agradable y de sombra suelta. Por lo que puedo duplicar que BG Control on D llamó a una habitación a B. J. Hagámoslo con esta posición central justo debajo de la habitación dos características y todo así. Después selecciona todas estas características de este texto, mantén presionado el turno, y luego puedes posicionarlo, uh, Toby igual que éste. Así que desplaza 12 para mover 20 píxeles de aquí. O puedes ir 40 si quieres. Y vamos a seleccionarlos a todos y darles 40 también y hacer lo mismo para éste. lo que 1234 Y finalmente seleccione esta habitación para ser controlada por G. Cotización profunda de tres B, Jim así, posiciónelo todo el camino y abajo justo debajo de estos futuros y posiciónelo hasta que se encuentre justo aquí. Entonces me encuentro con un ligero error, pero simplemente cambiémoslos Así que esto va a ser habitación a esto va a ser una habitación tres. Al igual que así y ahora Finalmente, agruparemos a todos ellos. Entonces el control G. Llama a esta sala tres llamó a esta sala, también, y finalmente llamó a esta sala uno porque va a ser mucho más simple más adelante cuando empecemos cualquier reunión todos estos. Entonces si no me gusta aquí mismo, esconde nuestra grilla, puedes ver cómo se ve eso. Entonces todo está bien y limpio. Realmente no me gusta cómo se ve esto justo aquí porque mostraba la frontera justo aquí en la parte superior. No me preocupo por ello, porque cuando incluyes la imagen, puedes poner la sombra gota justo debajo de la imagen. Y básicamente puedes saber esto y ocultarlo básicamente para que no se muestre e incluso puedes ocultarlo y luego simplemente mostrarlo al hacer click. Entonces hagámoslo por ahora. Por lo que habitación BG seleccione todos ellos. Por lo que éste llamó control a todos y simplificó la frontera. Y vamos a incluir la frontera más adelante, cuando empecemos a diseñar y una cosa final grupo glitz, todos ellos controlan salas G y mecanografía así y eso es todo para las habitaciones. Entonces en la siguiente sección, vamos a saltar. Y si voy a mi marco de alambre, puedes ver que acabamos de crear estas habitaciones, y esa es nuestra oferta principal, y tenemos actividades cercanas. Pero entre esas, vamos a incluir algunas ofertas secundarias y características secundarias donde vamos a explorar y explicar al espectador por qué el hotel es genial, por qué deberían elegirlo y algunas características adicionales. Tiene, como el jardín de la alberca y el estacionamiento, así que los veré en el siguiente video. 22. Crear el trazo del Wireframe 6: no empecemos y diseñemos estas características adicionales. Pero antes de que lo hagamos golpear comando de control s para decir nuestro proyecto. Y como pueden ver, no tenemos más espacio aquí en la parte inferior. Tan simple. Da click en tu puerto y podrás extender esto tanto como quieras para que puedas tener ese espacio adicional para el diseño. Entonces lo que queremos que el dedo del pie incluya ahora son algunas características adicionales. Por lo que por características adicionales, como puedes ver, esta es nuestra oferta principal. Por lo que las habitaciones y pueden explorar estas habitaciones. Y debajo de eso queremos persuadirlos un poco más y mostrarles lo grande que es nuestro hotel e incluir algunas características adicionales del mismo en su interior. Entonces empecemos con la imagen, y va a tener exactamente las mismas dimensiones y esta imagen para que puedas controlar De movió hacia fuera, y luego simplemente posicionarla aquí mismo en el espacio. Salta a los arrestos, panel click justo aquí porque ese es el color de nuestra imagen. Y entonces lo que podemos hacer es ir a aquí, después mantener turno y moverlo. 100 píxeles hacia abajo. Tan mismo líquido que todo apagado. Estos otros. Entonces lo que queremos a continuación es bajarlo. Y esta va a ser nuestra imagen de alberca porque esa va a ser nuestra primera característica. Saltar a las habitaciones, controlar de, duplicar este texto y arrástrelo arriba, y luego simplemente moverlo hacia aquí. Posición en aquí también. No me gusta incluir la gran posición de diseño ambos los hacen dejar una línea. Y esto va del dedo del pie justo en alberca privada porque algunas personas realmente quieren cebo de dedo en una piscina la cual está incluida en el hotel. Un oleaje por, aparte de la playa. Entonces colóquelo del dedo del pie aquí. Y si recuerdas, le dimos exactamente la misma configuración aquí mismo. Por lo que el texto va dedo del pie contiene seis columnas, una estará vacía y luego el descanso se llenará de imagen. Entonces si puedes ver aquí mismo, estamos haciendo exactamente lo mismo, básicamente. Por lo que me acercaría un poco más. Posición es un poco mejor, y simplemente voy con el dedo del pie doble clic en mis otros archivos y copié texto que ya creé para ello. Como se puede ver aquí mismo. Entonces lo que quieres finalmente es agrupar estos dos para controlar el tipo G en texto como así seleccionar la imagen y dar click aquí para posicionarla en el medio. Ahora, con los que seleccionaron hit control G lloró públicamente aquí y escribiendo pool porque eso va a ser uno fuera de nuestras características controlan el para duplicar toda la carpeta. Todo el turno, muévelo hacia abajo Y hasta que tengas 100 como puedes ver aquí mismo, así se selecciona 100. Ahora lo que quieres es rotar estos dos. Entonces esto va a ser jardín así y lo que queremos es mover el texto en la parte superior, mover la imagen en la parte inferior y lo que queremos es mover la decisión del dedo del pie de la imagen y darle la vuelta así y mover el texto a este borde y dedo del pie. Hazlo una línea con esta columna justo aquí a la izquierda. Entonces, como pueden ver, irá de izquierda a derecha y luego finalmente a izquierda en nuestra tercera sección. Entonces para éste, lo que queremos es llamar hermoso jardín, como puedes ver y lo mismo que hice con el ejemplo anterior, voy a copiar y pegar el texto ya creado y con el jardín terminado Control D , y luego simplemente puedes moverlo hacia abajo. O es aún más rápido hacerlo de esta manera. Así que simplemente duplica este 1er 1 Asegúrate de que sus 100 asegúrate de que está todo el camino abajo y llama este estacionamiento privado porque es realmente importante para algunas personas que tengan estacionamiento privado. Entonces en lugar de la piscina privada llamó a este estacionamiento privado y lo mismo como un hizo con estos dos, voy a simplemente texto basado ya creado para ello. Y ahora, como pueden ver, tenemos estas tres secciones realmente bonitas. Si es adulto, podemos ocultar el gran diseño. Como puedes ver cuando bajan, realmente pueden explorar. Por lo que a partir de arriba, tienen esta navegación sencilla realmente agradable. Pueden pasar a la imagen del héroe, ya sea que puedan aprender más sobre hotel. Después bajan un poco, y exploran un poco más características adicionales fuera de este hotel. Leen un buen gran testimonio con la persona diciendo lo felices que están con el hotel. Podemos ver las diferentes habitaciones que tienen toe ofrecen. Así que partiendo de lo más barato aquí mismo, todo el camino a lo más caro aquí mismo. Si no estás persuadido, vamos a pasar un poco hacia abajo para que puedas explorar un poco más características que este hotel tiene para ofrecer. Y luego finalmente, debajo de esto, vamos a crear sección adicional que va de pie a la derecha en qué hacer cuando en Nicholas. Entonces tal vez sea importante dedo del pie, por supuesto, persuadirlos dedo del pie comprar una habitación y para quedarse en este hotel. Pero lo que realmente pueden hacer en Mykonos para que puedas ayudarlos a lograr y esa decisión simplemente mostrándoles diferentes actividades que pueden hacer una vez en mansedumbre. Entonces vamos a diseñar eso en el siguiente video. 23. Crear el trazo del Wireframe 7: Entonces no vamos a diseñar. El siguiente apartado de la verdad va a ser nombrado por actividades. Y si acercamos un poco más aquí mismo, se pueden ver las habitaciones justo debajo y las ofertas secundarias que acabamos de crear. En video anterior, se pueden ver actividades cercanas, lo que va a ayudar a persuadirlos aún más para que reserven las habitaciones de este hotel. Entonces cómo podemos hacer eso es simplemente seleccionar este texto controlado en profundidad. Entonces básicamente, como pueden ver, estoy haciendo exactamente lo mismo con cada una de estas secciones porque contiene exactamente los mismos elementos que todas las demás. Entonces es más con abajo un poco a algún lugar por aquí hasta que se encuentre, e incluso puedes mantener el turno y moverlo hacia abajo hasta que esté en 100. Por lo que ST como todos los demás. Entonces esto va a escribir en lo que hay que hacer en mansedumbre. Y simplemente citemos, golpeamos a este y lo basamos de nuevo dedo del pie aquí y este Texas yendo dedo del pie justo básicamente aquí, a solo unas pocas actividades cercanas que puedes ayudarte a disfrutar más mansedumbre y vamos a mover esto hacia aquí y lo que nosotros querer es crear una imagen que va a bajar aquí. Así que detente rápido, incluye nuestra gran espalda. Y vamos a crear un rectángulo de aquí a aquí. Vamos a quitar el borde, darle un color para la imagen. Entonces decir como lo hicimos todo el resto fuera son ejemplos. Muévete 100 así y van a ser 600 de altura así. Entonces ahora muévete aquí mismo. Va a ser imagen por ahora. Y vamos a duplicar este texto y Mulet y abajo. Por alguna razón, sigue seleccionando las capas. No lo quiero toe select, pero estos son solo algunos de los box off. Será X'd, pero aprendes el dedo del pie a trabajar con ellos a medida que avanzas. Entonces para este, voy a crear un texto dis. Voy dedo del pie, hazlo línea izquierda así. Y la primera atracción va a ser Dallas, que es esta impresionante ciudad antigua ubicada cerca de Nicholas. Por lo que 1234 lo hacen 40 control de y movió esta de abajo abajo abajo así. Así que simplemente los cambié. 1234 y nos vamos de dedo Haz de este 24 así. Así que solo asegúrate de que esté a los 40 como está ahora mismo. Y una vez más, simplemente voy a copiar y pegar el texto ya creado para ello. Como se puede ver aquí mismo. Entonces, ¿qué necesitamos ahora? Porque esto va a ser un slider. Vamos a necesitar crear dos flechas diferentes para flecha izquierda y derecha para que la gente pueda desplazarse hacia abajo y ver entre estas atracciones lo que más les gusta, y tal vez ser persuadidos un poco más sobre quedarse en este lugar. Entonces empecemos por crear un círculo y acercar un poco más algo como esto, y tal vez darle 92 semanas. 92. Presionar, entrar saltando, darle el mismo color. O tal vez podamos darle este color. Realmente no importa. Quita la frontera y asegúrate de que esté en algún lugar por aquí. Y démosle a éste la posiciónemos aquí por ahora. Salta a la vista y llama a esto un círculo así, y ahora vamos a necesitar estrechar icono. Ya ha creado uno para mi ejemplo. Voy a ir con el dedo del pie basándolo aquí mismo, así que voy con el dedo del pie click y pegarlo y pongámoslo en el centro. Por lo tanto, selecciónelos a ambos. Golpea aquí, golpea aquí y lo voy a hacer blanco. Entonces ven aquí, hazlo blanco Y esta va a ser nuestra flecha izquierda. Así que controla g para agruparlos y simplemente llámalo Flecha izquierda así. El plomo de control obligó más a éste a la derecha, así. Y va a ser un escritor de y abrirla y llamó a éste bien así Y luego simplemente voltearlo así. Voy a posicionarlo de pie aquí, hombre. Mueve este que me ha visto antes, o tal vez hasta 80 como éste. Creo que eso se ve bien, pero tal vez podamos ponerlo en posición para que tengamos. Acabo de descubrir espacio entre sofá, doble rápido y escondo esto. Se puede ver cómo se ve eso, pero no creo que sea realmente una buena idea que sean este perno. Entonces, simplemente usemos el mismo color que hicimos para nuestras imágenes. Entonces este color Sí, Y para las flechas. Sí, dejémoslos así por ahora. Vamos a cambiar los autos y estilos en general. Cuando empecemos a diseñar, selecciona el control de texto G y luego simplemente con ese grupo seleccionado. Seleccione estas flechas y haga clic aquí mismo porque eso va a asegurarse de que todo esté en el centro en grupo esto y simplemente seleccione todo. Control G. Y lo vamos a llamar como hacer en mansedumbre o puedes llamarlo actividades o como quieras. Hagámoslo porque va a ser agradable y sencillo con nombres cortos, igual que con todos fuera de nuestros otros elementos. Entonces como puedes ver, creamos eso y ahora nos estamos ocurriendo a la parte más importante, que es nuestro formulario de reserva, y eso es lo que vamos a diseñar en el siguiente video, así que te veré ahí. 24. Crear el trazo de Wireframe 8: Ahora es el momento de diseñar nuestro formulario de reserva. Y si acercamos un poco más, puntera nuestro marco de alambre, se puede ver ese libro de libros. Tu estancia con nosotros está justo aquí en la cima. Tenemos algún texto a la izquierda con un botón de llamada a la acción. Pero en realidad vamos a mover ese botón de llamada a Acción aquí a la derecha, porque sólo tiene más sentido que esté por debajo de la forma. Y este va a ser nuestro formulario de reserva. Entonces vamos a diseñarlo. Voy dedo del pie seleccionar este fondo y dedo del pie. Entra a diferentes jugadores específicos. Puedes mantener el control y hacer clic, y hará clic directamente en el dedo del pie ese enlace en lugar de puntera rápida opaca, abrir la carpeta y luego duplicar rápido para seleccionar esa capa diferente. Entonces lo voy a mover todo el camino hacia abajo así, lo van a seleccionar, mantener el turno para moverlo, y luego simplemente seleccionarlo desde aquí y moverlo 100. Entonces, como pueden ver, tenemos exactamente el mismo espaciado para todos ellos. Ahora lo que queremos hacer no es rápido aquí mismo, y queremos llamarlo simplemente reservar Bijie así porque queremos saber para diferentes orígenes cuáles son en la página. Así que abre las actividades, selecciona éstas para controlar a fondo, muévalas y luego simplemente las coloca hacia abajo. Así que selecciona estos dos y posiciónalos hacia abajo como tan movido por debajo del dedo del pie católico. Incluya el gran respaldo, porque por ahora lo vamos a necesitar. Línea izquierda. Esta línea de izquierda esto porque Texas va a estar a la izquierda. Y pongamos a todos ellos para que escuchen este también, cuándo bajar un poco esto y aquí va a escribir un libro tu estado con nosotros. Y cuando sea un estado, lo voy a bajar un poco porque queremos mantener ese exactamente el mismo diseño que hicimos en todos ellos. Por lo que 51 vacíos y luego 6 40 forma y no perder más tiempo simplemente va a copiar el texto ya creado. Y como puedes ver, es promocional, así que les está diciendo exactamente lo que quería el cliente. Así que llena el formulario para reservar tu estancia con nosotros, y podrás ahorrar hasta un 30% de descuento en el precio. Si reservas directamente a través de nuestra página web en lugar de los servicios de reserva online, porque ese es el punto principal, eso es lo que querían que creáramos es para ellos remolcar, evitar reservar servicios y reservar directamente a través de este sitio web. Entonces posicionémoslo 40. Entonces, como así hasta que se reúnan hasta aquí. 1234 abajo. Y también queremos crear dos copias más. Así que selecciona este sostiene turno y luego simplemente muévelo hacia abajo y justo aquí, va a escribir Llámanos y nos vamos del dedo del pie basado en el número y apenas segundo tan más con 20. Si recuerdas, hicimos exactamente lo mismo con el ejemplo anterior. Entonces vamos a basarnos simplemente en el número telefónico aquí mismo va a ser azul porque se va a hacer clic. Si quieren llamar directamente desde aquí, o si están usando su estiércol de teléfono móvil. Simplemente haga clic aquí para causar directamente. Entonces vamos a duplicar claves para moverlas hacia abajo 40 también, así esto va a ser correos como así, y posicionemos este dedo del pie a la derecha. Entonces hasta que cumplan con 12 y voy a ir de pie salta adelante y copiar y pegar su dirección de correo electrónico. Este no es directamente su correo electrónico. Lo van a cambiar cuando creen este sitio web y hagan que salga vida para que puedan crear un correo electrónico dedicado para este sitio web. Entonces ordenemos rápidamente este texto como Así que esto va a estar aquí. Esto aquí y puedes agruparlo todo y golpear el control G y llamarlo texto así. Y lo que queremos hacer ahora es posicionarlo en medio así, y ahora queremos crear un formulario de reserva que irá aquí mismo a la derecha. Entonces para el formulario de reserva, vamos a utilizar rápidamente este control de texto D porque lo vamos a necesitar en unos pocos lugares y simplemente con ustedes aquí. Lo primero es lo primero. Vamos a crear el tipo de habitación porque eso es lo primero que necesitamos crear. Asegúrate de que esté a las seis. Así 123456 Así que asegúrate de que encaje dedo del pie este borde izquierdo de esta columna. Colóquelo justo por aquí, controla de, haz un duplicado de él, y luego simplemente muévelo hacia abajo. Y lo que queremos escribir en su clásica, y lo que también necesitamos es un campo donde realmente va a ir este texto. Entonces vamos a crear un rectángulo o puedes usar este botón. Saltemos adentro y encontremos. Aquí está. Por lo que reserva ahora botón. Se puede copiar de este testimonio también controlar para duplicarlo y luego simplemente moverlo todo el camino hasta aquí porque va a ser, ah, mucho más fácil hacerlo de esa manera. Por lo que simplemente posicionarlo en su lugar desde aquí. Entonces 1234 entonces realmente no necesitamos este texto de habitación clásico, y este va a ser nuestro tipo de habitación o simplemente llamarlo habitación y a la vista. Vamos a cambiar este color a este color, así que básicamente es el mismo color de este texto. Asegúrate de que quede de la línea. Colóquelo dedo del pie borde izquierdo 1234 y asegúrate de que tenga el borde. Y para el color de campo, vamos a usar el blanco, pero no para el texto, sino para el playy tan blanco como así, y lo que también queremos es renombrarlo input press, enter porque eso es va a ser nuestro insumo y esto no vamos a usar esto. Entonces no sé por qué es electo y esto. Entonces cambiémoslo rápidamente a esto. Por lo que tiene exactamente el mismo estilo que queremos. Por lo que 1234 y queremos crear un borde para esta entrada. Y una última cosa extienda esto a este filo hasta aquí hasta que se reúna. Porque queremos que sean seis para este grande, y vamos a crear dos más por debajo de eso y uno grande por debajo de la deuda. Tan grande uno va a ser seis más pequeños van a ser tres. Y por último, Big One va a ser seis también. Entonces aquí mismo vamos a necesitar una flecha porque esa es la flecha que van a usar para apuntar y bajar y abrir los pies y explorar diferentes opciones. Entonces una vez más, voy a usar en la flecha que ya creé. Posicionarlo aquí como así 1234 Y si quieres saber cómo crear un estrecho, te voy a mostrar eso también. Fui a ir derecho a aquí, por ejemplo. Puedes usar el mental y puedes hacer clic en mantener el turno, asegúrate de que esté a 45 grados y todo turno una vez más, como así hit escape. Y para el borde, se puede aumentar el tamaño 25 por ejemplo. Puedes hacer clic aquí, y puedes rotar toda la forma para que puedas seleccionarla en algún lugar alrededor de aquí así. Y simplemente se puede todo el turno y girado. Y ahí tienes. Esa es tu flecha. O si no quieres que sea eso, ¿por qué simplemente puedes hacer clic aquí y bajarlo a aquí? A lo mejor puedes reducir el tamaño, también aquí, y también puedes jugar con estos valores aquí mismo. Entonces así es como se puede crear un estrecho. Pero quería acelerar un poco el proceso e incluir los ya creados. Entonces vamos a ubicar. Está justo aquí, y el tipo de habitación se fue del dedo del pie. Déjala caer dentro así, y sólo asegúrate de que esté en 41. Entonces, como puedes ver, no es así. 1234 Ahora está a los 40. Entonces tráelo de vuelta Control D y nos vamos de pie. Mueve este hacia abajo. Por lo que 1234 más con justo debajo esto va a estar revisando así. Y voy a hacer doble clic aquí mismo. Escriba, check in así y no necesitamos flecha abajo. Fuimos a eliminarlo y la entrada va a bajar a tres. Así que así. Entonces, como dije, esto va a ser de seis columnas de ancho. Esto va a ser de tres columnas de ancho y finalmente justo aquí donde dice libro. Ahora vamos a suspirar meses de dolor, fecha y finalmente año así y lo que necesitamos es un cheque también. Entonces controla D y puedes moverlo así hasta que se reúna con el final de nuestras columnas. Al igual que así, posiciónate hacia abajo y puedes teclear. Consulta aquí mismo y puedes cambiar el nombre de la carpeta para checar también. Al igual Y finalmente, esta información va a ser exactamente la misma. Y para este último, controla el y puedes moverlo igual como con todos estos otros. Posicione esto hacia abajo y esto va a ser invitados y cambie esto a dos invitados y cambie esto por escribir invitados como así porque necesitamos que elijan cuántos invitados quieren con ellos. Entonces, por ejemplo, alguien viene solo. Alguien viene a cinco personas. Alguien viene solo con su pareja, gente teniendo hijos y así sucesivamente y así sucesivamente. Por lo que es realmente importante para ellos seleccionar eso, porque algunos tipos de habitación no pueden acomodar a que muchas personas y algunas habitaciones pueden. Entonces, por ejemplo, esa manera, las personas que trabajan en este hotel pueden ponerse en contacto contigo con la información que les vas a dar cuando tu libro. Entonces cuando quikbook ahora y te va a llevar a la página específica donde vas a pagar donde vas a ingresar tu información personal. Pero esto es solo para que sepan cuántas personas vienen contigo, así que no necesitan cuántas camas podrías necesitar, cuántos baños y demás demás, y sobre todo si vienes con más autos para que sepan cuántas lugares de estacionamiento que pueden dejarte para ti y tus visitantes. Entonces una cosa violenta que necesitamos es un botón aquí mismo Así que una vez más, vamos a hacer lo mismo. Salta en el testimonial, elige la parte inferior, controla el movimiento justo fuera de la carpeta como así y finalmente solo movió este botón todo el camino abajo del dedo del pie aquí y posicionarlo solo un poco de invitados. Y lo que queremos es darle 40 también, así diciendo, como para todos los demás. Pero muévelo a aquí Y lo que quiero hacer ahora es agruparlos a todos tan controlados G llamó este solo formulario como así y selecciona reserva BG con ese hit en el medio para que puedas posicionarlo en el medio así y finalmente agruparlos juntos y llamar este formulario de reserva . Presionar, entrar o regresar. Y eso es todo. Si elimino nuestras columnas, puedes ver cómo se ve eso. Por lo que es realmente fácil, realmente simple. Esto dice lo que se supone que dice, y simplemente pueden llamar al hotel. Pueden enviar por correo electrónico al hotel si tienen preguntas en este punto, simplemente pueden ingresar su libro de hit de información básica ahora, y los llevará a la página de reservas, que luego entrará. Llévalos información personal, información de tarjetas de crédito y solo. Entonces esa es la siguiente parte cuando esta página se hace dedo completo con los clientes. Pero estamos diseñando esta página en Lee porque esa es la página más importante para ellos porque más adelante abajo de la línea, cuando diseñamos otras páginas, ahí van dedo del pie básicamente tienen exactamente el mismo estilo, muchos fuera de los mismos elementos porque nos vamos de punta, crear un sistema de diseño que van a utilizar más adelante cuando empiecen a diseñar otras páginas. Y vamos a seguir en contacto con el desarrollador más adelante. Entonces si necesitan algunos cambios, fácilmente podemos saltar de nuevo a nuestros huevos el proyecto y hacer esos cambios y enviarlo fácilmente. Al violar se golpea control s. y en el siguiente video, vamos a terminar en el proceso de encuadre de alambre. Vamos a crear formulario de newsletter de suscripción y un pie aquí abajo. Entonces te veré allí 25. Crear el trazo del Wireframe 9: No. Terminemos nuestro proceso de encuadre e incluimos un boletín Formulario de registro así como el pie de página. Perdón por saltar aquí mismo. Haciendo zoom un poco más cerca. Se puede ver que nosotros, uh, empatamos. Date de alta a nuestro newsletter Donde el formulario y pie de página Justo debajo, hombre. Según dijeron varias veces a lo largo de este curso, toda la información relevante que no son cruciales, debe ir en el para. Por lo tanto, haga doble clic en su tablero de arte extendido todo el camino hacia abajo. Entonces lo que queremos incluir es un boletín. Date de alta aquí para poder seleccionar estos meses. Tan seleccionado el control profundo. Entonces básicamente lo mismo que hicimos para el resto fuera del discurso. Simplemente se llama turno. Muévelo a aquí y luego posicionarlo 100 mismo como con todos los demás. Si no hace clic en 123456789 10 para hacerlas 100 películas en todo el camino hacia abajo. Y lo que queremos que esto escriba ISS regístrese para boletín y por debajo de la deuda rápidamente. Copiar lo que sea que escribiera así. Por lo que para escuchar así inscríbete y recibe noticias y actualizaciones sobre nuestros descuentos y ofertas. Y lo que queremos es seleccionar estos dos para que puedas saltar dentro, golpear la forma, y te vas a posicionar para formar aquí mismo. Porque el texto está encendido, la forma de vida está a la derecha, y simplemente voy a seleccionar, por ejemplo, invitados y mira, ahora botón controlado D Voy a moverlos para escuchar cerrar todo esto. Y simplemente movamos esta agachada hacia abajo. Y si no va a aparecer, simplemente esconde éste y lo movió así. Y cambiemos esto rápidamente. Por lo que esto se va a escribir en el correo electrónico. Se puede ocultar a estos invitados y se puede eliminar la flecha. L click justo aquí. Es que tengo bean email como asi, O puedes escribir en tu email aún mejor. Al igual que este Cerrar. Este libro de ahora debería ir exactamente en la misma ubicación. Entonces lo que puedes hacer aquí mismo es el click en los tableros de arte mostrando tu disposición. Puedes colocar el botón justo aquí, y tal vez puedas moverlo así Así puedes tener estos dos y reservar. Ahora nos vamos a cambiar de dedo para suscribirnos así. Y el texto fuera de curso va a escribir en suscribirse así, y una última cosa que quiero cambiar es el color apagado de este botón. Entonces si salto a estos colores, tal vez podamos elegir éste y añadimos de inmediato nuestros activos y tal vez bajando hacia aquí. Entonces vamos a saltar en remolque nuestro diseño y ordenar días. Uno es un poco mejor para que puedas ponerlos a tientas y simplemente haz clic aquí para colocarlos en el centro sobre, agruparlos y simplemente moverlos del dedo del pie aquí hasta que puedas ver por píxeles. Entonces exactamente lo mismo que thes espaciado para que pueda mantener el turno, seleccionar todo control G, criterios encantadores, teclear, suscribirse así. Y por último, empecemos a crear nuestro pie de página justo debajo de esto. Entonces para la foto, vamos a crear un fondo, y vamos a crear un nuevo rectángulo extendido hasta los bordes hasta que se encuentre a izquierda y derecha. Y para la altura, las luces usaron 6 80 y para el color, usemos este color mismo líquido lo con el resto fuera nuestro diseño y no te preocupes por ello. Lo vamos a cambiar más adelante en la etapa de diseño, y porque sabemos que Este es nuestro borde cortado, por lo que no hay más contenido debajo de él. Conduces como en tu tablero, puedes moverlo hacia arriba y podrías acercarte todo el camino hacia arriba cerca punto ubicado Aquí está y simplemente moverlo hasta que se reúna con el borde inferior de nuestro pie o color así. Y vamos a llamar a este pie de página Bijie porque eso es lo que va a ser. Y lo primero que necesitamos es un logo. Puedes copiarlo. Entonces el control. Ver, Amplíe todo el camino para escuchar el control. Nosotros y ustedes podemos posicionarlo para estar aquí mismo. Coloca el logo justo sobre el pie de página BG. Y ahora vamos a ingresar alguna información. Entonces vamos a tener tres columnas fuera de texto porque, como pueden ver, tenemos 12 columnas diferentes. Entonces porque vamos a tener esta columna izquierda con algunos iconos de redes sociales así como el teléfono justo aquí, vamos a tener segundo color con habitaciones empezando uno con instalaciones y finalmente 4to 1 ingenio sobre y algo básico sobre funciones y finalmente debajo de eso, vamos a tener dirección de correo electrónico también. Entonces primero vamos a copiar el teléfono y la dirección de correo electrónico. Entonces el control, Ver saltar y estar más cerca el control. Lo colocamos hasta aquí, lo movemos todo el camino hacia abajo solo un poco más y te vas con el dedo del pie. Simplemente selecciónenos por correo electrónico textos de control. A ver cuándo lo vamos a posicionar sólo para escuchar el control. Nosotros So 1234 y nos vamos de pie justo aquí. Si tienes alguna pregunta, puedes escribirnos eso por correo electrónico y luego los van a separar. Por lo que quiero moverme en este para escuchar quizá 20 píxeles como este más. Este 12 de aquí. Basta con revisar. Si deletreas chequea algo, todo está bien. 1234 Hasta el momento nos recoge control G para agruparlos, posicionarlos en el medio, posicionarlos todo el camino hacia abajo, click derecho en grupo. Y ese es básicamente el texto de fondo de nuestra página web. Ahora he creado algunos iconos de redes sociales. Yo voy dedo del pie simplemente los basé aquí mismo, y vamos a jugar con los dedos con las posiciones un poco más tarde. Pero ahora, primero, vamos a crear estas diferentes columnas de texto. Entonces es primera copia distritos control de y posicionarlo aquí mismo fue a saltar a misa. Está encuadernado. Da click aquí porque esto va a escribir sus habitaciones así. Y como dije, porque ahora vamos a tener tres columnas de texto y esta columna izquierda justo aquí. Por lo que cada uno de ellos estará tomando el espacio de tres. Por lo que 123 para toda la información izquierda 123 para las habitaciones. Control en D así a tres. Y este siguiente se va a escribir en instalaciones. Y por último, este último lo va a escribir. Y 123 se va a ubicar dedo del pie aquí y ahora puedes moverlos todos hasta que se reúnan con el borde superior fuera del logo. Mi así y finalmente, lo que podemos hacer es seleccionar esta posición profunda controlada en el lugar justo aquí, y vamos a asegurarnos de que sea la línea izquierda. Lo es. Colóquelo hasta aquí, y vamos a tener diferentes opciones de punta aquí. Entonces ve. 1234 Control D. Asegúrate de que esté diciendo control D. Es lo mismo. Y vamos a tener cuatro opciones del dedo del pie aquí como así Así que esto va a ser camas, que puedan informarse sobre las camas, pero top porque se sabe. A veces el agua no es tan buena en Grecia Mini bar porque tal vez quieran saber qué hay dentro del minibar. ¿ Y cuáles son los precios y accesos con discapacidad para las personas que están discapacitadas así? Y entonces lo que podemos hacer es ordenar un poco mejor este texto. Entonces simplemente voy a posicionar esto aquí. Entonces voy a escribir en camas justo debajo de la parte superior del baño de deuda, justo debajo de las camas, minibar justo debajo de la bañera y finalmente acceso para discapacitados justo debajo de muchas más. Y voy a simplemente agruparlos a todos para controlar G. Y tal vez podamos cambiar esto y simplemente y borrar estos dos. Llama a este cuarto control de y luego mueve esta derecha a aquí control de y mueve este dedo derecho aquí y luego posiciona estos un poco mejor. Entonces esto peor. Una de ellas son habitaciones. Se trata de instalaciones, y esta última es sobre Así que cambiemos todo esto para que las instalaciones y puedas jugar . Puedes, por supuesto, hacer lo que quieras. Pero me pareció que esto era más fácil porque mantiene el mismo espaciado. No tenemos que duplicarlos todos una vez más. Por lo que simplemente copiar basado funciona bien. Entonces para este, vamos a escribir en restaurantes como así abajo que vamos a escribir en alberca , como así justo debajo de la sala de fitness de muerte, porque tal vez quieran ir al gimnasio y finalmente estacionar donde puedan conocer un poco mejor el estacionamiento. Entonces si está asegurado, si es estacionamiento cerrado, estacionamiento abierto y cosas así. Por último, queremos escribir sobre nosotros, así que tal vez quieran saber sobre este hotel, la historia y demás sobre la política de reembolso, porque es realmente una parte importante para que la gente sepa si puede obtener un reembolso o no política de muerte porque tienes una caja fuerte en tu habitación. Pero, ¿qué pasa si roban algo de la caja fuerte y demás para que puedan inspirarse y aprender más sobre eso ahí? Y por último, términos y condiciones, porque es realmente importante y también un dedo obligatorio por ley incluyen términos y condiciones aquí como abajo. Ahora, finalmente, coloquemos estos, así que esto va a alinear el dedo del pie aquí abajo, Así que tal vez quite estos iconos a aquí. Asegúrate de que esto esté posicionado a aquí numerando de nuevo los iconos y asegúrate de que estén en el centro. Entonces, como puedes ver a la izquierda aquí puedes ver la distancia entre el borde inferior y el borde superior , y puedes aumentar o disminuir ese espacio como quieras. Pero simplemente lo voy a dejar a algún lugar por aquí, como lo pueden ver. 97 desde arriba. Y la parte inferior Valentin que quiero hacer es centrarlos para que puedas seleccionar todo excepto este texto que los fondos golpean control G crean otro hormigueo de Irak de aquí al texto aquí, seleccione. Y ambos golpearon justo aquí. Y simplemente puedes eliminar este rectángulo en grupo todo lo que creces antes y luego simplemente agrupar todo de nuevo y llamarlo así para ella. Y ahí tienes. Hemos creado nuestro pie de página y si hago doble clic aquí y quitamos la cuadrícula para que ya no lo veas, puedes ver cómo se ve eso. Y si saltaba de nuevo a un criterio rápido, creamos todo, Toby. Coherente. Todo tiene exactamente los mismos espacios entre todo porque Diseñamos todo en una cuadrícula. Todo se ha espaciado uniformemente. Por lo que todos los elementos tienen espacios uniformemente entre sí. Y como puedes ver aquí mismo, estamos usando exactamente los mismos estilos de texto a lo largo de todo este diseño. Todo lo que tipo de coherentes fluye juntos. Y, más importante, más importante de todas. Está ante el mundo en el proceso de diseño y en el proceso de creación siguiendo de cerca el breve de lo que el cliente quiere que creemos. Y ahí tienes. Esa es tu esposa enmarcando hecho control como para salvar este proyecto. Y en la siguiente parte del curso, vamos a saltar al diseño. Vamos a empezar a incluir algunos cambios de imágenes. Diferentes colores iban dedo del pie incluye algunos iconos diferentes, y aprendiste a jugar con algunas sombras de fondo, así que te veré allí. 26. Estructura de imagen: en esta parte del curso, vamos a empezar a diseñar nuestro marco de alambre, por lo que vamos a incluir diferentes imágenes, diferentes iconos, diferentes tonos y sombras de gota. Pero antes de que hagamos todo eso, solo quiero correr rápidamente a través de diferentes imágenes, las cuales están incluidas. Por lo que vas a recibir esta carpeta de imágenes y puedes abrirla y por dentro. Se puede ver estas diferentes imágenes que iban dedo del pie incluyen todas ellas son nombradas correctamente, por lo que se puede saber a dónde va cada imagen. Y a medida que avanzamos por el curso, voy a incluir a todos en diferentes lugares para que puedas practicar usando estas imágenes . Todas estas imágenes son de vírgenes, Esh y picos de A. Así que eso significa que son libres de usar tanto personal como comercialmente. Y me voy de pie también incluir esos enlaces en la región, un archivo pdf al final de este curso, que puedas acceder a ellos mi simple click, y puedes descargarlos y utilizarlos todos en tu proyecto. Entonces en el siguiente video, vamos a empezar a diseñar e incluir estas imágenes, así que nos vemos ahí 27. Crear diseño 1: Ahora empecemos con el diseño. Y si acerco un poco más, voy a dar click aquí mismo en el aeropuerto. Nombre hit control de para duplicar todo nuestro puerto. Y éste era marco de alambre. Y éste se va a diseñar, justo centro. Y lo primero que vamos a hacer es cambiar el nombre de este fondo por el logotipo. Entonces voy a saltar aquí mismo y dar clic aquí para que se destaque un poco mejor en la página . Corresponde un poco mejor con nuestros botones. Y ahora vamos a incluir la bandera aquí mismo. Por lo que voy a saltar en remolque la capa, pasar todo cerrado la carpeta local, localizar la bandera. Aquí está, Control V, y voy a pisar la bandera. Ya encontré que lo voy a soltar todo el camino hacia abajo justo antes del botón justo aquí. Elimina el Marcador de posición de la bandera, y te voy a mostrar cómo lo encontré. Por lo que puedes hacer clic en tu columna vertebral enchufada y necesitarás instalar este enchufe te llamó . Yo logo. Por lo que una vez más, puedes dar click aquí mismo escribiéndote logos blancos prueban para ser para conseguirla Así que solo una palabra y puedes dar clic en Instalar. Y lo que esto puede hacer es que puedes hacer click en él y puedes generar banderas de país. Entonces lo que puedes hacer es crear diferentes rectángulos como este. Por ejemplo, puedes golpear la cuadrícula de repetición y tienes que crear 194. Entonces, por ejemplo, puedes crear yo no sé, 10 como este. 246 8 10 me gusta así Y puedes crear 20 abajo. Entonces 2345 6789 10 Y veamos si eso es todo. Entonces 10 como este. 123456789 10 11 12 13 14 15 16 17 18 1920. Y puedes acercarte un poco más para cerrarte así. Y lo que puedes hacer es saltar de nuevo a la capa, gastar todo hit en grupo Genial, y lo que tienes que hacer es eliminar 6246 así. Entonces te quedas con 194. Podrás seleccionarlos todos, quitarles la frontera y por qué 194 está más allá de mí, pero eso es lo que quieren que hagas So Jump actor plug in Spinal Hit El por qué los logotipos golpean banderas country y lo que va a hacer es que va a generar todos estos banderas campestres, y lo bueno de ellas es, como puedes ver, son calidades bastante altas y no realmente nada importante. Pero para lo que tenemos que hacer es que se puede ver simplemente simple, bonita banderita. Puedes generar diferentes banderas a partir de aquí, así que déjame borrarlo rápidamente. Entonces así es como lo encontré. Una vez más, tú I logos lo encontraron en tu enchufe en especial, y puedes tener el mismo resultado. Pero puedes, por supuesto, descargar este archivo y usarlo como te mostré aquí mismo. Entonces todo será como lo viste. Por lo que ahora vamos a incluir nuestra imagen. Por lo que voy a saltar en remolque la carpeta de imágenes. Por lo que selecciona héroe BG aquí mismo, porque ahí es donde lo vamos a colocar Locator hero image. Aquí está, y cuando simplemente arrastrarlo y soltarlo dentro, voy a golpear el click y aumentar un poco el tamaño y tal vez posicionarlo en algún lugar por aquí, pero quiero mostrar el botón Toby justo aquí. Entonces lo que puedo hacer es bajar esto sólo un poco. Así que muévete un poco más así. Y lo que quiero hacer ahora es hacer este blanco para que pueda dar click aquí mismo y hacerlo blanco. Y quiero hacer lo mismo por este botón de reproducción. Entonces, así. Y esa es nuestra imagen de héroe terminada. Entonces como puedes ver, se ve limpio. Se ve bonito. Muestra el hotel. Muestra a la persona disfrutando del hotel y todo lo que tiene para ofrecer. Entonces, básicamente, eso es todo para esta sección. En el siguiente video, vamos a seguir adelante y diseñar algunas de estas otras secciones, así que voy a ver ahí. 28. Crear diseño 2: ahora está saltando y a ello algunas de estas otras secciones. Entonces vamos a movernos sobre nosotros. Voy a seleccionar estos círculos, y ya tengo un color, cual seleccioné. Voy a reventarlo aquí mismo y quitar la frontera de todos estos círculos y finalmente click justo aquí para incluirlo en nuestras búsquedas de llamadas aquí mismo para que podamos cambiarlo con un solo clic más adelante si queremos. Entonces para su 1er 1 quiero incluir un ícono, Así que voy a copiarlo y pegarlo dedo del pie aquí. Lo voy a posicionar en medio de este círculo así, y me voy de pie. Asegúrate de que esté alineado con el borde inferior de este círculo, por lo que se ve como un hijo, y simplemente se mantiene trae algo más de interés que solo usar algunos iconos regulares que encontraste en Internet y simplemente fundirlos en el espacio vacío. Entonces vamos a hacer lo mismo con este. Entonces esto es por la comida. Colócala como, así que asegúrate de que esté en el medio, y como puedes ver, ya trae mucha más atención a este círculo para que la gente no se lo salte tan tan fácilmente. Y por último, vamos a incluir este 3er 1 Así que va a ser para la playa. Entonces, una vez más, asegúrate de que esté aquí y en medio, y esta sección es básicamente o y como puedes ver, trae mucho más interés visual de lo que de otra manera. Entonces así es como puedes llamar la atención fácilmente a algunas de estas otras, uh, uh, capas fuera de las tuyas. Siguiente arriba. Vamos a cambiar el color de este fondo testimonial, así que ya tengo el color seleccionado. Yo lo voy a colocar. Y como puedes ver, es una especie de color verdoso nocturno. Realmente funciona bien. Nos vamos de pie. Añádalo aquí mismo. Entonces es d tres e uno e. uno si tienes curiosidad. Pero una vez más, puedes descargar y usar este archivo. Igual que lo estoy usando aquí mismo. Entonces vamos a incluir imagen testimonial dentro, así que arrástrela y suéltela dentro de aquí doble rápido, y vas a mantener el turno y posicionar esta imagen un poco más arriba. Al igual que así. Entonces esta es la persona que dijo esta cita, y como puedes ver es realmente atractiva, es realmente llamativa, y realmente destaca en la página. Entonces por eso lo estamos usando en este ejemplo. Entonces en el siguiente video, vamos a saltar a la sección de habitaciones y vamos a hacer bastantes cambios a las habitaciones deuce. Y vamos dedo del pie incluir algunos colores diferentes aquí mismo, Así que te veré allá. 29. Crear diseño 3: ahora es incluir imágenes para nuestra habitación. Así que salta a la sección de habitaciones, abre estas carpetas. Es más fácil así. Localiza la habitación clásica así que es ésta. Simplemente arrástrelo y posiciónelo dedo del pie. Mira la habitación número dos, que es la habitación familiar ubicada aquí y arrástrela y colócala en su lugar. Y una cosa más, claro. Conduces como un aumento el tamaño de estas imágenes si quieres. Entonces tal vez posicionarlo así, y tal vez podamos hacer lo mismo para este 1er 1 Así que una vez más, puedes golpear control y saltar directamente dentro de tu selección para que no tengas que abrir la carpeta y luego hacer lo mismo por las pocas veces como esto, por lo que puedes aumentar el tamaño de la misma, tal vez apuntalar más las camas en un centro como este. Creo que eso se ve bien, pero tal vez hasta podamos posicionarlos así para que podamos ver toda la cama. Y por último, puedes cerrar días unos y todo. Kitaro número tres. Sólo éste. Localiza la imagen en las carpetas de Grant Deluxe Room Dragon cayendo dentro. Como puedes ver, realmente se ha alejado un poco y puedes sostener un turno viejo y el dedo del pie del clic izquierdo. Incrementarlo de manera uniforme en todas las direcciones. Y no me gusta esta luz. Entonces tal vez podamos movernos con solo un poco más a la cima, así. Y me gusta cómo se ve eso. Entonces ahora lo que podemos hacer es cambiar algunos de estos otros colores. Entonces elegamos el texto dis y seleccionamos el color más oscuro porque queríamos destacar un poco así. Y ahora lo que tenemos que hacer es crear algún interés aquí mismo. Por lo que vamos a crear color verde así como colores rojos. Un color verde va a ser el color para los que puedan elegir, y el color rojo va a ser para el que no están incluidos en la oferta para la habitación. Entonces empecemos con una capa gastable y vamos a saltar a los futuros, abrirlos, y para este número uno, simplemente puedo elegir un color. Por lo que seis b sean cuatro para uno va a ser nuestro color verde. Simplemente lo voy a agregar aquí y para esta vista de playa donde dice que no. Podemos agregar un color rojo, que va a ser e 13333 como así Y nos vamos de pie. Añádalo a aquí así. Y ahora lo que podemos hacer es simplemente seguir adelante y seleccionarlos todos. Entonces no haga clic aquí y luego Sí, sí y sí, haga clic aquí, salte dentro de cerrar carpetas de días y haga lo mismo para los otros dos. Entonces lo que tenemos aquí son camas. Tenemos que hacerlo, pero podemos dejarlo así si quieres. Entonces en lugar de este color verde, podemos dejarlo como era así. Y entonces todas estas otras características Ser verde y rojo es sólo tiene un poco más de sentido esa manera. Así que sé verdad. Ya sabes que se va a leer y para las terrazas, WiFi y todas estas otras cosas va a ser verde. Y por último, todos estos se van a incluir así. Al igual que así Y terroristas fuera de curso. Sí, porque es la habitación más cara, así voy a saltar y cerrar todas estas otras carpetas, no se vean desordenadas así, y las habitaciones básicamente están terminadas. Y más adelante, cuando llegues a proteger vamos con el dedo del pie incluir algunas sombras de fondo aquí mismo. Pero ahora solo quiero arreglar esto rápidamente para que los terroristas deban ser sí, parece que acabamos de ver en el ejemplo de diseño, y eso es básicamente todo para las habitaciones. Así que saltemos por dentro e incluimos en diferentes imágenes aquí mismo. Por lo que para la alberca privada, puedes localizarla aquí mismo. Entonces es esta una piscina privada, y se puede, por supuesto, adulto hacer clic y acercar mucho más si quieres en esta imagen. Entonces tal vez algo como esto solo para crear un poco más de interés visual que de otra manera, localice la imagen del jardín en nuestra carpeta. Aquí se arrastra y suelta dentro. Una vez más, puedes hacer doble clic y acercarte mucho más para que la gente pueda localizarlo un poco más grande. Y finalmente lo que Hemos brotado estacionamiento y esto debería decir imagen de marcado privado, y puedes seleccionar todo el pensar y saltar dentro justo aquí el rapido en este nombre y puedes renombrarlo para que luzca consistente entre ellos. Por lo que esta debe ser imagen de jardín como Así en la selección de nombre de alquitrán, puedes localizar el jardín justo aquí tan rápido y cambió su nombre. Entonces, cuando veas esos errores, puedes arreglarlos fácilmente. Simplemente copia y pega tus elementos alrededor en tus nombres. Y por último, lo que tenemos justo aquí es el estacionamiento. Por lo que una vez más, opaco click para agrandar esta imagen para crear un poco más de interés visual. Algo como esto se ve bien. Entonces tal vez más adelante podamos agregar algunas sombras de fondo del dedo del pie esta imagen, pero realmente no lo hago. Creo que eso va a ser una buena idea. Sombras de fondo para estos. Sí, pero para estos No, serio. Al igual que cómo se ve bonito y limpio en la página aquí mismo en el siguiente video, vamos a saltar y diseñar el resto de nuestro diseño, así que ya veré ahí 30. Crear diseño 4: No cambiemos los colores de fondo de estas flechas. Entonces simplemente voy a elegir en este color, elegir decolor y luego saltar dentro de mi panel de capas, seleccionar ambas flechas y cambié este color a este, por ejemplo. Y si crees que es demasiado oscuro, tal vez puedas jugar o crear un nuevo color. Pero creo que funciona bien con nuestro diseño. Y vamos a necesitar dedo del pie incluir una imagen aquí mismo. Conducta haz click aquí mismo para cambiar su nombre. Entonces va a ser en Dallas. I m g selecciono todo. Vuelve a aquí, Dallas. Soy G Así que tienes tus nombres de capa consistentes Saltar dentro de las capas. Empezó la carpeta de imágenes arrastrarla y soltarla dentro Me gusta cómo se ve porque crea un interés visual aquí mismo. Tan solo para que sepas que este es el lugar antiguo y tiene una gran historia. Y tal vez más adelante en los próximos videos, podemos incluir también una sombra de fondo en este también. Por último, solo quiero cambiar este color a color oscuro solo para que destaque un poco. Por último, lo que necesitamos aquí mismo es cambiar el color por lo que vamos a tener exactamente el mismo color que éste. Entonces si saltas dentro, puedes ver que son los tres e uno e uno y lo tenemos aquí porque ya lo guardamos. Tan seleccionado. Haga clic aquí. Y como puedes ver, va del dedo del pie. Haz que esta forma salga y destaque solo un poquito más. Vamos a cerrar esas carpetas y, por último, necesitamos cambiar algunas cosas por dentro de nuestro pie de página. Entonces lo que queremos es crear un color de fondo más oscuro para nuestro pie de página. Entonces lo que podemos hacer es quizá usar en este color. Entonces es seis b 6764 y está realmente oscuro, como puedes ver, pero hará que nuestros artículos salten mucho más bonitos. Vamos a guardarlo aquí y arrastrarlo todo el camino hacia abajo y lo primero que queremos primero es seleccionar éste. Hazlo blanco porque queremos que destaque, y lo que también queremos es elegir estos iconos y tal vez utilizar este color, elegir el número y tal vez usado decolor, elegir el correo electrónico y usar el mismo color. Entonces si salto aquí, Índices de tres. Entonces es éste de aquí. Vamos a usar este color. Entonces para estos, tal vez podamos usar el blanco para los nombres como este y para todo lo demás, podemos usar otros colores, pero para hacer las cosas más rápidas, puedes seleccionar todo. Después elige este color y luego simplemente elige estos nombres en la parte superior y cámbialos dedo del pie blanco. Puedes, por supuesto, usar cualquiera de estos colores para crear diferentes combinaciones de colores si quieres. Pero me gusta mucho cómo se ve para que puedas seleccionar toda la carpeta una vez más, seleccionar esta y tal vez experimentar, y puedes ver cómo se ve con este color. Y tal vez se ve bien, pero realmente me gustaría que destacaran en la página son solo un poco más así. A lo mejor podemos crear Blanco. A ver cómo se ve eso. Sí, creo que eso se ve bien. Y solo por los nombres, tal vez podamos usar este color, Solo sepárelos un poco. Y por último, para este último, también podemos usar el blanco. Y ahí tienes. Hemos terminado nuestro diseño. Hemos terminado de hacer algunos cambios importantes. Por lo que hemos terminado, incluyendo nuestras imágenes, y en el siguiente video, vamos a hacer algunas otras cosas. Entonces te voy a mostrar cómo puedes incluir diferentes sombras de fondo en algunos lugares, y tal vez podamos jugar con algunas colocaciones, y vamos a ver qué nos perdimos durante este proceso de diseño para que podamos terminar eso , por lo que nos vemos allí. 31. Crear diseño 5: No saltemos por dentro y terminemos nuestro diseño. Entonces voy a acercarme un poco más cerca de aquí, donde testimonial me voy con el dedo del pie doble clic en el botón o puedes localizarlo de lado, y voy a dar click en la sombra aquí mismo. Voy a teclear 10 10 y 20 Centro de Prensa, y voy a asegurarme de que esté en 50% así. Entonces es bonito y grande, o tal vez incluso vamos con el 30%. Creo que eso se ve mucho mejor solo para que podamos hacer que este botón destaque solo un poco más. Y si crees que es demasiado grande, puedes salir de curso hace aquí mismo y tomar 20% y más. ¿ Le pagas a City esa sombra y te detienes? Vamos a introducir un poco más de interés visual, y seguí adelante y creé esta cotización en la tienda de fotos porque los teléfonos funcionan un poco diferente aquí mismo en Adobe Xdd. Después lo hacen en la tienda de fotos. Entonces a pesar de que estamos usando Playfair display front justo aquí, muestra esta cita, por ejemplo, solo un poco diferente aquí dentro de huevos identidades en cuatro tienda Así que seguí adelante, creé y luego simplemente exportó como G y lo arrastró y lo dejó caer aquí mismo dentro Adobe X'd. Entonces tal vez podamos usar un 20% pastoso y simplemente moverlo todo el camino de regreso. O tal vez, no lo sé. A lo mejor podemos usarlo al 40% solo para que podamos incluir un poco más intereses visuales, como así asegurarnos de que el fondo vaya así. Entonces se repasa la cita de fondo, y creo que se ve bien. Entonces, a continuación, vamos a seguir adelante y cambiar cómo se ven estas habitaciones. Entonces vamos a incluir algunas sombras de fondo dentro de aquí y en estos fondos. Entonces vamos del dedo del pie, asegúrate de que destaquen una vez que la persona se cierne sobre ellos. Entonces localicemos las habitaciones, localicemos y abramos todas estas carpetas. Entonces habitación uno BG y lo que podemos hacer aquí mismo es ir a la sombra y teclear en 55 y tal vez 20. Al igual que así. Y como puedes ver, sí crea una sombra bastante bonita, y hace que solo asegúrate de que destaque en la página un poco más bonito puedes hacer clic en ella una vez más saltando a aquí. Asegúrate de que esté al 16% y lo que podemos hacer ahora es correcto. Haga clic en la capa. Puedes hacerlo aquí, o puedes hacerlo aquí, haz clic derecho Haz clic en copiar y luego selecciona estos otros dos y simplemente haz clic derecho y apariencia basada , y se basará exactamente la misma apariencia en todos ellos. Entonces, no los escondamos porque no los necesitamos en este momento. Y simplemente les vamos a mostrar una vez en el hover. Por lo que significa solo incluir este. Y como puedes ver, cuando la persona se cierne, mostrará esta sombra de fondo, y estos dos se quedarán sin ella. Y cuando cubran este, éste se va a apagar y así sucesivamente y así sucesivamente. Entonces sólo para que crea un poco más fuera de interés visual. Entonces vamos a bajar, y vamos a hacer algunos cambios del dedo del pie esta imagen fuera de la ubicación. Entonces lo que podemos hacer ahora es incluir en esta sombra. Entonces 10 y 20 como así, y va a crear una bonita sombra de fondo aquí. Puedes jugar con estas flechas e incluir sombras de fondo para ellas también, si quieres. Pero creo que se ven bien así. Ahora se agregó este botón, y voy a saltar a este botón ubicado aquí, clic derecho copiar. Cierra todas estas carpetas arriba, ubicadas de nuevo dentro de aquí, clic derecho y apariencia basada. Entonces, como puedes ver, 10 10 20 vas a hacer lo mismo por este fondo. Pero no vamos a ir a basar la apariencia, porque este botón es de un color diferente, por lo que creará un tipo diferente de un layout. Y luego queremos. Entonces como puedes ver, creamos eso. Y ahora podemos cerrar esto y finalmente, quiero saltar aquí y crear solo uno de estos ejemplos. Por lo que puedes imaginar que cuando alguien haga clic aquí mismo, hará una selección, y destacará un poco más contra todos estos otros. Entonces vamos a crear rápidamente la sombra. Entonces usemos 10 san y 20 mismos como lo hicimos para todos estos otros, así te imaginas cuando alguien hace clic en éste y se abre en el menú desplegable colocará una sombra sobre él. Pero por ahora, simplemente quitémoslo de él. Así que haz click justo aquí, y cuando quieras incluir atrás, simplemente haz clic aquí. Y luego más adelante, vamos a copiar descenso basado en él a todos estos otros. Pero tal vez podamos hacer eso ahora mismo. Así que abre todas estas otras entradas y simplemente haz clic derecho en pegar apariencia y luego solo pasa por todas ellas y apaga desde aquí porque no lo necesitamos por el momento, y lo vamos a usar cuando lleguemos a la etapa de prototipado apagado. Nuestros proyectos son finalmente cambiarlo por este, y eso va a ser todo para este formulario de reserva. Incluso puedes asegurarte de incluir un color de coche más claro, por ejemplo, si quieres llamar aún más la atención sobre este campo. Pero creo que se ve bien. Y ahora vamos a movernos. ¿ Quieres a esta sección final? Voy a cambiar este color de forma de nuevo a Blue Song, voy a seleccionar esto y asegurarme de que esté ahí. Se ve bien, OK, y finalmente seleccionó la foto BG Control D para hacer un duplicarlo y acaba de llamar a esta imagen de un pie de página, e incluí una imagen más aquí dentro de nuestra carpeta Imágenes. Se llama Footer Image, y son estos famosos molinos de viento de Nicholas Conducta. Condenamos posicionarlos así, y lo que quiero hacer ahora es simplemente bajar su pacenti de ello. Entonces lo voy a bajar a tal vez 15%. Y como puedes ver, crea un bonito interés visual en el fondo. Así que ordene, emblemático hito fuera de la mansedumbre, y simplemente crea un poco más de interés por el fondo que solo un color regular. Entonces son hace. Hemos terminado nuestro diseño. Pasamos por todas las etapas. Vayamos aquí mismo y tal vez podamos apagar la sombra o simplemente ocultarla como hicimos con el resto de ellos. Y puedes jugar con él e incluir quizás algunas texturas de fondo aquí mismo si quieres, tal vez añadir unas bonitas texturas viejas a estos campos. Por lo que este campo testimonial, así como este campo formulario de reserva justo aquí si quieres. Pero creo que funciona bien con este diseño de Orel. Es realmente limpio, sencillo, fácil de usar fácil de navegar. Y una cosa final que me bordea es el color de este texto. Creo que se ve solo plano de remolque con, ah, este color así como este porque es el mismo. Acabamos de crear esto para ser audaz en esto para ser regulares, Así que sigamos adelante y cambiemos eso. Entonces vamos a saltar dentro del dedo del pie aquí y localizar el color de nuestro texto. Entonces es éste, pero no vamos a cambiarlo en todas partes, sólo vamos a cambiarlo en algunos lugares seleccionados y dejar el color como estaba en algunos otros lugares. Entonces por aquí, simplemente incluyamos. Por lo que es este color 90 90 90 como así. Y voy a hacer una nueva muestra de color aquí mismo en el panel de activos, y voy a saltar adentro y simplemente seleccionarlos para saltar de nuevo aquí y hacer clic aquí, y voy a cambiar esta también. A esto como puedes ver , ahora destaca mucho mejor porque no es del mismo color. Se ve solo un poco diferente, y tal vez podamos hacerlo igual por éste. Entonces sólo que lo podamos diferenciar un poco más y vamos a dejar esto tal como es porque necesita destacar de la página así. Para que podamos seguir adelante y dar click en éste, por ejemplo, y creado así. Podemos dejar éste tal como está. Entonces, como, este texto también éste, éste también Podemos seleccionar este texto y como se puede ver cuando lo cambie aquí, puede ver claramente la diferencia entre estos dos. A lo mejor podemos incluso seguir adelante y hacer que éste sea audaz así sólo para que podamos crear un poco más de interés visual como ese. Por último, hagamos lo mismo a aquí. Entonces déjalo como es así. Y a lo mejor podemos dejar estos como están, porque necesitamos que destaquen solo un poco más para que la gente vaya a dar click en realidad en este formulario y finalmente cambiar éste a este nuevo auto. Entonces ahí lo tienes. Hemos terminado nuestro diseño. Ahora lo que nos queda por hacer es planear y pensar a través de nuestros prototipos. Porque en la siguiente sección fuera del curso. Vamos a empezar a diseñar prototipos porque vamos a compartir este diseño con el cliente y les permite saber lo que hemos hecho hasta ahora. Y, um, dales la oportunidad de proporcionarnos la primera retroalimentación para que podamos saber qué hicimos bien y qué quieren que cambiemos para que podamos hacer esos cambios antes de ir más allá con esto proyecto. Entonces esa va a ser básicamente nuestra primera revisión para este proyecto. Entonces te voy a mostrar en la siguiente sección del curso, cómo puedes empezar a crear tus prototipos, cómo puedo darle un poco más de vida a tu diseño y cómo puedes presentarlo a tus clientes y a los desarrolladores para que tal vez puedan entender mejor cómo llegaste a algunas de estas ideas. ¿ Y cuál es tu pensamiento y lógica detrás de ellos? 32. Trabajar con componentes: en este video. Yo quiero hablar de componentes porque no los incluimos en el proceso de diseño, y hay una razón para ello. Quería mostrarte una obra alrededor sin ningún componente incluido para los botones, por ejemplo, y estos formularios. Y si hago clic aquí mismo en mi culo, es panel. Se puede ver que no tenemos ningún componente, pero voy a cambiar eso ahora porque ya viste todo el proceso de diseño sin ningún componente, por lo que puedes elegir si deseas crear tus diseños sin componentes o con ellos . Personalmente, me gusta crear componentes, y me pareció que eran manera más fácil de diseñar cualquier cosa en Adobe X'd. Pero yo sólo quería, como dije, dedo del pie mostrarte el camino sin ningún componente porque esta es la página de aterrizaje y de todos modos no vamos a tener un gran número de componentes. Pero quiero mostrarles en este video. alto puede crear rápidamente componentes y cómo puedes usarlos a lo largo de tu diseño porque más adelante cuando diseñaste bajo páginas, es realmente importante que sí tengas componentes, así que vamos a acercarnos un poco más a nuestros diseños, por lo que te voy a mostrar cómo puedes crearlos. Así que da click en tu Are Barkley bastante aquí para incluir cred y primeras cosas primero. Si acerco un poco más, se puede ver que nuestro botón está tomando más de dos columnas para que podamos cambiar eso. Podemos crear un botón. Ocupa dos columnas o tres columnas, así que acerquemos un poco más. Y si hago clic en él, puedo saltar aquí mismo. Carnoso NBG y yo podemos mover esto para caber dos columnas. Como puedes ver, puedes seleccionar el texto y centrarlo y reservar Ahora belleza adentro y vamos a cambiar el nombre a Neff así y yo podría golpear control Comando K. Y como puedes ver, muestra este diamante verde, lo que significa que este es el componente y además, este es el componente maestro del que se pueden tomar los componentes hijo, que significa que cualquier cosa que se cambie en los componentes maestros, también se actualizará en los componentes hijo. Y si salto aquí mismo para masificar su cinturón, se puede ver que ahora tenemos libro ahora ser tiene naff para que podamos saber eso. De acuerdo, este es un fondo que es libro ahora, pero está ubicado dentro del nunca porque va a contener este ingenio de dos columnas. Por lo que ahora hagamos rápidamente el cambio de dedo nuestro menú. Entonces si recuerdas, reposiciona sus 70 píxeles a partir de esto. Entonces hagámoslo una vez más como tan 1234567 para que podamos tener incluso espaciado a lo largo nuestro diseño para que veas este es el fondo más pequeño. Sigamos adelante y creemos uno más grande. Entonces si acerco un poco más aquí, se puede ver que tenemos ese mismo botón que solíamos tener ahí arriba. Pero ahora son 2.5 columnas, básicamente, así que vamos a extender eso por aquí, y vamos a posicionar el texto igual que antes, así que en el medio. Y voy a cambiar el nombre para reservar ahora Bt in. Pero llamémoslo grande porque es más grande y es ah, ingenio son tres columnas ahora, Así que una vez más, Controlador Comando K y si salto en mi culo está atado. Se puede ver que ahora se crea. Por lo que tenemos dos tamaños fuera del mismo fondo. Y este botón contiene este drop shadow si recuerdas de videos anteriores y éste no. Entonces ese es el factor diferenciador una vez más. Entonces ahora si quiero duplicar este botón o colocarlo abajo porque si me desplaza hacia abajo y verás que lo tenemos aquí para que puedas hacer una de dos cosas puedes saltar dentro de aquí , que es el formulario de reserva. Localice el fondo que se encuentra dentro de la forma. Aquí está al fondo. Entonces lo que puedes hacer aquí mismo es hacer una copia de este fondo y esa será tu copia de hijo . Por lo que simplemente puede hacer clic cuando mantenga todo para arrastrar hacia abajo, o simplemente puede hacer clic aquí para eliminar este botón. Puedes saltar de nuevo al panel de activos y puedes arrastrar y soltar un nuevo botón aquí mismo. Lo que eso hará es que creará una instancia a partir de este botón. Entonces lo que sea que cambies por ejemplo, colores o texto o algo así, se actualizará en tiempo real y te mostrará actualizar aquí también, así que vamos a moverlo. 40 pixeles. Igual que hicimos con el resto de ellos. Por lo que puedes mantener el turno hasta que te muestre la distancia aquí. Entonces eso es básicamente todo para los botones. Y escuchamos un botón más, que está dentro de nuestro formulario de suscripción, pero porque es un poco diferente, por lo que el color es diferente, el tamaño es diferente, así que juguemos con él, primer lugar, entonces lo que podemos hacer es aprender qué tan grande era la distancia entre este botón y esta entrada de correo electrónico ? Entonces si hago clic en el botón, mantenga presionado el turno y lo muevo, se puede ver que tenemos, por ejemplo, 130 para que pueda moverlo aquí mismo. Puedes hacer click dentro y puedes hacerlo. Por ejemplo, tres columnas con like para que puedas posicionarlo de esa manera. Y tal vez podamos crear un espaciado de columna para que puedas hacer clic en el formulario de correo electrónico y puedes arrastrarlo hasta el dedo del pie aquí para que veas que tenemos un espaciado de canaletas, básicamente no la columna. Puedes agruparlos y, por ejemplo, seleccionar inscribirte para el boletín y simplemente haz clic aquí y los colocará en el medio. Pero no funcionó porque esto es más amplio que esto. Entonces, con el exterior fuera de tu carpeta, haz clic aquí, arrástrala de nuevo a su carpeta, haz clic derecho en grupo, y aquí tienes. Conoce lo que puedes hacer es que puedes crear estos campos si quieres como componentes separados. Pero lo que en realidad quiero hacer es agruparlos así que controle G y nombrelo, por ejemplo, formulario de correo electrónico o suscríbase para él aún mejor, como así y golpear control o comando K, porque va a crear un componente basado en estos dos elementos. Entonces básicamente, puedes, como viste con este botón, simplemente puedes arrastrarlo y soltarlo en la página lo que quieras, porque en la mayoría de las páginas, este formulario de suscripción aparecerá de todos modos, Entonces es una buena manera de dedo del pie crear un componente, que es esos dos elementos básicamente combinados en un solo elemento. Por lo que depende de ti si quieres trabajar con componentes o no. Me gusta trabajar con componentes, sobre todo si tengo varias pantallas diferentes. Básicamente, si estás trabajando con solo una pantalla, solo una página, así que en nuestro caso la página de aterrizaje. No necesitas ningún componente. Pero si más adelante cliente quiere ampliar eso y quiere incluir todas estas otras páginas, como en nuestro caso, lo harán. Entonces, por ejemplo, solo imagínate, tendremos tres páginas de habitación diferentes página de reservación sobre nosotros contacto. A lo mejor van a incluir a algunas páginas diferentes. Por lo que son página separada para el formulario de reserva y así sucesivamente. Se ofrece. Así que solo imagina una serie de páginas diferentes se incluirán dentro, por lo que los componentes son realmente útiles. Forma de mantener la consistencia entre tus diseños. En el siguiente video nos vamos de pie, agrega algunos toques finales a nuestro proyecto. Vamos a diseñar menús desplegables, y vamos a diseñar cómo se verá realmente este formulario cuando hagan clic en él. Por lo que vamos a incluir algunas opciones para esto y esto lleno así como el calendario para estos dos campos. Por lo que RC, ahí 33. Crear Dropdowns: ahora agreguemos toques finales de nuestro diseño. Entonces lo que vamos a hacer es agregar menús desplegables para habitaciones justo aquí así como para banderas justo aquí. Entonces vamos a saltar en todo el camino hacia abajo, y vamos a agregar diferentes selecciones desplegables a esta forma. Entonces vamos a incluir diferentes tipos de habitaciones, calendarios aquí mismo y finalmente invitados aquí mismo en la parte inferior. Y vamos a terminar nuestro diseño. Entonces empecemos. Y me voy a desplazar todo el camino hasta la parte superior click en el puerto del diseñador y esconder la cuadrícula porque no queremos que nos distraiga. Por el momento. Voy a abrir el gallo. Voy a localizar las habitaciones. Entonces aquí están, aquí mismo, y voy a duplicar básicamente tres veces. Así controlado el 123 y mover esos tres todo el camino hacia abajo. Así que mantenga el turno, selecciónelos y los movió hacia abajo para andar por aquí. Entonces cuando se encuentran con el borde inferior off R nev BG así que básicamente esta parte blanca y luego mantenga presionada mi tecla de turno y moverla hacia abajo para el píxel. Por lo que 1234 hacen lo mismo para estos dos. Entonces localiza el borde inferior justo aquí. 1234 Y finalmente haz lo mismo con el 3er 1 Así que muévelo hacia abajo. 1234 Y estas tres van a ser nuestras habitaciones básicamente. Entonces si estamos saltando un poco abajo, puedes ver que tenemos familia clásica en habitación grand deluxe, así que eso es lo que vamos a escribir. Entonces tal vez podamos dejar espacio para los tres extremos mecanografiando Clásico. Asegúrate de que sea de la izquierda. Entonces dejó la línea como esta Esta va a ser familia como así Y finalmente, vamos a tener una habitación grand deluxe feliz como esa. Y lo que necesitamos en este momento es que necesitamos un fondo de navegación. Por lo que vamos a crear uno usando nuestro nunca BG para que puedas controlar la unidad y puedas moverla hacia arriba. Entonces solo para que veas lo que estás haciendo, entonces puedes moverlo hacia abajo hasta que se reúna con tu nunca BG como So Así Tan pronto como veas esta línea azul, eso significa que están perfectamente alineados. Muévelo hacia abajo hasta que se reúna con nuestro texto. Al igual que todo el turno 1234 Porque queremos tener el mismo espaciado hacia abajo que hicimos con nuestro texto. Y lo que queremos para este borde izquierdo es alinearnos con el texto de la izquierda y luego mantener turno. 1234 a la izquierda. Y para este borde derecho, alinémoslo con reserva, por ejemplo, que puedas moverlo así. Y por último, lo que queremos es redondear nuestras esquinas para que puedas dar click aquí mismo. Queremos alrededor de esquina inferior, izquierda e inferior derecha para que puedas localizarlos aquí mismo. Escriba en 10 y 10 prensa entrar o devolver mismo líquido lo con todo el resto de ellos. Y aquí vamos. Hemos creado nuestro desplegable. Entonces ahora lo que quieres es refrenar esto para que sean nuestras habitaciones de habitación y bajaron gen b y vamos a agrupar a todos ellos controlan G y llamar al desplegable de esta sala así y lo vamos a mover Justo debajo nunca están BG porque queríamos aparecen debajo de ella, y lo que queremos hacer es remolcar. Añadir algo de sombra de gota, también, nunca son así. Haga click en él, Click Shadow y se sumará apenas una ligera gota. Sombra a ella y se puede ver 03 y seis. Entonces eso es todo por defecto. Y creo que se ve bien porque sumará apenas un poco de interés visual porque esto va a bajar abajo. Una vez que hagamos clic en las habitaciones, esta flecha va a subir, y vamos a crear lo mismo para las banderas en este momento. Ahora por el Flex. Como se explicó en videos anteriores, utilicé este plug in llamado yo logos para que puedas dar click en él y luego simplemente generar banderas de país. Tienes que tener 194 formas para su trabajo del dedo del pie porque reconoce 194 países. Entonces así funciona, básicamente, básicamente, y decir a veces, y no lo voy a crear, simplemente voy a copiar las dos banderas que voy a necesitar de otro archivo, y voy a saltar en justo aquí y enfrentarlos adentro. Entonces en algún lugar por aquí, así que tenemos bandera griega y tenemos una bandera francesa, así que los vamos a posicionar por debajo de la bandera del Reino Unido para que podamos centrarlos así, sosteniendo nuestra llave de turno, por supuesto, posición y viejo camino aquí mismo. Por lo que 1234 abajo. Y esta bandera francesa. Si hago clic en él aquí mismo y lo muevo, se puede ver que tiene 40 píxeles hacia abajo también. Entonces lo que necesitamos es que vamos a crear un fondo para ello. Igual que hicimos con nuestras habitaciones. Entonces puedes copiar este fondo desde las habitaciones o crear otro, y simplemente lo voy a copiar. Entonces el control D arrastró fuera de este grupo Las banderas del localizador aquí aire, y simplemente voy a mantener la posición de turno. Está en algún lugar por aquí. Voy a colocarlo hasta que se reúna con la bandera francesa en el turno de abajo. Wanted 34 pero con su seleccionado Así 1234 like so voy a moverlo hasta que se reúna en la parte superior y reducir el ingenio a, por ejemplo, digamos 100. A ver cómo se ve eso. Sí, eso se ve bien. Colócala en el centro y me voy dedo del pie siguen siendo estas banderas o idiomas. Bajar Grupo BG. Estas dos lenguas, así y tuvieron que caer al final así. También moverse por debajo nunca ser Jean porque se va dedo del pie básicamente tienen el mismo efecto que queremos . Y eso es básicamente todo para este desplegable. Entonces, básicamente, cuando la gente haga clic en las habitaciones, se volverá azul. Igual que el color de fondo. Mostrará este menú desplegable, y la gente puede hacer clic en cualquiera de estas opciones. Lo mismo para las banderas. Por lo que si quieren cambiar el idioma del sitio web, pueden hacer clic aquí y luego seleccionar su idioma. Entonces vamos a usar esto y creado para esta forma justo aquí en la parte inferior. Y para ahorrar un poco más de tiempo, simplemente podemos copiar el menú desplegable de esta sala. Entonces controla D. Lo voy a mover fuera de esta carpeta y luego simplemente moverlo todo el camino hacia abajo hasta que esté ubicado cerca de nuestro formulario de reserva. Entonces lo voy a mover adentro y lo que queremos aquí mismo. Como se puede ver, básicamente tenemos fronteras para todos ellos, pero queremos quitar los dedos de los pies de todos ellos. Entonces así es como va a parecer como yo rápidamente alto esto. Entonces si abro nuestro formulario y abro a los invitados, check in, check out y room. Tenemos insumo. Y para todos ellos, tenemos la frontera. Entonces vamos a quitarle la frontera a todos ellos. Por lo que puedes hacer clic uno por uno o puedes seleccionar múltiples opciones y luego simplemente eliminar el borde así. Por lo que cuando los invitados llegaron por primera vez a la página, se verá algo así. Entonces cuando hagan clic en el libro ahora y tengan el tipo de habitación encendido, el borde de entrada se mostrará así, y estos no tendrán todavía frontera. Pero entonces, cuando hagan clic en el calendario, por ejemplo, aquí mismo en el pollo, les mostrará frontera. Ahora esto debería mostrar alma tipo habitación. Es un control de habitación clásico, ver, Así que como puedes ver, a veces puedes ver estas flechas más adelante en el proceso. Entonces así, y ahora lo arreglamos. Entonces volvamos a nuestros menús desplegables, y te voy a mostrar cómo puedes crearlos Así que primero lo primero, vamos a crear un menú desplegable de habitaciones. Entonces aquí está. Voy a colocarlo dentro de la carpeta de esta sala, o puedes posicionarlo debajo como quieras. Hagámoslo de todos modos. Por lo que su posición abajo y, como se puede ver ahora se pega porque porque no tiene esquinas redondeadas, sino que tiene esquinas rectas. Entonces lo que puedes hacer es subirlo. Entonces solo sostén turno hasta que se reúna con éste así, y creo que se ve bien y puedes posicionar esta duda si quieres, Pero no voy a ir del pie. Yo sólo voy a, simplemente a medida, este camino de vuelta hasta aquí. Entonces hasta que se reúna con este borde, básicamente, y puedes hacer clic dentro y ver como por qué tu entrada es así que es 800. Yo lo voy a hacer igual aquí. Por lo que 800 como se puede ver, se extendió todo el camino hasta el borde. Entonces ahora tenemos nuestro desplegable para nuestras habitaciones. Básicamente, se ve igual al de arriba, así que vamos a ocultarlo. Pero antes de eso, lo voy a copiar para controlar el y voy a mover éste hacia abajo. Al igual que así hasta que se reúna como lo hicimos con el anterior así. Y lo vamos a ocultar para que podamos ver qué se encuentra aquí y es invitado. Entonces ocultemos este también. Y esto va a ser invitados bajan así, y en ella iban de pie. Básicamente eliminar algunos de estos artículos para que podamos ver lo que estamos haciendo. Nos vamos de pie a la derecha en algunas cosas que van a determinar qué invitados están llegando a esta habitación. Entonces lo primero es lo primero, vamos a tener adultos así, y vamos a tener Niños abajo así porque queremos que la gente tenga selección si están agregando, si están trayendo Niños con ellos o no, porque entonces los empleados de este hotel podrán decírselo bien, tal vez necesites este tipo de habitación. Es posible que necesites estos accesorios en tu habitación. Es posible que necesites estas muchas camas, estas muchas sábanas y demás para que todos sepan lo que tienen que hacer. Entonces vamos a hacer clic en el fondo de las habitaciones, y vamos a renombrarlo a invitados desplegable BG. Y una vez más, todo esto es importante cuando comienzas a crear prototipos más adelante en puntera tener tu capa y nombrada correctamente para que también animen entidades y las otras características para esa materia dentro de los huevos d funcionen correctamente. Y voy a explicar eso con más detalle cuando lleguemos a las partes prototipadas fuera del discurso. Entonces por ahora, vamos a reducir el tamaño de este desplegable de invitados BG. Entonces solo sostén esto y muévelo hasta aquí porque si te acuerdas, esto era 40 píxeles abajo. Entonces así hasta que se reúnan con el texto y puedes quitar este texto porque ya no lo necesitamos, qué vamos a crear aquí mismo. Entonces, cuando la gente selecciona invitados, puedes ver cómo se ve eso, y esto debería ir por debajo de los invitados así. Por lo que una vez más, cuando la gente seleccione invitados , mostrará sus que abandonaron, y tienen que poder elegir cuántos adultos o cuántos Niños vienen con ellos. Entonces démosles esas opciones. Entonces lo que vamos a hacer es golpear control de sobre estos dos. Encuentra esto y en este 1er 1 para nosotros. Hagamos que se centren en este primer tipo sin forma en dos. Y en esta segunda lista 1, escribe en cero, y podemos posicionarlos así justo debajo. Puedes dejarlos así. Realmente no importa, y depende de ti. Centrarlos así, y tal vez podamos posicionarlos en algún lugar por aquí. Ahora lo que necesitamos. Estos tenemos que crear un signo más para que puedan sumar cuántos más adultos o cuántos más Niños vienen con ellos. Entonces vamos a crear eso una manera fácil de hacer eso. Es simplemente usar una herramienta de rectángulo. Entonces, así, puedes llenarlo con este color. Al igual que, quita el control fronterizo de y puedes rotar esta sección así. Por lo que básicamente tienes estos dos rectángulos y puedes hacer click aquí mismo para que puedas agregarlos como una sola unidad. Pero antes de hacer eso, necesitamos un menos. Entonces vamos a controlar el calor D ruina para moverlo aquí mismo, y vamos a seleccionar estos dos así y simplemente golpear justo aquí lo que dice, agregar porque eso los agregará como una forma separada para que tal vez podamos escribir anuncios o eliminar algo así y puedes posicionarlos para que estén en el centro fuera de tu texto. Entonces, así, y entonces tal vez puedas hacer un espaciado. Entonces, tripulaciones, y muévanse. A lo mejor 40 como este 40 con éste así así. Y puedes moverlos todos, incluyendo el cero. Remolque este borde y luego mantenga pulsado el turno más de 40 píxeles, puntea la izquierda y luego simplemente duplique estos tan controlados profundamente y muévalos abajo hasta que estén en el centro fuera de tu cero. Y luego puedes organizar tus capas un poco mejor. Entonces, así. Y ahí tienes. Has creado tu gota, su menú. Pero esto tiene que estar aquí, y puedes cerrarlo, hacer clic en una espera y ver cómo se ve eso. Ahora bien, si crees que este espaciado está un poco apagado, puedes cambiar eso si quieres. Entonces lo que puedes hacer es simplemente localizar dónde están. Por lo que los invitados bajan y puedes seleccionar todos ellos posición hasta que estén alineados con este borde de esta manera. Al igual que todo el turno. 1234 Entonces otra vez, 1234 Y luego simplemente mueve esto hasta que se reúna con borde inferior así. Y luego mover todos ellos hacia atrás 40 píxeles. Entonces 1234 Y ahora tienes un espaciado mucho más agradable entre todos ellos. Y ahora vamos a ir adelante y saltar y hacer lo mismo por este Stop uno. Entonces va a ser más fácil, porque sólo tenemos capas de texto. Básicamente. Entonces muévalos hasta que se reúnan con este deporte para igualar, así. 12341234 Una vez más y mover este fondo a aquí. Entonces trae la espalda. 1234 como así y ahora están en el medio. Entonces, vamos a ocultarlo. Voy a dar click en esta entrada, Quitar la frontera. Voy a dar click en esto. entrada se quitó la frontera por ahora. Voy a esconderlos a todos. Y ahora nos vamos a centrar en los calendarios de chequeo y echa un vistazo 34. Crear un calendario: Y ahora por fin, sigamos adelante y creemos nuestro calendario. Entonces si acerco un poco más cerca de aquí y estoy cocinando justo aquí en el formulario de reserva , abre el formulario, localiza el pollo, y lo que puedes hacer aquí mismo es básicamente copiar y pegar el fondo para cualquiera de estos otras que creaste para controlar D. Y puedes arrastrarlo fuera del nombre temprano completo de chequear y playy como así, y puedes moverlo hacia abajo hasta que se encuentre con éste. Y si encuentras que alguno de estos otros distrae, simplemente puedes esconderlos. Entonces mueve éste hacia abajo y voy a dejarlo así por ahora. Entonces lo que vas a hacer es subirlo un poco así y luego moverlo hacia abajo justo debajo para que podamos tener suficiente espacio para nuestro calendario. Y si crees que se va a extender todo el camino hasta aquí, puedes hacer eso también. Entonces, por ejemplo, puedes tener el ingenio sea dedo del pie aquí, pero va a chocar con este check out. Entonces dejémoslo así por ahora. Por lo que saltando dentro del check in y tal vez puedas duplicar estas herramientas, controlar d, lo arrastró afuera y luego simplemente colocarlos abajo para escuchar, o simplemente puedes hacer clic en ellas y luego moverlas abajo. En ocasiones puedes encontrar estos bichos, así que como lo puedes ver, no funciona. Vamos a mover este sólo un poco hacia abajo para que podamos ver dónde está el borde. Entonces algo como esto y me voy a meter el dedo del pie aquí mismo. Septiembre de 2000 y 19 por ejemplo. Y puedo posicionarlo en el medio así, O puedes seleccionar rápidamente estas dos posiciones en el medio, y ahora puedes posicionarlo como era antes. Entonces, en algún lugar por aquí, y luego puedes dar click el 2 de septiembre y hasta que se alinee con el spot, Magister cambia 1234 si quieres, o puedes tenerlo, también. De verdad depende de ti, o puedes tenerlo a por estos otros. Entonces no. Vamos a crear unos días así el domingo. O simplemente puedes tener s como este y puedes golpear Repetir Great. Entonces necesitamos siete así, y lo que puedes hacer es posicionarlo aquí. Entonces 12 tal vez, Y luego simplemente aumentar en el espaciado hasta aquí, por ejemplo, y ahora se puede escribir el lunes en este. O se puede incluso mejor en grupo este repite grilla. Da click aquí y ahora puedes golpear el control G para agruparlos de nuevo como aquí mismo, posicionarlo en el medio así y ahora lo que podemos hacer es escribir en días presentador y tal vez posicionar. Está 20 abajo así, y tal vez incluso podamos cambiar los colores. Entonces usemos este color, tal vez, o algo un poco más oscuro. A lo mejor hasta podemos usar el azul, así que realmente depende de ti. Pero usemos este, por ejemplo, solo por ahora, y puedes saltar dentro y empezar a escribir. Entonces éste es martes, éste es miércoles. Éste es jueves. Viernes. Se va a quedar domingo y sábado. Ocho. Al igual que esto. Entonces cuando terminen los días, puedes golpear el control D y moverte un poco hacia abajo. Entonces, ¿qué hay click en este y posicionarlo abajo 20 así y queremos cinco abajo para que ya sea pueda usar Repetir. Genial para ello también. 2345 Like so Y básicamente vamos a extender estos BG todo el camino hasta algún lugar aquí y luego golpear 1234 usando tu tecla de turno para que podamos tener incluso espaciado para todos ellos. Al igual que así. Y como puedes ver, va todo el camino hacia abajo. Básicamente, el dedo del pie son pulgada inferior. Entonces qué podemos hacer. Entonces estos son nuestros días así que podemos golpear justo aquí y tú puedes pegarle en grupo genial como este, y luego puedes incluso en grupo todos ellos, como si quieres, pero yo los voy a dejar como están, o incluso mejor. Hagámoslo así pega en grupo en todos ellos, y luego vamos a agruparlos por columna, así que va a ser más fácil para nosotros alinearlos con estos Stop quiere. Entonces hagámoslo. Entonces voy a hacer clic en lados de arte de verano, y voy a dar clic en el primer cambio de hoyo y luego simplemente hacer clic en abajo Control G. Y tal vez pueda llamarlos número uno o Fila uno por ejemplo. Sí, notifiquemos deudas y luego hagamos lo mismo con todas estas otras. Entonces, control, G, voy a nombrar a este poco también, y hacer lo mismo por todos estos otros. Déjame pausar rápidamente el video aquí para que no te aburras conmigo seleccionando todos ellos. Por lo que cuando se seleccionan todos, puedes seguir adelante y agregar tus fechas. Entonces, por ejemplo, tal vez puedas ver algo así como días. Entonces tal vez esto va a ser 29. Esto va a ser 30. Es esto va a ser primero segundo, luego lo y se puede deshacer de curso, mantener el control y hacer clic directamente dentro. Va a ser quinto. Esto va a ser sexto séptimo, y déjame oponerme al video aquí para que pueda sentir el resto de ellos y luego volver a ti. Entonces ahora que los llenamos todos, podemos seleccionar un número dos de aquí y darle algo de color fuera de menor visibilidad. Por lo que podemos hacer con este. Por ejemplo. No, lo mismo para este Número uno y lo mismo para 29 30 porque estos son del mes anterior, y básicamente podemos darle octubre, Digamos, porque sí tiene 31 días y simplemente posicionarlo en el medio así, y lo que vamos a hacer ahora es alinear a todos un poco mejor. Entonces usemos pero solo uno y seleccionémoslos todos. Posicionamiento así cerró la carpeta que escribí para gustar, Así que tira tres como este piso pro, como así luego cinco. Esto es realmente tedioso, pero hay que hacerlo básicamente. Por lo que a veces encontraste estas tareas tiene realmente tedioso. Pero al final del día, tú como diseñador realmente tienes que hacer eso. Entonces una última cosa que puedes hacer es simplemente en grupo los días. Entonces posiciona esto para estar en el centro fuera de tu día. Por lo que simplemente mantén el turno y muévelo hasta que esté en medio de tu día, básicamente así hasta que se encuentre en el medio así y luego cuando termines que condonas, simplemente llama a estos días. Entonces este es domingo así. Éste es lunes, martes, miércoles, miércoles, y déjame volver a pausar rápidamente el video aquí. Y luego cuando termines eso, puedes simplemente arrastrar todos estos a sus carpetas dedicadas. Este es sábado. Este es el viernes jueves así que básicamente los dejó caer. Entonces este es el miércoles. Por lo que el martes, el lunes , y finalmente el domingo, igual y durante su mostrador está terminado. Entonces ahora si los selecciono todos y veo dónde están justo aquí, así puedo agruparlos a todos como así controlar G. Y lo que necesitamos es una flecha. Entonces, simplemente usemos este, por ejemplo. Entonces controla a Andi para duplicarlo. Voy a moverlo afuera para escuchar y voy a ponerlo del pie justo por aquí. Entonces voy con el dedo del pie incluido a la vista fuera de nuestra carpeta y esta va a ser nuestra flecha derecha así, y voy a rotarlo y mantener presionada mi tecla de turno. Colóquelo en el medio así que hazlo ser 40 de la derecha, así. Control d Esta va a ser una flecha izquierda así? Y simplemente puedes voltearlo horizontalmente y posicionarlo para que quede a 40 píxeles de este borde izquierdo . Entonces ella 81234 así, y Octubre va a estar en el centro y este es nuestro calendario, así Y una vez más, si seleccionan el check in, click en la entrada, incluyen la frontera. Entonces así es como se va a ver eso. Por lo que básicamente este calendario va a descender y podrán seleccionar cualquier fecha que pudieran querer. Y cuando terminen con eso, se va a actualizar el dedo aquí mismo se va a cerrar, y luego van a dar clic en el check out, y tendrán que hacer básicamente lo mismo. Entonces para ello, usemos calendario tan económicamente controlar. Ver, doble clic aquí. Control v Amero así, control de una vez más y este va a ser nuestro calendario de check out. Mi este hit entra y puedes mover todo el asunto hasta que se alinee con nuestro check out así, moviéndose por debajo del check out, ocultarlo, y yo también voy a esconder el mostrador de check in. Da click aquí, quita la frontera porque nos necesitan en este momento y es nuestra forma básicamente completada . Por lo que en la siguiente sección fuera del curso vamos de pie. Empieza con nuestro prototipado. Te voy a mostrar cómo puedes crear algunas interacciones básicas que realmente pueden reventar tu diseño y hacer que tu cliente comprenda tu proceso de pensamiento y tu lógica detrás de este diseño. Como puedes ver, a veces tenemos algunas tareas tediosas que tenemos que terminar y que tenemos que completar el número de la forma en que puedes crear este calendario, usando un plug in para que puedas dar click en los enchufes que llama Se llama Calendario y lo puedes buscar aquí mismo, algún calendario. Y si hago click show mas es de Palo sé un genio. Pero en mi opinión, realmente no está tan bien porque Pero acabo de mostrarles que tienen que crearse básicamente ustedes mismos porque no actualiza los teléfonos a los tamaños que quisieron. No se puede elegir el tamaño del teléfono. Entonces si hago click aquí mismo para mostrarte puedes elegir un idioma solo puedes vender talla. Entonces básicamente qué tan grande es el calendario, que crees que es bueno, pero no te muestra todas estas fechas y todos estos detalles puedes consultar el mes que quieras. Pero como puedes ver, realidad no está todo fuera tan sofisticado. Puedes elegir en qué parte comienza la semana y cómo se va a ver el formato y simplemente haz clic en make under. Pero como dije, puedes jugar con él si quieres. Es gratis, claro, pero dijeron que en realidad no es tan bueno y ustedes tienen que hacer todos esos cambios importantes ustedes mismos. Entonces básicamente, eso es todo para las piezas de diseño. Y en la siguiente parte del curso vamos a saltar a la sección de prototipos, y te voy a contar un poco más sobre cómo realmente puedes hacer que este diseño cobre vida con algunas interacciones y animaciones básicas, así que yo te veré ahí. 35. Organización: en esta sección del curso, vas a empezar con el prototipado. Y si nunca te han hecho mal lapping antes, sobre todo en Adobe X'd. Básicamente, lo que hay que crear es uno de estado y luego decir a. Entonces si recuerdas lo que hicimos antes en una parte anterior, creamos, por ejemplo, desplegable de esta sala así como estas banderas cayeron. Entonces básicamente, tenemos antes y después del estado mismo líquido aquí. lo que este es el estado antes para la sección de sala , por ejemplo, y al hacer clic en esta flecha, se abrirá el estado after, y después de que se abra, puedes elegir lo que quieres hacer con ella. Entonces, por ejemplo, puedes elegir diferentes selecciones, y tenemos cuartos de plástico y déjame revisar rápidamente lo que tenemos. Aún así tenemos una habitación clásica, habitación familiar y habitación grand deluxe, igual que lo hicimos para Si te acuerdas, tenemos el fondo drop shadow justo aquí para que la gente pueda elegirlo y luego seleccionarlo desde ahí y luego seguir adelante. Si quieren mucho más sencillamente, click en este texto aquí abajo. Entonces eso es básicamente sobre el pisoteo pro. Tienes que crear diferentes estados. Entonces, Adobe X diácono, ¿ sabes lo que quieres mostrar a tus espectadores? Entonces, ¿quieres mostrarles esto, que es básicamente sección desrecortada, o quieres mostrarles la sección en la que se ha hecho clic y que se han abierto abajo? Entonces eso es lo que vamos a hacer en esta parte del curso. Y para empezar, tenemos que organizar un poco nuestros archivos. Entonces si recuerdas todos y cada uno de estos son tableros tiene un nombre justo aquí en la parte superior . Entonces si vas de izquierda a derecha, tenemos logo. Entonces tenemos breve de diseño de tablero de humor. Tenemos nuestros dibujos de marco de alambre aquí mismo. Después tenemos el marco de alambre y finalmente tenemos el diseño. Entonces lo que necesitamos para el prototipado es que necesitamos crear diferentes copias de este diseño con diferentes estados dentro. Entonces así es como vamos a hacer esto. Vamos a dar click en esto. Nuestro tablero controla profundamente, y tal vez podamos llamar a éste un prototipo uno o solo uno o curry una vez. Entonces se llama proteger uno, y entonces básicamente tienes que contar ¿Cuántos fuera de estos ejemplos quieres mostrar? Entonces vamos a mostrar primero. Por ejemplo, las habitaciones bajan, así que va a ser ésta, luego en el segundo estado, o queremos mostrar el desplegable de bandera para que controle la una vez más. Y también vamos a llamar a éste Proteger, también vamos a llamar a éste Proteger, así. Y si tú, por ejemplo, quieres mostrar cuando la gente hace clic en uno de estos, tienes que crear tres estados diferentes. Pero no poblemos demasiado este diseño, y te voy a mostrar cómo entonces puedes hacerlo por estos de ahí abajo porque la mayoría de facción en realidad sucede ahí abajo. Por lo que acabo de notar que el fondo no se está mostrando justo aquí. Entonces arreglemos eso rápidamente. Tenemos el formulario click en el botón aquí mismo, y vamos a hacer lo mismo para estos dos porque me olvidé de incluirlo cuando estábamos diseñando estos elementos de formulario así y así. Lo que quieres es que tenemos este estado, que básicamente es el Estado Norte, y no está abierto por lo que podemos conectarlo con este 1er 1 Y para cada uno de estos tenemos que crear pantalla adicional. Por lo que tenemos que crear 123 pantallas adicionales. Entonces hagámoslo. Y tal vez podamos llamar a estos. Sí, vamos sólo con los números. Prototipo tres. Simplemente haz que las cosas sean fáciles y bien legibles. Por lo que prototipo para y finalmente prototipo Fife. Y si te perdiste algo, no te preocupes por ello. Siempre puedes volver y hacer algunos duplicados más y luego saltar hacia atrás y hacer esos cambios. Entonces lo que quiero hacer es seleccionarlos todos excepto por nuestro diseño original, y simplemente moverlos un toque a la derecha para que podamos separarlos un poco mejor de nuestro diseño y de todos estos otros elementos. Y en el siguiente video, vamos a empezar con nuestro prototipo, y te voy a mostrar cómo puedes conectar algunos de estos elementos y luego crear prototipo aplicable, que luego podrás compartir con tus clientes y pueden compartir con esos desarrolladores para que puedan ver las transiciones básicas y puedan ver lo que estábamos pensando y proceso de diseño detrás de él. Entonces te veré allí 36. Prototipo 1: Ahora te puedes imaginar que si tienes, por ejemplo, 20 páginas diferentes, la sección de prototipos podría estar demasiado abarrotada. Por lo que siempre es una buena idea separarlo de tu diseño original, porque de esa manera se va a ver mucho más limpio que simplemente agruparlos todos juntos así. Entonces lo que realmente voy a hacer si me alejo todo el camino, se puede ver que llegué al final del lienzo de Adobe X'd. Entonces voy a seleccionar todo, y este papel no se va a mover. Pero lo vamos a tratar un poco más tarde, y los voy a posicionar todo el camino hasta aquí arriba en la cima. Entonces de esa manera, por ejemplo, cuando más adelante diseñemos páginas adicionales, podemos entonces simplemente seleccionar todos estos prototipos y luego simplemente moverlos hacia abajo. Y todas las interacciones que diseñamos nuestro dedo del pie va estar adentro. Entonces lo que sea. Quítalos en la lona y todavía se van a mantener en su interior. Entonces déjame mover rápidamente este papel aquí mismo, así que está dentro de su ubicación original como esta y asegúrate de que sea 70. Es así que eso es básicamente todo y una cosa me olvidé. Y eso es lo que digo. Eso en video anterior que puedes hacer es muchas copias como quieras es quiero hacer esta pequeña animación, así que quiero. ¿ Cuándo hizo clic en estas flechas? Yo quiero que puedan cambiar de una imagen a otra y de una atracción básicamente a otra. Entonces vamos a crear uno más. Por lo que voy a simplemente dar clic en este Control D y renombró este prototipo seis. Entonces, básicamente, medida que avanzamos, vamos a empezar y vamos a crear en estas animaciones adicionales. Entonces, empecemos desde lo más alto primero lo primero. Queremos crear unas salas, y queremos expandirlas hacia abajo. Por lo que voy a dar click en las habitaciones. Voy a dar click en la flecha abajo, y voy a voltearla verticalmente así, y quiero llamarla Vamos a mantenerla abajo, Flecha así. Y luego vamos a crear Elemento adicional que iban de punta incluir en nuestra guía de estilo en la siguiente sección del curso, así como aquí mismo en los componentes. Así que saltemos aquí mismo. Entonces Flecha abajo, está arriba, Y lo que quiero hacer es dar click en esta sala filetes, y quiero aplicar el mismo color azul que vemos aquí mismo, porque va a indicar que seleccionó. Entonces haz click justo aquí y lo que queremos es saltar de nuevo aquí y mostrar las habitaciones desplegable . Así que simplemente haga clic justo ahí, y eso es todo. Entonces lo que quiero hacer ahora es conectar a dos de ellos para que veas lo que hace. Así que salta de nuevo al modo prototipo aquí mismo. Simplemente haga clic en él, haga clic en las habitaciones o en la flecha. Lo que quieras. Voy a dar click en la flecha. O tal vez podamos hacer clic en las habitaciones porque este objetivo hit es demasiado pequeño y vamos a agrupar para apagarlas cuando empecemos a codificar básicamente más tarde. Es decir, son desarrollador va a empezar a llamar más tarde, y van a agrupar estos dos elementos de todos modos, así que vamos a usar este porque es mucho más grande de golpear. Simplemente arrástrelo y dibujarlo aquí mismo, y lo que quieres es que puedan tocar para que vayan a tocar el texto de esta sala . A continuación, tenemos la acción, así que vamos a elegir. También anima porque, como dije varias veces a lo largo del proceso de diseño, cuando tienes a tus capas nombradas igual, van a trabajar del dedo del pie básicamente igual cuando comienzas la auto animación más tarde, cuando llegues a desacreditar la etapa de mecanografía fuera de tu proyecto, así que básicamente guárdalo, Auto Enemy destino va a ser el prototipo uno de flexibilización. Entonces cómo se va a ver lo fácil puedes hacer clic en estos hacia fuera, por ejemplo, puedes chasquear límites. No obstante, quieres que esto se vea, Guárdalo. Está fuera y duración. Usemos 0.46 por ejemplo. Voy a dar click aquí mismo. Haga clic en la vista previa y en grande es sólo un poquito. Entonces cuando hago clic justo aquí se puede ver que la flecha se ha girado, texto se ha vuelto azul y este desplegable ha aparecido de arriba a abajo y hagámoslo al revés. Entonces voy a dar clic en las habitaciones una vez más arrastra el dedo del pie aquí, y va a contener exactamente los mismos estilos que antes Ahora, si hago clic justo aquí en este 1er 1 click vista previa localmente llorado aquí. Y si hago clic aquí mismo, se puede ver la flecha ha girado este pop up ha mostrado un efecto, como aquí mismo lo va a luego simplemente ocultarlo. Entonces, una vez más, si querías aparecer un poco diferente, puedes hacerlo también. Y te voy a mostrar cómo puedes entonces cambiar eso. Entonces, por ejemplo, el diseño. Hagámoslo así y puedes mover esto hacia arriba en la primera parte. Por lo que en esta parte y en la segunda parte, luego saltará hacia abajo. Entonces puedes hacer eso si quieres, y pasemos rápidamente a otra sección. Entonces cuando la gente haga clic en esta bandera, vaya al prototipo y arrástrelo a la segunda pantalla y lo mismo aparecerá para esto. Y cuando hagan clic arriba en este, hará lo mismo para que este auto animate está fuera. Por lo que ahora estamos usando exactamente la misma configuración para esta. Simplemente ve a la vista este segundo estado y judíos, lenguas cayeron y vamos a hacer lo mismo para esta flecha como con ella para la esta primera flecha. Por lo que vamos a voltear trabajo particularmente. Y si cerré esto y voy al molde de vista previa, haga clic aquí. Gracias por jugar. Voy a ir un dedo más grande solo un poquito. Entonces cuando hagan clic aquí y si haces clic justo aquí, se abrirá este desplegable. Pero como se puede ver, este desplegable no se abre. Por lo que cuando me acerque, los traerá de vuelta a mi página original. Entonces cuando haga clic aquí y luego haga clic aquí, puedo colgarme. Haga clic aquí y haga clic aquí. Entonces básicamente, puedes jugar un poco más con él y puedes seleccionar, por ejemplo, diferentes idiomas si quieres cambiar todo su texto y jugar con él para que puedas presentarte mejor a tu cliente si tienes el tiempo. Pero es, ah mucho más fácil si te pueden proporcionar la copia. Entonces, por ejemplo, esta es la copia en inglés. Si te pueden proporcionar la copia original griega, eso sería genial. Después puedes simplemente copiar y pegar todos estos elementos y hacerlos escribir griego en lugar de inglés, para que luego puedas animar eso más. Entonces, por ejemplo, esta es la versión en inglés, y cuando hagas clic aquí, entonces cambiará a la versión griega fuera del sitio web. Pero como decían, tienes que preguntarle a tu cliente el dedo del pie, entregarte esa copia porque si usas Google, traduce fuera de curso, no va a parecer presentable y profesional. Entonces en el siguiente video, vamos a seguir adelante y continuar, sumando son transiciones y nos vemos ahí. 37. Prototipo 2: sigamos ahora y empecemos a sumar nuestras transiciones. Por lo que en el video anterior, agregamos estos para bajar. Por lo que vamos a avanzar un poco más abajo en un set en el de los videos anteriores . Puedes agregar varias páginas usando este exactamente mismo método, y luego simplemente agregar estas sombras de gota. Entonces si solo hago clic aquí y luego ubicado en una BG y lo hago visible, puedes ver cómo se ve eso. Entonces, básicamente, cuando hagan clic aquí mismo, mostrará esta abandonada. Y puedes, por supuesto, mostrarle esto a tu cliente. Pero debido a que no tenemos páginas adicionales por el momento, sobre todo estas habitaciones Bages, este efecto es realmente no tiene sentido porque pueden una camarilla aprender más e ir a algún lado porque aún no diseñamos esa otra página . Entonces déjenme esconder esto rápidamente y cerrar todas estas secciones anteriores, y lo que realmente queremos es diseñar esta. Entonces cómo vamos a hacer eso es, bueno, por eso creamos estas copias separadas. Entonces en la copia agitada, Así que proteja el número tres, lo vamos a localizar aquí mismo, Así que haga clic en su voy a acercar un poco más, y lo que en realidad quiero es incluir una imagen diferente. Por lo que voy a saltar a mi carpeta de imágenes y localizar esta imagen de la casa de luz. Voy a arrastrarlo y soltarlo dentro. Puedes hacer doble clic fuera de curso, mantener la tecla de turno y luego simplemente moverla un poco hacia abajo para que se ajuste mucho mejor a esta zona de vista previa . Y a esto se le llama Armonistas como casa. Entonces voy a golpear el control C desde el control de Internet. Nosotros lo basamos. Y debido a que este texto es para el Dallas, hay que convertirlo texto del área del dedo del pie. Simplemente haga clic aquí. Voy a saltar a mis enchufes. Voy a lucir mucho yeso lleno de texto de posición, insertar texto, insertar texto, y va a insertar algo aleatorio mucho texto ipsum aquí mismo, y ese es básicamente tu segundo estado. Entonces cuando la gente haga clic en el 1er 1 vendrán aquí, y cuando haga clic en la flecha de atrás, quiero decir flecha de la izquierda, van a volver allí, Así que vamos simplemente a saltar a nuestro 1er 1 Así que prototipo esto es una pantalla de inicio. Entonces cuando el click en esta flecha los llevará justo aquí, y vamos a jugar con estos ajustes. Entonces elegamos por la flexibilización. De qué elegir snap, por ejemplo, solo para ver cómo se ve eso. Y para el de atrás, vamos a dar click en esta flecha y arrastrarla hasta aquí, mantener la misma configuración. Entonces él previsualizaría el modo solo para que podamos ver cómo se ve eso con agrandarlo. Y si me desplaza todo el camino hacia abajo, puede ver cómo va a quedar nuestra página web una vez codificada y porque hicimos todas estas secciones bonitas, claras, grandes. Cuando la gente se desplaza, se desplaza hacia abajo, se van a sostener en una sección y se van del dedo del pie. Ser capaz de tomarse su tiempo y leer a través de todas estas secciones muy bien. No hacemos ninguna otra interferencia y sin que surjan otras cosas por el costado. Entonces, básicamente, cuando vienen a aquí, pueden luego hacer clic en esta flecha y se puede ver cómo se ve la animación. Pero en realidad no me gusta. Creo que el auto animate va a ser mucho mejor Así que lo que puedes hacer es simplemente dar click en éste porque, como puedes ver, esta flecha va, remolca esta pantalla. Entonces voy a dar click aquí mismo. Voy a elegir auto animate a partir de aquí y luego simplemente voy a elegir fácil fuera, y voy a dar clic en este y elegir básicamente en la misma configuración. Entonces él está afuera. Y ahora cuando golpee la vista previa, veamos cómo se ve eso. Entonces voy a ir todo el camino hacia abajo. Haga clic en la flecha, y como puede ver, la transición se ve mucho más limpia, sobre todo ahí abajo para el texto. Y como puedes ver, se ve bien. También puedes jugar y agregar algunos elementos adicionales aquí mismo. Entonces, por ejemplo, puedes usar las mezquitas para ocultar estas dos porciones. Por lo que la porción blanca de la izquierda, así como la porción blanca de la derecha y luego esconden imágenes allí y luego simplemente podría hacer un ligero espectáculo y moverlas así. Pero es complicado en nuestro ejemplo, porque tenemos este fondo drop shadow. También puedes usar algunas mezquitas avanzadas, pero no voy a entrar en eso Porque esto es simplemente para hacer al cliente donde lo que intentabas hacer y mostrarles algunas opciones. Entonces cuando hacen clic en esta flecha, pueden ver Ok, lo consigo. Cambia de éste a aquel y vuelve. Por lo que la gente es consciente de lo que hace. Por lo que ahora vamos a pasar a esta sección y en el siguiente video más cuando dedo del pie le añadimos algunos cambios adicionales. Y te voy a mostrar cómo se verá, así que te veré ahí. 38. Prototipo 3: ahora enemigos a estos otros elementos. Entonces si recuerdas en el video anterior agregamos en esta diapositiva aquí mismo. Por lo que creamos una especie de presentación de diapositivas para que los clientes estén conscientes de lo que estábamos tratando lograr su. Entonces ahora lo que queremos hacer es crear estos pueblos drop desde aquí abajo. Entonces tenemos básicamente tres pueblos de gota, pero necesitamos crear 1/4 1 huevos también. Así que salta al diseño un foso control D y haz doble clic aquí y llama a este prototipo siete. Y por eso me gusta Adobe X d s o.Mucho porque se puede simplemente con un clic de un botón cambiar de diseño Moto prototipo los movió de nuevo, hacer algunos cambios adicionales de nuevo de nuevo. Es realmente así de simple de usar, así que realmente me encanta por ello. Así que saltemos el modo prototipado del dedo del pie y haga clic en este 1er 1 Así que lo que quieres para este es cuando la gente haga clic en esta flecha, luego se pondrá boca abajo, y luego se mostrará este desplegable aquí mismo, Así que vamos lo animan rápidamente. Entonces vamos a usar esta flecha aquí mismo. Entonces si hago zoom un poco fresco para que puedas sostener el dedo del pie de control klik por dentro. Pero usemos todo el campo porque así es mucho más fácil. Entonces vamos a arrastrarlo del dedo del pie aquí porque, como pueden ver aquí mismo, tenemos nuestra ligera derecha aquí. Entonces vamos a utilizar Step Auto animate prototipo para Eso es nuestro Nuestro puerto está en fuera 0.4. Entonces exactamente la misma configuración que hacíamos antes. Y vamos a llamar o controlar tecla click Insight y luego simplemente arrastrarlo hacia atrás. Y mientras estamos aquí, podemos sumar las animaciones todas a la vez para que podamos mantener el control. Da click justo aquí, luego añadido al 2do 1 como todo este control Haz clic aquí, arrástralo hacia atrás y tenemos dos más. Entonces segundo dedo del pie último. Entonces éste es para el check out. Se puede mantener el control. Haga clic dentro, arrástrelo a éste, mantenga presionado el control, haga clic dentro y arrástrelo de nuevo a casa y mantenga presionado el control. Haga clic en el último arrastrado aquí controlar y arrástrelo todo el camino de regreso. Por lo que de esa manera lo agregamos en el efecto dedo del pie todos nuestros puertos. Y ahora empecemos un encabezamiento e incluyendo estos elementos. Entonces voy a saltar al modo de diseño y saltar a éste porque como recuerdas, agregamos la diapositiva en este. Entonces voy a saltar al tipo de habitación y a la importación. Voy a incluir la frontera atrás y voy a mostrar casas caídas así. Entonces eso es básicamente todo. Ya podemos pasar al 2do 1 Así que el 2do 1 es para el check in. Entonces voy dedo del pie incluir la frontera para el check in, como así, y voy a mostrar el check in calendario justo a continuación. A continuación, vamos a cerrar esto y mover uno, y esto va a ser para el check out. Por lo que una vez más, incluye frontera aquí mismo y muestra el calendario de salida aquí mismo. Ahora, en este, vamos a ocultar libro ahora, botón, O simplemente puedes moverlo abajo, así. Y se va a quedar oculto porque incluimos este check out excesivamente. Entonces esta cerca esto y finalmente lo que tenemos justo aquí es este tipo de habitación. Entonces voy a mantener el control. Voy a elegir frontera de la entrada y voy a mostrar a los invitados desplegable aquí mismo . Pero lo mismo que hacíamos antes. Simplemente movió este libro Now botón todo el camino hacia abajo en la parte de atrás. Ahora bien, si te molesta esta sombra, simplemente puedes luchar contra el fondo si quieres, y luego mostrarte de vuelta una vez seleccionada. Pero creo que funciona bien. Y una cosa que quiero mencionar es con estos números para poder mostrarte cómo puedes conocerlos . Y yo voy a hacer eso ahora mismo. Entonces, control, hecho, seguimos en el modo de diseño. Entonces lo que puedes hacer aquí mismo es hacer click dentro y hacer click en tres, por ejemplo, like so Y luego puedes cerrar esto y puedes saltar al modo prototipado saltando a este 1er 1 click en el plus y luego simplemente arrástralo hasta aquí y puedes usa la misma configuración y puedes hacer clic en el menos y arrastrarlo hacia atrás, y va a aumentar o disminuir el número de los invitados adultos. Entonces, empecemos desde el inicio. Haga clic aquí. Voy a golpear el modo de vista previa agrandarlo un poco. Y si hago clic aquí mismo, puede ver cómo se ve Usted puede ver la bandera Arrow está girando al revés y podemos desplazarnos todo el camino hacia abajo. Localizar son qué hacer en mansedumbre puedes rápido aquí mismo. Y como puedes ver, Adobe Ex d a. inteligente porque recuerda la posición fuera de tu desplazamiento. Entonces si salto todo el camino aquí y luego aquí abajo, puedes ver que no mueve mi página en absoluto porque sabe que estoy en ese escenario fuera de mi página en esa diapositiva de allá. Entonces, como pueden ver, se ve realmente bonito y voy a bajar y, por ejemplo, por ejemplo, clic en el tipo de habitación. Como puedes ver, se ve bien cuando lo cierras, se remonta. Y lo que olvidé agregar son estas flechas. Entonces arreglemos eso. Entonces localiza el 1er 1 Aquí está, justo aquí. Haga clic en esta flecha saltando al modo de diseño y simplemente voltearla verticalmente como así. Y yo voy a hacer lo mismo por estos invitados abajo. Entonces ese es básicamente éste voltearlo horizontalmente, cerró su formulario de reserva, y yo voy a hacer lo mismo para este último. Simplemente voltearlo así, y ahora volvamos al 1er 1 y veamos todo el prototipo. Entonces voy a hacer clic en blanco aquí, agrandarlo, y luego repasémoslo una vez más. Por lo que cuando hago clic en habitaciones, lo puedes ver. Flecha Seleccionada está apareciendo al hacer clic en la bandera, seleccionó áreas apareciendo también. Se puede desplazar todo el camino hacia abajo, y podemos ver cómo se ve éste. Entonces, como puedes ver, está cambiando estas imágenes. Podemos bajar y ahora seleccionar en tipo de casa. Como puedes ver, la flecha ha aparecido y podemos hacer click sobre ella y la cerrará de nuevo hacia abajo. Se puede dar click en el check in. Está mostrando el calendario, y como puedes ver, la entrada tiene el trazo en él como queríamos. Por lo que al hacer clic para ocultarlo, también mostrará altura en el trazo. Haga clic en este. Está mostrando exactamente lo mismo y haga clic en los invitados y como puedes ver esta flecha se da vuelta atrás. Entonces cuando hago clic aquí mismo nos está dando este extraño efecto con el botón libro Ahora. Entonces lo que puedes hacer dedo del pie eliminar que se posiciona el botón libro ahora todo el camino abajo en todos estos son puertos, y yo voy a hacer eso porque es realmente fácil, y voy a saltar atrás y mostrarte. Pero lo primero es lo primero. A ver si esto funciona. Entonces cuando haga clic aquí mismo, va a mostrar tres. Cuando hago clic aquí mismo, se va con el dedo del pie. Salta de nuevo a dos, y luego puedes simplemente ocultarlo y desaparecerá. Entonces, como puedes ver, es realmente fácil hacer prototipos en Adobe X'd, y le va a dar esa vida adicional a tus diseños que necesitas dedo del pie. Dale al cliente en primer lugar, la idea de cómo va a quedar tu diseño, una vez codificado. Tristemente, todavía no podemos agregar gifs animados, toe adobe X'd archivos. Entonces, por ejemplo, será una bonita adición si podemos agregar algún tipo de video de fondo aquí mismo, porque este va a ser un video de fondo después de todo, así que tal vez en el futuro podríamos jugar con él. Pero si quieres mostrar algunos prototipos avanzados, quizás puedas ir a Adobe Premiere o adobe after effects y luego agregar tus efectos allí . Pero entonces los clientes no pueden hacer clic en. Tus prototipos no pueden dejarte comentarios adicionales, así que tal vez puedas simplemente explicarles que esto va a ser un GIF animado o un video de fondo para que puedas ver con tus desarrolladores y ellos lo puedan agregar ahí. Entonces arreglemos esa última cosa. Y eso es esto y botón para que pueda dar click justo aquí, click en el formulario y su viejo camino hacia abajo y luego simplemente me mudé a aquí. Cierra todos estos. Localizar botón. Está en la parte de atrás. Haga clic aquí. Botón de formulario está todo el camino abajo. Podemos seguir adelante. Haga clic aquí en el Foro. Como puedes ver, está en la parte superior, pero simplemente lo vamos a mover hacia abajo, y luego vamos a saltar hacia atrás y ver si nuestro prototipo funciona sólo con esa sección abajo. Porque como X ha explicado varias veces a lo largo del discurso, posicionar tus capas es realmente importante porque de esa manera puedes asegurarte y que estas animaciones realmente van a funcionar correctamente y no vas a tener algunas efectos raros y animaciones tan extrañas y que no se pretende. Entonces simplemente asegurándote y que posicionas y nombras a tus elementos en grupos de la manera que lo desees. Te va a dar esa ventaja cuando empieces a animar, así que simplemente lo voy a mover todo el camino hacia abajo y porque está en la misma ubicación en todo fuera de nuestros, uh, diseños y hagamos lo mismo por aquí, aunque no importe. Pero como puedes ver, ahora está justo aquí abajo. Entonces vamos a saltar al molde de prototipado. Da click justo aquí, luego él a jugar en grande lo un poco. Voy a moverme todo el camino hacia abajo y no pincharía aquí mismo. Como puedes ver, ya no tenemos ese extraño efecto. Y cuando hago clic aquí, como pueden ver, se ve bien y el fondo se queda atrás como debería. Por lo que ese tipo de correcciones fáciles son cosas realmente fáciles, muy rápidas y realmente sencillas de hacer, por lo que puedes simplemente localizar el problema y luego solucionarlo mientras sabes lo que es. Y tus diseños y yendo del dedo del pie resultan mucho mejor que si no lo hicieras en la siguiente sección . Fuera del curso, voy a hablar de exportar diseños porque cuando termines tu diseño, líquelo ahora mismo, todavía tienes dedo del pie exportarlos, y tienes que preparar los incendios para los desarrolladores como dijeron usted. Por lo que vamos a tratar con la estructura de carpetas vamos a tratar con exportar imágenes , exportar activos. Y quizás lo más importante de todo, vamos a crear una guía de estilo, que luego vamos a utilizar en las etapas posteriores del proyecto. Cuando agreguemos algunas páginas adicionales y dentro de esa estrella consiguió, vamos a incluir todos los iconos fuera de los colores, todo el texto que usamos para este proyecto porque de esa manera se va a ser debería más fácil para nosotros más adelante abajo la línea cuando empezamos a crear páginas adicionales para simplemente y copiar y pegar esos elementos y mantendrá todas las páginas luzcan coherentes y todas las páginas parecen que sí pertenecen juntas. Entonces te veré allí 39. Crear la guía de estilo: antes de enviar cualquiera de nuestros archivos dedo del pie los desarrolladores y los archivos finales a nuestro cliente, necesitamos crear algo que se llama guía de estilo y guía de estilo interior. van a incluir todos los artículos que utilizaste durante tu proceso de diseño. Entonces, por ejemplo, nos vamos a ir a incluir diferentes fondos y estilos telefónicos que usamos en diferentes colores, diferentes iconos. Y luego cuando enviamos este archivo final al cliente y a sus desarrolladores, ahora van a poder acceder fácilmente a toda esa información. Sí, pueden dar clic aquí mismo en el panel de activos y pudieron ver todo lo que está incluido aquí mismo. Pero también nos vamos de punta incluir esos artículos adicionales porque es mucho sencillo poner para que vean en tamaños adicionales espaciamientos adicionales entre artículos y así sucesivamente. Entonces lo que hay que hacer primero es organizar nuestro proyecto un poco mejor porque esta parte la izquierda es un diseño, y esta parte de la derecha es un prototipo. Así que permítanme seleccionar rápidamente todos los prototipos y simplemente tecla de turno de casa y moverlos por aquí . Y como dije, si recuerdas todo fuera las interacciones se van a celebrar y van a ser contenidas como las creamos. No importa si mueves estos aeropuertos abajo, arriba a la izquierda, derecha, todavía van a estar ahí. Por lo que ahora necesitamos crear un nuevo nuestros puertos en ir a dar clic aquí y dar clic en una Web 1920 por ejemplo. Voy a hacer doble clic aquí y escribir en guía de estilo porque ahí es donde nuestra guía de estilo va a ser perspicaz y voy a expandirla un poco hacia abajo. Y debido a que esto no es una página, simplemente puedo sostener esto hacia abajo y eliminarlo todo junto y dentro de esta guía de estilo. Con todo, se va a incluir la información relevante. Pero antes de incluirlos, permítanme crear texto rápidamente. Así que haz click en el textil, haz clic aquí y puedes escribir en diseño, controlar A para seleccionar todo y tal vez creado a dos cientos o tal vez hasta cinco cientos. Algo como esto, y tal vez puedas posicionarlo Está en algún lugar por aquí en el medio. Digamos que sí, algunos raros aquí, y también puedes golpear control de para duplicar esta posición en algún lugar por aquí y llamar a este prototipo porque de esta manera, tus clientes así como sus desarrolladores van a ser capaz de decir que esta parte es el diseño. Y esta parte es el prototipo. Y como dije, porque este lienzo es realmente un espacio grande, puedes posicionarlo lo que quieras, dependiendo de tu proyecto más adelante. Entonces, por ejemplo, cuando agregamos tan más páginas aquí en el futuro, podría mover esta protección hacia abajo. Pero realmente depende del proyecto, y requiere, y requiere, así que vamos a crear rápidamente la guía de estilo. Entonces lo primero que necesitamos son estos colores. Entonces voy a saltar aquí mismo al hechizo de activos, y voy a crear dejar contar rápidamente cuenta 12 colores diferentes. Por lo que voy a simplemente hacer clic en T y seleccionar una guía estrella nuestro puerto click t reducir esto a, por ejemplo, 48 like so y puedo hacer clic y escribir colores. No, no nos gusta esto a 48 y posicionarlo así mantenga turno. 12345678 por ejemplo. Lo mismo en esta dirección. Y voy a crear 12 rectángulos diferentes. Entonces algo como este hit repite genial y dibuja 12 y vamos a necesitar hacerlos un poco más pequeños. Entonces lo que puedes hacer es en la cuadrícula grupal y luego simplemente arrastrarlo de vuelta a aquí alrededor de esto. O simplemente puedes desactivar el redimensionamiento de respuesta y luego bajar decide desactivarlos así. Así que asegúrate de tener 12. No necesitamos una más. Entonces vamos a seleccionar rápidamente este último control D y hacer que se vea igual. Entonces, ¿quiénes son 68 10 12? Y los voy a seleccionar a todos así, y me voy de pie a reducir el tamaño como jabón. Entonces ahora lo que necesito hacer es ir adelante y crearlos por los colores para que pueda dar click en este 1er 1 click en este color click con el 2do 1 este color y así sucesivamente y así sucesivamente. Pero déjame pausar rápidamente el video y me voy de pie, pedir estos colores un poco mejor y luego volver. Entonces ahora tienen un poco más de sentido tan rápido en este, y luego simplemente seguir adelante y dar click en todos ellos. Y lo que hice aquí es que salí del azul superior, que es nuestro azul principal, y bajé todo el camino. Pero cuando hice eso, los ordené del dedo del pie oscuro de er color más claro. Entonces, en cualquier caso, si necesitas alguno de estos colores, puedes acceder rápidamente a ellos desde aquí, así como desde el propio panel de activos. Voy a seleccionarlos a todos y quitar la frontera porque así no se ve mucho más limpio . Pero me voy a quedar con la frontera para el color blanco porque necesitamos poder verlo. Entonces otra cosa que puedes hacer es duplicar este texto y saltar a una posición especial anterior así. Y vamos a reducir el tamaño, por ejemplo a no sé, 24. A ver cómo se ve eso. Funciona bien, y voy a elegir el color blanco, y voy a escribir este código hexadecimal, y también puedes co p desde aquí y luego baste hasta aquí y solo asegúrate de que sea de color blanco como ese posicionado en el medio, y voy a hacer exactamente lo mismo por todos estos otros colores. Entonces voy a pausar el video y luego saltar hacia atrás. Así que ahora lo hizo. Debajo simplemente puedo seleccionar todos ellos hit control G agruparlos, lo movió hacia abajo y nombrarlo colores como Así que ahora necesitamos crear los diferentes fondos, Así que voy a golpear el control D y hacer exactamente en el mismo espaciado que éste. Pero aquí vamos a incluir diferentes teléfonos. Entonces voy a dejar de hablar Florence y asegurarme de que esté alineado a la izquierda ST como este 1er 1 y simplemente moverlo hasta que se encuentre justo aquí Ahora por una vez. Podemos hacerlo fácilmente haciendo clic en todos estos estilos de personajes. Entonces voy a golpear el control D y no nos gusta así. Y como puedes ver, nos falta el estilo de personaje para nuestros títulos. Por lo que vamos a saltar aquí, click en él añadido a aquí. Por lo que tenemos juego para exhibición así, así como jugar para exhibición así. Entonces empecemos con ésa para que podamos llamarla pantalla de tarifa de avión así, y me voy a posicionarlo así. Y como éste es blanco, no va a leer muy bien. Pero nos vamos a ir justo en este oscuro de aquí. Entonces voy a conseguir el control, De Duplicado, hacer exactamente decir espaciado y pasar de 1 a 1. Entonces éste es regular, como se puede ver aquí mismo. Entonces eres angular y la jugada para exhibición fue audaz, cursiva como esta. Vamos a duplicar esta posición abajo así que esta es cursiva de sentido abierto como esta, y vamos a hacer lo mismo como esta, y esta es audaz. Yo lo hice. Joel de duplicó aquí mismo, y éste es blanco, así que no lo vamos a incluir. Pero básicamente es regular y ya lo tenemos aquí. Y esto es regular, y finalmente, vamos a duplicarlo una vez más. Podemos incluir éste si queremos, pero no queremos y terminamos básicamente. Entonces vamos a quitar eso. Y ahora lo que puedes hacer es a la talla. Entonces como puedes ver, está en 70 por lo que puedes escribir 70 por ejemplo, y para esto un tipo de unión en 36 para éste has estado escribiendo 36 también. Este tiene 24 y éste está a 24 también. Entonces ahora lo que puedes hacer es simplemente dibujar un montón de texto o crear y, uh, diferentes párrafos para todos estos diferentes tamaños de teléfono y ponerlos abajo. Pero voy a dejar esto como es por ahora, igual que con los colores, porque todavía no estamos finalizados con los colores. Por lo que a los clientes quizá no les guste. A algunos de estos colores que creamos quizá no les gusten estas muchas variaciones de gris, así que solo lo vamos a dejar como es por ahora. Y por lo general tenemos a alguien como cinco o seis colores. Hombre, tenemos algo así como dos o tres familias de forma diferente y dos posiblemente tres maneras de salir estas familias telefónicas también. Entonces los vamos a dejar como están por ahora. A continuación, necesitamos iconos con Let's first group, todo esto juntos Así central de y va a duplicar esta imposición como así, y vamos a agrupar todo este control G. Introduce los frentes de mecanografía como tan los colores van a entrar en colores, carpeta y Ahora vamos a crear iconos y tenemos una variación o diferentes iconos. Pero ahora voy a seguir adelante y seleccionarlos a todos. Entonces en este control, ¿ ves? Da click aquí, controla V y puedes dar click sobre él y luego dibujarlo cerca de la parte superior. Al igual que así. Pero debido a que este es un icono más pequeño, voy a saltar y seleccionar estos más grandes. Tan malo. Comida y playa. Voy a golpear control. C golpeó justo aquí. Control V N los va a posicionar exactamente en la misma ubicación. Voy a conducirlos por aquí y luego simplemente moverlos mucho más cerca. Entonces algo así es buen ritmo. No puedo hacerlo así y ustedes condonan. Asegúrate de que estén a la misma distancia y luego podrás moverte e incluir estos otros iconos adicionales. Entonces lo que tenemos básicamente, es esta flecha. Vamos a seguir bajando sólo un poquito. Tenemos esta flecha, así que el control. Mira, voy a saltar aquí mismo. Golpea el control V, y lo voy a posicionar un poco mejor después. Pero ahora primero seleccionemos también a los otros. Entonces básicamente, tenemos esta variación fuera de estas flechas. Vamos a hacer copias de ellos, y eso es básicamente todo. Nosotros sólo tenemos estos iconos de redes sociales justo aquí en el Pie de página, así que voy a golpear copia. Voy a cerrar todas estas carpetas, hacer que todo se vea bonito y limpio, saltando aquí mismo y golpear control. veto los basó en. Y por último, voy a elegir uno de estos colores para hacerlos un poco más visibles así. Y ahora vamos a crear rápidamente variaciones para estos diversos iconos. Entonces si salto aquí mismo, esto no es flecha abajo. Si un control de golpe y D y mover su alguna roca, se está moviendo a 70 píxeles, por ejemplo. Va a ser flecha arriba, así que simplemente dale la vuelta aquí mismo. Va a estar arriba como la mayoría de ellos. Voy a golpear control de movimiento. Es así que básicamente 70 píxeles como este y lo vamos a voltear horizontal o verticalmente . O simplemente puedes rotarlo así y va a ser un terror correcto como ese. Y una última cosa que necesitamos es una flecha izquierda, así que simplemente vamos a mover esta a por aquí y va a ser flecha izquierda o mantener esta derecha Orton voltea esta así y nombre left y finalmente hacer lo mismo para esto uno. Así que 70 como este Es control de flecha izquierda De Voltear como así que asegúrate de que esté en 70 como este. Y esto va a ser flecha derecha así. Y por último, tenemos iconos de redes sociales. Voy a moverlos aquí abajo. Asegúrate de que estén a los 70. Así. Ungh. Agruparlos. Por lo que tenemos Facebook, Twitter, Instagram y YouTube al final. Entonces estos son nuestros iconos. Debilitar grupo Todo esto en conjunto golpean el control G moviéndose hacia abajo por debajo de la secuencia. Y lo que necesitamos crear por último para esta guía de estilo es crear sombras de gota. Por lo que tenemos que incluir esas sombras de gota que creamos para estos diversos elementos. Entonces cómo podemos hacer eso es simplemente que puedo dar click aquí mismo. Localizar la habitación uno BG hit control C para copiarlo. Voy a saltar aquí mismo. Golpea el control V y voy a la posición del dedo del pie. Es algo así. Voy con el dedo del pie. Dáselo. Por ejemplo 50 ingenio 50 o eso es demasiado pequeño. Se usa 200 ingenio 100 y creo que eso se ve mucho mejor. Pero usemos cuadrados. Entonces vamos con cinco semanas fuego algo así, y vamos a copiar este texto. Así que presiona control D Muévelo fuera de la carpeta así, luego simplemente muévelo hacia abajo a la misma distancia. Y esto va a ser gota. Las sombras son simplemente sombras así, y voy a mover esto hasta aquí. Y si lo puedes ver porque es blanco, puedes entonces simplemente elegir algunos de estos otros colores para que se vea un poco más visible. Pero creo que se ve bien. Usemos para lo cual para así porque necesitamos un poco más de espacio. Control de calor D Colóquelo en algún lugar como el 70 porque usamos ese espaciado para los iconos anteriores. Troll D 70 ganó el control D 70 así, y lo que necesitamos es que vamos a usar esta primera sombra de gota para el 1er 1 Así que hit copy. Da click en este click derecho y luego en base, y necesitamos usar esto para el botón. Entonces haga clic derecho copiar, clic derecho pegar apariencia va a cambiar, pero puedes usar este color, pero solo mantenerlos con la misma sombra. Tenemos éste porque es éste. Y por último, usemos algunos de estos otros. Entonces usemos este, por ejemplo, porque es solo un poco diferente al botón de parada. Y voy a dar clic aquí mismo apariencia basada y una vez más cambiarlo a este color que puedas encontrar rápidamente si hiciste el trabajo correcto. Así carpa y 20 55 20 10 10. 20 Por lo que podemos eliminar rápidamente este. Y este es 55 20. Entonces eso es básicamente todo para nuestra guía de estilo. Entonces puedes cerrarlos todos para que veas que tenemos este raro bicho aquí mismo. Pero puedes hacer doble clic aquí, reducir el tamaño de tu guía de estilo a algún lugar por aquí, y ahí vas. Por lo que una vez más, puedes crear diferentes párrafos con tus teléfonos. Podrás mostrarlos en diferentes colores. Se pueden mostrar de diferentes maneras. Entonces, por ejemplo, si tienes pantalla de Playfair, puedes ponerlo justo aquí en la parte superior y luego en el lado izquierdo mostrar Playfair display regular en el lado derecho mostrar Playfair display bolt abajo mostrar, negrita, cursiva y así uno. Pero me gusta mostrar los teléfonos que usualmente estoy usando. Y me gusta mostrar los teléfonos así porque los desarrolladores lo consiguen y te mostraré en uno de los próximos videos. Cuando compartimos para clientes así como para desarrolladores. Van a obtener toda la información relevante en ese enlace compartido, por lo que van a poder ver cuáles estaban usando y qué tamaño de ella es. Entonces en el siguiente video, vamos a cubrir compartir con el cliente, y nos vemos ahí. 40. Comparte con el cliente: Ahora necesitamos compartir nuestro trabajo con el cliente para la revisión real antes de enviarles los archivos finales. Entonces, cómo puedes hacer eso es que puedes saltar a una pestaña de prototipo. Se puede dar click en la primera pantalla, y en nuestro caso, esta es nuestra primera pantalla porque, como se puede ver, todas estas flechas van de ella y yo puedo dar click, después compartir. Y como puedes ver, puedes invitar a dedo del pie. Agrégalo para que puedas invitar a otros diseñadores dedo del pie. Edita este archivo mientras aún guardas el recurso compartido de archivos original para su revisión, que vas a seleccionar, que es que puedes compartir para que tus clientes lo revisen. Se puede compartir para el desarrollo, que es básicamente esta misma cosa, pero con muchos detalles técnicos. Y sus desarrolladores pueden ver diferentes tamaños de espaciado para los fondos. Diferentes colores, márgenes , camas y demás. Entonces todo eso es para ellos. Puedes gestionar enlace para que todos los enlaces que compartiste y esto es importante. Si estás en un libre, serán plan de salida porque puedes tener solo un share para revisión y un share para enlace de desarrollo, y finalmente puedes hacer clic aquí para grabar el video. Si quieres mostrar un tour, los clientes cómo se va a ver tu prototipo y tu diseño una vez codificado y luego puedes enviarles ese video si no pueden acceder a este prototipo por alguna razón. Pero como dije, vamos a dar clic en compartir para revisión y luego puedes cambiar algunas cosas más. Por lo que cualquier persona con Lincoln View o solo personas invitadas puede ver si seleccionas el 2do 1 que tienes dedo, escribe direcciones de correo electrónico fuera de las personas. Se quiere ver este prototipo. Si no alguien con el enlace puede ver este prototipo. Puedes llamarlo de manera diferente como si quieres, así que si me acerco un poco más, puedes ver que tenemos un hotel boutique bueno, honesto. Entonces empecemos a ser eso porque es mucho más agradable cuando tienes el nombre fuera de tu proyecto de clientes aquí mismo. Porque más adelante, vas a ver en un minuto cuando abran ese proyecto, van a poder ver cómo se ve eso y el nombre de ese proyecto. Siguiente. Tenemos permitir comentarios para que puedas permitir que la gente comente sobre tu diseño, y quieres que Si quieres recibir comentarios de tu cliente, muestra pistas Hot Spot, que mostrarán a reclines donde necesitan hacer clic para que el pueden suceder transiciones. Mostrar controles de navegación, que son controles en la parte inferior de la pantalla. Algunos por aquí. Y eso es importante. Y me gusta mantener eso porque a veces los clientes clientes se confunden en cuanto a dónde deben hacer clic? Porque se pierden en el proceso. Tenemos abierto en modo de pantalla completa, lo cual no recomiendo, porque de esa manera estos controles de navegación se ocultarán y podrás mostrar en pantalla completa más adelante en interacciones de segundo internamiento o algo así cuando ya están familiarizados con los controles de éxtasis de adobe y saben dónde necesitan hacer clic. Y por último, tenemos pasaporte requirente, que es básicamente cualquier persona con el pasaporte puede abrir. Cualquier persona sin la contraseña no puede abrir y no puede ver este proyecto. Entonces, por último, cuando comprobaste y desmarqué todo incluido el título de tu proyecto puedes golpear create link, y el proceso de creación de Lin variará de varias razones diferentes. La primera razón es tu computadora, así que si tienes una máquina lenta. Tomará más tiempo también lo grande que es el proyecto. Entonces en este momento sólo tenemos esta pantalla básicamente con diferentes variaciones leves en ella , por lo que será mucho más rápido. Pero solo imagina quién tiene, por ejemplo, 100 o 200 pantallas. Será mucho más difícil para ello. Genera este enlace y también qué tan rápida es tu velocidad de conexión a Internet. Por lo tanto, ten en cuenta todas esas cosas, y una vez que llegue a los 100 generará el enlace. Y una vez que lo haga, verás algo como esto. Entonces, cuando realices tus cambios, puedes usar exactamente el mismo enlace simplemente después pulsa actualizar y luego enviarles ese nuevo enlace y luego puedes dejarlo para ti. Entonces puedes retomar donde lo dejaste la última vez porque actualizará los últimos cambios a los recién hechos en Adobe X'd. Pero para este 1er 1 simplemente puedes hacer clic en este enlace, y lo abrirá en tu navegador de Internet seleccionado. Es Google desde en mi caso, y como puedes ver, tenemos el nombre del proyecto justo aquí en la parte superior ha explicado y crea mucha más confianza entre tú y el cliente. Cuando se presta atención a los pequeños detalles así para que podamos desplazarnos hacia abajo y se puede ver cómo se ve. Si este fuera el modo de pantalla completa de lo que todo esto sería tomado por tu diseño, puedes ver los controles de navegación aquí mismo en la parte inferior. Por lo que este ícono de casa te está llevando de vuelta a casa. Y tenemos nueve pantallas diferentes en nuestro caso. Entonces déjame volver a la cima y pongamos a prueba algunas de estas animaciones que acabamos crear en X'd. Entonces si hago clic aquí mismo, puedes ver que nos lleva al prototipo una pantalla, que es la siguiente en orden, y muestra toda esta otra información. Si hago click aquí mismo, nos llevará de vuelta a la pantalla original. Este es el prototipo a que se puede ver y nosotros podemos movernos. Quieres un poco abajo, y te puedo mostrar las otras animaciones que creamos. Entonces para éste, por ejemplo, si un clic justo aquí, cambiará del dedo del pie el prototipo tres. Se puede ver justo aquí y justo aquí. Si hago click aquí mismo, nos traerá de vuelta. Sólo decidamos rápidamente. Entonces como puedes verlo, salta de vuelta a aquí y me da algún tipo fuera de toallita rara porque no mantiene la posición cuando salto justo aquí mientras lo hacía en Adobe X'd. Entonces voy a saltar y ver qué es. Pero básicamente, se puede ver lo que hace. Puedes hacer click justo aquí, y te llevará a escuchar, pero no mantiene la posición al desplazarte, y necesitamos arreglarlo la próxima vez cuando lo enviemos al cliente. Pero eso es todo, básicamente, Y si tu cliente quiere que hagas algún cambio, piensa que es simplemente click en este giro. Colóquelo en algún lugar por aquí y escribiendo. Por ejemplo, cambia este color a uno más oscuro, tal vez golpea enviar, y la próxima vez que puedas hacer clic en esta pantalla, te llevará a este comentario. Entonces, por ejemplo, si estoy en el número de pantalla, digamos seis. Veo un nuevo comentario. Puedo dar click en él y me llevará de vuelta a la pantalla original, y luego puedo dar clic y localizar los comentarios en Esto es todo. Cuando pase el cursor sobre él, se puede ver que este color azul está cambiando, como se puede ver aquí mismo para que podamos saber que ese es el comentario en esa pantalla en particular . Entonces eso es todo. Básicamente, para el compartir y el compartir funciona exactamente igual para los desarrolladores. Entonces si puedes hacer clic atrás y golpear compartir una vez más, compartir para desarrollo, puedes hacer que la configuración básicamente exporte para Web. Por lo que tenemos que exportar para sitios web básicamente, y puedes elegir diferentes variaciones aquí. Entonces para IOS o Android, pero necesitamos exportar para Web una vez más requieren pasaportes para que puedas crear una nueva contraseña aquí mismo. Incluir activos para Donald, y creará PNG como uno y dos también, un F. veloz Y una vez más, cualquiera le dirá a Lincoln View y Onley la gente invitada puede ver, así que eso es básicamente es para el compartir para las interacciones con el cliente y para el comentario, y necesito arreglar ese error, pero básicamente está basado en la posición de desplazamiento, Así que si salto hacia atrás justo aquí, prototipo, click derecho aquí y si voy todo el camino hasta aquí y si hago clic aquí, como pueden ver, no muestra ese error dentro de Adobe X'd. Entonces aquí mismo. Todo funciona correctamente. Pero cuando saltas en línea y le muestras eso al cliente, muestra ese error. Entonces vas a tener estas cajas de vez en cuando. Pero en esos casos, simplemente puedes golpear, compartir y luego grabar video. Y luego puedes grabar el video fuera de tu prototipo y luego enviarles ese video y mostrarles cómo va. Puntera se ve como una vez codificada porque tenemos posición de desplazamiento una vez que empezamos a crear prototipos y esto es todo. Así que preserva la posición de desplazamiento. Pero hay que elegir en diferentes elementos. Entonces si hago clic aquí, no aparece y así sucesivamente. Entonces tal vez grabar el video en algunos casos es mejor que otros. Porque, como viste, si no golpeo share, share para revisión y si hago clic en este enlace y salté con una vez más y te muestro cómo se ve Así que cuando salto todo el camino hasta aquí donde está la mansedumbre, Si hago clic aquí, puedes ver que mantiene la posición de desplazamiento para que funcione exactamente en la misma página. Funciona, pero en otras páginas no funciona. Entonces tienes trabajo de remolque con esos bichos, y cuando los ves, es realmente una forma mucho más sencilla solo de grabar el video y luego enviar ese video a tu cliente para que lo revisen si están molestos con ese desplazamiento saltando posición. Por lo que realmente depende de ti y de tu cliente. En el siguiente video, les voy a mostrar estructura de empaque para la exportación de activos y en el video. Después de eso, nos vamos de punta a exportar activos para desarrolladores, y nos vemos ahí. 41. Estructura de empaque: avísame rápidamente mostrarte la estructura de empaques porque tienes que enviar estos archivos a nuestros clientes así como a sus desarrolladores, así que hay que crear esa estructura de alguna manera lógica para que todos los involucrados puedan entenderlos y usarlos justo después de que terminaras de crearlos. Entonces he creado esta carpeta de Activos, y si salto dentro, tienes la carpeta de la página principal porque actualmente solo tenemos la página principal, y te puedes imaginar que más adelante, cuando diseñamos todas estas otras páginas, tendremos todas esas otras carpetas dedo del pie una empresa que así cuando saltes dentro de la página principal, puedes tener carpeta Icons así como carpeta de imágenes. Ahora puedes colocar los huevos originales, desfilar aquí, o puedes crear archivos separados y ponerlos aquí mismo. Pero no lo recomiendo porque los huevos son buenos con lidiar con muchos elementos, como viste durante nuestro diseño en proceso de protección. Entonces básicamente aquí mismo dentro de la carpeta Activos, puedes crear tu documento original y ponerlo ahí. Entonces cuando saltas dentro de la página principal, tienes en la carpeta separada para los iconos también, una carpeta separada para las imágenes y razón por la que hicimos esto es porque vamos a exportar imágenes como P y G's o J clavijas, por lo que es más fácil para los desarrolladores usarlos más adelante en cotización. Y nos vamos de punta a los iconos de exportación como s veggies, por lo que va a ser más fácil para ellos dedo del pie. Incorporarlos en el frío sin perder una igualdad. Porque SVG es un formato de archivo basado en Web, Así que va a ser básicamente un archivo vectorial para significados. Y la gente que mira el sitio web en línea puede tener iconos mucho más crujientes con muchos más detalles dentro en lugar de si estás usando formato de archivo PNG para iconos. Entonces eso es básicamente todo para la estructura de archivos. Como dije, sólo tenemos una página, pero si recuerdas de que hablamos, vamos a crear en un futuro lejano algunas otras páginas justo aquí debajo de ésta, y luego vamos a mandar eso al cliente. Cuando lo terminemos en el siguiente video, vamos a empezar a exportar nuestros activos y allí nos vemos 42. Exportación de recursos: en este video, vamos a ir a exportar activos para desarrolladores. Entonces para empezar, primero saltemos de pie nuestra página. Entonces lo que tenemos que hacer es exportar este logotipo. Entonces primero lo primero. Si recuerdas del video anterior en la página de inicio de la Carpeta de Activos, tenemos iconos e imágenes, así que primero exportemos nuestras imágenes y luego tratemos con los iconos. Míralo más tarde. Entonces primero, vamos a seleccionar logo hit Control E. Y voy a usar PNG usado Web porque eso va a crear una X y dos X tamaño. Y voy a golpear cambio aquí mismo y saltar dentro de la página principal, luego imágenes y elegir esa carpeta porque ahí es donde quería ir porque eso es lo va a mostrar como una imagen hit export, y voy a bajar a mudarme en un poco abajo. Vamos a tratar las imágenes más tarde, pero primero lo primero. Vamos a exportar este héroe B G control de golpes E B y G. Webb y uno X intelectos. Puedes usarlo como una clavija J si quieres, pero ser G y J pick funcionará muy bien. Por lo que exporta misma carpeta, luego se mueve hacia abajo. Necesitamos esta imagen seleccionada mediante el uso de control y luego dar click en ella. Golpe control E. J. Beck Hit export, Entonces adelante. Necesitamos estas tres imágenes para que puedas seleccionarlas desde aquí. Haga clic en el 1er 1 se puede llamar a control, haga clic en el 2do 1 y luego en el tercero. Quieres seleccionar los tres Control de calor E. Y los va a exportar por separado como Monix así como dos X Así golpeó la exportación y podemos seguir adelante hacia abajo. Golpea este. Por lo que controlar e iba a exportar y puedes seleccionar un estos dos para conseguirla Así imagen de jardín e imagen estacionamiento golpeó control e iba a exportar. Entonces necesitamos exportar éste. Por lo que el control e tenía exportación. Y si recuerdas, incluimos otra imagen. Pero no lo vamos a incluir por el momento porque se acabó aquí mismo. Pero si quieres, puedes elegirlo y renombrarlo por lo que se llama nuestra sobrina hombre. Este control de imagen e hit export porque si quieren incluirlo ahí, pueden. Pero regularmente quieren. Esto fue sólo un ejemplo, pero vamos a mantenerlo así porque esto no es una imagen. Vamos a dejarlo tal y como está, y vamos a saltar aquí mismo al pie de página. Vamos a exportar esta imagen de fondo y vamos a mantener el logotipo como está dentro de la carpeta, porque justo este color de fondo ha cambiado. Por lo que pie de página, control de golpe de imagen E kit de exportación. Y eso es básicamente todo para imágenes. Control cero. Para volver a colocar en su lugar, voy a abrir la carpeta, abrir la carpeta con nuestras imágenes y se puede ver cómo se ve eso. Entonces básicamente exportó todo a 11 x y dos x ¿Y eso qué significa? Se exportó, luego en tamaño original y dos veces el tamaño. Entonces, ¿por qué es eso? Porque necesita acomodar los diferentes tamaños. Quiere llegar a un diseño responsive en el frío en sitio web responsive, lo que básicamente significa que esta imagen tiene dedo del pie funciona bien en tamaño original del barco así como aquellos tamaños grandes. Por lo que todo el camino hacia abajo desde el teléfono hasta grandes paradas de escritorio y televisores. Y cometí un error con esta imagen de foto, así que si la abro en mi otra pantalla y la arro aquí mismo. Como puedes ver, es bastante blanco porque la opacidad se reduce y puedes traer de vuelta a Obey City al 100% exportado así, para luego decirle a los desarrolladores más tarde que bajen, ¿Pagas ciudad? O puedes exportarlo así como un paquete J y exportarlo así. Pero me gusta exportar estas imágenes, que tienen opacidad reducida como ser Jeez, por lo que simplemente puedes eliminarlas desde aquí. Salta atrás aquí mismo. Seleccionado Heat Control E y el conjunto de Jay Peak. Elegir BMG hit export. Y ahora cuando salto de nuevo a mi carpeta, se puede ver que nada ha cambiado realmente, excepto que ahora está como PNG y no como un pick J. Por lo que no se puede ver básicamente aquí mismo porque no muestra el anterior fuera de PNG's. Pero sólo significa que mantiene la opacidad ya que suele waas, así que no salta lente y exporta nuestros iconos. Pero en lugar de exportarlos desde aquí y seleccionarlos desde aquí, lo que realmente vamos a hacer es exportarlos desde aquí porque creamos esta guía de estilo para ese propósito, y podría estar notando que incluí los fondos aquí también porque me olvidé incluirlos en la sección anterior fuera del curso. Pero puedes hacer clic aquí mismo en el Eichel's y seleccionar todos los iconos como así pulsa Control E y lo primero en lo primero, vamos a cambiar la carpeta, así que vamos a saltar a iconos, seleccionar la carpeta, y vamos a elegir SVG para ello. Puedes mantener todos los ajustes como quieras hit export, y se va toe exportar todo fuera de esos SP Jeez, por separado, por separado, cualquiera para saltar del dedo del pie mi carpeta. Se puede ver que exportó todos esos iconos como eran, por qué hicimos esto en lugar de pasar por el diseño y simplemente recogiendo juicing bien, porque los copié y pegué de estos exactamente mismos lugares hasta aquí. Y no cambié ninguna talla. Yo no cambié nada. Básicamente, acabo de usar estos iconos como estaban aquí y los ordené aquí mismo en esta página. Ahora vamos a exportar estos botones, y por supuesto, puedes exportar los fondos como imágenes y lo que puedes hacer con los botones puedes seleccionarlos pulsa control e Cambia la carpeta porque entrarán en imágenes en la página principal. Imágenes Selecciona carpeta, y puedes exportarlos como PNG's tan hit export. Y qué hará eso Si salto a la carpeta Imágenes, exportará los botones como estaban aquí mismo para que puedas ver el botón con el texto incluido, así como la sombra de fondo. Pero queremos hacer una cosa más, que es incluir estos fondos sin ningún texto, porque tal vez más adelante, los desarrolladores podrían querer incluir un texto diferente dentro usando código para que puedas hacerlo simplemente abriendo los arriba como así y luego simplemente ocultando el texto de ellos así. Entonces puedes seleccionar los tres una vez más golpear el control E y exportarlos como G's. Se romperá los reemplazó en la carpeta original, pero puedes cambiar los nombres más tarde, o puedes saltar a carpeta en este momento y simplemente presionar texto, por ejemplo, justo en el texto justo aquí. Txt. A lo mejor como ese control C y golpe control la derecha aquí y simplemente cambiar estos nombres dedo del pie . Agrega esta extensión txt que acabas de crear para que tus desarrolladores sepan a qué te referías eso, Así lo sabrán. De acuerdo, estos botones contenían sitio de texto y estos otros botones no. Por lo que podrán utilizar básicamente cuáles son botones que quieren. Y tú hiciste tu trabajo correctamente de todos modos. Por lo que una vez más, puedes seleccionar todos ellos hit control, e hit export. Y debido a que cambias los nombres, creará otros nuevos Y no reemplaces a los antiguos. Y una última cosa que nos queda para seleccionar una exportación son todas estas extensiones. Entonces lo que necesitamos son habitaciones. Necesitamos las banderas. Entonces, vayamos adentro. Incluir estos pueblos caídos y lo único que queremos la exportación son estos fondos. Y queremos exportarlos como imágenes s imágenes PNG. Por lo que tenía control e imágenes PNG exportación. También queremos exportar este fondo hit justo aquí hit control e exportado y queremos toe export también estos círculos. Pero debido a que incluimos básicamente exactamente el mismo círculo que estaba aquí, simplemente golpea el control e y va a exportar este 1er 1 y luego más adelante pueden crear colores adicionales. ¿ Qué? También queremos que la exportación del dedo del pie es Discworld. Pero permítanme primero cerrar todas estas otras carpetas. Por lo tanto, localiza la cotización. Golpear control, E S P y G golpearon exportación, y podemos ir todo el camino hacia abajo y ver si nos perdimos algo. Nos perdimos estos botones de fondo por lo que tenía control e hit exportaciones. Y por último, estamos llegando a este apartado y necesitamos exportar toda esta otra información. Por lo localizador formulario de suscripción. Puedes exportarlo así si quieres, pero para el formulario de reserva, no voy a exportar estos insumos porque los insumos se van a incluir dentro del pelaje porque esa es la parte de la forma básica. Yo solo quiero exportar estos fondos para los pueblos gota para que puedas localizar la habitación desplegable , abriendo habitaciones caídas sobre control de calor BG e exportado, y porque lo tenemos arriba en la parte superior, queremos renombralo aquí mismo. Por lo que las habitaciones bajan BG. Pero tal vez llámalo forma porque está dentro del control de golpe de formulario E y luego exportado S P y G. Puedes ocultarlo, localizarlo, revisar calendario, y puedes exportar el fondo del calendario como esta exportación de calor? No, lo mismo para el check out tan ubicado aquí. Y debería revisarse así. Control de niños e it export. Escondalo y finalmente, los invitados bajan. Entonces vamos con el dedo del pie. Exporta desde aquí. Hit export Y eso es básicamente todo para el proceso de exportación y se puede ejecutar. Y por eso es tan hermoso. Trabajo del dedo del pie dentro de Adobe Easy porque si te encuentras con un error, entonces puedes saltar fácilmente hacia atrás y localizar la zona donde cometiste ese error. Puedes arreglarlo, puedes volver y puedes hacer esos cambios a medida que avanzas. Entonces eso es básicamente todo para el proceso de exportación. Déjenme cerrar rápidamente todo esto hacia abajo. Y en el siguiente video, voy a mostrar cómo puedes empaquetar todos esos archivos que acabas de exportar y cómo puedes entregarlos al cliente sin desperdiciar demasiado de tu espacio de memoria y proporcionarles fácilmente compartibles archivos. Porque en su mayoría enviarás estos archivos a tus clientes y luego ellos los reenviarán, remolcan a sus desarrolladores. Por lo que es realmente agradable tener un pequeño archivo fácil y compartible al que todo el mundo pueda acceder realmente rápidamente sin que sea posible. Entonces te veo ahí 43. Entrega al cliente: Y ahora por fin, es momento de entregar esos archivos que creaste a tus clientes, y cómo puedes hacerlo fácilmente es que puedes saltar a tu carpeta una vez más comprobar si todo está organizado, como hablamos en el anterior videos. Tan solo asegúrate de tener todos estos archivos organizados. Asegúrate de incluir el Adobe original está profanado aquí mismo, y lo que puedes hacer es correcto. click en tu archivo Goto Vince si lo estoy usando y puedes usar cualquier otra extensión zip que pudieras tener en click en Toe assets y uno Death Will Do es crear un archivo zip, cual es fácilmente compartible. Es pequeño en tamaño, y puede funcionar tanto en Mac como en PC, por lo que los clientes pueden acceder a él con mucha facilidad. Y lo que tiene de bonito es que si salté y aquí mismo se puede ver que no redujo ningún tamaño perceptible. Por lo que pasó de 17 94 a 17 52 en mags. Pero solo imagina que has creado el archivo, que es, por ejemplo, 100 megabytes de tamaño y quieres dedo del pie reducirlo. Usando este método, estará en algún lugar alrededor de 10 megabytes por lo que es mucho más fácil compartir un archivo de 10 megabytes. Ade