Transcripciones
1. Te doy la bienvenida a la clase: El encabezado del sitio web es una de las primeras cosas que la gente ve
cuando aterriza en un sitio. Es donde encuentran tu logo,
tu navegación principal, y muchas veces el
llamado a la acción más importante. También es uno de esos elementos que todo diseñador necesita
crear en algún momento, y eso es exactamente lo que
vamos a hacer en esta clase corta. Bienvenidos, todos. Yo soy Adi. Y hoy, estamos
diseñando y creando prototipos un
encabezado de sitio web receptivo que se ve
muy bien y que también funciona maravillosamente
en todos los tamaños de pantalla. Cubriremos las mejores prácticas, trabajando con diferentes diseños
para múltiples puntos de interrupción y usando el diseño automático para que
todo se adapte muy bien También usaremos Figma make para crear un
prototipo interactivo del encabezado Y para nuestro llamado a la acción, estaré usando el botón
inteligente reutilizable de una de mis clases anteriores. Entonces, si quieres aprender
a hacer eso desde cero, hay un enlace para ti en
la descripción de la clase. No necesitas
habilidades avanzadas de Figma para esto, un archivo nuevo, unos 15 minutos de tu tiempo, y lo construiremos paso a paso Por supuesto,
también hay un proyecto de clase, para que puedas poner en práctica estas
ideas. Entonces abramos Figma
y empecemos.
2. Cómo entender los encabezados efectivos: Antes de comenzar a diseñar
nuestro propio encabezado, echemos
un vistazo rápido a algunos
ejemplos del mundo real y desglosemos los cuatro
principios clave que hacen que un encabezado sea hermoso
y efectivo. En primer lugar, marca clara. En un gran encabezado, el
logo es instantáneamente visible, generalmente en la esquina superior izquierda. Y eso no es solo tradición, es
lo que esperan los usuarios, y les ayuda a
reconocer instantáneamente la marca. A continuación, navegación sencilla. Siempre se debe mantener manejable el
número de enlaces. Agrupe los elementos relacionados y asegúrese de que el texto sea
claro y fácil de leer. Demasiados enlaces, y el
encabezado se siente abarrotado, muy pocos, y los visitantes luchan por
encontrar lo que necesitan El objetivo es un equilibrio
entre ambos. Entonces tenemos una
fuerte llamada acción, algo que
destaca visualmente, a menudo un botón en un color
contrastante. Este es el elemento que dirige a
las personas a dar el siguiente paso, ya sea registrarse, realizar una compra
o contactarte. Por último, diseño amigable con dispositivos móviles. Un encabezado debería funcionar sin problemas
en todos los tamaños de pantalla. En el móvil, eso a menudo significa
cambiar a un menú de hamburguesas y ajustar el espaciado para que el diseño se mantenga
limpio y funcional Si tienes en mente estos cuatro
principios, marca
tan clara, una navegación
simple, una fuerte acción fría y un diseño amigable para dispositivos móviles, estarás en
camino de crear encabezados que no solo se vean
geniales sino que también funcionen. Genial. Así que tomemos
estas ideas y comencemos a construir nuestro propio
encabezado responsive en Figma.
3. Diseña el encabezado del sitio web para escritorio: Este es el archivo de inicio
que puedes descargar haciendo clic en los enlaces
en la descripción de la clase, y contiene
algunas instrucciones sobre lo que necesitas para
hacer algunos activos del proyecto. Eso es básicamente una lista de
componentes que puedes usar. Estos son en su mayoría prestados de mi clase anterior sobre la
creación del componente SMR Y he hecho algunos
pequeños ajustes el componente de botón. Básicamente, cambié la variante
a secundaria, y también agregué
otras dos variantes que son básicamente
versiones más pequeñas de las dos primeras. Y luego tenemos un logo ficticio que podemos usar en nuestro diseño Además, incluí algunos diseños
predefinidos. Tenemos un diseño de escritorio que tiene
aproximadamente 1.400 píxeles de ancho, y luego dos móviles
que tienen 400 píxeles de ancho Y en la versión de escritorio, tenemos el contenido que
necesitamos incluir. Así que vamos a meternos directamente en ello. Voy a empezar
reemplazando el logo. Entonces voy a copiar
este componente. Voy a seleccionar el
marcador de posición aquí y presionar Control Shift
R para hacer el reemplazo O si estás en una Mac, puedes usar Command
Shift R. Y enseguida, voy a ir a
la sección de maquetación. Voy a verificar la relación de aspecto de
bloqueo, y voy a cambiar
la altura a 48 píxeles. A continuación, tenemos estos enlaces. Entonces porque estamos
diseñando un
encabezado muy simple, muy directo,
vamos a mantener nuestra
tipografía agradable y simple, muy legible, y
vamos a usar Por defecto, estos utilizan 16 píxeles
inter regulares. Vamos a cambiar un poco
las cosas. Voy a usar
medio porque quiero que estos enlaces
destaquen un poco más, y voy a reducir
el tamaño de fuente a 14 píxeles y usar
140% de altura de línea También con estos seleccionados, voy a presionar
Mayús A para agregarlos a su propio marco de diseño automático. Hagámoslo otra vez, Mayús A, y voy a
establecer 32 píxeles como la brecha entre los elementos,
así como así. Y voy a
asegurarme de que todo esté alineado al medio, así. Por último, seleccionemos el marcador de posición de
inicio de prueba gratuita. Tenemos que reemplazar
esto con un botón. Voy a estar usando la variante
primaria pequeña de este componente de botón. Entonces copia ese control Shift
R nuevamente para reemplazarlo. Y aquí mismo,
voy a cambiar la etiqueta del botón para
iniciar la prueba gratuita, y voy a usar una
flecha hacia la derecha como mi icono. Ahora, tomemos estos
tres elementos y presionemos Mayús A para
agregarlos a su propio marco de diseño
automático. Entonces en el inspector, voy a alinear todo
al medio, así, y me gustaría que este encabezado
abarcara todo el
ancho disponible de mi marco padre. No sólo eso, quería
poder adaptar su tamaño, cambiar su tamaño
dependiendo del tamaño de su padre. Entonces, cuando el padre se hace más pequeño, encabezado también se hace más pequeño. Podemos hacer eso con el diseño automático. Entonces voy a seleccionar
el marco de escritorio, y voy a agregarle
diseño automático así como esto. Y sólo voy a
restablecer estos valores predeterminados, el espaciado, el relleno. Voy a poner todo a cero. Entonces ahora, con mi
escritorio seleccionado, solo
voy a
aumentar su altura solo que podamos ver lo que está
pasando aquí. Y voy a
seleccionar mi encabezado. Y voy a asegurarme que el dimensionamiento aquí esté
configurado para llenar contenedor. Ahora, cambiemos un
par de cosas aquí. En primer lugar, me gustaría que mi navegación y mi botón
se agruparan. De hecho voy a
tomar el botón, cortarlo, así controlar o comandar X, y luego seleccionar uno
de los elementos dentro de la navegación
y pegarlo ahí. Eso básicamente va
a mover ese elemento dentro de mi marco de navegación que tiene diseño automático
aplicado a él. Y eso asegura que
tengo el mismo espaciado de 32 píxeles entre el menú
y la acción llamada. A continuación, voy a seleccionar el
espacio entre elementos aquí, y voy a
cambiar esto de un valor fijo a auto así. Y eso me va a permitir ahora
cambiar el tamaño del escritorio. Frame, y el encabezado cambiará de
tamaño junto con él. Hagamos algunos toques finales. Agreguemos algo de espacio
alrededor del encabezado. Entonces voy a agregar 64
pixeles padding horizontal, 20 pixels, padding vertical. Y hagamos esto un
poco más visible. Entonces en el área de relleno, voy a agregar un color de
relleno blanco. Y también voy a añadir un trazo. Entonces
déjame mostrarte eso. Trazo que va
a ser E cuatro, e6e7, y sólo voy a
aplicar esto al fondo Entonces eso creará una agradable separación entre
el fondo de nuestra página, que es de un
gris muy claro y el encabezado, que es simplemente blanco. Por último, selecciona el encabezado, y voy a sustituir el negro
puro que estoy usando para el texto y el
logotipo por 27292 A, que es un gris más oscuro Y ahí mismo está nuestro
diseño de cabecera terminado para el escritorio. Ahora bien, la razón por la que tenemos
que hacer que un encabezado sea receptivo es porque no todos navegan por Internet en una
pantalla de escritorio del mismo tamaño Entonces, si la gente navega en un dispositivo móvil que
tiene una pantalla más pequeña, eventualmente, esto
va a suceder. Nuestra pantalla se va
a hacer cada vez más pequeña y cada vez
más pequeña y los elementos comenzarán a superponerse
entre sí y los diseños
comenzarán a romperse. Es por eso que necesitamos
idear un diseño diferente
para las pantallas más pequeñas. Hagámoslo en
la siguiente lección.
4. Diseño del encabezado del sitio web para tabletas y móviles: Permítanme comenzar
mostrándole una de las formas más fáciles de crear un encabezado receptivo o navegación
receptiva
para el caso. Entonces estamos en el sitio web
cleanshot.com, y tienen un encabezado
muy simple, muy similar al
nuestro con un logo,
una navegación, y
luego una llamada acción Así que mira lo que sucede
cuando cambiamos el tamaño de esto. ¿Verdad? La navegación y la acción fría
desaparecen, y en su lugar, tenemos este botón de menú, que, si hacemos clic básicamente
nos mostrará el menú que
acababa de desaparecer. Entonces podemos hacer clic en esto para
ocultarlo. Podemos hacer click para mostrarlo. Y cuando vemos esto
en una pantalla más grande, obtenemos la experiencia completa. Entonces eso es lo que necesitamos
crear básicamente. Entonces ahora, volviendo a Figma, comencemos copiando nuestro elemento de
encabezado e yendo al marco cerrado móvil, que tiene 400 píxeles de ancho Y esto es una especie de alrededor del área de las pantallas móviles
en términos de ancho de pantalla. Hay, por supuesto, pantallas
que son más grandes que esta, algunas son incluso más pequeñas que esto, pero 400 píxeles es una buena cantidad. Entonces, si pegamos esto, notarás que
las cosas empiezan a superponerse. Obviamente, no queremos eso. Así que, en realidad, seleccionemos este marco que tiene la
navegación y la acción de culto, y simplemente lo eliminaremos. Ahora, volveré a mis botones. Voy a agarrar uno de estos pequeños botones
secundarios, copiar seleccionar el encabezado, pegar. Eso va a pegarlo
. Y yo sólo voy a cambiar el icono aquí por
un icono de menú de hamburguesas Y voy a seleccionar la
etiqueta y solo presionar eliminar. Además, voy a
seleccionar este botón, y voy a establecer
su ancho en 44 píxeles, exactamente igual que la altura, y voy a cambiar
la alineación a media. A continuación, selecciona el encabezado, y voy a
cambiar el relleno lateral u horizontal a 24
píxeles porque en el móvil, necesitamos conservar el
mayor espacio posible. Así que necesitamos hacer
las cosas un poco más compactas de lo que
haríamos en el escritorio. También voy a cambiar
el relleno vertical a 16 píxeles así como así. La idea está en el móvil, este elemento se
sustituye por este botón. Entonces, cuando tocamos este botón, necesitamos mostrar esa
navegación y llamada acción. Hagámoslo en el
siguiente fotograma aquí mismo. Copia esto, pegarlo en. Cuando se
toca el botón de aquí o se hace clic, queremos cambiar el icono del icono
del menú a un icono de cerrar
así como así Porque queremos
decirle a los usuarios que, bien, tocó ese botón,
acción exitosa, y además vamos
a cambiar su contenido que sepan que la próxima
vez que lo toquen, van a
cerrar ese menú Así que ahora vamos a crear el menú desplegable
real, ¿verdad? Entonces vamos a copiar esto. Vamos a pegarlo, y vamos a hacerle un
par de cambios. En primer lugar, vamos a cambiar la
dirección a vertical, así que todos los elementos
se muestran verticalmente, así, y luego voy
a agregar un color de relleno blanco. Voy a establecer,
déjame mover esto un poco. Voy a establecer el
ancho para llenar contenedor, así va todo el
ancho del marco padre, y vamos a
alinear todo a la parte superior y media
así. Y por último, voy
a agregar unos 24 píxeles, relleno
horizontal
y 32 píxeles. De un acolchado vertical
así superior y una inferior. También voy a copiar
el color de trazo que usé aquí y agregarlo a
este elemento, también. Y vamos a asegurarnos de
que solo estamos aplicando esto al fondo
del elemento, así. Entonces este es el flujo, básicamente. Pasamos de escritorio donde
nuestro encabezado se ve así. Cuando el escritorio se vuelve demasiado pequeño para acomodar
todos estos elementos, cambiamos a la vista móvil donde inicialmente este
menú está oculto, pero podemos acceder a él haciendo clic o tocando el botón de menú. Así que eso es genial y todo desde el punto de vista del diseño,
nuestro trabajo está
un poco terminado, pero podemos llevarlo
un paso más allá y de hecho crear un prototipo
funcional de esto. Déjame mostrarte cómo
en la siguiente lección.
5. Prototipo del menú móvil con Figma Make: Ahora que hemos construido nuestro diseño de encabezado
móvil, hagámoslo interactivo y
prototipo del menú
Hamburger,
para que se abra y cierre
usando Figma make prototipo del menú
Hamburger, para que se abra y cierre
usando Figma Y por si no lo sabes, Figma make es una nueva herramienta
AI Power dentro FigMA que permite a
los usuarios crear prototipos
funcionales y aplicaciones web
y
sitios web a partir de mensajes
de texto y partir de mensajes
de texto Y es muy fácil
comenzar con Figma make. Todo lo que tienes que hacer es hacer
clic en el ícono de Figma aquí, ir a Archivo Nuevo y elegir
M. Y así, estás dentro y listo para ir Lo primero que queremos
hacer es copiar y pegar los marcos Figma en make para que la IA
sepa qué construir Entonces vamos a
ir y venir. Entonces selecciona el escritorio, copia, y luego entra
aquí en la parte inferior y simplemente pegarlo, y haremos lo
mismo para el móvil. Así que copia eso, pegarlo en, y luego móvil abierto, copiar eso, pegarlo en. Y luego tienes que
describir tu idea. ¿Qué quieres que haga la
IA con esto? Entonces voy a decir, crea un Ptype del encabezado
responsive Y sólo voy a presionar
Enter, y eso es todo. Le di el mando a la IA. Ahora, es pensar. Hace algún razonamiento, ya
sabes, determinando
lo que tiene que hacer. Y pronto, va a
empezar a construir. Entonces ahí tienes. Creó nuestro encabezado aquí. Aquí agregué algún
contenido extra del que, ya
sabes,
siempre podemos deshacernos. Pero esencialmente, lo
que nos
interesa es la funcionalidad, ¿verdad? Entonces voy a abrir vista previa
móvil, y
como pueden ver, cuando cambie el tamaño de esto, sí, cuando llegue a ese punto, cambia a la vista móvil Y cuando hacemos clic en este icono
, me muestra el
diseño móvil que creé. Haz clic en eso para cerrar,
cambiar el tamaño de esta copia de seguridad, y si hay algún cambio que quieras
hacer en algún momento, puedes pedirle cambios a la IA Por ejemplo, puedo decir que cambie a la vista
móvil antes. Yo entro, y ahora está
haciendo lo mismo. De nuevo, va a cambiar algunas
cosas en el código, y básicamente va a
hacer lo que normalmente pides. Bien, la versión dos ya
está completa, y cuando cambiamos el tamaño, puedes ver que el cambio
ocurre mucho antes, que es exactamente lo que quería, y sigue siendo un prototipo completamente
funcional Bien. Ahora es tu turno. Tu proyecto es diseñar tu propio encabezado de
sitio web responsive en FIGMA. O si lo prefieres, puedes recrear el que
construí en esta clase Para el botón CTA, puedes diseñar el tuyo propio o
usar el que te proporcioné Si tienes curiosidad sobre cómo
creo ese
botón inteligente desde cero, echa un vistazo a mi otra clase de
Skillshare Hay un enlace para ti
en la descripción, o puedes navegar por mi perfil para ver todas mis clases de diseño. Ya terminaste, por favor comparte tu diseño de encabezado en la galería de proyectos de
clase. Me encantaría ver lo que
se te ocurre. Bien, gracias por mirar. Feliz diseñando, y
te veré en la siguiente
clase. Adiós por ahora.
Adi Purdila, UI/UX Designer, Framer Developer, Educator
