Diseña tu sitio web con Figma | Diseño de sitios web

1. Introducción del curso: Cuando estás en una startup o simplemente estás creando un nuevo negocio, normalmente eres estrella cosa era muy poco capital. En el mundo actual, es muy difícil dirigir cualquier tipo de negocio sin tener algún tipo de presencia en línea. Por eso vencimos a la creación de prototipos. Herramientas como Figma vienen a ser útiles, le permiten construir el prototipo de sitio web o aplicación utilizando la menor cantidad de recursos de forma gratuita. Digamos, por ejemplo, que estás trabajando en una startup educativa y tu equipo te pide que construyas un sitio web usando HTML, CSS y JavaScript. Digamos que eres un trimestre profesional y construyes esta página de inicio educativa en dos días. Después de revisar tu trabajo, uno de los miembros de tu equipo te dice que cambies el color de fondo. Tendrías que pasar por tu código base. Es necesario hacer cambios en la hoja de estilos en cascada e implementar nuevamente el código, lo cual es muy ineficiente y pierde mucho tiempo. Sin embargo, estos mismos cambios Figma es muy sencillo. Puedes cambiar el fondo yendo a tu, sin embargo, eligiendo en el cuentagotas y seleccionando el color que te gustaría que fuera tu fondo. Este es solo un ejemplo muy básico y a medida que avanzan las cosas, puede que no sea así de sencillo. Tu objetivo como nueva startup o una nueva visita debería ser construir algo usando la menor cantidad de recursos con software como Figma, que son cambiadores de juego. Sí. Después itera a alguien que ha trabajado como ingeniero de software durante los últimos 20 años. Y uno de sus artículos mencionó que invertir en el proceso de diseño, ya sea a través de tener diseñador UX o simplemente por educarse, entregará enormes dividendos. A la larga. Ahí es donde entra Figma. Te permite invertir en el proceso de diseño y validar lo que has construido con tus compañeros. Este curso es para fundadores de startups, nuevos negocios, o cualquier persona que quiera aprender Figma y usar ese conocimiento para diseñar un sitio web o landing page. Aunque el enfoque principal de este curso sería sigma, también estaríamos cubriendo otros aspectos importantes del diseño web como alineación, paleta de colores, topografía , inspiración, logo, wireframing. Mi nombre es Otto, y seré tu instructor en este viaje. Y si estás listo, comencemos. 2. Primeros pasos con Figma: Bienvenidos de nuevo a todos. Ahora vamos a empezar con Figma. Si ya tienes un gran lío eso en tu dispositivo y además tienes algo de experiencia con él. Siéntete libre de saltarte esta parte del video, asumiendo que esta es tu primera vez usando Figma, Empecemos agregando sigma en nuestro navegador web. Asegúrate de seleccionar en el grueso de mi sitio web que aparece. Eso te llevará a la página principal de Figma. Y si ya tienes una cuenta o tienes que hacer es iniciar sesión. Sin embargo, si no tienes una cuenta, pulsa en, Comenzar e inicia sesión con Google o proporciona tu información y crea una cuenta una vez que hayas iniciado sesión, así es como debería ser. Muchas veces no hay necesidad de recrear algo desde cero. Siempre podemos construir sobre lo que otros ya han creado. Por ejemplo si vas a la comunidad, Ginny puede encontrar recursos desde obtener iconos hasta wireframes y todo lo demás. Por ejemplo, digamos que estás buscando una página de inicio de inicio. Puedes presionar en la web y escribir página de inicio de inicio. Y ahí tienes. Tenemos una variedad de diseños para seleccionar. Este tiene muchas reacciones, por lo tanto, debe ser bueno. Puede obtener una copia presionando, obtener una copia. Una vez que lo tengas abierto. Por ejemplo, si solo vamos a la sección de héroes, hay muchos diseños diferentes que puedes ver haciendo esto desde cero para haber tomado mucho más tiempo, sin embargo, con la ayuda de la comunidad, puedes hacer tu landing page de startups y un tiempo mucho menor. Nuestro proyecto principal para esta clase vamos a crear una página de inicio de inicio. Sin embargo, para darte la visión general completa, estaremos haciendo la mayoría de las cosas desde cero. 3. Proyecto 1 página de aterrizaje de inicio: Bienvenidos de nuevo a todos. El primer proyecto para esta clase es construir una landing page de inicio usando este archivo sigma que fue compartido en la comunidad. Y el propósito de este ejercicio es ayudarte a construir una página de inicio de inicio y una cantidad mínima de tiempo aprovechando los recursos creados por la comunidad Figma. Para el propósito de este ejercicio, digamos que queremos construir una página de destino para un creador de sitios web sin código bajo pH. Si vamos a aquí o sección, y si navegamos por el pH héroe, podemos ver una variedad de diseños. Ingresa diez, se ve genial, o un sitio web sin código. No obstante, encabezado 15, el título mucho más pequeño. Entonces solo voy a seleccionar eso para este ejercicio yendo a nuestra izquierda y solo seleccionas en la cabecera 15, estoy presionando Control C, eso lo va a tener copiado. Bajemos a la sección de componentes y creemos una nueva página debajo de ella presionando este botón más, renombrado de 17 años a landing page y presionando Control V. Vamos a la Página de características y ver si podemos encontrar algo que coincida con nuestra sección de héroes. La característica 37 parece coincidir con el título que tenemos en nuestra sección de héroes. Entonces podemos copiar eso yendo a la característica 37 de aquí. Presiona Control C, y pégalo de nuevo nuestra página de destino y asegúrate de que estén alineados. También es bueno tener una página donde podamos mostrar lo que ofrecemos. Y a partir de aquí si vamos al trazo es P, puedes encontrar que eligió galletas seis. Se ve genial, genial. Así que ojalá que volvamos a nuestra landing page. Supongamos que somos un negocio basado en suscripción. Y si vamos menores de edad a las tablas de precios, hay una variedad de opciones para elegir. La tabla de precios A3 se ve muy bien. Para que las cosas sean simples, me quedaré con la tabla de precios cinco. Así que también vamos a copiar eso de nuevo a nuestra página de destino. Ahora, agreguemos una sección temática. Vamos a la página del equipo. Cuatro estaría genial. Dije que eso nos permitiría mantenernos consistentes con las paletas de colores. Ya tenemos el equipo de copia de botón verde para volver a la landing page. Agreguemos dos elementos más y prácticamente estaremos hechos o una página de inicio básica. Pasemos a la sección de contacto. Y después de hojear para ver cuál se ve genial, encuentro que los contactos, el sexo son muy pulcros. Así que vamos a duplicar eso de nuevo a nuestra postura. Y por último, los CMS se ponen a nuestra página. Y aquí es donde podemos tener sobre sección de empresas, una sección de recursos, o lo que sea que funcione para tu negocio, dependiendo de la naturaleza de lo que hagas. Pie o cinco se ve genial ya que tiene una porción donde puede permitir que sus usuarios suscriban a boletines. Así que voy a elegir a pie o cinco y replicar eso de vuelta a nuestra página de destino que le permite presentar rápidamente sus diseños a otros. Entonces quieres mostrar esto a los demás. Simplemente puedes hacer que se vea mejor presionando presente. Y una vez que se carga, puede presionar en este horario. Y esto te permitirá presentar rápidamente tus ideas a los demás. Y en poco tiempo pudimos crear una landing page que se ve muy bien gracias a la comunidad Pigma. Entonces, al crear una landing page de inicio o cualquier cosa en general, dependiendo de lo que intentes hacer, algunas cosas pueden ser diferentes aquí y allá, pero los conceptos básicos siguen siendo consistentes. Por ejemplo, para sitios web, siempre vas a tener una barra de navegación, una sección de héroes, una sección de Contáctenos. Y también la he puesto, aunque no seas diseñador web, al menos deberías intentar conseguir los derechos fundamentales. Entonces, en la próxima sección de esta clase, repasaremos cosas como paletas de colores, tipografía, alineación, moodboards, wireframes. Y para el final de la clase, ojalá tengas los conocimientos suficientes para diseñar tu propia landing page. 4. Guía de presentación de proyectos: Bienvenidos de nuevo a todos. En este video, voy a repasar los pasos que debes seguir para obtener ayuda para hacer preguntas y compartir tus proyectos a lo largo de esta clase. Primero comenzaré con cómo compartir un proyecto. Puedes compartir un proyecto, empujar el enfriamiento a las discusiones. Y aquí, a perder, a compartir un proyecto. Una vez que hagas clic en él. Por ejemplo, para enviar el ejercicio, pasamos por la página de inicio de inicio. Puedes compartirlo yendo aquí arriba y presionando este botón azul que dice compartir. Y asegúrate de que cualquiera que fuera este enlace pueda ver y también tener este seleccionado. Y sólo tienes que copiar el enlace. Y una vez que tengas eso, vuelve a la sección de proyectos en Skillshare. Asegúrate de especificar el proyecto en el que estás trabajando. Por ejemplo, este proyecto es el primero, así que asegúrate de etiquetarlo como project one. Aterrizaje, playa. Y batir el siguiente enlace. Y puedes presionar y enviar. Si alguna vez quisiste compartir una imagen. También puedes hacerlo subiendo una imagen. Si por casualidad tienes alguna duda, también puedes ir a esta sección donde dice, hacerte una pregunta y hacerte una pregunta y personalmente haré todo lo posible para responder a tu pregunta. Y por último, siéntete libre de iniciar una conversación en cualquier momento de esta clase. Como se agradece la participación. Por ejemplo, si hay algo que va a ser beneficioso o algún consejo que tengas, podemos compartirlos simplemente iniciando una conversación y publicándola. Tenemos múltiples proyectos en esta clase. Y si alguna vez olvidas cómo compartir tu proyecto, solo vuelve a este video. 5. Conceptos básicos para hacer que te inicies: Ahora volvamos a nuestra página principal de Figma presionando en back to files. Y vamos a crear nuestro primer archivo nuevo mediante la creación en archivo de InDesign. Si seleccionamos en marco o F. Esto nos permite elegir entre los diferentes marcos disponibles son muy acertados. Podemos ver todos los marcos disponibles. Si seleccionamos el margen de escritorio. Eso nos dará un ancho es 0, 14, 40, y una altura de 1024. Si selecciona en el menú desplegable junto al icono del rectángulo arriba, le permite agregar esto a su marco, por ejemplo, seleccione esta opción. Y si quieres duplicar esto a lo largo de tu fotograma, puedes hacerlo presionando Control C y Control V. Sin embargo, un mejor enfoque sería presionar sobre el ítem y presionar sobre todo mientras lo arrastras hacia la derecha. Esto también se puede hacer para múltiples artículos. Una vez resaltes todo y seleccionas en todos menos un perdido para moverlo a donde quieras. Y podemos cambiar el color de la campana para nuestros autos resaltando todo en nuestro mismo derecho. Bajo relleno, podemos seleccionar nuestro color. Podemos agregar un rectángulo. Y podemos enviar el rectángulo al dorso haciendo clic derecho sobre él y presionando en Enviar al Atrás. Y podemos hacer que el rectángulo se vea mejor ajustando el radio a false. Y se ve mucho mejor. Y si quieres agregar texto en, presiona en esta camiseta arriba, lo que te permitiría ingresar texto. Y podemos conseguirnos un texto ficticio de un sitio web generador de texto ficticio y rellenar la porción de texto. Esto es un montón de textos. Aquí es suficiente. Puede que ya lo hayas adivinado, estamos construyendo como componente testimonial o un producto para nuestro primero piensa mi breve tutorial. Si has notado testimonios suelen tener una persona. Entonces, consigamos un titular de lugar de colesterol de inicio para la imagen de la persona. Y eso se puede hacer seleccionando esta opción y creando un círculo. Y este círculo para estar parejos podemos simplemente, solo podemos ingresar 50 por 50. Y eso nos daría una forma más redondeada. El círculo se encabeza, así que llevémoslo al frente. Simplemente haga clic derecho sobre él y Crestone traiga al frente. A pesar de que tenemos esto con crudeza, no lo pudimos ver porque tiene este mismo exacto llenarnos, nuestros rectángulos para que podamos hacer un cambio rápido simplemente yendo a llenar, yendo a rellenar cambiando el color al blanco. Ahora agreguemos el nombre de la persona justo al lado del avatar. Se ve muy grande, así podemos minimizar el tamaño de aquí a algo así como ocho. También podemos conseguir que otro texto se ponga en el título de una persona. Ahora vamos a minimizar más el tamaño del título. Digamos que quieres replicar este componente que has creado. Como has preguntado, por lo general los sitios web tienen múltiples reseñas, no solo la reseña de una persona. Puedes ir por el camino fácil resaltando todo, presionando Alt y arrastrando esto a tu derecha. O otra forma de hacerlo es resaltándolo y presionando sobre esta opción que dice Crear Componente. Y una vez que hayas creado un componente, puedes acceder al componente yendo a tus activos. Y justo desde aquí solo puedes arrastrarlo y colocarlo dentro. Esto puede ahorrarle mucho tiempo, especialmente si está trabajando en el mismo componente una y otra vez a lo largo del proyecto. Y antes de que lo llamemos un día, repasemos la función de lápiz en Figma, que básicamente te permite diseñar tu propia forma personalizada y puedes acceder a ella desde arriba desde aquí seleccionando el bolígrafo ido. Y una vez que hayas seleccionado la pluma, podrás dibujar una forma que quieras. Y la forma en que esta función de lápiz funciona a través de eso, funciona haciendo clic y arrastrando a su siguiente punto. Y una vez que conectes todos los puntos, puedes rellenarlo con el color de tu elección seleccionando en este cubo de pintura. Hay muchas más, muchas más características que la Sigma. Sin embargo, hemos cubierto todas las cosas que necesitamos para comenzar con los proyectos que cubriremos en esta clase. 6. Alineación y cuadrícula: Al diseñar nuestras startups o negocios, esta página de destino, nuestro objetivo es hacer que nuestro sitio visualmente atractivo y fácil de usar. Y la alineación juega un papel importante ya que nos ayuda a crear un equilibrio entre el contenido y luego ellos tienen este. Entonces tienes una idea de cómo se ve esa alineación. Vamos a repasar algunos ejemplos. El primer ejemplo, ¿ cuál crees que es mejor? Los elementos a nuestra derecha son los elementos a nuestra izquierda. A nuestra izquierda, todo, se ve perfectamente organizado. El espaciado se ve perfecto junto con la alineación. Sin embargo, a nuestra derecha, las cosas están por todas partes. No vemos alineación ni orden. Si bien los Foursquare de ambos lados son exactamente los mismos, la única diferencia es cómo se alinearon y también su espaciado. Y eso marcó la diferencia de tener un diseño llamativo y un diseño verdadero y atraído. El mismo patrón se puede ver en nuestro segundo ejemplo. Y también nuestro tercer ejemplo. Quizás te estés preguntando, ¿cómo puedes asegurarte de que las cosas estén alineadas correctamente? Y la respuesta es agregar cuadrículas de diseño para su diseño. Vamos a agregar una nueva página y crear un nuevo marco. Seleccione en el escritorio. Y bajo diseño. Seleccione en la opción que dice cuadrícula de diseño. Y seleccione en configuración de cuadrícula y convierta esto de grado a columna y cambie la cuenta 5-12. Y vemos que no hay espacio entre el final. Entonces veamos los márgenes para los complementos a 140 y la cuneta a 30. Agregar una cuadrícula de diseño le permitirá tener un marco de referencia claro que lo ayude a mantenerse en línea. Por ejemplo, podemos crear una barra de navegación y asegurarnos de que todo esté alineado. Puede tener un texto para nuestro logo. Podemos tener un marcador de posición de imagen. Y luego alinearlo a nuestro párrafo de texto. A menos que podamos agregar una línea en la parte inferior. Como puede ver, al agregar panes Leo, pudimos tener una alineación adecuada, un espaciado adecuado. Y eso nos ayudó a crear un equilibrio entre el contenido y el layout. En resumen, tener una alineación asegura que todos los elementos estén alineados entre sí. Para asegurarte de que tu landing page o sitio web se vea más profesional y ordenado. Para más detalles sobre la cuadrícula, he incluido una referencia creada por Figma sobre la cuadrícula de diseño. Los valores de esta cuadrícula se seleccionaron en base a un gran diseñador web. 7. Cómo inspirarse: Quizás te estés preguntando si deberías diseñar algo así como un sitio web desde cero. O podrías estar preguntándote, ¿cómo los demás son geniales, un gran diseño? Y la mejor respuesta es inspirarse en los demás. Ahora se podría decir, bueno, ¿cómo me inspiro? Bueno, puedes inspirarte visitando sitios web como aquí. Bill.com es un sitio web que te permite ver un gran diseño web, diseño de productos y muchas otras cosas buenas. Para el propósito de esta clase, digamos que estás tratando de diseñar una landing page de inicio. Entonces, bajo diseño web, puede escribir la página de inicio de inicio. Actualmente, no estoy conectado, así que no voy a poder guardar este diseño. Así que asegúrate de crear tu cuenta. Y una vez que hayas creado una cuenta, podrás guardar tu diseño. Una vez que estoy conectado, puedo guardar este diseño. Entonces para el propósito de este ejercicio, digamos que me interesa este diseño. Puedo crear una nueva colección, nombra también. Página de inicio de inicio. Y presiona en Crear colección. Voy a tener una colección relacionada con esa colección. Digamos que me interesa, en este diseño. Puedo agregar eso a la página de inicio de inicio. Puedes agregar tantos como quieras, pero tener tres es lo suficientemente bueno para que lo empieces. La landing page que intentas crear. Entonces ahora bajo tu perfil vas, puedes ir a tus colecciones. Y debajo de mis colecciones tenemos top landing page y podemos ver las tres landing page con Peck. Si buscas un sitio web que brinde más detalles, visita la mano aquí. Si tecleamos en la página de inicio de inicio. Si solo abrimos uno de ellos, podemos ver que son muy detallados en comparación con los ejemplos y el resumen de driblar antes de ir y diseñar tu app o sitio web, se recomienda ver lo que otros pueblos de tu dominio están haciendo. Esto fue que no tienes que diseñar todo desde cero. 8. Intro de framing por cable: Antes de diseñar la tarifa de aterrizaje, tener un wireframe nos ayudará a entender y ver el sitio web de antemano, ahorrándonos tiempo a largo plazo. Por ejemplo, es más fácil hacer reyes en la etapa de estructura metálica que tener que hacer esos cambios después de implementar la vida útil del sitio. Una manera fácil de pensarlo es la siguiente. Esta casa sí tiene planos antes de que se construyan. Wireframe sirve como plano para sitios web. Volvamos a la comunidad Figma. Presione sobre wireframes. Busquemos un kit mínimo de estructura metálica. Y esta diseñada por una persona llamada bonnie Hong, se ve bien ya que tiene muchas reacciones. Entonces, consigamos una copia presionando sobre esta copia getter, que automáticamente la duplicará a tu Figma. Así que una vez que lo tenemos abierto, si vamos a Activos y componentes abiertos, podemos ver que tenemos un avatar, botón principal y todo lo que necesitamos para comenzar con wireframing de nuestro sitio web, que cubriremos en la sección de proyecto final de esta clase. 9. Introducción del proyecto principal: Bienvenidos de nuevo a todos. Nuestro proyecto final es construir una página de inicio educativa. Comenzando desde wireframing hasta crear el diseño final de figma. Al final de este proyecto, podrás aplicar lo que hemos cubierto hacia tus propios proyectos y podrás construir el diseño web Figma para tu startup o negocio real. Aunque podemos inspirarnos en sitios web como Dribbble o Behance. Te recomiendo probar primero Figma como comunidad, sobre todo si no tienes mucho tiempo. Dije que al menos obtendrás archivos ya diseñados los cuales podrás ajustar fácilmente y hacer un buen uso, como el que hemos cubierto en uno de nuestros videos anteriores. Con eso dicho, comencemos. 10. Crear panel de inspiración: Las recompensas generalmente se utilizan para servir inspiración para generar nuevas ideas. Ve a behance.net y busca startup educativa o diseño web. Y siéntase libre de seleccionar el exterior sobrediseñado de las start-ups educativas. Como solo estamos buscando inspirarnos. Esta web diseñada por una agencia de marketing. Eso se ve bien. Podemos agregar eso a nuestro mood board. Al guardarlo. Podemos crear un nuevo mood board y llamarlo landing page de inicio educativo. También me gusta este diseño web. Aunque es para una empresa de desarrollo de software. Las paletas de colores parecen patrones y hasta ahora se ve bien. Así que también agrega esto al mood board que acabamos de crear. Seleccionemos uno más diseñado para finalizar nuestro moodboard. Quizás para nuestro último, busquemos la página de inicio de inicio. Esto se ve bien hasta ahora. Entonces agreguemos este a nuestro mood board. Entonces ahora si volvemos a nuestro perfil de Behance y vamos a la sección de mood board. Podemos ver que los mood boards acabamos de salvar. Nuestro último paso es poner todo esto en Figma para que tengamos un solo lugar donde podamos visualizar todo a la vez. Y ahora sólo voy a poner todo esto en Figma. Y si solo estabas viendo y no has hecho a mood board, siéntete libre de obtener los archivos del proyecto y descargar el archivo Figma que tiene el mood board que acabamos de crear. 11. Página principal Wireframe: Ahora vamos a crear una estructura metálica usando el kit de estructura metálica mínima que duplicamos anteriormente. Una vez que tengas el kit de estructura metálica mínima, ábrelos Figma. Empecemos por agregar una página y cambiarle el nombre a wireframe. Para la página de inicio de inicio después de seleccionar en verde. Y ahora mismo estamos diseñando para un escritorio. Entonces, debajo del escritorio, desplegable, seleccione Escritorio. Primero comenzaremos creando nuestra barra de navegación. El video anterior, creamos un mood board y lo agregamos a nuestro archivo Figma. Así que vamos a conseguir eso aquí. Tenemos todo en un solo lugar, así que escribe humor, mood board. Y puedo duplicar eso yendo a nuestro mood board. Y debajo de las capas, si solo las seleccionas, enmarca uno, controla C. Y si vuelves al mood board, puedes simplemente duplicarlo. Presionando Control V. Primero comenzaremos creando nuestra barra de navegación. Y antes de hacer eso, vamos a crear una cuadrícula para que todo se mantenga alineado. Si volvemos a nuestro mood board, lo que encontrarías que es Coleman a lo largo todo es ahora un bar que tiene el logotipo de la compañía. Sección de contacto sobre nosotros. Y dependiendo de la naturaleza de tu startup o negocio, harías pequeños ajustes. No recibí un llamado a la acción en tu barra de navegación. También sería una buena idea para obtener nuestra barra de navegación. Vamos a Activos. Y bajo activos, este kit de estructura metálica viene con una barra de navegación que ya ha hecho. Entonces todo lo que tenemos que hacer es jalar esas dos horas. Vemos que el botón Comenzar está fuera de la grilla que nos ha complacido. Y podemos arreglarlo haciendo doble clic en Comenzar. Y a nuestra derecha. Si presionas sobre estos tres puntos, desprenda la instancia. Una vez que lo despegues, puedes simplemente sacarlo marco de la barra de navegación. Y podemos hacer lo mismo para nuestro componente de encabezado. Muévelo afuera, y podemos hacer lo mismo con el logo. Podemos quitar este marco. Entonces ahora es más fácil navegar. Podemos tener nuestro logo arriba. Podemos asegurarnos de que todo esté alineado resaltando elementos de nuestra barra de navbar seguido de seleccionar los centros verticales de alineación. Y si, se ve mejor. En lugar de un buen comienzo. Sólo voy a sustituir esto con ponerme en contacto. Y ahora podemos volver a las capas e irnos. De hecho, todas las landing page tienen algún tipo de imagen en su página de inicio. Volvamos a la página del wireframe. Se puede ir a activos. Representar que estaríamos colocando una imagen. Un raro. Entonces 598 por cuatro o 46 debería ser lo suficientemente bueno. Ahora si volvemos a nuestro mood board, podemos ver que todas las empresas tienen. Soy breve descripción de lo que ofrecen para el texto. Veamos si tenemos recursos en nuestros activos. Si vamos a Activos y bajo kit de estructura metálica, podemos ver que hay diferentes contenidos. Y pasa que hay una sección de héroes que podemos aprovechar. Entonces por ahora ya tenemos un marcador de posición de imagen vigilado. Así que sólo podemos tomar esta porción por Copia. Puedes obtener Control C, Volviendo a nuestro wireframe y pegándolo hacia atrás y asegurándote de que esté alineado. Sí, esto se ve lo suficientemente bien. No necesitamos este segundo botón para que pueda eliminarlo. Si volvemos a nuestro mood board, podemos tener algo como esto que somos y poner el nombre de nuestra empresa por ahora. Digamos que el nombre de nuestra empresa es evento UB. Entonces antes del párrafo, señor mover eso. Y por favor algo que tendría sentido que dijera una startup educativa. Sugeriré tener éxito aprendiendo de manera eficiente. El aprendizaje no debe ser visto evento relacionado, sino como parte de vivir y crecer. En lugar de primaria mejor y reemplazar los textos con algo así como aprender más. Es muy difícil mover las cosas alrededor de este marco, así que es mejor separar cada instancia. Coloquemos una flecha. Me di cuenta de que la barra de navbar está un poco baja, así que vamos a pasar eso un poco a la cima resaltando todo y simplemente subiendo. Sí, esto es bueno. También podemos mover la imagen y el texto un poco hacia arriba. 12. Acerca de nosotros Wireframe: Para la sección Acerca de nosotros, todo es más o menos similar a lo que hicimos. Podemos copiar esto presionando el Alt mientras arrastramos hacia abajo. Tengamos un pequeño encabezado para nosotros seguido de un breve Logan y un párrafo explicando lo que ofrecemos. Estos pueden ser nuestros pantalones cortos, Logan. Educación de calidad y asequible. En lugar de este texto ficticio lo va a sustituir por algo que tenga más sentido. Movamos esto un poco hacia abajo para hacer espacio para el acerca de nosotros que va a estar vigilando. Podemos describir un texto, colocarlo aquí y escribir sobre nosotros. Y hace que esto sea un poco más grande. Esta fuente se ve bien. Y si, eso es prácticamente todo para la sección Acerca de Nosotros. 13. Plan de precios Wireframe: Ahora crearemos nuestro wireframe para los precios y esto para inspirarnos. Y si volvemos al mood board, entonces busca información sobre precios. Podemos encontrar que el tercer mood board tiene algunos precios de inspiración. Para que podamos recrear algo así para nosotros mismos. Podemos ver que hay un encabezado más pequeño, encabezado y un párrafo. Así que vamos a conseguir eso yendo a, Va a kit de estructura metálica haciendo doble clic en el contenido central. Por ahora solo necesitamos el encabezado y el párrafo para que podamos simplemente copiar este Control C y pegarlo de nuevo. O podemos colocar este encabezado con precios asequibles. Cuando nuestro mood board, podemos ver el encabezado más pequeño arriba. que podamos conseguirlo yendo a la sección Acerca de Nosotros. Acabo de darme cuenta de que había un poco de espacio, así que lo eliminé y presionas el Alt y arrastras hacia abajo. Puedo duplicar eso fácilmente. Podemos reemplazar esto con plantas de precios. Podemos tener un párrafo de llamado a la acción donde podamos ver algo a lo largo del lado, invertir en ti mismo con nuestro contenido de calidad. En nuestro kit de estructura metálica. No pudimos encontrar nada para usar. Así podremos recrear rápidamente los rectángulos. Al ir al rectángulo, creando una forma rectangular. Podemos ver que cada uno tiene algún tipo de descripción de la clave de suscripción, seguida del precio y seguida de algunas de las cosas que ofrecen. Junto con un llamado a la acción. Para R1, estoy pensando en sólo tener tres. Entonces la primera versión sería la versión gratuita. Asegúrate de que esté centrado. Y solo reemplace esto con $0. Esto es un poco pequeño, así que aumentemos el tamaño de la fuente a algo así como 32 o incluso. 36 debería ser bueno. Entonces para la versión gratuita, estamos en startup educativa. Podemos tener, podemos ofrecer algo al lado. Los estudiantes pueden tener acceso a cualquier materia. Limitación de cuatro lecciones. Puedo simplemente duplicar esto, disminuir el tamaño a algo así como 15. Centro que otro servicio que podamos ofrecer, puede ser que los estudiantes puedan publicar hasta cinco preguntas al mes. Asegúrate de que todo esté espaciado por igual. Y la gente podrá tener acceso a dos problemas de práctica. Y podemos tener un llamado a la acción igual que el que podemos ver en el mood board. Entonces para ello, podemos ir a Activos, ir a componentes, y agregar un botón principal. Vamos a tener algo, digamos 543. Asegúrate de que esté centrado. Este filo afilado no se ve muy bien así que podemos hacerlos más redondeados cambiando el radio de la esquina a algo así como 14. Sí, eso se ve mucho mejor. Hopi así de fácil. Ya que estoy buscando tener una versión estándar y una versión premium. Simplemente puede conducir con esto mientras presiona Alt. El espaciado se ve perfecto. La siguiente es nuestra versión de suscripción estándar. En la versión estándar podemos cobrar algo así como $10 al mes. La diferencia media sería que las personas que suscribieron acceso ilimitado a clases, pueden publicar un número ilimitado de preguntas al mes. Lo mismo ocurre con los problemas de la práctica. Y obviamente si el, para el botón primario, necesitamos hacer el cambio a algo así como suscribirse. Y nuestra última versión sería la versión premium. La versión premium estará cobrando $19 son permanentes. Y podemos eliminar esto y simplemente duplicar esto a nuestro modelo premium. La única diferencia que tendrá la prima con respecto al estándar sería Tener retroalimentación instantánea de un experto. Asegurémonos que esto esté alineado con la detención. La alineación se ve un poco apagada. Aquí. Hay mucho espacio entre el precio y las características que ofrece la suscripción. Sin embargo, aquí, no hay mucho espacio. Entonces para acomodarnos para eso, solo podemos aumentar un poco esta altura y mover esta. Y podemos hacer lo mismo para todos. Podemos seleccionar todo esto una vez y moverlo. Y asegúrate de que esté alineado con la versión estándar y la premium. Y esto se ve bien y hay una buena cantidad de espaciado. Y solo necesitamos cambiar esto de lo siento, somos libres de suscribirnos. Y si, eso es prácticamente todo para nuestro plan de precios. Y sólo falta una cosa. Aunque podemos ver que el espaciado entre las diferentes versiones de suscripción es el mismo. Si miras nuestros bordes, estamos viendo que la versión premium está más cerca del borde mientras que la versión gratuita está más lejos. Entonces podemos arreglarlo resaltando todo a la vez. Presionando el control y moviéndolo ligeramente hasta que sintamos que todo está centrado. Y si. 14. Contáctenos Wireframe: Hagamos ahora nuestra sección de contacto. Si volvemos a nuestro mood board, podemos ver que la primera landing page tiene un gran diseño que podemos replicar o nuestra sección de wireframes Contáctenos. Primero obtengamos un encabezado para nuestra sección de contexto. Podemos conseguirlo fácilmente presionando Alt mientras estoy arrastrando hacia abajo y coloco el texto. Cambiemos el estilo de fuente de negrita a regular. Tengamos también algún tipo de fondo que antes de eso, necesito extender el marco. Así que la persona de escritorio y arrastra hacia abajo. Para crear un fondo. Solo podemos obtener un rectángulo y solo agregarlo. Trae el Contáctenos al frente. También vamos a crear una aversión al sol apuntando, uno en el mood board. Y haz lo mismo, tráelo. Y podemos tener algo como no dude hacerme cualquier duda. Después Vamos a recrear este botón en nuestro wireframe obteniendo un rectángulo. Y para que sea visible, cambiemos el relleno de gris a blanco. Y queremos que sea oval. Entonces cambia su radio a algo así como 20 o incluso más. 25. Podemos agregar, digamos su nombre. Esto lo cambia a luz y cambia el color de negro a gris. O simplemente podemos tener color negro y cambiar esto del 100% a algo así como el 50 por ciento. Sí, eso se ve mucho mejor. Disminuyamos el tamaño de la fuente a algo así como 14. Y asegúrate de que esto esté centrado. Sí, eso se ve bien. hacer lo mismo para correo electrónico y asunto. Destacar. Un patrón. Al seleccionar Alt, arrastre hacia abajo, cambió el nombre a temas de correo electrónico. Necesitamos otra caja o el mensaje. Y solo presiona Alt, arrástralo hacia la derecha y agrégalo. Hagámoslo más pequeño. Asegúrate de que esté alineado con la parte inferior. La sección de dispersión de los textos que ve mensaje. Eso se ve perfecto. Ahora todo lo que nos queda es un botón y una línea. Podemos recrear eso fácilmente. No obstante, para el botón, solo podemos obtenerlo de los activos. Arrastre el botón principal. Claro, está alineado y puede obtener el texto y el radio para tal vez hablar. O incluso gracioso. curioso, se ve mejor que el mío. Vamos a agregar un rectángulo. El color a negro, y asegúrate de que estás en saturación de tono y brillo y cambia esto de 100% a 40%. Sí, eso se ve mejor. 15. Blog Wireframe: En los videos anteriores, pudimos crear wireframe para nuestra página de inicio o nuestros precios de la sección Acerca de nosotros y también contactarnos y en lugar de características, reemplazarlo con registro. Y en este video estaremos creando nuestro wireframe o la sección de blog desde nuestro mood board. Veamos si podemos encontrar sección oblicua de blog que podamos usar para nuestro wireframe. La segunda landing page, todavía tienes algo que estamos buscando, una sección de blog. Volvamos a nuestro wireframe. Termina primero, vamos a comprobar si ya tenemos un kit de diseño de blog que podamos usar de nuestros activos. Si vamos al kit de estructura metálica y vamos al contenido central, primero comencemos copiando el encabezado junto al escritorio, junto al subencabezado. Regresemos a nuestro wireframe, control C, control V. Ahora volvamos a los activos. Podemos simplemente copiar uno de estos y duplicar eso a través. Así que solo selecciona en cualquiera de ellos. Este porta imágenes se ve un poco grande, así que intenta minimizarlo. Primero separemos la instancia. Este mensaje debería ser suficiente. Ahora húmedo presionando sobre Alt. Arrastre hacia la derecha. Asegúrate de que esté centrado. Entonces cuando una vez que tenemos todo, vuelves a nuestro mood board, puedes ver que tienen un pequeño tronco sumando arriba, pero encabezamiento más grande y un sub-encabezamiento más pequeño. Para que podamos tener algo como esto. Para el blog. Podemos obtener un texto que tenga la misma fuente exacta. Así sucesivamente Altoid arrastrando hacia abajo por la mitad. Esto convirtió a Logan Stan. Reemplacemos este texto por algo así como mantenerse actualizado. Para nuestro subtítulo, podemos tener algo junto a ver nuestras últimas noticias sobre educación y mantenernos informados. Por último, solo nos queda hacer algunos cambios a este texto. Por lo general, los blogs suelen tener el nombre del autor. Así como la imagen de los autores. Sólo vamos a hacer eso. Ahora. Ir a Activos. Y bajo componentes, podrás encontrar un arbitraje. Podemos agregar el avatar. Movemos este centro de contenido y minimizamos el tamaño, algo así como 40. Se ve un poco más pequeño, así que vamos a por ello. Ahora agreguemos texto, el nombre del autor. Entonces vamos a por nuestro rectángulo. Tambien tengamos una cita. Claro. Los datos en estas listas publicadas de logotipos publicadas listas ajustan el color de nuestro texto ajustando el porcentaje de saturación de tono y brillo a algo así como 50. Hagamos lo mismo por el nombre del autor. Ahora podemos duplicar esto a través de los otros dos elementos log. Sólo tienes que presionar. Puse todo lo seleccionado, presione el alt y arrastre a su derecha. señal no parece estar centrada. Entonces esto sugiere que vayamos al mood board. Podemos ver que también hay puedes ver estos componentes para mostrar que podemos cambiar entre página diferente o la sección de blog donde podemos recrear algo similar seleccionando en este círculo y tenerlo en algún lugar alrededor de diez por diez personas Alt. Mientras arrastras a tu derecha. Asegúrate de que esto esté centrado. Para mostrar P es la página exacta que somos N, podemos resaltar en la página cambiando los colores para simplemente significar que somos esta página. 16. Pies de trabajo Wireframe: Bienvenidos de nuevo a todos. Ahora nos queda la última parte de nuestro wireframe, que está creando la sección de pie de página de nuestra página de destino. Si vuelves a nuestro mood board, para esta startup las landing pages tienen un motor adecuado que podemos usar como inspiración para crear el nuestro propio. Podemos comenzar por crear algún tipo de fondo. Antes de hacer eso. Entonces tu escritorio. Para crear más espacio y presionar sobre el rectángulo de Rex y crear un marcador de posición de fondo. Veamos si tenemos algún recurso para nuestro pie de página de nuestra sección de activos. Y si vamos a componente, estamos pasa a haber una sección de pie de página que podemos traer nuestro wireframe. Y actualmente no coincide con nuestros antecedentes. Entonces intentemos separar la instancia para que podamos mover esto. Actualmente, no somos capaces de mover ninguno de estos elementos. No obstante, si nos separamos, la instancia, podrá moverla afuera y eliminar este fondo blanco. También podemos mover los elementos a nivel individual. No necesitamos ninguno de este icono. Entonces dije eliminarlo o eliminarlo. Vamos a tener las cosas alineadas. Costos del logotipo. Entonces aquí mismo, tenemos muchos elementos que no necesitamos de este marco. Podemos eliminar la sección de viviendas. También elimine los términos y privacidad más largos Acerca de nosotros. Ajustemos el texto para las fuentes. Son muy pequeños. Podemos cambiarlo de pequeño, semi audaz a solo grande, semi audaz. Y también para el contacto. Asegúrese de que el espaciado sea correcto. Sí, no necesitamos precios. En lugar de fijar precios tienen algo como compañía. Y bajo Compañía podemos tener cosas como precios, soporte de blog, e ir por regular. Font podría incluso ser mejor. Y el color cambia 100%, o el color negro a algo así como 50%, 60% son las características que ofrecemos. Podemos tener algo como apoyo lunar, parte educativa en cómo algo así como pasar el mouse, tal vez un área para comentarios de los clientes. La sección de contacto, podemos tener la cuenta de correo electrónico de la empresa, el número de teléfono, la dirección, la empresa. Para que esto se vea mejor, movamos los contactos un poco más allá. Asegurémonos de que las entidades se ingresen en el medio. Junto a todos los contenidos que necesites. Vuelves a nuestro mood board. ver todos los moodboards que tienen en algún lugar donde los usuarios pueden proporcionar su dirección de correo electrónico para suscribirse a nuestro boletín. Vamos a recrear algo para nuestra landing page. Vamos a asegurarnos de que tenemos suficiente espacio, así que vamos a movernos. Esto debería ser lo suficientemente bueno. No es un encabezado que diga pipa. Nuestro boletín y cambiar el tamaño de fuente de extra grande a pequeño, regular. Claro, está alineado. Ahora vamos a crear un botón, igual que el que hemos visto en nuestro mood board. Solicita a los usuarios que escriban su dirección de correo electrónico. Y podemos hacerlo yendo al rectángulo, creando una forma rectangular. Y cambiar el color a blanco para que se haga visible después del radio de agenda a algo así como 20. Vamos a tener copia por correo electrónico desde arriba. Simplemente presiona el Alt, arrastra mientras lo arrastras hacia abajo. Asegúrate de llevarlo al frente. Asegúrese de que todos los elementos de nuestra comida se dirijan, estén alineados para resaltarlos todos y alinear los centros verticales. Sí, eso se ve mucho mejor. Lo único que queda son dos. Sólo el nombre de esta empresa. Sí. Estamos prácticamente hechos en términos de crear nuestro wireframe. 17. Nota final en Wireframe: Entonces podrías estar pensando que hemos pasado mucho tiempo construyendo este wireframe y podrías pensar que no agregaba valor. ¿Por qué no simplemente construir una realidad web real? Nos hicimos un gran favor construyendo un wireframe. Esto nos permite validar nuestra suposición de inicio o negocios utilizando la menor cantidad de recursos. Imagina que si has creado un sitio web o una aplicación y tu equipo son cofundadores te dicen que quieren que se revise la página de servicios o quieren que se revise la página de contacto que ha diseñado. Después de haber construido el sitio web real, habría perdido mucho tiempo tener un wireframe como este que pueda construir fácilmente, Figma le permitirá comunicarse con otros y recibir retroalimentación. Y una vez que todos estén en la misma página, puedes pasar a la siguiente etapa, que es hacer que se vea bien diseñando la landing page real de tierra en Figma. 18. Creación de tu logotipo: Antes de saltar a la creación de nuestro diseño, primero crearemos un logotipo. A menos que estés pensando en tener un texto ya que tu logo era solo el nombre de tu empresa. Los sitios web que usaremos para crear nuestro logotipo se llama half-full y puedes acceder a él si escribes asheville.shopify.com, presiona hacia abajo y empieza. Y dependiendo de la naturaleza de tu negocio y esa pieza de negocio que seas n. Como somos una startup educativa, procederemos con la opción tecnológica. Para los efectos de este video. Aquí para lo visual, estilos, le permite seleccionar hasta tres opciones para futurista, creativo, moderno. Y después de ese precio el siguiente. Y si volvemos, ya tenemos nuestro nombre. Serías inventado. Pero por ahora sólo lo dejaremos en blanco. Te recomiendo que selecciones todas las opciones aquí para que puedas ahorrar tiempo si por casualidad necesitas algo de esto en el futuro. Después podemos ver que hay muchos logotipos generados por IA entre los que podemos elegir. El logo, esto se ve bien. Una vez que presionas en Editar, incluso puedes hacer que el té le guste la fuente que aparece, y también los diferentes colores. La fuente. Sólo voy a cambiarlo a lo correlativo. En los próximos videos, repasaremos los diferentes tipos de tipografía. Quiero que el estilo de fuente esté estandarizado. Por eso voy por una condecorada. Pero moral se discutirá en el próximo video. Y mira cuál te gustaría. Este se ve bien. Entonces procederé con esta tía y presionaré Siguiente. Y luego probar eso. Oh, enhorabuena, tienes tu nuevo logo. El paquete de logotipos incluye todas estas opciones. Esta descarga precedente. No obstante, para descargar necesitas proporcionar tu correo electrónico y también tu contraseña o simplemente puedes iniciar sesión. Ya tengo una cuenta, así que sólo puedo iniciar sesión. Una vez que hayas iniciado sesión, puedes presionar en Descargar. Y si recibirías esta notificación haciéndole saber que todos los archivos de diseño y Paquete de Logo han sido enviados a tu correo electrónico. Espere tres o 4 min y revise su correo electrónico y probablemente obtenga un archivo zipped del que pueda descargarlo. Así que presiona hacia abajo. Una vez que lo hayas descargado, podrás ver todos los diferentes lugares para los que puedes usar la imagen. Por ahora, solo queremos el logo transparente para nuestro próximo ejercicio. Así que ten eso a mano. 19. Paleta de colores: Bienvenidos de nuevo a todos. En este video, vamos a repasar algunas herramientas que podemos usar para crear nuestra paleta de colores. Y también estaríamos viendo algunos ejemplos de cómo se ve la mala paleta de colores. Entonces déjame empezar haciéndote una pregunta sencilla. ¿Alguna vez confiarías o realizarías un pedido de una empresa que tiene un sitio web que se ve así? Yo personalmente no confiaría en un sitio web así. Hay demasiados colores densos. ¿Dónde está la persona que diseñó esto? Quiere que nos enfoquemos en el texto de fondo. Ni siquiera hay una barra de navegación apropiada. Entonces, ¿cuáles son algunas herramientas que pueden facilitarnos este proceso y potencialmente ayudarnos a evitar sentirnos terribles paletas de colores? Empecemos por visitar un sitio web llamado human, que es un sitio web que te permite crear increíbles paletas de colores o combinaciones de colores. Presionas en el sitio web. Sección. Hay una opción donde puedes elegir entre revista o monocromo. Aumentando el número a partir de aquí. Estás presionando en tres, tendrás más. Pero tener paleta de colores de cuatro colores es lo suficientemente bueno para nuestro ejercicio. Cada vez que quieras generar uno nuevo, puedes simplemente pasar a generar. Si quieres ver un sitio web basado en ilustraciones, puedes hacer ese ajuste desde aquí. Y dependiendo de la cantidad de paletas de colores que quieras usar, puedes aumentar los números. Incluso puedes subir tu propia imagen y ver. Este sitio web es especialmente útil si su logotipo es solo consiste en letras que no son de diseño. Podemos tener una idea rápida de qué esperar. Fue tu logo. 20. Extracto de paleta de color del logotipo: En este ejercicio, estaremos muestreando el color de nuestro logotipo, aunque podemos muestrear los colores manualmente, gracias a sitios web avanzados hoy en día este proceso es mucho más sencillo. Nuestro primer ejercicio es obtener colores de muestra para las paletas de colores que usarían para nuestro wireframe. Visita los sitios web llamados colores punto C-O y ve a Herramientas. Este sitio web te permite subir tu logo y genera colores que coinciden con el logo, lo que termina ahorrándote tiempo. Presione el generador OnStart. Aquí. Cada vez que presionas la barra espaciadora, genera paletas de colores que puedes usar. Sin embargo, para nuestro caso, estamos buscando crear una paleta de colores a partir de la imagen que acabamos de descargar. Entonces primero tendríamos que descomprimir la carpeta zip que obtuvimos de la secundaria. Sólo voy a crear una nueva carpeta y cambiarle el nombre a Logo y copiar todo esa carpeta. Ahora lo es, nos será más fácil subirlo al sitio web desde el escritorio, seleccione logo. Y vamos a conseguir la opción Transparente. Y puedes jugar con esto para ver qué combinaciones serían geniales para tu sitio web. Hasta el momento tenemos negro y azul claro. Se puede pulsar en siguiente. E incluso podemos abrirlo en el generador. Podemos bloquear esta primera opción, la segunda opción, y cambiar las tres restantes porque se ven más o menos iguales que las que tenemos a nuestro lado izquierdo. Podemos presionar la barra espaciadora y ver qué podemos. Incluso podemos seleccionar nuestro propio color. Por ejemplo, me gustaría que mi sitio tuviera colores blancos. Entonces va a tener bastante seguro. Y luego completo el restante hasta encontrar un color que quiero. Puedo presionar la barra espaciadora. Sí, esto me queda bien. Entonces ahora puedo exportar esto como una imagen. Denle el nombre paleta de colores, y simplemente presione en la exportación. Y eso nos dará la imagen descargada. Como estuvimos cerca de la marca a mitad de camino de este curso, agradecería que dejaras una reseña con eso dicho, Nos vemos en el siguiente video. 21. Proyecto de colores de muestreo: Bienvenidos de nuevo a todos. En este ejercicio, estaremos muestreando colores de cualquier imagen que tengamos. Instancia, digamos que tienes una página en tu sitio web y tu contenido dispuesto excepto donde tus colores. Solo vamos a seguir los pasos que hemos cubierto en el video anterior y obtener la combinación de colores ya que eso ahorra este tiempo. En primer lugar, tendríamos que exportar la imagen. Puedes tener una vista previa rápida. Pulsar sobre exportación. Una vez que tengas este exponente, hola no es cero. Simplemente podemos dejar caer la imagen que acabamos de descargar y listo, tenemos la combinación de colores. El inicial me queda bien. No obstante, puedes elegir lo que quieras y jugar con esto. Todos lo exportan como imagen. Sólo nombra color uno. Y el deporte. Una vez que tengas la imagen descargada, podemos simplemente tirar de eso aquí y minimizarla. Que se ve mucho mejor. Una vez que tengamos esto. Podemos probar fácilmente los colores. Seleccione en el marco. Seleccione en el cuentagotas. Y veamos si el naranja va a ser un gran ajuste. Esto es muy oscuro, así que quizá reduzca el porcentaje 100-40. Primero. Probemos el color verde. El verde se ve bien hasta ahora, así que solo nos quedaremos con el verde en lugar del naranja. M para la caja en lugar de negra. Podemos tener naranja. Esto se ve mucho mejor de lo que teníamos inicialmente, aunque ligero cambio. En cuanto a los textos. Vamos a repasar eso en el próximo proyecto donde discutiremos la topografía y ajustaremos el texto en consecuencia para que esto se vea aún mejor. Esta parte de la clase del ejercicio es aplicar lo que acabamos de hacer con esto. Quiero que exportes esta imagen en el sitio web llamado colores C0. Debido a la muestra de los colores. Como hemos hecho para este video. Siéntase libre de compartirlos en la discusión. 22. Tipografía: Bienvenidos de nuevo a todos. En este video, vamos a repasar la topografía. La topografía se usa típicamente para mejorar el atractivo visual, establecer algún tipo de jerarquía y también crear una sensación de equilibrio en su sitio web o en cualquier otro lugar. Se recomienda no utilizar más de tres estilos de fuente para un solo sitio web. Sitio web. Personalmente me quedo con sólo dos. Obtengo las fuentes que necesito, generalmente de Google Fonts. Si vas a Google Fonts y vas a la sección de categoría, puedes ver que tenemos las cuatro fuentes principales. Serif, sans, Serif, Display y escritura a mano, que también se conoce como script. Es posible que solo necesites saber esto para cierta familia son puntos que suelen tener algún tipo de cola al final de cada letra. El sans serif es el, el siguiente y más utilizado hoy en día uso. Vas a estar viendo esto en muchos sitios web. El siguiente punto se llama la fuente de visualización. Por lo general, es mejor tener este tipo de fuente en un titular. Y para estar seguros, preferirías usar sans serif sobre display como pantallas muy decoradas y puede ser difícil de leer si estás usando get into párrafos. Quienes demuestran lo que parece si lo estás usando en un párrafo. Entonces puedes ver esto es muy difícil de leer en comparación con san-serif, que es más fácil para el hielo. La última familia extranjera también, voy a estar repasando es escritura a mano. Es autoexplicativo. Por lo general, es bueno tener algún tipo de letra para los titulares. Como una cafetería o puedo crear un negocio. Y eso es todo para esta lección. En la siguiente lección, tendremos un proyecto de tipografía. 23. Proyecto tipografía: Bienvenidos de nuevo a todos. Así que ahora vamos a aplicar lo que hemos aprendido con respecto a la tipografía a la práctica repasando algunos ejercicios. Uno de nuestros ejercicios anteriores, hemos repasado muestreo fijo del color basado en la imagen. Y en este ejercicio, el foco será ajustar la topografía. No tienes este archivo Figma. Lo puedes encontrar en la carpeta del proyecto. Primero comenzaremos con este encabezado. Haga doble clic sobre él. Y desde la pestaña Exportar, podemos ver que la fuente es o botella. Cuando se selecciona la fuente para tratar de encontrar un estilo de fuente era más de seis estilos de fuente. Si te estás preguntando cómo puedes encontrar eso, puedes ver desde aquí, hay diferentes estilos de fuente. Por ejemplo, si vamos a la luz, se va a poner más ligero. Actualmente somos un cerrojo. Sin embargo, si vas a la fuente de Google, siempre puedes encontrar diferentes fuentes. Inyecte esto de nuevo a Poppins. Ya que este es el encabezado principal al que queremos que la gente preste atención. Aumenta el teléfono a por lo menos 64. Y como puedes ver, cuando tienes palabras muy audaces, lo mejor que puedes hacer es disminuir el espaciado intermedio para que se vea mejor. Esto se ve mucho mejor de lo que teníamos inicialmente. En cuanto a los textos. No vamos a cambiar nada. Solo vamos a tener este texto ficticio y cambiarlo para que también lo haga pop in. Para texto más claro, se prefiere tener cierto espaciado. Entonces lo único que queda en este momento es ajustar este estilo de fuente. No está centrado, así que asegúrate de que esté centrado. Y tal vez cambiarlo de regular, semi negrita. Y eso se ve mucho mejor. Ahora tenemos algún tipo de jerarquía. El ejercicio para esta parte de esta clase es para que usted ajuste el fotograma dos y el fotograma tres. Actualmente estamos en marco para. A estas alturas. Apuesto que ya has muestreado el color como parte del ejercicio anterior. Para este proyecto, todo lo que debes preocuparte es ajustar la topografía y nada más. 24. Diseño de página principal: Bienvenida de nuevo. Ahora continuaremos desde donde dejamos de hacer la porción de wireframe del video ahora estará diseñando el wireframe real. Empezaremos duplicando el wireframe con solo presionar en el escritorio desde aquí o simplemente arriba. Tenemos que hacer es presionar Alt. Y cuando estés seleccionando en Alt, arrastra a tu derecha. Simplemente elijamos este diseño. Si quieres ir con un logo que creamos anteriormente, solo puedes ir a la carpeta del proyecto y obtenerlo, obtenerlo de ahí. O si tienes tu propio logo que te fue enviado por correo electrónico por la preparatoria, también puedes insertarlo aquí. De la carpeta del proyecto. Bajo menores recursos podrán encontrar todos estos. Podemos llevarle esto directamente a Figma. En lugar de logotipo, lo estará reemplazando con el logotipo real. Solo asegúrate de minimizarlo. Eso se ve bien por ahora. También tener una idea de las paletas de colores que vamos a estar pegando a cuatro diseños, sería una buena idea tenerlo en algún lugar arriba. Si vas a la carpeta del proyecto para que también puedas encontrar la paleta de colores. Así que puedes simplemente sacarlo de ahí y simplemente minimizarlo. Tamaño. ¿Qué se considera pequeño? Vamos a tener algún tipo de color de fondo para la primera página. Entonces solo agrega un rectángulo y haz clic derecho y envíalo a la parte posterior. Después. Seleccionemos la paleta de colores azules. Sin embargo, como puedes ver, nuestro logo desaparece. Entonces estás encendido, asegúrate de estar en saturación de tono, brillo y cambia esto a algo así como 50%. Que también podamos ver nuestro logo y que se vea mucho mejor. También sería una buena idea delinear el estilo topográfico. Te quedarás apegado a este diseño wireframes. Entonces esto es crear un rectángulo y poner un texto. Hay dos fuentes que elegí para este wireframe son Poppins y la cabina. Quieres puedes elegir lo que quieras para asegurarte. Y no más. Déjame agrandar esto. Voy a cambiarlo de Enter a Poppins. Segundo tipo de letra. Voy a cambiar eso a cabina. Y solo tener algo de espacio en el medio. Para el encabezado. En su mayoría tendré una fuente Poppins. También para nuestros elementos navbar. Asegúrate de enseñar a separar el estilo que se establece simplemente haciendo clic en el estilo de desenlace justo al lado del texto. Para todos ellos. Una vez que estés separado y simplemente cambia la fuente a opens. Ahora vamos a cambiar la fuente en el primario balanceado, hemos entrado a partir de dos carbono. Lo mismo para el de aquí. Y también el texto, el texto del párrafo. Cambiemos los botones primarios de color. Al separar el color de aquí y seleccionar naranja sobre, prefiero tener más naranja que sea fácilmente visible. Lo mismo para este botón primario arriba arriba. Tocas las instancias. Y lo único que queda, bien, ahora es la imagen para la página principal. Para la imagen visitamos un sitio web llamado andro. Antes de entrar en 100, veamos qué tienen las otras start-ups del moodboard. Todos ellos tienen algún tipo de ilustración. Por lo que este sitio web parece ser un buen ajuste. A veces manteniendo las cosas simples, la mejor manera de hacerlo. Solo tecleemos tecnología. Y el primero se ve bien. Más siéntete libre de seleccionar a cualquier persona que quieras seleccionar. Asegúrate de descargarla. Debe mentir y eliminarlo. Después solo tira esto hacia atrás e intenta mover su cuadrícula de diseño. Como pueden ver, esto está fastidiando porque nuestros antecedentes cumplen y no se ve tan bien. Entonces lo que podemos hacer es visitar un sitio web llamado Remove Background o simplemente Remove BG. Simplemente sube esa imagen. A partir de aquí. Sólo podemos descargarla y volver a nuestra Figma. Mueve esto y vuelve a poner esto. Se ve mucho mejor de lo que estábamos viendo anteriormente. Sólo para que tengas una idea. Así es como se veía anteriormente. Se ve mucho mejor. 25. Acerca de nosotros Diseño: Para la sección Acerca de nosotros, todo es más o menos similar a lo que hicimos para nuestra página de inicio. No obstante, que estamos en el buen camino. Veamos qué empieza a hacer la otra startup desde nuestro mood board. Y como puedes ver, muchas de estas startups tienen. Entonces Scholar en la página principal y luego las siguientes páginas son solo colores blancos lisos. Entonces nos quedaremos con ese fondo blanco. O veamos si podemos encontrar mejores antecedentes. Selecciona un rectángulo, asegúrate de enviarlo al dorso. Y a partir de aquí intentemos reducir esto al 50%. Sí. Se ve mejor que solo tener un fondo blanco liso, en mi opinión, sobre listas experimentadores 30% para ver la diferencia y ciertamente mira un poco abajo. Entonces esto fue 40 o 50, también debería estar bien. Pero en cuarto lugar, se ve bien hasta el momento. Para el título principal, como hicimos en la sección anterior que pasamos es la fuente Poppins. Haz eso, asegúrate de desapegarte de la instancia, tipo y Poppins o el sobre nosotros y el párrafo. Vamos con la fuente de carbono. Separar la instancia donde están más IID, pop y todo lo que nos queda ahora es tener una imagen. Si vamos a nuestro mood board, podemos ver mucha imagen, muchas ilustraciones siendo exhibidas. Entonces volvamos con Andrew. Aquí queremos decir que somos una startup educativa. Entonces tecleo en educación. 12 tienen mucha razón, me queda bien. Así que asegúrate de descargar y eliminar este marcador de posición de imagen. Pero nos olvidamos de hacer algo, que es quitar el fondo. Así que asegúrate de subirlo y descargarlo gratis en segundo plano. Y eso se ve mucho mejor. Agrandar el tamaño. Sí, eso es todo para la sección Acerca de Nosotros. 26. Diseño de planes de precios: Para nuestra sección de precios de la landing page, dejaremos el fondo tal como está, este fondo blanco. Lo principal será justamente ese punto. Empezaremos con el encabezado. Se puede ver que hay un punto adjunto a ella. Simplemente se puede desprender. Siempre son pop-in. Los planes de precios parecen desprenderse del carbono. Para este encabezamientos. Para nuestros diferentes modelos de precios podemos ir se abre los valores de precios. Vamos a su cabaña. Y también por las diferentes características que ofrecemos. Y también para los botones. Ocurre. Entonces sí, eso es todo para el plan de precios. 27. Contáctenos Diseño: Entonces ahora estamos abajo al Contáctenos, el blog y el pie de página. Y desde el mood board para el que llegamos a nuestra inspiración, podemos ver que hay algún tipo de trasfondo. Cambiemos el fondo de gris a otra cosa. Esta vez, tal vez vayamos por un azul más oscuro. Y vamos a disminuir el porcentaje 100-80. Este texto apenas tiene visible, así que desprenda la instancia gris y coloque que era negra. En lugar de regular. Ir al estilo light o al punto Contact Us donde vamos a desatarlo de la instancia e ir con la fuente Poppins. Nos quedaremos con cabañas para el subpárrafo y Poppins para el nombre, correo electrónico y el resto. Y en vez del fondo negro, vamos a separarlo y reemplazarlo por el naranja oscuro que teníamos antes. El Contáctenos se ve muy cerca del borde para que podamos moverlo un poco hacia abajo. Y eso se ve mucho mejor. Aunque la sección Contáctenos se ve mejor de lo que teníamos inicialmente, esto se puede mejorar aún más cambiando el relleno de fondo. Así que solo presiona en el relleno y debajo en lugar de sólido, presiona en lineal. Y en mi opinión, esto se ve mucho mejor de lo que teníamos inicialmente. Se ve mucho más limpio y se integra bien dentro de la siguiente página. 28. diseño de blog: Para la sección del blog, agregue un color de fondo. Primero comenzaremos ajustando la fuente. Iré con cabina, seguido de bombeo. O el encabezado. Cabañas para el inciso. Abre para esto. Títulos. Pasa por el subpárrafo. Apertura por el nombre del autor, cabina para la fecha. Si te das cuenta. El nombre Matthew está mucho más cerca que los juegos de nombres, demuestra que hay cierta inconsistencia. Para que podamos ajustar eso resaltando todo y jalando hacia la derecha. O incluso podemos agregar cuadrículas de diseño y hacer una estimación rápida del espaciado. Eso se ve mejor. En cuanto a la imagen. Aunque podemos visitar sitios web como píxeles que te proporcionan imagen de stock gratis. Estamos hablando de consejos para estudiantes. Y por suerte, hay como una imagen de stock que dice pasos. Utilízalo a nuestro favor. No necesariamente tiene que ser lo mismo que las palabras, pero cuanto más cerca mejor. Intentemos colocar la imagen. No funcionó. Así que solo encienda las cuadrículas de diseño. Entonces podemos ver que se extiende desde esta cuadrícula de diseño hasta aquí. Y podemos tener ese activo rápido marco de referencia en nuestras mentes. Y coloca la imagen que aunque parezca muy grande, solo hazla más pequeña. Lo que podemos hacer es simplemente ver el tamaño de la imagen al lado de su 367 por 28. Entonces podemos hacerlo presionando el 367 y ajustando la altura dos a 80. Y alineando esa la otra imagen. Donde solo puedes hacer lo mismo por ambos. Por ahora, sólo voy a descargar esta imagen. Se ve muy bien. Y podemos minimizar la imagen AT solo veamos lo que era es 367 por 28. Entonces haremos 367 por 80. Separar esto porque está causando algunos problemas. Sí. Asegurémonos de que esté alineado. Para la informática va a ser bastante fácil. Sólo tienes que escribir el código. La primera imagen se ve bien. Y minimizar el despegue esto para que no cause ningún problema y lo minimice. Alinea a la policía. Entonces solo asegúrate de que esté alineado. Y eso se ve bien. Desactiva las rejillas de diseño. Y falta algo. El espaciado ni siquiera es así que vamos a darle la vuelta. Esto se suponía que debía hacerlo. Como puede ver, ambas de esta imagen son 6367 por 280. Sin embargo, el primero no lo es. Así que asegúrate de separar esto porque esto es lo que está causando el problema, las proporciones restringidas. Una vez que haya quitado eso, rele que el espaciado es igual. Y lo único que le queda a su pintura, alguna imagen de perfil. Y podemos hacer eso con sólo conseguir algunos disparos a la cabeza. Y además es la misma o la coordenada de radio para el radio coronario. Entonces, si solo vamos con 38.4, sería lo exacto. Simplemente puedes ponerlo encima de él. Podemos hacer lo mismo para la siguiente imagen. Quita esto y solo coloca eso. Y haz lo mismo para el siguiente. Quite la cuadrícula de diseño. Sí, la sección del blog, se ve genial. 29. Diseño del pie de página: Donde está la sección de pie de página, primero comenzaremos por obtener nuestro logotipo desde arriba. Presiona la tecla Alt y arrastra hacia abajo. Mueve el logo. A continuación, estaremos ajustando la fuente. Los encabezados. Abierto. El email Can Company todo lo demás para tenerlo. Por último, nos quedamos con el fondo y veamos qué color coincidiría perfectamente. Así que desprenda el relleno. Vamos con azul oscuro. Como puedes ver, no podrás ver nuestro logo. Volvemos a nuestro mood board. Por lo general, los pies de página tienen un color sólido. Vamos a intentar ir porque el color naranja, déjame intentar jugar con los porcentajes para ver mejorar. Al 60%. Se ve mucho mejor de lo que miré al 100%