Cómo diseñar un sitio web personal en Figma

1. ¡Hola!: Hola, Mi nombre es Winnie, diseñadora gráfica y diseñadora web con sede en Nigeria. Para esta clase de Skillshare, te voy a enseñar a diseñar un sitio web personal en Figma. Este vidrio es muy importante para las personas que quieren entrar en el diseño de trabajo, o si solo quieres crear tu propia página web personal. Miró el momento en que la gente encuentra difícil diseñarlo sitios web personales o comunicarse. ¿ Qué haces profesionalmente? En esta clase, te voy a guiar a través de todo lo que vas a necesitar para crear el proyecto de clase, este increíble, hermoso sitio web. Vamos a aprender todos los consejos y trucos y mejores prácticas que se utilizan a la hora crear y diseñar sitios web en Figma o herramientas que necesitas para empezar luego en Figma, lo vas a aprender en esta clase. Así que no te preocupes si nunca has diseñado antes. Y si no sabes nada sobre desarrollo web, te voy a guiar por los conceptos básicos de Zane, y luego nos vamos a meter en el diseño de proyectos para esta clase. Espero que te pases un momento maravilloso diseñando y creando y aprendiendo una nueva habilidad. Y una especie de lleva a verte en clase. 2. El proyecto de clase: Hola a todos, Bienvenidos a la lección de hoy. En esta lección, te voy a guiar por el proyecto de clase para este curso. Por el momento cosas, este es el terroir proyecto va a estar armando. Estos son los siguientes componentes en los que trabajarás a lo largo de esta clase. Entonces voy a explicar un poco sobre todos los componentes para que puedas tener un buen agarre. Entonces aquí mismo, tenemos la sección de héroes, que contiene la barra de navegación, una intro, que dice como tus clientes o que hacer profesionalmente. Y así tu barra de navegación contiene tus enlaces de navegación, enlaces útiles, y también tu logo. No tengo logo para esta clase, así que mi nombre saldría bien. Si no tienes logo, tu nombre funciona perfecto. Entonces ahora voy a explicar la intro. Desea que la intro de su sitio web contenga la sección Euro de su sitio web para contener suficiente información sobre lo que hace. Por supuesto, aquí hay un llamado a la acción. Pero quieres que tu sección de héroes contenga información útil para que tan pronto como alguien entre a tu sitio web, sepan exactamente lo que haces o lo que ofreces. También puedes agregar alguna información adicional a continuación. Si hay algo más que quieras explicar a los visitantes de tu sitio web, también puedes agregar. Y luego también su sección de servicio. Esto va a contener todos los servicios que ofrezcas a tus clientes o los servicios que ofreces profesionalmente. lo que para este ejemplo, tenemos consulta, asesoría, y coaching. Y entonces también tengo una sección testimonial. Es opcional. Se puede incluir eso. O si realmente no lo necesitas, no tienes que incluirlo. Si tienes eventos que deseas, tu sitio web es para conocer. A lo mejor haces eventos hablantes o quieres que lo sepan. Entonces también puedes incluir eso en tu página web también. Y entonces tenemos un formulario de contacto aquí. Tus clientes pueden contactarte directamente a través de tu correo electrónico escribiendo su nombre, su correo electrónico, y tu mensaje. Puedes tener un sencillo formulario de contacto como este. También puedes agregar enlaces útiles a como tu email directamente. De todos modos que quieres que tu cliente pueda recuperar. Puedes hacerlo si no quieres incluir el teléfono de contacto. Y luego abajo tienes tu pie de página. Esta es una foto muy sencilla. Contiene los mismos enlaces que tienes o tu barra de navegación contiene tu logotipo, o en este caso, tu nombre, y algunos otros enlaces de redes sociales. Está bien, Eso es, lo es. Es una página de aterrizaje muy sencilla. Por supuesto que animo a mis alumnos a ser muy creativos. Si tienes algo más que quieras incluir. Si quieres ser un poco más espontáneo, también puedes hacerlo. Simplemente juega con ideas e incluirlas o tu sitio web. Quiero ver tu creatividad a través del sitio web que construyes. Y te veré en la siguiente lección. 3. Diseño de la barra de navegación: Hola a todos, Bienvenidos a la lección de hoy. Entonces vamos a aprender a construir en la barra de navegación. Por lo que aquí arriba, si haces clic en este icono, selecciona tu marco. Por lo que cuando haces clic en marco, puedes seleccionar entre diferentes opciones de fotograma. Entonces voy a seleccionar me burla porque ese es el marco que quiero usar para esta lección. Entonces lo voy a arrastrar hacia abajo porque necesitamos suficiente espacio para trabajar. Y luego voy a seleccionar la opción de rectángulo porque necesitamos un rectángulo para nuestra barra de navegación. Y voy a estirar eso hasta que llegue al final. Asegúrate de hacer uso de las guías de barra de reglas que te ayudarán a posicionar perfectamente los elementos en tu marco. Por lo que por defecto, tienes un color para tus naves. Para que puedas hacer click aquí para cambiar el color predeterminado. Puedes o bien moverte y elegir un color o puedes insertar un código de color. Por lo que voy a usar una línea para separar mi barra de navegación del resto del marco. Y esto se debe a que la barra de navegación tiene un color muy, muy similar al resto del marco. Por lo que voy a añadir mi texto haciendo clic en el icono Texto. Por aquí, puedes manipular el texto usando esta porción de Figma. Se puede cambiar el tamaño, se puede cambiar el color, se puede cambiar la fuente. Incluso se puede cambiar el grosor del texto. Yo sólo voy a añadir un poco de espaciado entre textos. Entonces estos son solo el menú de navegación que estoy creando. Sólo voy a añadir un poco de relleno porque necesito dy, vamos a tener un poco de espacio. Voy a aumentar el grosor para que sea fácilmente visible. Esto se ve bien. Por lo que sólo voy a seguir creando DIY resto del menú de navegación. Por lo que un consejo rápido para crear fácilmente es mantener presionada la tecla Alt, arrastrar, hacer clic y arrastrar su elemento. Puedes hacer esto para cualquier elemento, tu rectángulo, tu texto. Y esto sólo va a crear un duplicado o lo que ya tienes. Entonces solo voy a hacer esto por el resto del menú de navegación para ahorrar tiempo. Y voila, ya terminaste. Entonces voy a editar rápidamente el texto para que se vean similares al de la izquierda. Voy a agregar mi servicio. Voy a hacerlo rápidamente. Este. FAQ, recursos, podcast y contacto. Sólo voy a ajustarlo todo. Se ve bien. Y luego lo voy a copiar de nuevo. Y ahora voy a hacer mi logo. Entonces si tienes un logotipo, puedes insertar una imagen aquí por no tener un logo aquí abajo. Puedes optar por centrar tu texto. Se puede levantar alineación o alineación derecha. Yo solo quiero que mi texto esté centrado. Creo que se ve bien centrado porque está en el medio. Por lo que tiene aspecto centrado, es perfecto de esa manera. Voy a cambiar la fuente. Y solo puedes elegir ser creativo con él. Juega con diferentes opciones de fuente. Puedes consultar los emparejamientos de fuentes en font joy.com. Está bien, eso es todo. Y te veré en la siguiente lección. 4. Cómo inspirar para el diseño: Hola alumnos, Bienvenidos a la lección de hoy. Entonces en la lección de hoy, les voy a mostrar dónde consigo la inspiración para el diseño de mi página web. Como diseñador, suelo navegar por Internet para encontrar inspiración y tendencias actuales en el diseño de sitios web. Una de mis fuentes de acceso para esto es pinterest.com. Si no vives bajo una roca, probablemente sepas que Pinterest es un sitio web muy popular para fuente de diferentes tipos de imágenes. Y es un recurso muy útil para los diseñadores. Por lo que voy a buscar inspiración para el diseño de sitios web. Sí. Y vamos a ver. Sí, tenemos algunas opciones increíbles aquí. Así que solo siéntete libre de moverte por Pinterest, explorar, y solo obtener ideas de sitios web de otras personas para que puedas inspirarte en la tuya Butte. Veo algo bueno aquí. A ver. Muy bien, realmente me encanta este sitio web. Como puedes ver, la barra de navegación es muy sencilla. Enseguida del murciélago. Se puede ver lo que hace. Ella es fotógrafa. Se puede ver que se trata de un sitio web muy sencillo. Y luego debajo de la sección de héroes, puedes ver de inmediato cómo sección de servicio y qué hace. Se puede ver galería sencilla y luego también una sección de pie de página muy linda. Por eso animo a mis alumnos a ser muy creativos. Navega por Internet y solo encuentra ideas para que puedas tener alguna inspiración para la belleza, no tu propia página web. Está bien, eso es todo. Los veré en la siguiente lección. 5. Cómo obtener imágenes para tu diseño: Hola a todos, Bienvenidos a la lección de hoy. Les voy a mostrar un recurso muy útil para estos senos paranasales. Y este recurso es uno al que acudo casi todos los días porque es donde obtengo imágenes de alta calidad para los diseños de mi página web. Por lo que para este sitio web, todas las imágenes que se utilizaron para ver este sitio web fue Goodson de unsplash.com. Se trata de un sitio web hermoso y sorprendente para obtener imágenes de alta calidad para sitio web diciendo diseño gráfico, o realmente cualquier trabajo que quieras hacer, encontrarás imágenes útiles. Hay otros sitios web a los que acudo para imágenes de alta calidad. Pero este sitio web en particular es uno que recomiendo encarecidamente si apenas estás empezando. Por lo que este es el nombre del sitio web, unsplash.com. Tiene una interfaz muy sencilla. Se pueden ver opciones en la barra de navegación. No se puede elegir fondos de pantalla, nitro, personas, arquitectura, eventos actuales, trabajo de negocios, etcétera y así sucesivamente. Lávalo, entra a la página de aterrizaje de la página web. Tienes una pequeña barra de búsqueda aquí mismo. Puedes elegir simplemente desplazarte hacia abajo, navegar por las imágenes, o puedes buscar en la barra de búsqueda. La mayoría de las veces, me gusta navegar a través de las imágenes que me han dado porque simplemente están cuidadosamente seleccionadas y se ven realmente bonitas. Y a veces ni siquiera sé lo que busco. Yo sólo quiero ser inspirada. Por lo que esta imagen de aquí se ve muy bonita. Se ve muy profesional. Entonces creo que vamos a usar este. Entonces cuando creas tus propios proyectos, más posible es que tengas una imagen muy diferente a la mía. Y eso está bien. Te animo a ser muy creativos. Así que navega por tu propia imagen. Si tienes tu propia imagen o quieres incluirla en tu diseño, puedes hacerlo cuando hayas descargado el día de la imagen, puedes hacer click y arrastrar a tu espacio de trabajo. Y eso es todo. Estás listo para usar la imagen en tu diseño. 6. Añadir imagen a la sección de héroe: Hola a todos, Bienvenidos a otra cosa mala. Entonces en la lección de hoy, vamos a empezar a construir la sección de héroes. Entonces cuando traigas tu imagen a tu espacio de trabajo, Va a ser tan enorme. Entonces lo que vas a hacer es cambiar el tamaño de la imagen para que encaje perfectamente en tu marco. Entonces todo lo que tienes que hacer es tirar de los bordes n. Y entonces no lo necesitamos para cubrir todo el marco, solo se necesita para cubrir la mitad de la parte superior. Entonces lo vamos a ajustar. Pero sólo para asegurarme de que no mueva las cosas por accidente, voy a mirar la barra de navegación. Por lo que peinarse para decidir. Y puedes mirar la barra de navegación o tienes que hacer es seleccionar todos los componentes que componen la barra de navegación y luego Controlar G para agrupar todo. Y luego puedes mirarlo usando el seno. Voy a renombrarlo barra nav para que me sea fácil recordar. agruparé es porque si no le cambias el nombre, va a dar un nombre por defecto, grupo 1, grupo 2, grupo 3 con puede ser muy confuso, sobre todo si tienes muchos grupos en tu espacio de trabajo. Ya no se va a mover. No se puede editar, it, se puede hacer cualquiera de estas cosas. Por lo que ahora voy a ajustar la imagen para que se ajuste al marco. Como se puede ver, partes de la imagen, los desbordamientos no se está mostrando. Y esto se debe a que la imagen está dentro de tu marco. Entonces, si tu imagen se desborda, significa que está fuera de tu marco. Así que asegúrate de comprobar si tus imágenes dentro de tu marco. Por lo que si haces clic en la imagen en la barra lateral donde puedes editar, vas a ver opciones para editar la imagen para que puedas cambiar la exposición. Se puede ajustar el contraste, saturación, la temperatura, el tinte, el resaltado y la sombra. Ahora voy a hacer cualquiera de la estufa pour. Siéntete libre de jugar con ellos en caso de que quieras ajustar la imagen. A lo mejor no me gusta cómo la ligereza por como esta imagen. Es camareros perfectos. Entonces no lo voy a editar. Por lo que sólo voy a seguir ajustando la imagen a mi gusto. Algunos sitios web tienen una imagen llenando toda la zona superior, pero creo que me gusta este solo llenando la mitad del área. Así que asegúrate de seguir las guías que te han proporcionado para que puedas ajustar correctamente la imagen. 7. Añadir textos a la sección de héroe: Hola y bienvenidos a otra lección. Estamos en la segunda parte de la sección de héroes solo vamos a seguir creando la sección de héroes porque aún no hemos terminado. Entonces en la última lección, trajimos la imagen ahora descargamos a nuestro espacio de trabajo. Aprendimos a agrupar la barra de navegación y luego ajustamos la imagen a nuestra escritura. Ahora voy a añadir texto o tienes que hacer es dar click en el icono de texto. Y luego vamos a añadir texto también, la sección de héroes. Ahora, voy a fingir que el dueño de este sitio web es Josh. Puedes ajustar el texto para que sea mucho más grande para que sea fácil ver alineando correctamente utilizando las guías que te han proporcionado. Por supuesto, se puede cambiar su nombre. Ahí puedes poner tu propio nombre. Incluso puedes poner algo completamente diferente si no quieres que el texto de tu sección de héroes sea alto, no tienes que hacer eso. Simplemente puedes ir directo a hablar de lo que ofreces o lo que sea. Simplemente ten algo en tu sección de héroes que atrae al público o a quien esté visitando tu página web. Entonces voy a poner hola, soy Josh y la fotografía. Pero creo que esto está bien, Esto funciona bien. Este es un sitio web de pretensión. Entonces soy ogives puesto tanto en ello. Te animo a hacerlo. Especialmente si esto es algo que vas a desarrollar, que esta clase, en realidad deberías poner algo de pensamiento en ello. Entonces solo voy a ahorrar tiempo copiando texto. Voy a desbloquear el diseño por aquí. Va a copiar todo el texto. Está bien, ya terminé. Voy a desbloquear, volver a mi diseño actual y pegar. Sí. Entonces cuando pegues el texto, va a estar tan estirado. Por lo que sólo dibuja todo en un ajustado. Sigue ajustando es sobre ti tienes el tamaño perfecto. Y como puedes ver, todo está perfectamente alineado. Así es como quieres que se vea el tuyo. Ahora, vamos a crear el botón, o hay que hacer es dibujar un rectángulo. Se puede ajustar la altura del rectángulo utilizando el ancho y la altura. También puedes cambiar el color del rectángulo. Yo sólo voy a recoger un hielo frío similar a la imagen que ya tengo aquí. Algo así como un color naranja o un color marrón claro debe hacer. Y vamos a añadir algunos textos. Esto se ve bien. Creo que voy a cambiar el color. Creo que me gusta transparente. Voy a ajustar el trazo a tres y un texto a negro. Creo que esto se ve muy bien. Está bien, eso es todo para esta lección. Espero que ustedes lo hayan disfrutado. Voy a ver en la siguiente lección, asegúrate de que envíes tus capturas de pantalla de imagen de tu sección de héroes. Te veré en la siguiente lección. 8. Crea la sección de About en la sección: Hola estudiantes o preocupación y Allison. Por lo que hemos creado la sección de héroes para este sitio web. Ya empieza a verse muy, muy bien. Entonces vamos a pasar a la siguiente sección. Y esta sección puede ser como un pH sobre. Si hay algo extra que quieres que los visitantes de tu sitio web conozcan o que tus clientes sepan de ti. Puedes incluirlo aquí. Entonces sólo voy a hacer que sea una sección muy pequeña. Entonces solo voy a hacer de esta una sección muy pequeña. Esto es opcional por cierto, puedes optar por quitar esto o incluirlo si lo deseas, para continuarlo incluirlo. Entonces les voy a mostrar otro truco que tengo. Entonces como pueden ver, el color de fondo, el color del espacio de trabajo es muy similar al CO de mi marco. Por lo que tengo que hacer es dar click hacia fuera. Y luego por el lado donde veas fondo, haz clic en eso, y puedes elegir cambiarlo a un color diferente. Puedes hacer que el color sea más brillante u oscuro si quieres. A lo mejor algo naranja o amarillo. Creo que esto funciona bien. Está bien. Está bien. Por lo que voy a cambiar el color predeterminado de mi sección Acerca. Yo quiero que sea muy ligero. No quiero nada demasiado oscuro. Creo que los colores son correctos. Es como casi invisible mientras quiero algo realmente ligero, no quiero algo demasiado. Por lo que voy a añadir algo de texto en este momento. Entonces estoy trabajando desde la parte superior de mi cabeza. Apuntas algo antes de empezar a crear. Creo que eso es mucho mejor para, para el propósito de esta lección, sólo voy a caminar por la parte superior de mi cabeza. Simplemente freestyle. Agrega algo. Perfecto. Este no es mi mejor trabajo. Creo que podemos ir con esto. Entonces acabo de cambiar la fuente. Creo que esta fuente se ve perfecta y también del tamaño. El tamaño también es crear. Así que simplemente jugar con las cosas, ajustar las cosas. A ver qué se ve bien. Como ya dije antes, puedes obtener inspiración de Pinterest. Para que puedas elegir recrear el diseño de otra persona y simplemente cambiar algunas cosas. A lo mejor como las fotos y el texto. Pero al igual que ICA tienen un diseño similar. Eso está bien para el propósito de Lenin, eso está bien. Y por eso sólo lo estoy haciendo aquí. Sólo estoy tratando de ver qué se ve bien. Documentar que. Por lo que voy a copiar el botón a la sección Acerca. Voy a mantener el mismo estilo de los bots y porque quiero que las cosas se vean cohesionadas, así que el mismo estilo del botón que ahora tenemos en la sección de héroes debería funcionar perfectamente en la sección sobre. Está bien, eso es todo. Ya terminamos. Espero que ustedes hayan disfrutado de eso. Te veré en la siguiente lección. 9. Crea servicio en tu sitio web: Hola chicos. Bienvenidos a la lección. Lo hemos hecho a la sección de servicio de esta hermosa página web. Si llegaste tan lejos, quiero decir un enorme enhorabuena. Estamos haciendo así que has llegado tan lejos. Muy bien, así que vamos a solo crear la sección sobre. Como ya puedes ver. Simplemente queremos crear algunos servicios que este desarrollador probablemente ofrecería a sus clientes. Entonces creo de antemano ya deberías tener algo en mente o algo escrito que te gustaría ofrecer a tus clientes. Entonces digamos que estás en entrenador de vida. Probablemente ofrezcas como consejería. Ofreces coaching, anota lo que hayas encontrado un trozo de papel para que pases menos tiempo cuando estás diseñando. Creo que eso es mucho mejor. Si tienes algo ya escrito. Si ya sabes lo que ofreces para diseñar procesos simplemente va a ser Breeze porque todo lo que tienes que hacer es simplemente poner esas cosas que ya escribiste en tu marco. Simplemente toma ajustar el tamaño y eso es todo. Si no tienes nada escrito y crees que te vas a ir más despacio cuando estás diseñando. Entonces voy a ajustar un poco el texto, el tamaño. Voy a tratar de centrarlo perfectamente. Y luego justo como antes voy a copiar el texto. Puede agregar el texto si lo desea. Creo que en realidad deberías hacerlo de texto porque tenemos diferentes servicios, tenemos diferentes descripciones para cada servicio que vas a ofrecer, cada uno de los servicios que vas a ofrecer. Por lo que para centrar perfectamente la descripción con el subencabezado, se pueden seleccionar ambos. Y luego haga clic en ese ícono. Y este icono te va a ayudar a centrar perfectamente la descripción del subencabezamiento. Se puede hacer esto por todos ellos o se le envió uno. Simplemente puedes copiarlo y peligroso, editar texto y cambiar las palabras y hacer otra forma de hacerlo y eléctrico para ti. Entonces sólo voy a seguir editando el texto. Simplemente va a poner algo que este desarrollador pudiera Ofwat a su cliente. Tengo mucha curiosidad por ver lo que haces u ofreces a tus clientes, curiosos por saber. Por lo tanto, asegúrate de presentar tus diseños a la discusión de la clase. Presentar una imagen de la ciencia, la discusión de clase. Puedes tomar una captura de pantalla de tu espacio de trabajo que funcione bien. Seguiremos diseñando en la siguiente lección. 10. Crea botones para los servicios: Hola chicos. Bienvenido a la Parte 2 de la sección de servicios. Entonces en la última lección, creamos los servicios que este desarrollador web de nosotros a sus clientes. Y estoy bastante seguro de que ustedes se divertían mucho creando sus propios servicios. Entonces vamos a continuar. Pero antes de que hagamos eso, quiero simplemente agrupar rápidamente la sección Acerca. Esta es una buena práctica. Por lo que asha no quiere sección trató de agrupar todo. Sawyer para hacer es seleccionar todas las macetas o los componentes de esa sección que desea agrupar. Y luego Control G para agruparlo todo. Y que no se olvide de cambiarle el nombre. Acabo de renombrar esto Acerca de la sección. Eso es genial. Eso se ve bien. Por lo que voy a seguir diseñando la sección de servicio. Siéntete libre de ajustar cualquier cosa que quieras ajustar. Yo sólo voy a agrupar la sección de héroes también y sólo hacer algunos ajustes. Está bien, eso está bien. Está bien. Está bien. Eso es bueno. Entonces voy a copiar el botón. Todo lo que hice fue seleccionar la vista, mis proyectos. Y también seleccioné el botón para acariciarse que hace el botón. Por lo que una vez que los selecciones, puedes mantener presionada la tecla Alt y arrastrarla hacia abajo. Se va a hacer otra copia. Entonces eso es lo que hice. Y ahora tenemos otra copia del botón. Como dije, quiero mantener todo cohesivo por lo que quiero las mismas embarcaciones en su totalidad. Si no todos, pero la mayoría de los quiero que la mayoría de los botones tengan el mismo estilo. Entonces los voy a copiar para crear botones para cada uno de los servicios. Y luego sólo voy a editar texto. Y luego voy a tratar de centrar perfectamente el texto. Está bien, eso está hecho. Contamos con nuestra sección de servicio. Eso fue muy fácil de hacer. Espero que ustedes lo hayan disfrutado. Los veo en la siguiente lección. 11. Diseña el formulario de contacto: Hola chicos. Bienvenidos a la lección. Estamos en la sección de contacto de esta página web. Lo hemos hecho hasta ahora. El sitio web se ve tan hermoso. Me encanta. Por lo que sólo voy a saltar a la sección de contactos de esta página web. Por lo que la mayoría de los sitios web, como has visto, tienen un formulario de contacto y suele verse así. Entonces solo voy a crear un formulario de contacto similar como lo que tenemos en el diseño de página web a la izquierda. Se desea crear otra sección para ello. Creo que necesito más espacio. Entonces voy a hacer clic en el marco y arrastrarlo hacia abajo. Eso sólo va a ajustar la altura del marco. Y también la sección. Yo también voy a ajustar eso. No me gusta el color, así que lo voy a ajustar. Acabo de copiar sobre la firma de color, la sección sobre para que todo se vea cohesionado. Gana. Agrega algunos textos. Ahora. Entonces trabajemos para conseguir lo que es esto. Está bien. Entonces lo voy a centrar. Voy a ajustar el tamaño. También voy a ajustar la fuente. Creo que ambos estamos a una dosis. Bueno, también porque estamos tratando de mantener las cosas cohesivas. Simplemente voy a usar la misma fuente que hice en la sección sobre. Puedes bloquear a tu rectángulo solo para asegurarte de que no se mueva tanto. Entonces voy a crear los campos de texto, va a cambiar de color. Ahora, los colores que usas, muy a menudo los encontrarías en tu paladar. Entonces si te cuesta recordar el código de color que usé anteriormente, borrador preocupa tanto que se guarde en tu paladar y en tu espacio de trabajo para que solo puedas reutilizarlos. Entonces voy a copiar y ajustar la cosa del tamaño. Esto es genial. En algunos textos. Copia eso, cambia ese mensaje y solo ajusta las cosas. Me deja aquí. Entonces creo que esto está bien. No me gusta tanto la redondez del botón. Entonces voy a reducir la redondez porque no quiero ser demasiado redonda. Entonces no quiero que el botón se vea exactamente como ven los otros botones porque es muy similar al campo de texto. Entonces sólo voy a darle al botón un color de relleno. Creo que este color se ve perfecto. Y luego le voy a añadir texto. Está bien, creo que esto se ve muy bien, muy sencillo. Espero que hayan disfrutado de este video. Los veré la próxima lección. 12. Cómo obtener iconos para tu diseño: Hola y bienvenidos a otra lección. Estamos a punto de acabar con esta clase. Entonces todo lo que tenemos ahora es la sección de pie de página. En la sección de filtros, puedes encontrar algunos enlaces desde tu navegación por costo, asistes a tu sección de Fatah. También puedes tener un logotipo. No tengo ningún logo para que mi nombre funcione bien. Y también algunos enlaces de redes sociales. Utilizo los iconos en lugar de nombres. Te voy a mostrar un sitio web donde yo iconos para mi sección de pie de página. Y se llama Icon. Debe tomar nota de la ortografía. Monstruo icono no tiene E en el monstruo, por lo que espesor de la ortografía. Y solo puedes buscar el nombre del icono que deseas buscar. Por lo que hay diferentes estilos para los iconos. Simplemente elige la que más te guste. Creo que este me gusta. Se ve muy bonito. Sí, puedes conseguir el SVG, puedes obtener el formato ADA para el ícono. Puedes, usualmente voy por el PNG, pero puedes conseguir otros formatos si quieres. Tienes que estar de acuerdo o puedes descargarlo. Además, puedes ajustar los colores. Entonces si eliges PNG, tienes la flexibilidad para cambiar el color del icono. Entonces voy a cambiar el color del icono. Puedes poner ahí el código de color que quieras, o simplemente puedes moverte y escoger un color que se vea bien. Por lo que el icono de Facebook suele verse azul. Entonces voy a escoger el azul y estar de acuerdo, y lo voy a descargar. Entonces así es como descargo iconos para mis proyectos. Muy sencillo. Entonces una vez que se descarga o tienes que hacer es arrastrarlo a tu espacio de trabajo. Estoy listo para usarlo para tu proyecto. Muy fácil. Está bien, eso es todo. Los veré en la siguiente lección. 13. Añadir iconos a tu pie de página: Hola y bienvenidos a la t es menos que. En la última lección, te mostré dónde descargar iconos para tu sección de pie de página. Como pueden ver, ya he agrupado todas las secciones aunque. Hemos caminado sobre los contactos, el héroe, el servicio, y el alrededor. Por lo que no necesito tanto espacio para mi sección de pie de página, así que voy a ajustar mi marco. Ahora. Acabo de arrastrar y caer el icono. Voy a redimensionarlo. Se puede redimensionar usando el ancho o la altura. Puedes redimensionarlo usando el ratón simplemente arrastrando los bordes o sacándolos. Creo que esto se ve bien. Entonces esto se ve bien. Pero no lo voy a usar porque ya tengo iconos para mi diseño. Y los iconos que quiero usar, quiero mantenerlos un rezago, así que no voy a usar el azul colorido. Ya los habían traído aquí. Sólo voy a arrastrarlos a mi marco y usarlos. Entonces todos los iconos que voy a usar al mismo tamaño. Entonces solo voy a seleccionar todo y arrastrarlo. Asegúrate de arrastrarlo al marco. Porque si no lo arrastras a tu marco, una vez que lo pongas en tu espacio de trabajo, lo verás. Por lo que una vez que arrastras eso a tu marco, puedes empezar a crear otros componentes de tu sección de pie de página. Entonces voy a agregar el logo aquí, o no tengo logo, así que mi nombre funciona bien. O en este caso, Josh funciona bien. Entonces voy a ajustar esto. Voy a cambiar el tamaño porque quiero que sea más audaz. Ataques, también. Atrevido, tal vez sólo un poquito. Sí, eso está bien, Eso se ve bien. También voy a incluir los enlaces en mi barra de navegación. La mayoría de los sitios web lo hacen a través. Yo sólo voy a hacer eso también. ¿ Debo hacer uso de las guías que te han proporcionado para que puedas posicionar correctamente las cosas. Llegó a editar el texto ahora, recurso, podcast y contacto. Está bien, eso está bien. Ir a posicionar las cosas. Ahora los voy a posicionar bien. Entonces no creo que me guste el grosor de los eslabones. Entonces sólo voy a hacerlos menos polares porque están en nuestra sección de pie de página. Por lo que no quieres que sean muy perceptibles como estarían en tu barra de navegación. Entonces solo voy a hacer que sea fuente regular. Creo que eso no es tan K-maps, bien, debería ser bueno. Y luego voy a añadir este copyright. Y tu sitio web debería tenerlo también. Ir a ajustar el código porque no quieres que sea demasiado brillante. Quieres que esté ahí o no. Mostrar perceptible. Está bien, creo que esto se ve muy bien. Gran trabajo hasta ahora, gran trabajo en tu diseño. Ahora que tienes tu diseño final, solo quiero ver una enorme felicitación. Muchas gracias por llegar tan lejos a esta clase. Espero que lo hayas pasado increíble. Eso es todo. Muchas gracias y bien hecho. 14. Reflexiones finales: Hola alumnos. Enhorabuena, lo han hecho hasta el final de esta clase. Estoy tan orgullosa de ti si lo has hecho a este video, significa que tienes tu última página web y dices, guau, estoy tan orgullosa de ti. Has completado toda esta clase de Skillshare. Ahora tienes una nueva habilidad o no, estás construido que puedes usar profesionalmente o para expresar tu creatividad. Yo soy super, super orgulloso de ti. Ahora no olvides enviar el diseño final de tu página web a la galería de proyectos de clase. Y no olvides enviar la imagen de tu sección de héroe, sección de ajustes, tu sección de contactos, y tu sección de pie de página a la pregunta de clase. Ahora puedes llevar el diseño de tu página web. Utilizo Website BU, Hay como Squarespace o semanas para diseñar tus sitios web. O podrías dárselo a un desarrollador para que diseñe tu sitio web para que lo construyas y lo lleves a la vida de Saint. Espero que te hayas pasado un rato maravilloso creando y diseñando conmigo. Y siempre puedo asumir que futuras clases. Gracias.