Cómo diseñar páginas de destino de alta conversión en Sketch para principiantes

1. Introducción: Oigan a todos. Bienvenido a mi primera clase de Skillshare. Estoy emocionado de estar aquí contigo. Mi nombre es Daniel [inaudible], y soy un diseñador independiente de interfaz de usuario y experiencia de usuario. Antes de diseñar, estudié Negocios Internacionales en Mercadotecnia. En este curso, combinaremos lo mejor de ambos mundos y veremos cómo podemos diseñar páginas de aterrizaje modernas, hermosas pero también tienes curso súper rico o de negocios. En esta clase, aprenderemos cuáles son los elementos más importantes de una página de aterrizaje de alta conversión y cómo podemos usar el diseño para llegar a este curso de negocios. Después de una breve introducción doy enfoque a través de un proyecto partiendo de la idea inicial hasta la ejecución. Te mostraré cómo y dónde encontrar la inspiración para las páginas de aterrizaje, cómo crear tu propia paleta de colores, cómo elegir los mejores fondos disponibles para tu proyecto, así como los planes de boceto más prácticos. O el proceso de diseño se creará dentro del sketch, que es la aplicación de diseño de iluminación industrial para diseñar aplicaciones móviles y web. En esta clase, vamos a crear, una página de aterrizaje completa tanto para las vistas de escritorio como para móviles. Al finalizar este curso, tendrás la oportunidad de crear tu propio diseño de landing page para tu negocio o idea. Estaré aquí para ayudarte y darte retroalimentación también. Esta clase es datos para principiantes e intermedios diseñadores que quisieran aprender a usar boceto y también a mejorar como diseñador conectando diseño y curso empresarial. No puedo esperar a verte en clase y empezar a diseñar juntos. 2. Elde una página de aterrizado exitoso: Hey ahi, bienvenidos a esta clase. En primer lugar, muchas gracias por unirse a esta clase. Eres increíble. Antes de saltar directamente al sketch y empezar a diseñar nuestra página de aterrizaje, déjame mostrarte cómo suelo empezar cada uno de mis proyectos y también a elementos clave de una página de destino de alta conversión. Mi primera pregunta es, ¿por qué te gustaría crear una página de aterrizaje? Probablemente quieras crear una página de destino porque ya tienes un producto o servicio que te gustaría promocionar y necesitas una página de destino para obtener más conversiones. Con una gran página de aterrizaje, puedes aumentar las conversiones de tu producto o servicio. En nuestro caso, significa que más personas descargarán, comprarán tu producto o se inscribirán en tu servicio. El otro motivo más popular por el que necesitas la página de destino es que tienes una gran idea que te gustaría validar antes de construir encima de ella. Te gustaría ver si a la gente le interesa lo suficiente esa idea. Con una gran página de aterrizaje, puedes validar rápidamente tu idea y ver si hay suficiente interés hacia ella, que puedas averiguar si vale la pena el dinero y el tiempo construyendo y ejecutando tu idea. Ahora echemos un vistazo rápido a los elementos clave de una página de aterrizaje. Empecemos con el objetivo empresarial. Antes de iniciar cualquier proyecto, siempre trato de averiguar cuál es el principal objetivo de negocio que me gustaría lograr con una página de aterrizaje. Con base en el objetivo del negocio, se puede crear el objetivo de conversión, que es el propósito principal de la página de destino. Por ejemplo, si estamos creando una página de aterrizaje para una aplicación, entonces el objetivo de conversión más importante puede ser que después de que los usuarios visitaran la página de destino también descargaran la aplicación. En caso de que la aplicación aún no esté lista, una buena práctica es pedir sus direcciones de correo electrónico con fines de marketing y notificarles cuando finalmente se inicie la aplicación. Si es posible, intenta aprender tanta información sobre los usuarios potenciales como puedas, para que puedas adaptar la experiencia de la página de aterrizaje a sus necesidades. Recuerda siempre que estás diseñando para los usuarios, y no para ti o no para los trimestres estatales o dueños de negocios. Si se hace bien, usar la validación social en forma de testimonios o estudios de casos cortos, puede mejorar en gran medida la credibilidad de tu página de destino. Durante el proceso de diseño, te mostraré cómo uso la validación social de manera efectiva. Después de establecer los fundamentos, podemos enfocarnos en crear una experiencia amena y memorable, que los usuarios recordarán. Echemos un vistazo rápido al proyecto que tendremos que crear. El resumen del proyecto suele verse como este un gran bloque de texto cuando lo consigo. Para esta clase, creé una empresa falsa ficticia, llamada Showtrackr, que cuenta con servicio y aplicación para rastrear programas de TV automáticamente. Aquí está el breve: Showtrackr acaba de lanzar una nueva aplicación iOS y web, y les gustaría conseguir que más usuarios se inscriban en sus increíbles servicios. Su grupo objetivo incluye a los primeros adoptantes enfocados a la tecnología en el rango de edad de 15 a 30 años. La mayor ventaja de su servicio es que están utilizando tecnología de vanguardia, como el aprendizaje automático, para rastrear y recomendar automáticamente programas de televisión. A la base de usuarios actual les encanta sus servicios y tienen muchas grandes recomendaciones en Twitter. El landing page tiene que ser sencillo y agradable, utilizando los principales colores de la marca así como seguir las últimas tendencias de diseño de Dribble. Tratemos de agrupar esta información para que podamos trabajar con eso. En primer lugar tenemos el objetivo de negocio, que es conseguir que más usuarios usen su plataforma. A partir del objetivo del negocio, también conocemos el principal objetivo de conversión, que es lograr que los usuarios comiencen a registrarse mediante la entrega de sus direcciones de correo electrónico. De todos los usuarios, sabemos que son adoptantes tempranos tecnológicamente enfocados en el rango de edad de 15 a 30 años después. También tenemos muchas grandes recomendaciones en Twitter, que podemos utilizar para la validación social. Por último, la página de aterrizaje tiene que ser simple y agradable, utilizando los principales colores de la marca así como seguir las últimas tendencias de diseño de Dribble. Como se puede ver en el lado derecho, también tenemos un par de visuales, incluyendo el lookup de iPhone 10 y también una captura de pantalla de esa aplicación web, que podemos utilizar durante nuestro proceso de diseño de la página de aterrizaje. Ahora que tenemos una mejor comprensión del resultado final deseado, vamos a crear la primera versión de nuestros wireframes. Muchos diseñadores prefieren crear los wireframes iniciales sobre papel. No obstante, me gustaría hacerlo dentro de boceto, pero la clave aquí es la baja fidelidad. No te quieres preocupar por los colores, las fuentes ni nada orientado al detalle. El objetivo principal aquí es descifrar una gran estructura para la página de aterrizaje. Por lo que empecé con la navegación, que será una navegación de posición fija obvia visible durante scrum. Dentro de la navegación, también coloqué un botón de “llamada a la acción”, que es realmente importante porque siempre es visible, y los usuarios pueden decidir en cualquier momento que les gustaría inscribirse en el servicio y usar el botón de “llamada a la acción”. El apartado héroe es clave, creando página de aterrizaje efectiva. Esto tiene que ser visualmente atractivo y hermoso e interesante para los usuarios, así que también coloco ahí el botón de “llamada a la acción”. Es visible instantáneamente después de que se cargue la página. Tenemos un look up de iPhone mostrando la aplicación. Después tendremos una sección de características, con las tres características más importantes del producto y servicio. Entonces tenemos una sección de caso real donde podemos demostrar y exhibir la aplicación, y luego también tenemos un par de alternos para hacer el prototipo más interactivo, y básicamente no es solo una maqueta estática, pero es un visual más complejo. Entonces tendremos a prueba social y los testimonios dentro de estos rectángulos si tenemos que citar y también un enlace al perfil de Twitter de la persona que recomendó el servicio. También tenemos una sección de llamada a la acción en la parte inferior de la página con algunos mensajes simples y también un botón de “llamada a la acción”. Este diseño también nos da un marco de la página de aterrizaje. Si presta atención, tenemos una parte de call-to -action al final de la página y al inicio de la página, y tenemos el contenido principal que amplifican el mensaje de la página de destino. Básicamente estos son los puntos donde tratamos de mostrar las posibilidades de la aplicación y el servicio. Los usuarios pueden inscribirse en ella en la parte inferior o en la parte superior de la página, y también en cualquier momento porque tenemos la navegación siempre visible. Si lo miras lado a lado, puedes ver el resultado final que íbamos a crear. También se puede ver cómo se relaciona con las tramas alámbricas iniciales. Antes de saltar a diseñar parte, veamos cómo podemos encontrar increíbles inspiraciones para nuestros proyectos. 3. Encontrar inspiraciones: Para encontrar inspiraciones de alta calidad, suelo ir a regate y también sigo a un par de personas. Pero también puedes revisar las tomas más populares. También puedes filtrarlo para la semana pasada, el mes pasado, año pasado, para que puedas obtener alimentación de las últimas tendencias. Lo que suelo hacer es buscar el término landing page y ver el proyecto que tiene una etiqueta o bajo descripción, tienen el término landing page, y también se puede ver un viejo término popular y también, las obras más recientes. Esto también es realmente útil para tener miedo a las últimas tendencias. Lo que suelo hacer eso si encontré una categoría de diseñador que me gusta, también me gusta. Entonces esa es la función de vida que se utiliza en mi caso. Si visitas mi perfil, también puedes echar un vistazo a los gustos que le di a proyecto. Por lo que puedes ver una colección de mis diseños favoritos también para las páginas de préstamo, y para las aplicaciones. Esta es básicamente una lista comisariada de diseños que recomiendo entrar en detalles y estudiarlos para obtener más inspiración. El otro gran sitio que recomiendo checar es buen laboratorio que el diseño. Aquí puedes buscar diseño para secciones específicas de tu página. Por lo que puedes tener una page-view completa como aquí, pero también puedes buscar solo la parte de navegación, o tal vez en la sección solo un héroe, o donar una inspiración para la llamada a las partes de acción. Este es un sitio web impresionante para temer que estos anuncios y solo busquen lo que suele necesitar. Entonces si solo tienes una trampa de ella, con diseño en pie de página, entonces puedes tener una inspiración de increíbles pies de página aquí. Si hay algo que te guste, hacer click en él y ver la página web completa donde se encontró esa carpeta. Por lo que este también es un sitio web realmente genial. Otro es uijar.com. Este es un sitio web similar al buen diseño web. Por lo que puedes filtrarlo para sitios web, pero también puedes tener alguna inspiración para aplicaciones e ilustraciones y branding. Básicamente, este también es un sitio web creado con diseños increíbles. Por último, tienes apps de Apple, que es muy similar al repo. Aquí también puedes filtrar para web y ver los diseños más populares y de tendencia para páginas de aterrizaje y sitios web completos. Por lo que realmente recomiendo revisar este también. Cuando encontraste un diseño que te guste, intenta comercializar, o también puedes descargarlo si quieres. Por lo que solo puedes descargar la imagen y siempre no olvides echar un vistazo a los archivos adjuntos. Para que puedas tener un aspecto y una sensación del diseño completo. Si hay un diseño que te guste, simplemente puedes arrastrarlo y soltarlo y guardarlo tu escritorio o ponerlo en la carpeta en tu comando de programación, y puedes echarle un vistazo en cualquier momento cuando necesites una inspiración y obtener nuevas ideas de estos diseños. 4. Conceptos de uso de Sketch: Para crear el diseño, realmente utilizamos una aplicación llamada sketch, que es la mejor herramienta de diseño para crear aplicaciones móviles modernas y diseños alcistas. Si ya tienes bocetos entonces puedes abrirlo ahora, y seguirlo. Pero si no lo tienes instalado, puedes descargar una versión de prueba gratuita en cualquier momento y probarla. Si abres boceto, simplemente podemos crear un nuevo documento. Esta es la interfaz principal de la aplicación de boceto. Las herramientas más comunes que utilizamos, se pueden encontrar, aquí debajo del elemento del menú Insertar, y aquí puedes insertar un tablero de arte, o una forma como un rectángulo, o una estrella, o simplemente una línea. En primer lugar, necesitamos crear un tablero de arte. Junto a cada elemento, se puede ver una letra ahí, que es un atajo. Entonces si presiono A, solo va a crear un tablero de arte, y aquí puedes, encontrar diferente tamaño de tablero de arte. Entonces si estamos diseñando para móvil, solo puedes tener un tablero de arte para aplicación móvil, o si vuelvo a presionar A o simplemente voy aquí, a tablero de arte. También puedo seleccionar una web responsive, pero tengo presets para el diseño web responsive. Utilizaremos un escritorio HD. Por lo que ya está preestablecido, y listo para usarlo. En el panel inspector del lado derecho, se puede cambiar la vista de una tabla de arte, así como la altura de una tabla de arte. Entonces ya que si tienes un diseño de página web mucho más largo, solo podemos cambiarlo y, tener un tablero de arte mucho más largo, listo y listo para nuestros diseños. La otra función que utilizamos durante nuestro proceso de diseño, es la forma del rectángulo. Hay un atajo en el teclado. Si presionas “R”, obtienes acceso a la herramienta de rectángulo. Entonces, si estoy en el tablero de arte, y solo presionar “R”, puedo empezar a dibujar. Cuando se crea un rectángulo, en el lado derecho, se puede establecer en la posición. Entonces, puedes posicionarlo con números. También puede establecer los valores de ancho y alto. También es bueno notar que, estos son, los campos inteligentes. Por lo que se puede hacer también, cálculos, ahí dentro. Entonces, hay muchas capacidades dentro de estos campos de entrada, y hay que confiar en esa respuesta, para pueda rotar una forma, aquí. Además, también se puede establecer el radio de borde. También se puede cambiar el campo de la forma, así como el borde también. Para que puedas establecer el borde, puedes establecer el ancho del borde. Entonces, básicamente puedes afinar los detalles. Puedes agregar sombras, que usarás también mucho. Entonces, estos son todos los valores que usarás con frecuencia. Dentro del color girado hacia arriba, el valor predeterminado es RGB, como recuerdo. Pero si hace clic en las letras pequeñas aquí, puede cambiarlo a HSB, que es saturación de matiz y brillo. Para que puedas establecer el tono, el valor de tono es básicamente éste. El espectro de color, se puede establecer la saturación. También se puede establecer el brillo, del color. Por lo que es mucho más fácil trabajar con este recolector de color, aquí mismo. También se pueden establecer gradientes también, gradientes lineales o radianes circulares, y también sensación de imagen también. Entonces, usaremos mucho este panel durante nuestro proceso de diseño. En el lado izquierdo, se puede ver la lista de capas. Entonces si tenemos un par de capas, que puedes ver todas estas capas,también puedes agruparlas, también puedes agruparlas pulsando “Comment” y “G”, y “ Shift Command G” y agruparlas. Pero también puedes tener un icono ahí, y aquí también puedes personalizar la barra de herramientas, según necesites. Entonces, estas son todas las capas, que tenemos en un tablero de arte. Lo que también es realmente importante, es que puedes tener múltiples páginas. Por lo que puedes tener básicamente múltiples espacios de trabajo, dentro de un documento de boceto. Entonces, por ejemplo, se puede trabajar en el diseño de la aplicación, para el iPhone entonces, en este tablero de arte, y en esta página, se puede trabajar en el diseño web en esta página. Por lo que puedes tener múltiples espacios de trabajo, con múltiples tableros de arte también. Por último, mi función favorita con el boceto, es la herramienta de medida. Entonces, cuando seleccionas un rectángulo, y presionas la “tecla Opción”, o la “tecla Alt” en tu teclado. Se pueden ver las mediciones exactas de los elementos de calificación. Para que puedas medirlo al tablero de arte, puedes medir un elemento a otro elemento. Puedes utilizar estas medidas para crear un diseño perfecto de imagen. Eso es todo. Eso también es realmente útil, si tienes múltiples objetos, que te gustaría alinear. Es eso, hay algunas herramientas de alineación, aquí mismo. Para que puedas rápidamente, realinear estos artículos como quieras. Por lo que puedes distribuirlos uniformemente, o colocarlos en el centro del tablero de arte, si los agrupa y presiona enter. Entonces, también usaremos esa alerta durante nuestro proceso de diseño. 5. Instalación de plugins: Una de las mayores ventajas de usar sketch, es la enorme cantidad de plugins externos que pueden hacer que nuestro trabajo sea mucho más fácil y rápido. Con el fin de gestionar estos plugins. Existe una opción para plugins gestionados. Esto también está disponible dentro de las preferencias. Si vas por Sketch y preferencias, también te das cuenta con los plug-ins disponibles que ya tienes instalados. O si quieres tener otros nuevos, solo tienes que hacer click en el botón get plugins y te llevará a la página web de Sketch con una lista de los plug-ins más populares. También puedes buscar algo así como el generador de contenido, que es un plugin impresionante. Por lo que realmente recomiendo la comprobación de este plugin generador de contenido el cual también se utilizará para incurrir en nuestro proyecto. Es impresionante para generar automáticamente perfil de usuario, imágenes, o nombres, o cualquier texto. Este es un plugin realmente útil. El otro que usaremos es el botón Para etiquetar. Está haciendo súper fácil volver a etiquetar un determinado botón que diseñamos. También te mostraré éste en acción. Además, usaremos el Paddy que es realmente como la etiqueta de patrón, pero con mucha más funcionalidad, por lo que es una red capaz. Para poder descargar e instalar un plugin, solo puedes golpear que descargue el archivo zip y automáticamente descargará el plugin por ti. También lo descargué. Cuando tengas el plugin descargado, solo puedes hacer doble clic en el archivo de plugin de Sketch dentro de la carpeta. Dice que el plugin está completamente instalado, por lo que instalado con éxito. Ya tienes el plugin que está justo aquí. Si quieres probarlo, solo puedes crear un botón sencillo. Digamos que es Button. Podemos agrupar estos dos elementos, después tenemos activado el Paddy. Podemos estratificar el remo para que arriba abajo e izquierda derecha remar. Seleccione arriba e abajo. Eso sería de 20 y tipo de izquierda, ponlo en 40 y golpea aplicar, y ya está aplicado. Cada vez que cambiemos el nombre de un botón digamos: Botón Nuevo, se redimensionará automáticamente. Este es un plugin realmente cool y conveniente, y es realmente similar al otro botón que ya mencioné. Si creas otro botón, podemos decir que es un Botón Nuevo y posicionarlo de la manera que queramos para que podamos alinearnos con el centro y agruparlos. Ahora podemos usar este plugin de botón o simplemente usar el comando de atajo G. Simplemente podemos renombrar el botón y se aplicarán todos los demás estilos. Estos plugins son realmente similares y puedes usar cualquiera de ellos que te permita gustarte más. El otro plugin útil que también discutimos es el Generador de Contenidos. Si tengo un par de tu induce y algunos textos para los nombres, puedes mantener fuera a tu cliente. Si seleccionas esto, puedes ver que necesitamos las fotos personales y digamos, imágenes femeninas. Se llenará automáticamente, y también es cierto para los nombres. Entonces necesitamos nombres femeninos y ya está hecho. Hace que sea súper fácil trabajar con tus datos y con tus imágenes. 6. Crear paleta de colores: Crear una paleta de colores agradable y consistente puede ser desafiante a veces, pero déjame mostrarte un par de consejos y trucos que uso cuando busco los colores perfectos. Tengo un par de grandes webs abiertas que suelo usar en busca de los colores perfectos, así que uno de ellos es uigradients.com, aquí puedes ver gradientes realmente bonitos creados por marcas y otros diseñadores, y también puedes ver los valores exactos que están usando, y este recurso es enorme, básicamente puedes encontrar cualquier cosa aquí, el otro que realmente disfruto usando es la Rueda de Color de Adobe, y aquí puedes establecer diferentes reglas, así que cómo funciona es que primero especificas color principal, un color de marca, y luego en base a diferentes reglas, te puede ofrecer otros colores para una empresa que hace color, y el último que uso es el Grabient, esto es realmente similar al Gradientes de interfaz de usuario, pero tienen un tipo de gradientes realmente diferente, también puedes afinar estos y agregarle el color extra para que sea más interactivo y sea más editable. Este también es gran sitio web para revisar, y saltaré al sketch, siempre trato de empezar con definir el personaje principal, el color de acento, o el color planeado que usaremos a lo largo del proyecto, esto es por lo general el color de los patrones y luego los elementos más importantes del sitio web, y por lo general tratar de buscar algo alrededor del azul o los tonos morados de los colores, así que básicamente estoy sacando a la luz es saturación y valor de brillo y tonalidad, por lo que es realmente bueno tener en cuenta que el color tiene que funcionar muy bien tanto en unas superficies brillantes como en las superficies oscuras o negras si tenemos una interfaz de directorio como un motivo oscuro en la app, o simplemente un oscuro fondo, por lo que también es bueno tener en cuenta que tiene que funcionar en ambos casos, así que sí, aquí podemos jugar con diferentes tonos y colores para encontrar el que realmente coincida con nuestra marca, así que para nuestro proyecto, Ya tengo el valor así, también puedes copiarlo y usarlo, así que este es el color principal que usaremos en nuestra página de aterrizaje, y también tendremos un color para el texto, algunos diseñadores dicen que no recomiendan usar full negro para el texto, a veces estoy de acuerdo, pero realmente depende del caso, la mejor práctica es usar un azul realmente oscuro el cual es casi negro, pero hoy en día, las pantallas LED son más comunes, por ejemplo en el iPhone 10, a veces puede ser útil utilizar un negro perfecto como fondo de una sección en el sitio web por ejemplo, para que puedas decidir. Puedes agregar un negro perfecto de usuario para el texto, o simplemente puedes usar un color azul realmente oscuro, y esto también es cierto para el blanco, por lo que algunos diseñadores dicen que está bien usar un blanco completamente para el texto, pero realmente depende también de los antecedentes. Si tenemos un fondo perfectamente negro y nos gustaría escribir encima, realmente se recomienda no usar color blanco completo porque puede ser realmente brillante y más bien disminuir lo contrario, así que usa 90 o 80 por ciento de blanco en caso de fondo negro. Pero para nuestro proyecto podemos usar un negro perfecto para el texto y también blanco para el texto blanco y los elementos, y lo que tiene que ser una necesidad es que si tenemos tres gradientes y de esta manera somos gradientes de marca, por lo que todo de ellos p, a, b en forma diagonal, y vamos a ver, este es el primer paso del gradiente, eso se agrega aquí y luego este es el segundo. Simplemente posiciónelo. Perfecto. Tenemos el otro aquí mismo. En cuanto a gradientes, suelo tratar de crear y usar dos colores, se vecinos entre sí. En este caso, el amarillo y el naranja son casi rojos y están realmente cerca uno del otro en el espectro de color así como se puede ver el morado y el azul, por lo que estos también están uno al lado del otro, y de esta manera se está bastante seguro de que te van a quedar muy bien uno al lado del otro. Son seguros de usar dentro de un gradiente sin ningún problema ni ningún temor a errores. Ahora tenemos los colores principales que usaremos a lo largo del proyecto, y lo que recomiendo hacer es que aquí puedas guardar estos colores como colores de documento. Posteriormente, solo puedes usarlo rápidamente con un solo clic, así que solo guardamos este color, así que siempre que estemos diseñando y necesitamos el color específico, solo podemos saltar aquí y luego dar click sobre él y estará ahí al instante. Te recomiendo guardar estos colores, tal vez el blanco y negro sea innecesario, pero si estás usando el azul directo o un tono diferente para los colores claros, es realmente conveniente ponerlos aquí, y también está funcionando con el gradiente para que también puedas guardar estos gradientes como color de documento, y los estaremos usando mucho durante el proyecto por lo que, realmente se recomienda ponerlos aquí para sus próximos textos. Cuando si estamos diseñando un botón, por ejemplo, podemos simplemente pasar rápidamente por los gradientes y [inaudible], tenemos el gradiente ahí mismo. Contamos con nuestra configuración de colores y podemos continuar con el proyecto. 7. Elige fuentes: tipografía es el elemento más importante del diseño porque queremos asegurarnos de que la experiencia de lectura sea lo más grande posible. La gente siempre está buscando razones para dejar de leer. Con la excelente tipografía, podemos estar seguros de que los usuarios leerán nuestros mensajes y leer sería un placer para ellos. Si quieres conocer más sobre la tipografía, te recomiendo que revises dos artículo. Una de ellas es la Guía de cinco minutos para una mejor tipografía. Este es un gran resumen de los principios clave dentro de la tipografía. Durante nuestra práctica, realmente hemos utilizado estas técnicas y principios. Pero si te interesa la tipografía, realmente te recomiendo leer este artículo y aprender más sobre diferentes pesos de fuentes y también alturas de línea y longitudes de línea. Este es un excelente artículo para aprender sobre la tipografía. Pero usaremos casi todas estas técnicas en la práctica dentro del próximo capítulo o video. El otro artículo es una tipografía práctica que vienen, es tipografía en 10 minutos. También es un gran resumen de los principios tipográficos más importantes. Para las fuentes, suelo usar Typekit, que es un servicio de pago por parte de Adobe. Me gusta mucho este servicio y es realmente asequible y están brindando mucha alta calidad en fuentes premium. Pero para nuestro proyecto, usaremos una fuente gratuita, porque está disponible para cualquier persona y fácilmente puedes simplemente descargarla. Utilizaremos la fuente llamada Source Sans Pro. Básicamente, para poder descargarlo, solo puedes seleccionar esta fuente. Entonces aquí tienes un botón de descarga y puedes descargarlo a tu computadora. Una vez que lo descargues, solo puedes abrir la carpeta y ahora ordenar los archivos de fuente que necesites. Simplemente abre la aplicación de libreta de teléfonos en tu Mac y simplemente arrastra y suelta tus fuentes ahí. Si hago eso, recibirá un mensaje de error porque ya los tengo instalados. Pero ese es el proceso completo de instalar una fuente en tu computadora. Entonces es realmente fácil. Después de instalar la fuente, solo puedes entrar en tu documento y luego empezar a escribir. Tienes la opción de seleccionar la fuente que acabamos de instalar. Por lo que tienes todos los evades, el semi Boyd, Boyd negro, regular. Tienes todas las diferentes versiones de la fuente. Por lo que estamos configurados y podemos seguir diseñando la página de aterrizaje. 8. Diseño de la página de aterrizaje: Por último, ahora podemos empezar a diseñar nuestra página de aterrizaje. Este es el proceso de diseño. En primer lugar, necesitaremos una Mesa de trabajo, solo podemos presionar A en el teclado o simplemente seleccionar Mesa de trabajo, y luego seleccionar el “Escritorio HD”. Dado que la página de destino será una página relativamente larga, luego cambie la altura a alrededor de 7,000 píxeles de altura. Posteriormente, siempre podemos cambiar este valor si no es suficiente, por lo que podemos aumentarlo en cualquier momento a 10,000 u 8,000, no importa porque es cambiable en cualquier momento. Empecemos por diseñar primero la navegación. Para la navegación necesitaremos el rectángulo, que se coloca exactamente en la esquina, y el ancho es del 100 por ciento, por lo que es un ancho completo, y la altura es de 50 píxeles. En cuanto a las llamadas de color de fondo, debe ser una blanca con un 97 por ciento de opacidad, lo que cuando el usuario vía scroll, entonces podrá desarrollarse más adelante, luego el contenido, puede ser visible en solo un poquito, y también podemos añadir un desenfoque de fondo de celdas auténticas también. Para tener un poco de separación debajo de él, es una buena práctica agregar la sombra, que está a solo un píxel abajo. Las cervecerías es cero y la opacidad es de 10 por ciento negra. Podemos añadir el logotipo de la empresa o logotipo de la marca, que es uno realmente sencillo. Tracker corto. Deberíamos ser 18 píxeles, también negrita. Para tener un poco más de separación, la última palabra debe ser el color de la marca así. En cuanto al posicionamiento, el contenido del sitio web será de 1100 píxeles de ancho. Esto es, la caja dentro vamos a maquetar, el contenido. Si lo deseas, puedes convertir en gobernantes y puedes usar guías aquí también. Simplemente puedes crear, haciendo doble clic, crear dos líneas ahí mismo y puedes mantenerlas como referencia. Pero usualmente solo digo que son 170 píxeles de la izquierda y también de la derecha por lo que es bastante fácil y no necesitamos un sistema más complejo en este momento. Si tienes algún otro activo del proyecto listo, por lo que tienes el contenido aquí. Este es el nombre de la marca. Se trata de artículos de navegación. Simplemente podemos crear estos también. Debe ser un 14 píxeles en tamaño de fuente y el regular, el primero tenemos las características, luego tenemos la comunidad, y el empezar, luego colocarlos 60 píxeles separados uno del otro. Si los agrupa, posiciónelos en el centro y estudia. Ahora necesitamos otro de estos para el inicio de sesión, que puede ser uno audaz y también necesitamos un botón get start. Para el botón recomiendo usar cuatro píxeles, radio de borde. Y también utilizar el color de la marca como fondo. Cambia el color a blanco. En cuanto a sombra, recomiendo usar un color del color del botón que acaba de modificar el brillo para que los inconveniente del bit para que sea de color más oscuro a su alrededor y simplemente disminuir lo opuesto a 10 o 20. También cambia el texto aquí a semi negrita, en lugar de negrita y solo posicionarlo en el centro así, y también éste de ahí. A veces también es bueno creer en nuestros ojos y no sólo en los números. Por la sombra y el equilibrio visual que puede ser tan obvio, la mejor herramienta para poner el exactamente por números en el centro, pero también confiar en tus ojos en el proceso. Simplemente puedes subir, revisar todo, y es perfecto. Ahora tenemos el título, el título y el título principal es éste por lo que tenemos palas regulares automáticamente. Debe ser un píxel de 70 en tamaño de fuente y negro y además, así, y la altura de la línea es de 72 y también levantamos así y después tenemos el texto de descripción regular, que tenemos éste. También es una buena idea usar emojis porque es realmente popular hoy en día y puede lucir tu producto o servicio estable al día y moderno por lo que es solo un bonito toque de usar este y el tamaño de fuente aquí es 21. También para la altura de la línea, usualmente lo multiplico por 1.5, 1.6 por lo que debe estar alrededor de 7-1 en general así que está bien para la altura de línea. Sí, algo así. Ponlo en píxeles, eso lo hace perfecto. Ahora podemos crear la sección ir a la acción de la página y en nuestro caso, no será solo un botón. Será un campo de entrada para la dirección de correo electrónico porque si debajo de los usuarios para dar esas direcciones de correo electrónico. Aquí podemos crear un rectángulo que es de 450 píxeles de ancho y 23 píxeles de altura y también el radio debe ser de cuatro píxeles. El color de fondo para ser blanco. No obstante, para que esto sea visible, si aplicas sombras. Una sombra sería un pixel abajo y dos pixel desenfoque y negro con 5 por ciento de opacidad. Si agregas sombra adicional, con valores diferentes, pero lo contrario también serán 5. Ahora es mucho más visible pero aún pueden mejorar esto aplicando un borde que apenas en espesor será apenas la mitad y el color del borde puede ser el negro con 10 por ciento de opacidad o apenas 5 por ciento de opacidad. Por lo que realmente depende de nosotros lo que preferimos para nuestro proyecto, preferiremos la versión del 5 por ciento. Entonces podemos crear un botón, que es 140 y así pones el color de la marca. Lo que podemos hacer aquí es una posición como ésta. Si agrupamos estos dos elementos juntos, y hacemos clic en el rectángulo más grande de la parte inferior, podemos usarlo como máscara. Como ves, tenemos el radio de frontera justo ahí por lo que es perfecto de esta manera. Podemos tener el texto de 16 píxeles diciendo eso. Empieza a rastrear, porque empieza a rastrear tus programas de televisión. También es una buena idea usar textos específicos en cuanto a ir a botones de acción, eso son solo pruebas genéticas. En lugar de usar solo el invitado punteado o únete o regístrate, y también es bueno probar diferentes fraseo como empezar a trekking porque está más conectado a las funciones de la app o al servicio que brinda esta empresa. También puedes ver el posicionamiento aquí. Ahora necesitamos tener el título del campo de entrada, así diciendo que es correo electrónico, y también podemos usar el color de la marca en este caso. Entonces podemos tener sólo el texto automático base, como your@email.com. Simplemente dando al usuario alguna idea de la entrada que necesitamos de ellos. Simplemente podemos usar esa opacidad del 30 por ciento. Igual que eso. Simplemente lo posicionamos como éste. Mantén siempre una variedad de capas para que todo esté dentro de un grupo aquí, debido al enmascaramiento, debe estar 30 píxeles por debajo del texto de la descripción. Si tienes socios, es una gran idea ponerlos en la página de destino. Justo al principio. Los usuarios pueden ver que estás trabajando con grandes marcas y socios. Contamos con estos logotipos. Podemos escanearlos, por lo que la altura es de 30 píxeles. Netflix puede tener 25. Si estás haciendo algo. Todas las mayúsculas, es una buena idea aumentar el carácter y el espaciado entre los caracteres, y también disminuir el tamaño de la fuente también. Al igual que esto. Tenemos a los nobles, y fijamos esa opacidad 30 por ciento y simplemente distribuirlos uniformemente. Genial, y posicionarlos así. Impresionante. Ahora, para hacer visualmente más interesante esta sección de héroes, vamos a crear un par de rectángulos y utilizar los gradientes de marca que ya creamos durante el capítulo de color en el video color. Podemos tener un vaso cuadrado con el 60 o 40 por ciento del radio de Puerto. También podemos usar esta característica de esquinas suaves por mi boceto. Hace que las esquinas sean más redondeadas básicamente. Podemos seleccionar uno de los gradientes primos y también disminuir la opacidad al 90 por ciento en el desenfoque de fondo de 10 píxeles. Usa también una sombra de ocho y 16 píxeles, y configúrela 20 o solo 15, así, y crea otra en el color de la marca púrpura. Ves que están encima uno del otro y la opacidad y también el fondo lo borrosa creando un efecto interesante. Ahora sólo tenemos que rotarlas. Entonces rotemos esto, 65 por ciento en grados y éste en 45 grados e intentemos simplemente alinearlos o tal vez sea una buena idea primero alinearlos y luego girarlos. Estos están perfectamente alineados de esta manera y sólo podemos rotarlos ahora. Es un perfecto, sí, déjame simplemente agruparlos. Es importante que tengamos la barra de navegación. Simplemente los pegamos juntos y lo colocamos en la parte superior. También puedes cambiar el nombre de ese grupo si lo deseas. Perfecto y necesitamos otro rectángulo, que sería 300. Usaremos el gradiente azul y aún así aplicaremos la misma opacidad y desenfoque de fondo, también la sombra. Gírala en 45 grados y colócala aquí mismo. Ahora podemos conseguir la maqueta del iPhone 10 finalmente, y usarlo. Tiene 310 píxeles de ancho. También agrega algo de sombra, como 20 píxeles hacia abajo, y 30 píxeles de desenfoque, y 10 por ciento de opacidad, así como así. Ahora puedes jugar con el posicionamiento hasta que encuentres esa posición perfecta con la que te encuentras cómodo. Algo así como éste, genial. Bueno, si quieres ver qué es visible exactamente cuando se carga la página. Qué está por encima de la fuente, por debajo de la fuente. Simplemente podemos seleccionar el tablero de adición y modificar la altura a 900 píxeles. Esta es la resolución predeterminada de Retina MacBook Pro. Es 1440 por 900. Esto es prácticamente visible sin ponerse en cuclillas en la página de aterrizaje. Si solo te paras aquí y pienso por un segundo, puedes ver que el visitante de tu Instagram que cuál es el principal punto de venta o la característica principal de esta aplicación, cómo se ve la aplicación. También obtienen un poco de explicación. Pueden registrarse de inmediato y empezar a usar. Si se les permite tener una cuenta pueden iniciar sesión. También pueden darse de alta y también pueden dar sus direcciones de correo electrónico, y también ven que hay realmente grandes marcas en relación con este servicio. Pueden empezar automáticamente a rastrear sus programas de televisión con Netflix, o con una analogía, sistemas de redes domésticas o básicamente solo los dispositivos normales. Básicamente toda la información necesaria está aquí mismo para que el usuario decida si le gustaría registrarse al instante. Pero en caso de que no estén listos para continuar con el proceso de inscripción, podemos darles más información sobre esta app y servicio. Simplemente podemos continuar con los textos adicionales. Tenemos la sección de características próximamente. A ver. Tenemos las características, y también tienen ésta para el contenido. Podría ser más rápido simplemente, fue éste, agarrar rápidamente el contenido para el sitio así. Ahora podemos ponerlo demasiado ligero y 80 por ciento de opacidad para que sea un poco menos significativo y puede tener éste en negro y también tener éste. Está bien. Ahora sólo tenemos que disminuir la altura de la línea aquí, así. Es igual que en caso del título principal. Ahora vamos a crear las tres características más importantes de la app y el servicio. Vamos a crear un rectángulo con un ancho de 300 píxeles. Esta será nuestra guía. No será visible en la ranura vacía. Simplemente lo usaremos como guía. Simplemente los posicionas. Ahora podemos pegar el contenido dentro de él. Tenemos el seguimiento automatizado, que será solo uno. El tamaño de fuente debe ser de 18 píxeles. Entonces tenemos una descripción como esta. Esto es de sólo 16 píxeles y la mano derecha es de 24. Aquí también el ancho puede ser 300 píxeles como este y tal vez un medio Aprende más botón y enlace. En el color de la marca, y también con el icono pequeño, afilar como. Para crear ese uno, necesitamos tener un cuadrado seis por seis y quitar para rellenar en los bordes, y también establecer el grosor en dos. Ahora sólo tienes que pulsar Enter, se abrirá esta forma y tienes las tijeras, y solo puedes quitar dos de esas. Ahora sólo tengo que rotarlo así, y sólo posicionarlo. Ahora puedes simplemente agruparlo y colocarlo en el medio. Perfecto. Ahora tenemos que crear un pequeño icono, es un rectángulo de 50 por 50. Podemos utilizar de nuevo uno de nuestros gradientes de marca. Alrededor de 14 píxeles de radio de borde con esquina lisa y también aplican alguna sombra como en caso del botón Llamar a la acción en la navegación. Podemos simplemente agarrar un color y ponerlo en 20 en la opacidad, o en realidad sólo 15, y luego podemos colocar el botón Play en él. Si vamos a Iconos, Características y el Play, pero podemos posicionarlo. Ten en cuenta que posicionar el botón Play puede ser un poco complicado, así que no confíes en los números intenta confiar en tu ojo. Alrededor de eso. Simplemente agruparlos y colocarlos en el medio. Genial. Ahora sólo tenemos que repetir estos pasos. Ahora vamos a crear una separación interactiva entre la sección de dos características. A lo mejor solo uso los carteles del programa de televisión. Vamos a crear un rectángulo con un ancho de 220 píxeles y la altura de 330 píxeles. A lo mejor uso radio de borde de seis píxeles, y tal vez los posiciono 30 píxeles entre cada uno de ellos así. Establece sombra con 0, 10, 20 y 10 por ciento para la opacidad, y tal vez necesito siete de estos, así que uno más como este. Ahora podemos agruparlos juntos, colocados en el medio y posicionarlo así. Ahora podemos cambiar el relleno de estas dos imágenes y apenas empezar a usar las imágenes para que tengamos en el programa de televisión carteles. Tenemos las imágenes que necesitamos. Simplemente puedes arrastrar y soltar allí y ya está hecho. Hazme saber cuál de estos es tu favorito o hay algún nuevo programa de televisión aquí que aún no hayas visto, o si los has visto, cuál era tu favorito. Yo sólo tengo curiosidad. Veamos House of Cards justo aquí en medio y The Flash, y el último. Perfecto. Está bien. Tenemos una fase interactiva y separación visualmente interesante entre las diferentes secciones. Ahora podemos enfocarnos en crear la sección de casos reales. Ahora crea la sección vitrina de las aplicaciones, así que vamos a crear un subtítulo aquí. Agarra el contenido, agarra el otro, perfecto. Establezca el ancho en 460 y alinéelo a la izquierda. Este también, ponlo negrita y el tamaño de fuente es 46 con la altura de línea de 50. El alto de la línea debe ser alrededor de 28, y también disminuir lo contrario, por lo que recibe menos atención. Ese es mejor entre los elementos. Posicionarlo así. Tenemos que crear estos interruptivos Tagore. Si volvemos a utilizar la técnica de las diferentes sombras. Esta es la primera sombra, y tenemos una segunda también, así. Vamos a establecer el ancho en 340 y la altura en 54, y establecer el texto. Ahora podemos agarrar los iconos. Entonces dentro de los iconos tienes una carpeta para el caso real, y dentro de eso tienes el tablero. Simplemente colóquelo dentro y posiciónelo. Perfecto. Ahora sólo tienes que copiar estos y obtener el contenido de los otros botones. Perfecto. Basta con agarrar los iconos. Genial. Ahora usemos las capturas de pantalla que tenemos. Por lo que primero comienza con la captura de pantalla de la aplicación. Vamos a crear un rectángulo con el ancho de 820 y la altura de 511. Esta será la máscara que usaremos. Simplemente colóquelo debajo del separador. Ahora si agarramos la captura de pantalla, así que tenemos la maqueta de aplicación web. Simplemente colóquelo aquí. El ancho también puede ser de 820. Trata de posicionarte así justo encima del rectángulo que creamos. Ahora puedes simplemente agruparlos y usar el rectángulo como base de la máscara. Ahora puedes establecer el radio del borde en seis y también aplicar la sombra, que será 0820, y lo contrario será un poco 10. Ahora ves que tenemos esquinas redondeadas, y también tenemos la sombra. Perfecto. Ahora también podemos añadir la maqueta de iPhone aquí también. Así que establece el ancho a 65 y también agrega sombra. Genial. Ahora sólo lo posicionamos posicionamos lo por aquí. Impresionante. Por lo que de esta manera hay vista previa a esa aplicación también. Se puede ver la maqueta Eiffel en su totalidad también. Entonces el usuario hace clic a través de estos diferentes modos. El contenido dentro de esto puede cambiar de acuerdo con Tagore seleccionado aquí. Ahora podemos crear el testimonio como sección. Simplemente creemos el rectángulo grande que será la base de esta sección y solo pongamos el fondo en negro. Colóquelo 140 por debajo de la sección anterior. Ahora podemos colocar el contenido aquí, y simplemente copiar pegarlo y cambiar el color a blanco. También necesitaremos este pequeño subtítulo aquí mismo. Diga que es comunidad. Y tenemos el contenido. Impresionante. Simplemente cambia un poco la posición para que tengamos un espacio mucho más activo alrededor de este elemento. Basta con crear el botón, que tenemos el color de impresión y también Leer más como texto en él. Sí, exactamente. Establezca el peso de la fuente en semi-negrita. También, línea central lo. Basta con encontrarte en los detalles. Además, el tamaño de fuente debe ser 16. También puedes tener la misma sombra igual que aquí. Que usamos este color para sombra. Ahora, vamos a crear las tarjetas para los testimonios. Simplemente crea un rectángulo con un ancho de 260 por 210 y establece el radio del portero 10 píxeles y también puedes usar esta característica de la mayoría de las esquinas. Establezca el color de fondo en blanco y disminuya lo opuesto a ocho. Entonces vamos a crear un círculo para la imagen de perfil y luego también una capa de texto. Asegúrate de que esté alineado a la izquierda. Debe ser semi negrita y tamaño de fuente de dos píxeles y medio. Ahora, desde el frutero, solo agarra el ícono de Twitter y solo puedes actualizar el color y ponerlo lo contrario en un 30 por ciento así. Ahora, sólo puedo agarrar uno de estos testimonios. Simplemente colóquelo ahí dentro. Actualice la altura de la línea y también disminuya lo contrario y asegúrese de que esté perfectamente posicionado. Ahora, solo necesitamos agregar una fecha y fijarla, frente a ella al 50 por ciento y solo una regular. El modo en que funciona esta tarjeta es que cuando el usuario haga clic en ella, su feed será dirigido al tweet real. O puedes usar también Facebook o la publicación real de Facebook. Esto es realmente importante porque de lo contrario, si es sólo el nombre y la opinión o simplemente una cita aquí, la mayoría de los usuarios están diciendo que es una cita falsa y están diciendo que el dueño del negocio o el diseñador o desarrollador simplemente lo averiguó y es solo una opinión falsa. Pero en realidad atar este a un verdadero mensaje de Tweet o Facebook y vincularlos. Es la mejor manera de crear testimonios porque de esa manera el usuario puede validar por sí mismo que, “Está bien, esta es una opinión real”. “ Es una cita real y esa es la publicación original de Facebook o tuiteo a ella”. Es realmente importante hacerlo de esta manera porque de esta manera le da mucha más credibilidad a nuestra página de aterrizaje. Ahora, podemos simplemente agrupar todo y crear una segunda versión con la otra. Puedes usar comillas o simplemente puedes usar el texto, depende de ti y solo actualiza la altura. ¿ Y si tienes más ejemplos para el curso? Puedes usar más ejemplos como tengo que hacerlo. Para que puedas personalizar esto. Ahora, solo seleccionemos cada segundo de las fotos de perfil e vayamos a las fotos personales del generador de contenido y femeninas y también usemos las capas de texto de esta. También, acude a los nombres personales del generador de contenidos y femeninos. Sólo tienes que ir por las fotos del alcalde así como los nombres. Es así como puedes generar rápidamente contenido 3-D en tu diseño. Así que sólo nombres y perfecto. Ahora, también podemos preparar esto juntos y solo actualizar un poco el espaciado. Perfecto, ahora, podemos disminuir la altura de este fondo y agrupar todo junto y usar la capa de fondo como base de la máscara. Perfecto. Ahora, llegamos a la última parte de la página de aterrizaje, que no es una sección de llamada a la acción. Es muy fácil porque lo [inaudible] son elementos existentes. Al igual que este, solo puedes colocarlo justo debajo la sección testimonial como esta y podemos actualizar el contenido aquí. No estaba alineado en el centro. Por lo que sólo arreglé este aquí también. Perfecto. Ahora, solo actualizo el contenido ahí dentro y también podemos usar la brecha [inaudible] existente que creamos así. Ahora, podemos tener algunos iconos para los perfiles sociales de la empresa. Podemos empezar con ellos en Twitter, luego Facebook, y YouTube, y distribuirlos uniformemente. De acuerdo, solo agrupéalos, pon lo contrario en 20 por ciento y alinéalos en el medio. Ahora, tenemos el pie de página, que ha sido realmente sencillo. Basta con ponerlo en semi negrita y cinco píxeles para centrarlo en la línea. Configura hasta un 30 por ciento y además pon esto más cerca. Genial, y solo hay que volver a posicionar la altura del tablero de arte. Perfecto. Ahora, estamos listos con la próxima versión de la página de aterrizaje. Enhorabuena por completar la versión de libro de texto de esta página de aterrizaje. Espero que esto haya sido útil. Ahora, podemos continuar y centrándonos también en la versión móvil. Sigamos observando. 9. Diseño de móvil: Vamos a crear la versión móvil de nuestra página de aterrizaje. En primer lugar, necesitaremos otra vez una salida y luego para móvil suelo ir con los tamaños iPhone 8 o iPhone 10. Pero en nuestro caso, ambos tamaños son idénticos porque el ancho del iPhone será el mismo. Vamos a escoger la salida del iPhone 10 y hacerla más larga igual que en el caso de la versión de escritorio. Ahora podemos usar los mismos elementos que usamos durante la versión de escritorio y simplemente podemos reutilizarlos de nuevo. Hemos modificado los ajustes. Tenemos la barra de navegación, es de ancho completo y luego tenemos el logotipo de la marca, así como así. Entonces si le das un vistazo a la navegación, estos enlaces son codificaciones, por lo que simplemente se están desplazando a las diferentes secciones de la página, y creo que el [inaudible] uso para innecesario para la versión móvil, qué es realmente necesariamente es ir al botón Acción. En lugar de hacer que esta barra de navegación esté abarrotada de muchas opciones diferentes, solo quiero mantener el botón esencial y el más importante, que es el botón Get Started, así. Ahora, solo copiemos y peguemos los demás elementos de la sección de héroes. Tenemos el título, subtítulo y parte de llamada a la acción, y solo los copiamos y pegamos aquí. Vamos a actualizar los tamaños de fuente para tratar de aparecer 42 píxeles con 48 píxeles de altura de línea, así, y el ancho será de 343 píxeles. De esta manera, tenemos un 16 píxeles de espacio negativo en ambos lados, y actualizaremos la navegación en consecuencia también. Para este texto tendremos el tamaño de fuente de 18, y el ancho aquí será el mismo. Además, no olvides actualizar también la altura de la línea. Basta con actualizar la parte de llamada a la acción, y también necesitaremos los logotipos de la marca. Podemos escalarlo o también podemos actualizar la vista de espaciado si lo deseas. Entonces tal vez solo escalarlo un poco así y actualizar el espaciado. Ahora solo podemos agarrar los visuales y hacerlos 60 por ciento en escala. También puedes copiar el teléfono y actualizar el ancho a 300 píxeles. Ahora también podemos seguir copiando la sección de características. Tipografía de fuente ahí. Si echan un vistazo al texto aquí, podemos ver que sólo hay una palabra en la última línea. Entonces para evitar eso, tal vez sea una buena idea actualizar el tamaño de fuente, así que esa es una técnica. Pero en caso de que cambiemos el texto, entonces tendremos que cambiar también el tamaño de la fuente. Se puede adaptar al contenido en sí, pero en una regla general también me gusta mantener estos alineados a la izquierda porque si se echa un vistazo a las otras secciones y a las otras partes de característica, tendrá más sentido y se verá más consistente. Cuando copiamos estos, solo puedes tener que alinear estos elementos también. Simplemente puedes repetir el mismo proceso con las otras características también. Aquí, tienes una opción para centrar alinear todo si quieres, o simplemente puedes alinear todo a la izquierda. Lo único que hay que tener en cuenta que para ser consistente aquí. Entonces si decides que quieres centrar esta entonces, debes hacer lo mismo con el resto pero si te gustaría ir con la alineación izquierda igual que yo, asegúrate de alinear a la izquierda todo aquí también. También podemos escalar toda esta línea de programas de televisión. A lo mejor es demasiado grande. Esto me gusta. También puede actualizar el espaciado a 16 o 15 píxeles por lado. Ahora podemos continuar con la parte vitrina. Entonces al igual que antes, solo copiaremos y pegaremos el contenido y actualizaremos el tamaño de fuente. Esto debe ser de 32 píxeles con una altura de línea de 38 píxeles. También, establecer el ancho y centrarlo. Este sea a 16 píxeles con una altura de línea de 24 píxeles. También actualizar el ancho y centrarlo. Genial. También podemos copiar estos toggles. Genial. Entonces, sólo podemos copiar el teléfono. Aquí, sólo me quedé con la maqueta del iPhone ya que, cuando el visitante vea este sitio web en su teléfono, probablemente les gustaría tener una sensación de cómo se verá la aplicación en su teléfono. En realidad no estarán interesados en la replicación del texto en este momento. Pero también puedes incluir eso. Para tener una vista más simple y darle más contexto al usuario. Te recomiendo usar solo la maqueta del iPhone 10 en caso de una vista telefónica. Ahora, podemos tener la sección comunitaria, la sección testimonial. Al igual que en el caso de la versión de escritorio, la idea es crear el fondo y luego copiar el texto. También actualice el contenido también. Copia el botón también. Ahora, sólo tenemos que copiar las tarjetas. Para ello, usaremos y clavaremos la tarjeta de una manera diferente. En lugar de posicionarlos de manera vertical los posicionaremos horizontalmente. Entonces, solo tengamos algo de área con la que jugar aquí. Genial. Podemos simplemente ponerlos uno al lado del otro. Actualizaremos la altura de cada tarjeta para que cada tarjeta tenga la misma altura. Genial. Podemos simplemente pegarlos aquí. No necesitaremos descansar por ahora. Genial. Ahora solo actualizamos el espaciado. Perfecto. Por último, solo tenemos que crear la parte de llamada a la acción del pie de página. Para ello, primero, basta con copiar y pegar estas características bloque de texto. Podemos centrar alinear todo y actualizar el contenido. Para la parte de llamada a la acción, solo podemos usar el mismo campo de entrada de correo electrónico de la sección Héroe. Sólo tenemos que copiar los iconos sociales y el texto del pie de página. Asegúrese de que la opacidad sea del 20 por ciento y actualice las distancias. Asegúrate de centrarte en alinear todo. Simplemente puedes hacer esto regular y solo 11 píxeles en caso de que un tamaño de fuente. Genial. Basta con actualizar la altura de este tablón de anuncios. Increíble. El último toque que suelo hacer en este punto es agrupar todo para tener un archivo de boceto más limpio. Entonces podemos agruparlos y eso lo nombra como navegación. Entonces, este es el “Héroe”. Nombra a este Héroe, y esto aquí con características. Se trata de los programas de televisión. Después tenemos el escaparate de la app. testimonios. Por último, tenemos la llamada a la acción de pie de página. Podemos simplemente actualizarlos y ordenarlos tal y como aparecen dentro del documento. Primero es la navegación, después tenemos al Héroe, y luego las características, luego programas de televisión y escaparate de aplicaciones, testimonios y llamada a la acción de pie de página. Increíble. Ahora estamos listos con nuestro diseño. Está listo para entregarle a un desarrollador. Puedes trabajar en animarlo y empezar a desarrollarlo y hacer de este un sitio web real. Ahora tienes el diseño perfecto de imagen para la versión de escritorio así como para la vista móvil. El desarrollador puede ir desde este documento o puedes llevarlo más allá y hacer de tu página de aterrizaje un prototipo, o incluso un sitio web real. 10. Proyecto de clase: Hola ahí. Enhorabuena por casi completar este curso. Ahora es tu turno. Me gustaría que crearan un diseño de página de aterrizaje, igual que hicimos en los videos anteriores. Si ya tienes un producto o servicio, puedes crear un nuevo diseño de landing page con el fin de conseguir más clientes e incrementar las conversiones. En caso de que tengas una gran idea para una aplicación o servicio impresionante, también puedes diseñar la página de aterrizaje para que mida el interés de la gente. O si eres diseñador, y te gustaría actualizar tu portafolio, puedes rediseñar tu página de inicio, o en caso de que tengas un boletín, puedes diseñar la página de aterrizaje con el fin de conseguir más suscriptores. Por último, si solo quieres enfocarte solo en las partes visuales, puedes usar el mismo resumen del proyecto, como hicimos durante este curso, y crear una nueva página de aterrizaje para nuestro corto registro, estamos usando el mismo texto y imágenes. Asegúrate de publicar tus proyectos a continuación, y yo estaré aquí y te ayudaré y te daré comentarios en cualquier momento. 11. Acabado: Enhorabuena, has completado con éxito esta clase. Espero que haya sido de ayuda y hayas aprendido un par de nuevas técnicas. Tengo muchas ganas de ver tus diseños dentro de los proyectos de clase, y si necesitas ayuda, siéntete libre de preguntar en cualquier momento. Por favor, no olvides dejar una reseña si disfrutaste de esta clase y compartirla con otros también. Por si quisiera ver mis otros proyectos, descargue mis recursos de diseño gratuitos o lea artículos de diseño en profundidad. Asegúrate de revisar mi Perfil Triple, y en caso de que te gustaría ser notificado sobre mis proyectos más recientes, puedes estar al día en Twitter. También avísame si estás interesado en futuras clases, ya sea prototipado o desarrollo front-end. Nuevamente, muchas gracias por quedarse por ahí y espero verte la próxima vez. 12. Extra: flujo de trabajo de trabajo de Dribbble: Hey ahi, bienvenido en esta lección bonus. En este video, te mostraré cómo preparo mis diseños para un Dribbble. Si abres nuestro archivo de boceto, realmente creo otra página solo para el tiro de Dribbble. Basta con copiar pegar diseño que voy a incluir dentro de esta toma. Para el Dribbble tendremos una regla estricta para subir, que es así que el ancho tiene que ser de 800 píxeles y la altura tiene que ser de 600 píxeles. Esta será imagen que podrías subir en Dribbble. Aquí solo copio ese diseño y actualizo la altura a 900 píxeles, por lo que sólo la sección Héroe y la Navegación es visible. Ahora voy a convertir este diseño en sólo una imagen regular. Para hacer eso, basta con revisar este color de fondo solo para que el fondo llene la herramienta al blanco regular y luego solo puedes agregarlo a un JPEG como formato. Acabo de arrastrar y soltar este diseño y ahora tengo la imagen aquí mismo. Esto se incluirá dentro de este tiro de Dribbble. Como fondo, crearé un rectángulo y pondré el color en blanco y solo le agregaré un por ciento de saturación solo un poquito. No es del todo ligero, suele tener un tinte de azul o morado, igual que dentro de nuestro diseño, así. Ahora, puse el ancho a 750 o exhibo en entre los números y trajes posiblemente sí, el 720 y que tomé el centro. Simplemente crearé otro rectángulo para la máscara y la centraré. Ahora podemos agrupar estos dos juntos y lo hace como máscara y establecer el radio de frontera en cuatro o seis, arreglarnos, dejarlo siempre cuatro en este momento. Ahora podemos aplicar una sombra para este grupo y también asegurarnos de que para la sombra, también estamos usando un poco de azul oscuro tintado con un tono azul. Esto hará que el diseño sea más importante y en línea con las tendencias Dribbble últimamente. Al igual que esto. Ahora, en caso de que este tiro sea un poco más interesante, si utilizas las tarjetas, al igual que exigimos que utilicemos durante el proceso de diseño y que añadamos editar base de datos de carácter también. Podemos simplemente agrupar estos y piel al 60 por ciento y colocarlos atrás. Yo sólo trataría de alinearlo perfectamente. Ahora solo haz lo mismo con el otro también. Ahora si lo miras, puedes ver que el propio navegador o el propio sitio web, parece transparente de una manera extraña que aún veas la barra de navegación. Pero entonces el diagrama que quise decir está colapsado con el contenido también. Es lo que lo hace realmente bonito e interesante efecto visual. Eso está literalmente en línea con los clientes en Dribbble hoy en día. Sí, básicamente esta es una versión de hacer un tiro o la otra que debo usar es solo colocar los rectángulos de una manera interesante y de la manera atractiva. A lo mejor solo intenta jugar con el posicionamiento de ellos para que el fondo no sea solo un blanco aburrido y es rectángulos puedes hacerlo más interesante y más atractivo para tus seguidores y tal vez para otros que estén buscando inspiración. Ahora el único paso que tienes que hacer es exportar realmente esta obra de arte, por lo que en un formato 1x y PNG, simplemente puedes exportarla fácilmente a tu siguiente app así y ahora puedes subirla a Dribbble. Eso es todo. Tienes listos los tiros de Dribbble. Gracias de nuevo por acompañarme para esta clase y espero que hayan aprendido algo y haya sido útil. Realmente estoy ansioso por sus comentarios y también por sus opiniones. Muchas gracias y que tengan un gran día.