Transcripciones
1. ¡Hola!: Oye, estoy muy contenta de
que estés aquí. Soy Viros y soy
diseñador de UX trabajando en Deloit. ¿Alguna vez has querido diseñar un sitio web de portafolio que
no solo se vea bien, sino que lleve mucho menos tiempo? Bueno, si eso es algo
que estás buscando, entonces supongo que esta clase es
una combinación perfecta para ti. En esta clase, seguiremos
adelante y usaremos Figma para diseñar un sitio web de cartera de dos
páginas. El diseño va a
ser muy sencillo y
voy a guiarte a través todo lo que
necesites para diseñarlo. Entraremos en los
fundamentos de FigMA y pasaremos a
diseñar las diferentes páginas Diseñaremos una página de inicio, y luego seguiremos adelante
y diseñaremos sobre mi página. El diseño va
a ser sencillo
pero a la vez de aspecto muy profesional y
te va a llevar mucho menos tiempo. Si eso es algo para lo que
estás listo, te
veré en la clase. Muchas gracias.
2. Introducción a Figma: Oye, ahí. Hola, bienvenidos a la clase y
espero que les guste esta clase. Entonces, lo que vamos a aprender, vamos a
aprender a hacer un sitio web de portafolio muy mínimo y atractivo. Podrías ser alguien que ya
es diseñador,
buscando hacer un sitio web de portafolio o alguien que
apenas está empezando a entrar en el
diseño o diseñar cosas, cualquier manera necesitarás
un buen sitio web de portafolio. En este tutorial
o en esta clase, vamos a hacer exactamente eso. ¿Quién soy yo? Bueno,
mi nombre es Perros y soy diseñador senior de UX. Trabajo en Deloit en India, Bangalore, y llevo
más de cuatro años
diseñando más de cuatro años
diseñando Empecé como diseñadora
gráfica y poco
me mudé al diseño UX. Me gusta mucho trabajar en
diseños que son mínimos, pero a la
vez muy utilizables. Para esta clase de diseño, no
habrá muchas
campanas y silbatos, pero va a ser un diseño muy
limpio y minimalista Empecemos. Voy a sacarme del camino. A lo mejor
me voy a hacer un
poco más pequeño y ponerlo aquí. Entonces lo que ves en
la pantalla es FIGMA. Entonces, cuando te
inscribas por primera vez en FIGMA, déjame decirte qué es FIGMA. FIGMA es un
software de diseño
hecho específicamente para el diseño UX
o no el diseño UX,
sino el diseño de interfaz de usuario que utiliza el diseño de la
interfaz Las personas que trabajan con diseños de
interfaz se llaman diseñador de interfaz de
usuario o diseñador de UX. Esto es para
alguien que es muy nuevo y no conoce la terminología. Para las personas que ya tienen experiencia, por favor
tengan paciencia conmigo. Entonces cuando empiezas FigMA, ves algo como esto El botón de inicio, al
hacer clic en esto, es posible que
tenga esta página completamente en blanco si está iniciando
InFima por primera vez Tengo muchas
cosas que hacer aquí. Pero cuando hagas clic
en este diseño, verás que vas a Figma amable hacer un nuevo archivo de
diseño aquí, y se llama Untitle Ya inicié un archivo que hacía el nombre del sitio web de la
cartera. Si quieres cambiar el nombre, solo
tienes que hacer doble clic y
puedes darle cualquier nombre. Por ahora, sólo voy a deshacer. Estoy asumiendo que
eres nuevo en
Figma y solo te guiaré a Figma y solo te guiaré través de algunas herramientas muy básicas de
Figma para que
estemos comenzando esta clase
teniendo en mente a todos Incluso si eres nuevo,
puedes seguirlo. Verá Figma tiene tres,
cuatro caminos diferentes. La parte superior es
donde están nuestros archivos. Se puede ver que el archivo de trabajo
actual es este, que está seleccionando. Este es otro archivo. Puedes abrir muchos archivos
diferentes aquí. Además si quieres ir a
Inicio, simplemente haz clic en Inicio. En el lado izquierdo, tienes un panm donde
tienes archivo interno,
tienes páginas, así puedes tener varias páginas y puedes diseñar en varias
páginas dentro de un archivo Entonces ahora mismo estamos en la página uno, y dentro de la página,
también puedes tener múltiples
capas pasando. Entonces a medida que vamos a empezar a diseñar, verás que estas capas
empiezan a aparecer. Entonces en el lado derecho, tienes pocas herramientas. Entonces este panel es
muy dinámico y básicamente cambia en función cualquier herramienta que
estés usando en este momento. Y en la parte inferior, tenemos barra de herramientas. Ahora mismo, lo que tenemos es
nuestra herramienta de movimiento seleccionada, y esta es esa
flecha apuntando y se usa para
mover cosas aquí y allá. Tenemos otras dos herramientas en su interior. Entonces donde quiera que veas este
chevron o esta flecha, significa que tiene herramientas
ocultas dentro de eso, pero vamos a mantener esta introducción muy corta
y solo veremos las herramientas básicas y las
más útiles que estaremos
usando en El primero es, por supuesto, nuestra herramienta de mudanza, vamos a utilizar esto extensamente para mover
cosas aquí y allá. Entonces tenemos la herramienta de marco. La herramienta Marco es como
un cuadro delimitador o un tablero de dibujo donde haces un marco de cierto tamaño
y dentro de ese marco, vas a diseñar Aquí es donde entran diferentes tamaños de
pantalla. Haces un marco para escritorio, haces un marco para
diseño móvil y básicamente, es solo un contenedor
que diseño continuo. Entonces tienes la herramienta de cinta
y la herramienta de forma dentro de ella, tienes muchas formas
diferentes, línea
rectangular, flecha, elipse,
estrella, polígono, demás Entonces tienes esta herramienta pluma cual no vas
a estar usando mucho. Si no vas a estar dibujando a mano gráficos
vectoriales, no
creo que lo vayas a usar. Si no vas a usar bolígrafo, hay muy pocas posibilidades de
que uses lápiz. No hablemos de esto. La siguiente herramienta que
vamos a utilizar ampliamente es nuestra herramienta de texto. La interfaz de usuario es
básicamente dos cosas. Tenemos diferentes formas
y luego tenemos texto. Ambos se fusionan
para hacer diseño. Puedes simplemente esto es muy
básico.Esto ni siquiera es correcto, pero es una definición muy básica Si miras alguna fueron de diseño, verás que hay muchas
formas, gráficos y textos. Básicamente no es
la definición, sino más o menos, solo
estoy tratando de
facilitarle las cosas. Entonces tienes herramienta común. La herramienta común es
básicamente entra en juego cuando estamos
trabajando con
otra persona y ellos pueden poner comentarios
sobre nuestro diseño y luego
podemos responder a ese
comentario. Perdóneme. Básicamente, esto es todo. Esto es lo básico de Figma. Entonces, vamos a
demostrar algo. Voy a ir al marco y a
medida que haga clic en el marco, se
ve el
lado derecho acaba de cambiar. Tienes diferentes presets
preconstruidos y nosotros vamos
a ir con dektop Al hacer clic en Deck Stop, ves que aparece un fotograma, y ahora puedes moverlo
usando la herramienta Mover. Veamos qué podemos hacer ahora. Ahora que tenemos el marco, podemos ver que hay muchas opciones
diferentes aquí, que vamos a estar cubriendo
en los próximos capítulos. Entonces tenemos el relleno. El relleno es básicamente el color
del marco. Muy fácil. Rellenar. De qué color
quieres rellenar. Fácil, fácil. Entonces tenemos un color blanco
y luego dentro de él, podemos hacer un rectángulo. Usando nuestra herramienta de forma y
puedes mover este rectángulo. Si quieres hacer una
elipse, puedes hacer elipse. Cuando iniciaste la elipse, ves que era lúpulo
no perfectamente redondo Va a todas partes.
Es pop gratis. Pero si presionas el turno, ahora se mueve en la proporción adecuada. Entonces ahora está arreglado. Es decir, no es deformante. Así es como se registra
la relación de aspecto. Ahora bien, si haces clic aquí, ves diferentes formas
o cosas diferentes, tendremos diferentes opciones
en la sartén de la derecha. Ahora pongamos también algún texto. Y puedes hacer que
este texto sea más grande. Entonces sí, estos son los conceptos
básicos del FIC MA. Y verás a medida que
avanzamos y avanzamos, empezarás a aprender
todas estas opciones, todas estas herramientas, y
va a ser divertido. Confía en mí. Entonces sí, te veré en el siguiente capítulo y
vamos a empezar. Bien.
3. Diseño de la página de inicio Parte 1: Hola, bienvenido de nuevo. Entonces lo que vamos a hacer ahora es comenzar con
la primera página. Entonces como dije, este
va a ser un sitio web de
portafolio mínimo muy simple. Y supongamos,
hagamos alguna suposición. Entonces empezaremos por aquí. Entonces, para quién estamos haciendo
este sitio web. Entonces el nombre es, digamos, John Doe Este es un nombre muy común, nombre marcador de posición que usamos y ¿cuál es el trabajo
de esta persona Digamos, uh, diseñador, deberíamos tomar diseñador
o fotógrafo. Creo que si cómo y qué haga
esta persona va a dar forma a cómo se verá el
portafolio porque si es alguien que
hace mucha fotografía, entonces el portafolio
va a estar muy dominado por las imágenes Muchas imágenes a tamaño completo, mientras que si va a ser, digamos, un diseñador de UI, va a ser en pantallas y diseño de
interfaces junto con mucho texto explicando el proceso de diseño.
¿Qué debemos tomar? Tomemos, por ejemplo, que es diseñador de UI. Y también vamos a
exhibir algunos de los proyectos. Para proyectos, solo usaremos imágenes de
marcador de posición de
tal vez driblar o manos B. No voy a usar mis
propias imágenes porque entonces pocas de ellas tienen derechos de autor y algunas de ellas están bajo Entonces no quiero
meterme en ningún problema legal. Entonces sí, creo que eso
sería suficiente. Así que comencemos ahora. En primer lugar, lo
que vamos a hacer es también decirte
cómo hacer páginas. Esta es nuestra primera página.
Si hago doble clic, puedo nombrarlo intro Así que mantengamos esta página tal como está y hagamos clic en
este ícono más. Lo que esto agregará es agregar otra página, que es la página dos, y podemos decir diseño sí, vamos a darle
el nombre diseño. Vayamos a nuestra herramienta de marco
y hagamos nuestro dex de marco. Este es el primer paso
que va a estar ahí. Y hablemos del sitio web. Entonces sitio web de cartera, lo que en realidad
estamos tratando de hacer. Estamos tratando de
transmitir quiénes somos, qué hacemos, y mostrar
lo que ya hemos hecho. Y la forma en que lo hacemos es usando una
configuración muy básica de un sitio web, que es nuestra barra de navegación, luego el héroe principal o
área de escaparate, y luego el pie de página. Va a ser muy
básico, muy sencillo. Cualquier sitio web, cualquier buen sitio web
pequeño que veas, en realidad sigue
la misma ruta. Entonces tendremos el Navbar. Así que comencemos a
bloquear los detalles. Esto va a ser,
digamos, Navbar. Y si solo presionas R
, cambiará a rectángulo. Eso es lo que hice ahora mismo. Este es nuestro NAB. Vamos a darle a este NAB
un color diferente. Entonces tenemos otra que
es nuestra introducción básica de héroe, quieras
llamarla, entonces
tienes esta área donde estás
mostrando algunas cosas Vamos a darle un color más oscuro. Lo que hice ahora mismo es simplemente duplicarlo y cómo lo
haces rápidamente es hacer clic, y luego presionas Alt. Estoy en una máquina de ventana, así que Alt me olvidé cuál es
el equivalente de Alt en un Mac o creo que no
es comando, perdón, el control es para comando. Simplemente se me olvidó. Cualquiera que sea el sustituto de
las matemáticas, por favor use eso. Si mantengo presionado Alt y luego
solo hago clic y arrastre, puede ver que la flecha doble
significa que se está duplicando, y esto va
a ser un pie de página. Que sea un pie de página. Y esto le da un color
diferente. Tenemos el pensamiento básico de, hemos marcado el básico
donde van a estar las cosas. Sin perturbar esto
e ir a copiar esto. También puedes usar los
atajos, Control C, Control V, y solo
copiará y pegará y
hará una copia duplicada. Ahora vamos a quitar estos bloques y empecemos a
poner alguna guía. Te pones una guía es venir aquí
y haz clic en la guía de diseño. En el momento en que hagas clic, te
dará muchas calificaciones, cuadrícula
muy pequeña, pero
tienes que ir a columnas. Y una vez que tengas columnas, puedes ver que puedes usar si lees familiarizado
con el sistema de cuadrícula, puedes usar esa columna 12,
lo que quieras usar. Pero mantengamos
las cosas muy simples. Iremos con uno,
que es como lleno. Entonces vamos a dar algo de margen. Lo que es el margen es uh, los espacios, fuera de donde
quieres trabajar, básicamente. Puedes mirar a Google, pero solo estoy tratando de
que sea muy simple. No voy a ir
en absoluto detalle, cuál es la definición correcta. Solo puedes mirar todas
estas cosas en Google. Solo conoce cuál es el enfoque de esta clase para que
te
aceleres, realmente comienzas a diseñar términos y definiciones
que siempre puedes aprender. Pero diseñando, no hay
sustituto para diseñar, así que tienes que
diseñar diseño. Entonces vamos a darle un 32 pixel. Entonces en mucho diseño, verás gente
usando 32, 16, ocho. Entonces, básicamente, para mantener
las cosas consistentes, usamos múltiplos de, ya
sabes,
cuatro, cuatro son cuatro, cuatro en 28, cuatro en tres, 12, cuatro en 416. Es por ello que usamos ese
16, 24, y todo eso. Canalón es la brecha
entre dos columnas. Entonces en estos momentos no está apareciendo porque
sólo tenemos una columna, y por eso
no tenemos canalón Pero si quieres cambiar
esto, aparecerá cuneta Digamos que tenemos dos. Ahora ves que tenemos una canaleta de
20 píxeles y si aumentamos esto,
eso también aumenta Ahora que tenemos nuestra
pantalla diseñada, comencemos con el
diseño de la barra de navegación. Lo que viene en la barra de
navegación, barra de navegación es
ociosamente tu logo y cualquier enlace importante
que quieras que tu usuario navegue
dentro del sitio web Para un sitio web de portafolio, lo que esto
se traduce en lo primero que
tendrás es tu nombre. Para el sitio web de tu portafolio, la identidad es
básicamente tu nombre. Entonces podemos tener enlaces
sobre ti. También podemos tener enlaces
sobre dónde contactarte, si tienes un LinkedIn, bla,
bla, bla, lo que
quieras agregar, puedes comenzar Empecemos con el logo. Por aquí, voy a poner
mantener el logo muy sencillo. Es que va a
ser un texto muy sencillo, John Doe, vamos a hg aquí Ahora lo que podemos hacer es
darle una fuente diferente. Pero ahora mismo sólo voy a ir con me gusta esta
fuente, en realidad. De hecho me gusta mucho esta fuente, pero también puedes
comenzar con el Inter. El Inter es un medio, es una gran fuente. A mí me encanta. Y luego también se puede jugar con el peso el peso de la fuente. Entonces vamos a darle
un poco de variedad. mitad del nombre se puede tener en negrita y luego
la otra mitad podemos tener en. Digamos. Entonces también
podemos ajustar el espaciado. Esto se ve muy bien. Si quieres
verificar el espaciado, solo
tienes que seleccionar el
ítem, presionar Alt y Simplemente mueve tu c desde donde
quieres ver el espaciado y
te mostrará que es 57. Hagámoslo 64 porque múltiplos de cuatro u ocho, lo
que sea que quieras hacerlo. Sí. John Doe, tenemos nuestro logo o
lo primero del mapa Solo hagamos algunos enlaces. A yo o sobre, solo
puedes escribir sobre. Consigamos que esto sea un tratamiento
más ligero, y esto no va
a ser tan grande. Supongo que 24 supongo que 32 fue. Y además, mantengamos
esto a cero sobre mí o tal vez podamos bajarlo un poco más y
cambiarlo a regular A Creo que esto se ve bien
porque no es muy ruidoso, pero al mismo tiempo, no
se está ocultando. Todo lo que estamos haciendo es lograr visualmente un equilibrio
entre todo. Entonces solo
copiaremos y pegaremos esto y le daremos contacto. Ahora, comprobemos el
espaciado, haga clic aquí, presione y luego simplemente pase el cursor sobre esto y simplemente podrá moverse y podrá ver
diferentes espacios Entonces básicamente ahora
tenemos la lectura del NaBBA. Se puede jugar en el montaje
prototipo. Sólo se puede ver cómo se ve. Esta es la opción para el
presente y abrirá la presentación y básicamente te
mostrará cómo se ve
todo esto, lo que has diseñado hasta ahora. Esto se ve bien. Yo sólo creo que necesitamos más
espaciamiento de ambos lados. Vamos a hacer esto 48. Ahora, cuando volvamos,
se ve bien. También podemos intentar
alinearlo con esto. Entonces ya lo hemos posicionado y
veamos cómo se ve ahora. Esto se ve bien. Así que ahora podemos movernos y comenzar con el
diseño del resto de la página.
4. Diseño de la página de inicio Parte 2: Entonces pongamos alguna información
o intro sobre la persona. Digamos hola. Soy diseñador de UI Qx
trabajando en Google. Google. Diseño
interfaces que son divertidas y encantadoras de usar y hacer la vida de las personas más fácil. Entonces hemos escrito una
intro de litro sobre la persona, solo
veamos cuánto
y así es como se ve No está mal. Se ve bien. Ahora que hemos usado
el nombre de la compañía Google. También pongamos el logo de Google. Quiero decir, es agregar un poco de toque. Entonces, estas pequeñas cosas
marcarán mucha diferencia. Logotipo de Google SIG. Pops algo. Ahora estamos aquí. Usemos este logo y acabamos de recibir una copia
y pegarlo aquí. Ahora, ya pueden ver, quiero decir, esto le está agregando un pequeño
toque de color. Vamos a alinearlo. Y si podemos
hacerlo más grande, perfecto. Ahora bien este es un arreglo muy
básico, pero vamos a jugar con él
y tratar de ver cómo podemos realmente hacer este palo
en un lugar donde se ve, quiero decir, no se ve raro. Ahora mismo, aquí están pasando muchas
cosas. Este logo y este logo,
es muy conflictivo. Así que vamos a tratar eliminar esto y hacer
algo de espacio aquí. ¿Qué tal si movemos todo hacia abajo o hacia arriba y hacemos esto un
poco más pequeño, y luego lo ponemos aquí Ahora, verías que
esto se ve bastante bien, y no se ve
fuera de lugar. Mm. Perfecto. Entonces eso se ve bien. Ahora, vamos también. Sí, esto se ve mejor. El diseño de UOI se
trata básicamente de mover cosas hasta que
sientas que
tiene sentido o se ve bien Básicamente, nosotros como diseñadores pasamos mucho tiempo simplemente moviendo cosas aquí y allá hasta que
todo tenga sentido. Vamos y venimos, viendo lo que hemos
hecho y cómo se ve. Es divertido. Sólo
mantengámoslo en dos
líneas y vamos a agrupar esto. De qué grupo es si
solo muevo esto, verás que estas son
dos cosas distintas. Si quiero mover
todo a la vez, solo arrastre y selecciono
todo y presiono Control G. Esto agrupará estas dos
cosas dentro de un grupo. Ahora cuando muevo esto, todo. Vamos a movernos juntos. ¿Ves? 128 está bien. Vamos a
sacarme del camino. Esto es bueno. Ahora pasemos a hacer las piezas de portafolio
y cómo vamos a hacer. Primero, comencemos
poniendo algunos bloques. Dos bloques, podemos
poner dos bloques, y podemos seleccionar ambos y
podemos hacerlo de tamaño completo. Entonces ahora que
hemos puesto los bloques donde queremos que vayan las piezas del
portafolio. Solo consigamos algunos diseños
de Dibble o no lo sé. A lo mejor usaremos vamos a usar, uh lo que digas, Unsplash Cuando vayamos a plug ins, puedes ver en plugins que
obtienes Unsplash cómo obtienes esto es que puedes ir a administrar plugins y
simplemente agregar splash ahí Así que vamos a encender splash y viene y le daremos diseño de interfaz de usuario. A ver si nos
consigue algo. Nos da
bastantes cosas. Solo usemos esto
porque esto es básicamente Figma y
vamos a usar esto Entonces, cuando hago clic, simplemente aplicó esa
imagen a esta caja. Ahora bien, si selecciono la segunda caja, vamos a darle otra imagen, vamos a usar
una muy buena imagen llamativa. Mm. ¿Cuál va a usar? Nuevamente, cuando dije que pasamos mucho tiempo moviendo
cosas aquí y allá, también
pasamos mucho
tiempo seleccionando imágenes y también
pasamos mucho tiempo
simplemente cambiando entre
formularios solo para ver qué
tipo de letra quedará bien. Me está costando
mucho seleccionar qué imagen debería cohere Pero solo para facilitar las cosas, escojamos esta porque
esta es una imagen de pantalla. Y ahora ves
tenemos dos imágenes y cuando voy a nuestra
reseña, ya ves, ahora tenemos la Navba el
contacto, los enlaces, básicamente, un poco de intro y también
dos de las Pero ahora mismo, estas dos
imágenes no nos dan ninguna información de
lo que son estas imágenes. Necesitamos agregar algunos
detalles más a estas imágenes. Veamos cómo
vamos a hacer eso. En primer lugar, si quieres, puedes simplemente enviar por correo estas las esquinas están muy
afiladas en este momento. Las esquinas afiladas están
básicamente bien. Pero la tendencia es por esquinas
redondeadas. Todo, desde Apples, iPhones hasta cualquiera de las interfaces
que veas en el móvil Todos, todo
tiene esquinas redondeadas, vamos a darle a la esquina un poco
de redondez. Disculpe. La opción que vamos
a usar es radio de esquina, y este es el
lugar donde
pondremos cuatro y
veamos cuáles son estos dos. Esto ha redondeado
las esquinas en cuatro píxeles. Ahora cuando vayamos aquí,
podemos ver estos looks redondeados y
buenos, hermosos. Ahora comencemos por agregar algo de contexto a estos
bloques de imagen, lo que son. Si quieres, solo
puedes hacerlos. Vamos a mantenerlo
un poco más corto. Y la razón por la que te diré por qué es cada vez que alguien
viene a un sitio web, si tienes algo
bajando, uh, es una pista para ellos
que hay más la página y deberían desplazarse hacia
abajo para ver más contenido. De lo contrario, si hay una brecha y esa brecha cae exactamente
donde termina esa ventana gráfica, nunca
sabrán que hay algo abajo de la página y nunca se
desplazarán Ahora agreguemos algunas cosas aquí. Entonces lo primero
que agregaremos aquí es el nombre del proyecto. Um, digamos. Entonces básicamente, quiero
darle un nombre donde inmediatamente
diga lo que has hecho. Um, diseñando Pigma
o diseñadores. Entonces básicamente, básicamente, no tiene ningún sentido porque esta persona
ha trabajado en Google, pero ahora he usado
algo de Pigma, y lamento mucho que esto
no tenga ningún sentido Así que vamos a cambiar. Solo cambiemos o tal vez
podamos porque quiero decir, esta persona quizá digamos que esta persona estaba trabajando
en Sigma para Google. Entonces sí, tiene sentido.
Sí, me equivoqué. Sí. Para los diseñadores, vamos a darle un poco
más pequeño y ¿cómo se ve? No está mal, pero podemos seguir
haciendo esto algo así. O podemos dejarla caer un poco
más y simplemente usar esto. 24. Esto es 16. Perfecto. Diseñando
Figma para diseñadores Además, si quieres, también
puedes agregar un poco más sobre todo
este proyecto. Cómo enviamos PGMs nuevo diseño con modo profundidad para para el evento
Pig Mas 2024 Quiero decir, esto es lo que
acabo de inventarlo, pero entiendes el punto, ¿verdad? Entonces ahora tenemos eso. Puedo ir a dos líneas. Entonces básicamente,
también puede tener en una línea. Entonces, básicamente, esto es
solo agregar contexto. Solo arreglemos
las cosas y nos moveremos muy rápido
y haremos estas. Todo bien. Así que hemos añadido
un poco de intrón Vamos a comprobarlo. Y necesitamos algunas cosas para
representar que este es un enlace y pueden dar
click aquí y simplemente ir Hagamos un pequeño botón
con decir, abrir o ver. Vamos a escribir vista, y luego también podemos
darle flecha arriba. Entonces comencemos
dándole un fondo. Vamos a enmarcar esto. Cuando enmarcamos esto,
podemos simplemente controlar el trazo que podemos dar y también podemos
controlar el tamaño de este. Se puede ver aquí. Y básicamente,
Básicamente, lo que pasó es que esto se convierte en un
layout cuando le damos un marco ahora mismo
esto es forma libre. Entonces esto no es tener ningún
relleno o uh incorporado. Lo que vamos a hacer es
cambiarlo a horizontal. Una vez que lo cambiamos a horizontal, se
puede ver que son pocas las opciones más que
se han abierto. ¿Qué son esos? Este es nuestro acolchado horizontal y este es el acolchado vertical. Básicamente, lo que
va a hacer es que
agregará el espacio dentro
del contenedor. Entonces cuando yo aumento esto, ves que está
agregando espacio dentro del contenedor y también aquí. Ahora lo que vamos a hacer es básicamente
le daremos una ventaja redonda. Ahora bien, esto se parece
mucho a un botón. Y puedes usar cualquier cosa
en lugar de ver o simplemente usar cualquiera pero
hay ciertas pautas,
ciertas mejores prácticas cuando se trata de escritura de UI
o escritura UX. Puedes seguir eso, pero
no voy a entrar en detalle. Lo que sea que vayas a usar para tu
sitio web, solo úsalo. Ahora ya ves vamos a
darle algo de tiempo para refrescarse. Ahora se ve
bonita. Es bonito. Ahora saben que esto
tiene un enlace que es vista ahora Figma tiene una cosa, que se llama autoayout Lo que va a hacer
es poner todo en
una cosa amable de diseño. Entonces es más fácil para ti
cuando estás espaciando. Por ejemplo, ya lo he
espaciado a cuatro píxeles, uh, si solo hago clic y selecciono
ambos y presiono Mayús A. Lo va a agregar a un fotograma y básicamente
al diseño exterior, y automáticamente
detectará cuál debería
ser la alineación. Ahora mismo, estas dos cosas
están apiladas verticalmente. Se agregará verticalmente. Ahora veamos qué va a
pasar si selecciono esto y luego presiono el turno A, que es un adolon, automáticamente
abatió que ahora todo
este pedazo y este
botón está
apilado horizontalmente y ahora todo está simplemente uh correctamente
alineado y además, si ves si cambio
la alineación, va
a cambiar la alineación Ahora lo que puedo hacer es simplemente copiar y pegar
esto u otro. Y digamos que si quiero
disminuir el espaciado, se
puede ver que sólo puedo usar
este icono donde hay hueco
horizontal y me va
a dar vamos a mantenerlo 48. Pero entonces solo supongamos que
vamos con este diseño. Entonces lo que va a pasar es
que si algo tiene un titular
más pequeño, este botón no se alineará correctamente y en cada ficha, la colocación
será muy diferente. Así que mantengámoslo como estaba antes. Entonces rumbo y ese
subtítulo comienza desde el extremo izquierdo y el botón se alinea a la derecha.
Mantengámoslo así. Así que ahora solo vamos a
expandir esto y ahora solo podemos copiar, pegar
todo y duplicar. Básicamente, ahora tenemos cuatro
corbatas, cambia las fotos. Nuevamente encenderé
el complemento unsplash. Y digamos que diseño, vamos a darle esto. Vamos solo señor ¿Qué le
debo dar? Como tal. Ya han usado este. No podemos usar eso. N. No
estamos obteniendo buenas imágenes. Creo que me llevará
mucho tiempo si solo sigo buscando
de esta manera. Así que solo usaremos algunas imágenes
aleatorias por ahora, pero asegúrate de usar absolutamente las mejores imágenes
para tu portafolio. Y supongo que el que
conseguimos en el bien. Básicamente, ahora tenemos nuestra
cuadrícula de piezas de portafolio. Además, vamos a darle un
poco de contexto aquí, qué es exactamente lo que estamos viendo viendo obras
seleccionadas. Entonces, siempre que
tengas un texto más largo que solo quieras acortar, simplemente haz doble clic en este borde, y solo lo acortará hasta donde ese texto está exactamente Vamos a alinearlo también 32 es bueno. Veamos cómo se
ve. Se ve bien. A ver si podemos
cambiarlo a medio. Sí, creo que esto se ve bien. Esto funciona. Veamos qué
tenemos espaciado aquí. Esto está bien. Alrededor del 88. Bien. Ahora cuando venimos aquí, vemos que esto está bien. Tenemos el Navbar, o también podemos hacer una cosa Podemos liberar algo de espacio y podemos empujar la barra de navegación un
poco hacia arriba Vamos a quedarlo 32. Ahora ves esto un poco de espacio quiero decir que no
somos capaces de ver. Lo que voy a hacer es empujarla
un poco más más. A ver, 64. Y ahora ves que algo de texto es visible y
simplemente lo dejaremos ahí. O si sólo puedo
tratar de moverlo hacia arriba. Veamos 96 96. Veamos una
cosita rápida. Para esta visión,
le hemos dado un tratamiento ucular, mientras que para estos vínculos,
son enlaces simples Lo que podemos hacer es hacer que los enlaces sean un poco diferentes
por color o por forma. Y así básicamente, en este lugar, sólo
va a ser visible cuando alguien se cierne
sobre el botón Entonces ahora mismo
no vamos a profundizar y haciendo diferentes
estados del botón. No estamos diseñando los
diferentes estados sobre
cómo, cómo se verá en
activo, cómo se verá. Entonces lo que voy a hacer es darle un
pequeño toque de color. Así que vamos a usar el color que es básicamente algo
que te llama la atención Solo usemos esto. ¿Qué tal si usamos el mismo color,
se verá bien? No creo que tal vez se
vea bien. No lo sé. Se ve bien. Se ve bien. También puedes ir
con este botón. Pero ahora que lo hemos hecho, vamos a ver si podemos ir con un color ligeramente
diferente. Uh, pongamos esto azul oscuro. Sí. Creo que esto va a hacer
el trabajo. Esto está bien. Ahora que hemos
cambiado en un solo lugar, lo que podemos hacer es
simplemente controlar C y luego simplemente ir aquí e
ir a pegar a reemplazar. Lo que esto va a hacer es pegar esto reemplazando
el botón más antiguo. Déjame hacerle esto a la
otra también. Y ahora nuestra página se ve
algo así. Es una clara representación de
que se trata de un botón, y también estos son enlaces a los
que el usuario puede ir Entonces nuestra página está mayormente hecha. Lo que hay que hacer a
continuación es el pie de página. El pie de página, no
tiene por qué ser muy elaborado. Puede ser muy mínimo. Para ello, básicamente queremos
dar un pie de página muy básico, um, probablemente el
nombre, no el nombre, tal vez los datos de contacto
donde alguien pueda contactar
rápidamente con el correo
Iddress o el número de teléfono
5. Diseño de la página de inicio Parte 3: Entonces vamos también. Así que vamos a
reducir esto un poco más y cambiemos el color para darle un divisor horizontal para que
estemos dividiendo todo. Está bien, cómo se ve esto. Creo que esto se ve bien. Es solo que necesitamos
disminuir el tamaño. Ahora se ve bien. Creo que solo necesita un
poco más de espaciado, y creo que esto se ve bien. Solo terminemos el alfarero rápido rápido y nuestra
página estará hecha. Y con esto, creo que
volvemos a encarrilar. Solo vamos a dar Hola en no.com. El teléfono tiene que
bajar a digamos 12, cómo quedará bien.
Se ve bien. También podemos poner el número de teléfono más 91 uno, uno, dos, tres,
cuatro, cinco, seis. Si vas aquí,
podemos ver ahora
tenemos los datos de contacto, y podemos jugar
con la colocación. Pero básicamente para esto, solo
puedes usar una
huella muy mínima o menor para el pie de página. Vamos a alinearlo. Veamos ahora.
Creo que se ve bien. Quieres puedes agregar
un poco más usando algunos íconos
y cómo agregas el ícono. De nuevo, ve a Plugin, y si no tienes
un plugin, puedes ir. Solo te voy a mostrar
como agregar plugin. Ir a Inicio. Y desde casa, se puede ver que hay una pestaña
llamada Comunidad. Y cuando vas a Comunidad, puedes ver que tienes plugins. Y si solo buscas icono, obtendrás muchos plugins
diferentes. Cuando veas que hay una pestaña para plugin a medida que voy y enchufar, puedo simplemente abrir o simplemente abrir y ser agregado a ese plug in. Ya tengo algunos
plugins para icon. He estado usando Fs para iconos bastante y
me gustan mucho. Vamos a apilarlo. Ahora bien. Vamos a ver
qué tipo queremos. Queremos macho regular y
tenemos nuestro ícono masculino aquí. Entonces, sea lo que sea que quieras usar, solo
voy a usar este. También tenemos pow. Para peón también, usaremos
ICA. Vamos a usar este. Ahora mismo, cuando arrastre y suelte, esto acaba de arrastrar y
soltar pero no dentro este detptFrame
simplemente lo eliminaré afuera
y lo moveré Entonces ahora está dentro de ese escritorio. Vamos a reducirlo. En este momento es de 24 por 24
píxeles y esto también. Lo que haremos es reducirlo a
16 por 16 píxeles. Y cuando estás caminando con, uh, ratios fijos, lo que puedes hacer es simplemente hacer
click en este botón. Voy a bloquear o desbloquear
la relación de aspecto. Ahora mismo, como
tenemos un icono, esto ya está bloqueado. En algún momento
tendrás esto desbloqueado y cuando aumentes uno, el otro no aumentará
porque este está desbloqueado Lo que tienes que
hacer es que si no tienes esto encendido,
solo enciéndalo. Ahora cuando cambies
el primero, el segundo se cambiará
automáticamente. Lo mismo con esto. Y lo que haremos es solo, uh, seleccionar esto y esto
y Shift Control, presionar Shift A, lo que agregará
estos dos en auto layout. El diseño automático es solo una forma
más rápida de alinear las cosas y dar espacio
entre todo, así que no tienes que usar solo tus botones para mover
las cosas uh, aquí y allá, solo
presionaré Mayús
A y
lo agregará al diseño automático y puedes ver que el espacio
entre es cinco, solo lo
voy a reducir a cuatro
y todo está alineado. Lo mismo va con esto. Veamos cómo va a funcionar. Si sigo así y luego
selecciono y presiono Auto yout, verás que
alineará todo, pero el espacio sigue siendo grande Así que sólo puedo hacer clic aquí, presionar cuatro y listo. Estos dos ahora
volveré a presionar Mayús A. Ahora ves que se alinea. El espaciado, 16,
pongámoslo ahí. Lo mismo con vamos a ver
que esto se ve bien. Comprobaremos el espaciado. Mantengámoslo 24 Pi
y también 24 aquí. Ahora vamos a eliminar el espacio extra y como
lo haces es solo uh, click derecho. Al hacer clic derecho, se selecciona
el fotograma y se ve cuando
llego al borde, el icono del cursor cambia
y luego presiona control, después simplemente moverlo hacia arriba. Ahora lo que tienes, déjalo refrescar y ahora lo que tienes es
esto, solo lo voy a mover. Me mudaré a algún sitio por aquí. Ahora lo que tienes es un pie de página muy mínimo,
que se ve bien. Entonces tienes tu nombre y también
el correo electrónico y el número. Muy mínimo, muy fácil. Y así es como se hace una portada de diseño de
sitios web de portafolio muy simple. Entonces en el siguiente capítulo. Lo que vamos a
hacer es que también estaremos diseñando sobre la página
y para el contacto, podemos diseñar un formulario o
podemos simplemente si quieres, solo
puedes agregarlo o
vincularlo a LinkedIn, que funciona bastante
bien, creo. También diseñemos otra
página sobre la página y luego tendrás un sitio web mínimo muy
básico para tu portafolio. Supongo que hasta ahora te estás
divirtiendo, porque me estoy divirtiendo mucho
diseñando esto. Entonces es muy rápido, muy fácil. Y solo puedes comenzar a
agregar el tuyo propio, ya sabes, diferentes ajustes y
ajustes de diseño y diferentes
pequeñas cosas y simplemente
hacerlo tuyo Así que sí, de veras con ganas.
6. Diseño de la página Acerca de y prototipos: Bienvenido de nuevo. Y ahora que hemos
hecho nuestra página de inicio, solo
sigamos adelante y hagamos
otra sección de página A. Sí. Así que vamos a empezar esto
simplemente duplicando este TextOpt y lo que hacemos es que simplemente va a mantener todas las guías
y todo intacto, y vamos a simplemente eliminar estas
cosas que tenemos aquí No tenemos que quitar
la barra de navegación y tampoco tenemos que
quitar el pie de página. Entonces ahora que lo hemos
quitado todo. ¿Qué hay de bueno de mí
página debería estar teniendo? Básicamente tu tiro en la cabeza y también escribe
explicando quién eres, y esto es algo que
será personal para cada persona. Entonces, si estás
trabajando, digamos,
como fotógrafo, la introducción
o el texto de la sección Acerca de mí
serán diferentes para ti Básicamente, solo tienes que
pasar un tiempo y solo, ya
sabes, escribir para
que refleje quién eres. Empezaremos con
agregar tiro en la cabeza. Vamos a hacer un
rectángulo aquí. Y por qué estoy haciendo un
rectángulo es porque
quiero poner una imagen
dentro de este rectángulo. Así que vamos a seleccionarlo, ir a plug ins, y otra vez, vamos a estar
usando el plugin splash. Disparo a la cabeza derecha. Veamos, obtenemos el
nombre es John Doe, así que seleccionaremos algo
que refleje a John Doe Entonces, busquemos algo
que se vea bien. Qué tal Algo
divertido que estoy buscando. ¿Deberíamos simplemente usar esto? A lo mejor podemos ir
podemos usar esta. Esto tiene un
ramo de gran aspecto en la parte posterior. Vamos a usar esto. Comprobemos el espaciado. Lo vamos a mover a
supongo en la anterior, tenemos el espaciado en 96. Haremos 96 aquí también. Ahora bien, lo que vamos a
hacer es poner un párrafo, diciéndote de qué se trata este
John do. Lo que vamos a
hacer es agregar algún texto, presionaremos T o simplemente
puede venir aquí, haga clic aquí en el Y lo que haremos aquí es hacer
clic y arrastrar. Lo que va a hacer
es poner un cuadro de texto. Así que vamos a poner aquí
un cuadro de texto y voy a escribir
algo Lam Epson Da algo. Por qué he escrito esto es porque
quería usar digamos, usaremos IA para reescribir esto Figma ahora tiene capacidad de IA
incorporada,
por lo que puede usarla Esta característica se llama reescribir esto y
solo voy a darle un pequeño párrafo de introducción rápido para la página sobre mí del diseñador
John of UI UX que
trabaja en Google Su nombre es John Doe. A ver si
pueden reescribirlo. Y va a tomar algún
tiempo y
te va a dar bastante es lo
suficientemente bueno, creo. Solo usemos esto.
Lo que voy a hacer es simplemente aumentar el
espaciado entre las líneas. Et lo hacen un 50%. Sólo estamos tratando de llenar
parte del espacio ahí. Vamos a darle algo de espacio. Entonces ahora tenemos nuestra página que
se ve algo así. Y se puede ver
que se ve bien. Se ve bien. Es
simple y va y va con
prácticamente la portada
que hemos diseñado. Lo que también podemos hacer es agregar
un poco de, digamos, información de
contacto,
puedes
escribirme a John doe@gmail.com. Algo algo,
algo así. Muy básico, uh, muy mínimo. También puedes intentar simplemente hacer
esto un poco más pequeño que llene
ese espacio y también agregue un poco más de espacio en blanco. Entonces sí, y cualquier enlace más
que necesites agregar, solo
puedes agregarlo aquí. Si también quieres exhibir algunas cosas personales como algunas, algunas fotos de hobby, también
puedes ponerlo aquí. Pero por ahora, no
voy a estar haciendo eso. Pero puedes encontrar mucha inspiración
diferente en la web
de cómo se ve el sitio web de las personas. Yo sólo voy a
dársela y ya estamos prácticamente hechos. Entonces esta clase no
se trataba de hacer más, sino de simplemente diseñar algo que se vea bien y se
pueda hacer en muy menos tiempo, pero aún así se verá muy
bien y hecho profesionalmente. Una cosa más que
tenemos que hacer es cuando ya estás
en la página acerca de, no
hay una
distinción clara entre qué enlace está activo y
qué enlace es predeterminado. Entonces lo que haremos es simplemente
agregaremos, digamos, rectángulo a esto para que la gente pueda saber que
están en esta página. Hay muchas
formas diferentes de hacer esto, pero esta es la más fácil y
rápida que puedes hacer También puedes intentar poner un
trazo igual que lo que
hicimos en este botón de vista y simplemente mostrar el
activo así. Pero por ahora, sólo
voy a ir con esto. Y para el contacto, lo que estoy
pensando es en vez de esto, lo que
podemos hacer es simplemente cambiarlo a
LinkedIn para que ya se
dé mucha información
de contacto en el sitio web, pero solo queremos
que sea más fácil para el reclutador ir
al LinkedIn Acabamos de nombrar LinkedIn. También lo haremos aquí. Lo llamaremos LinkedIn. Y aquí lo tenemos. Esta es nuestra página de inicio, y así se ve
muy limpia, muy mínima. Solo mientras
estamos haciendo esto, hagamos un
poco de prototipado Lo que vamos a hacer es que
llegaremos a la pestaña prototipo, y lo que vamos a hacer es así ahora se puede ver que
en todas partes me ciernen, van a
obtener este icono más Digamos sobre, si quieres esto es un grupo. Esto se vinculará como grupo. Entonces si solo quieres entrar,
solo haz doble clic y vas
a ir a la A.
solo voy a arrastrar y
verás que
sale una flecha y solo
voy a apuntarlo a
este texto de tres, lo
que significa que
ahora está vinculado sobre ahora está
vinculado a esta página. Tenemos algunas opciones
para la interacción, cómo
se llevará a cabo la interacción. O va a ser
click o delay o demás. Para
lo más sencillo, iremos con onclick y
simplemente nos quedaremos con todo
exactamente así Ahora cuando vuelvas
a tu presentación, ve si haces clic en, verás este
cuadro apareciendo en A, lo que significa que hay un
enlace prototipo activo que va desde A. Cuando hago clic en Acerca de, ves los cambios de página. Básicamente se trata de vincular páginas, cómo te va en un sitio web real, y así es como tienes. Pero también necesitamos una manera de
volver a la página principal. Lo que haremos es en este logo, solo
lo
señalaremos de nuevo a la página principal. Ahora lo tienes. Ahora
cuando haga clic aquí, usted estoy de vuelta aquí. ¿No es genial? Si eres nuevo en
FigMA tardará algún tiempo en estar realmente cómodo con la creación de prototipos
o simplemente usando el diente Supongo que esto es lo que queríamos
cubrir en esta clase. Podría hacer una clase más larga
con una característica más avanzada, pero solo sepa que esta clase
estaba pensada para un ejercicio de diseño
muy básico, muy rápido, que puedes hacer y construir
tu sitio web de portafolio. Si tienes alguna duda, solo, puedes
comentar Skillshare o
simplemente puedes escribirme una consulta Además, les insto encarecidamente a
que hagan su propio proyecto y publiquen en la sección de proyectos para que pueda ver qué cosas
increíbles están haciendo
ustedes. Si necesitas ayuda,
estaré disponible para
proporcionarte comentarios. Hagas lo que hagas, te
daré comentarios al respecto. Así que por favor publique sus proyectos, y estaré
deseando ver todos Muchas gracias y
espero que haya disfrutado esto. Si estás viendo esta clase durante el Año
Nuevo o Navidad, te
deseo una muy
feliz Navidad y un muy feliz Año Nuevo. Muchas gracias por
tomar esta clase. Adiós.
7. Gracias: Así que hemos llegado al final de la clase y espero que hayas disfrutado aprendiendo y
ya estés trabajando en el diseño de tu sitio web de
portafolio. Entonces, si has
diseñado algo, me gustaría verlo y si
quieres ayuda o comentarios, estaré encantado de
brindarte eso también. Entonces para el proyecto de clase, quiero que subas
el diseño en el que estás trabajando o ya
has terminado, y si tienes alguna duda, por favor no dudes en preguntarme. Espero que este Año Nuevo sea muy alegre y
productivo para ti Así que disfruto mucho enseñarte esta clase y espero que
hayas disfrutado lo mismo. Muchas gracias
y que tengas un buen día.
Firoz Khan, UI / Design / Photo
