Transcripciones
1. ¡Hola!: Bienvenido a otra clase de Sigma, cierto, en unas pocas lecciones, aprenderás a crear una web profesional desesperada con fines de gestión de proyectos, presentarme
rápidamente. Mi nombre es Jana. Soy diseñadora de UX
y disfruto creando un contenido educativo sobre
Figma y el diseño de pelota. Durante esta clase, te
acompañaré por todo
el proceso desde el
principio hasta el final, cómo crear un tablero web. Eso significa que comenzaremos con
configurar la cuadrícula de capas, y posteriormente pasaremos a diseñar la barra de navegación, los iconos, la imagen de perfil, y otros elementos
dentro del tablero. Y al final, te
animo a que me envíes tu trabajo para que te pueda
dar mi opinión. Y de esta manera
puedes aprender y también crecer tus habilidades de diseño. Así que date prisa, inscribirte
a este curso, y espero verte
en el siguiente video. Empezaremos con los
fundamentos del retraso en la cuadrícula.
2. Configurar cuadrículas de diseño: Bienvenido a la primera parte de
esta clase donde vamos a configurar una rejilla
para nuestro tablero. Y configurar una rejilla es una
buena práctica antes de empezar a
diseñar cualquier tipo de
interfaz de usuario porque con la rejilla o los elementos dentro de nuestro
marco pueden ser consistentes. Así que para empezar, seleccionemos
rápidamente un marco y vamos a
crear un tablero web. Entonces en los marcos predefinidos, vamos a seleccionar
un marco de escritorio. Lo renombraré rápidamente. El primer paso será
ir a las Cuadrículas de Layout y crear la
primera cuadrícula aquí mismo. Entonces vamos a empezar
con la propia rejilla. Entonces por defecto se ve que
el tamaño es de diez píxeles, pero lo vamos a
cambiar a ocho porque vamos a trabajar juntos con la cuadrícula de
ocho píxeles, que es bastante común hoy en día mientras diseñando diferentes UIs. Entonces si la isometría
aquí mismo puedes ver cuadrados diferentes
más antiguos y
si tienes algunos elementos, por
ejemplo, un rectángulo, puedes ver cómo
se va a mover dentro de la cuadrícula
aquí mismo con este elemento, si sostenemos nuestros teclados Shift y en realidad movemos nuestros elementos, salta inmediatamente por
diez píxeles para decidir. Vamos a
trabajar
con la cuadrilla de octava píxel. Vamos a las preferencias y realmente ajustaremos
nuestra cantidad de muesca. Entonces por defecto la
muesca grande está fijada en diez, pero vamos a
cambiarla a ocho. Básicamente, este valor
ajustará nuestra resolución y en realidad puntos de
viñetas independientes con los
que vamos a
trabajar juntos. Esto es genial. Básicamente seleccionemos otra vez herramienta rectángulo. Y vamos a dibujar el lado izquierdo de
la barra de menú que solemos
ver en nuestro tablero. Voy a usar en realidad
mi cuadrilla de octava píxel para simplemente
guiarme sobre dónde ver los
márgenes de mi barra de menú. Y digamos que el ancho de nuestra barra de menús será de 192 píxeles. Y como se puede ver aquí mismo, cae perfectamente
en nuestra cuadrícula 8. Fijemos rápidamente nuestra
capa aquí mismo, y vamos a
seleccionar nuestro marco y la sección de cuadrícula de capa, vamos a agregar otra cuadrícula, pero esta vez en lugar de una cuadrícula, vamos a seleccionar
columnas y en una columna, por lo que se ven todos estos
diferentes tipos de ajustes. Y por lo general cuando
trabajamos con UIs web, vamos a trabajar en conjunto
con rejilla de 12 columnas. Como se puede ver, el
número de columnas a las que nos estamos apegando
cambia de inmediato en el tipo vamos a seleccionar que nuestras columnas van a
arrancar desde el lado izquierdo. Por lo que de inmediato ves
cómo realmente se mueven hacia la izquierda y derecha
aquí con la canaleta, ya que trabajamos con 8 bits, logaritmo es una
práctica común decidida por 24. Y en realidad también
vamos a trabajar con un offset, lo que significa el ancho de nuestra barra de menú izquierda junto con el margen que
queremos establecer dentro. Sólo voy a sostener Alt y en realidad aumentar el
valor aquí mismo. Acerquemos y verifiquemos
realmente. Entonces es más preciso. Creo que
debemos modificarlo por un píxel y el
que básicamente
dibujo otra
herramienta rectangular puedo ver en el ancho lo que en
realidad es el margen. Por lo que es extra 56 pixel. Este es una especie de
punto de conjunto que voy a tener en otro lado de mi marco básicamente
desde el lado derecho. Volvamos a nuestra configuración de
cuadrícula de diseño. Y en realidad vamos
a querer phi width. Entonces básicamente nuestras columnas
se extienden hasta el
final de nuestro marco. Como se puede ver, 80
píxeles es bastante
demasiado porque la última columna
va detrás de la red eléctrica. Así que vamos a disminuir
el valor 72 ancho. Y voy a duplicar esto el tobillo y el
lugar con aquí. Como podemos ver, es
un poco más. Nuestro margen es de 64
píxeles en lugar de 56, pero está bastante bien porque
generalmente en los tableros se necesita tener un poco más de
espacio en el lado derecho. Tan sencillo como eso, configuramos nuestra red. Por lo que la primera rejilla es importante alinear todos nuestros
elementos dentro del marco. La segunda rejilla es con columnas
donde acabamos de alinear verticalmente nuestros elementos
en nuestro tablero. Entonces nos vemos en el siguiente video.
3. Diseño barra de navegación lateral e iconos: Bienvenido de nuevo a la segunda
parte de esta clase. En un video anterior,
configuramos la rejilla que vamos a tener como puntos principales para diseñar los elementos
dentro de nuestro tablero. Ocultemos rápidamente en realidad
nuestras columnas apuntan e vayamos a nuestra barra de menú izquierda
y vamos a empezar a diseñar
básicamente los elementos del menú. Voy a empezar
en realidad con algunos iconos. Y para tener algunos iconos ya
instalé el plugin de
iconos de plumas. Dejé el enlace a este blog
y donde realmente lo puedes encontrar e
instalarlo fácilmente en tu perfil de Figma. Entonces frente a nuestros iconos, es bastante fácil trabajar. Simplemente puedes
buscar diferentes tipos de iconos o
buscarlos con un texto. Entonces voy a usar
este ícono para mi logo, básicamente el logo
de mi dashboard que también voy a usar este ícono y un montón de otros que
voy a seleccionar rápidamente. Aquí están mis iconos. Se ve un poco desordenado,
así que voy a alejarme esto el uno del otro. ¿ Verdad? Así que coloquemos
éste en la parte superior y también los otros justo
debajo del primer ícono. Voy a seleccionar
todos estos iconos, alinearlos en el
centro y además tener el mismo espacio
entre cada uno de ellos. Entonces, por ejemplo, voy
a usar el valor de 36. Bueno entonces el
Eigen, creo que el trazo es bastante grueso. Así que voy a seleccionar
cada icono y en realidad modificar el valor de trazo
al inferior. Entonces, por ejemplo, iguala
seleccionar este fotograma. Puedo seleccionar capas
vectoriales más antiguas y en realidad ir a Trazo y
modificar el valor a una. Lo mismo va a otros iconos
que acabo de seleccionarlo. Muy bien, agreguemos
algo de texto a este ícono. Entonces el primero va a ser el nombre de nuestros dashboards. Entonces, por ejemplo, el
problema gestiona. También voy a cambiar
las fuentes de texto pop y
en realidad aumentarán el tamaño
y el peso de mi fuente. Buenas prácticas para tener en realidad la distancia de
incrementos de ocho. Entonces, por ejemplo, 16
celdas fijas o incluso más. Entonces voy a copiar
esta capa y en realidad pongo abajo y modificarla
a las diferentes pruebas. Aquí mismo va a aburrirse. También seleccionemos todas
estas capas de texto y
alinearlas al lado izquierdo. Y también los vamos a mandar
a cada uno de los íconos. Cuando terminemos, vamos a seleccionar todas estas
capas y moverlas realmente para decidir
de nuestro marco de menú, vamos a posicionarlo exactamente con nuestro crédito que
acabamos de crear. En realidad voy a aumentar esta capa un poco al
valor de 224 porque
siento que necesito más espacio
para nuestros iconos y para
nuestros textos dentro de notas perfectas de
canción bajará un poco
el valor de la sesión a
el lado inferior porque es una especie de la menos irrelevante
evaluar tener para nosotros. Y también estos cuatro elementos del menú, voy a bajar
un poco más hacia abajo para que tengamos nuestro
logo mole distinguir. Seleccionemos también nuestra capa y cambiemos el relleno para
que sea de color blanco. Y una forma de aplicar también efectos. Así que caen sombras y en realidad
podemos distinguir esta capa de otras
partes de nuestro tablero. Algo así. Entonces ocultemos también nuestra
tarifa para ver cómo se ve. Y creo que podemos modificarlo
lentamente, tenerlo menos visible. Además, lo último que
tenemos es que vamos a resaltar exactamente
el ítem de menú donde nos vamos
a ubicar. Y esto va a estar en el
ítem que se llama tablero. Entonces voy a tener el valor, voy a tener como
pintar al negro con otros valores, lo
voy a cambiar básicamente por el gris más claro. Aquí. Voy a aumentar
el peso de la fuente. Y además modificaré ligeramente los colores de ambas de
estas capas vectoriales. Más colorido y se
ve más como un logotipo. Y lo último que
quiero aún resaltar, estoy ubicado dentro de la junta directiva. Aquí tenemos nuestro
rectángulo con un relleno que vamos a alinear también
en el centro. Y lo voy a colorear
también en el azul claro. Entonces voy a
disminuir la opacidad al valor de diez. Por lo que es ligeramente visible que
estaban dentro de nuestras tablas. Simplemente creamos nuestra primera barra
de menú desde el lado izquierdo. Y en el siguiente video
vamos a crear nuestro Heather y seguir adelante con otros elementos para crear un tablero sencillo.
4. Cabecera y columnas: En esta parte
vamos a trabajar en el encabezado y también en los primeros elementos
dentro de nuestro tablero. Como de nuevo, voy a agregar más iconos para básicamente
mostrar que la persona puede buscar y ver las notificaciones y el
centro de ayuda dentro del tablero. Voy a
volver al plugin de
iconos de plumas y
buscar más iconos. Perfecto, tres de nuestros
iconos están aquí mismo. Voy a moverlos de
nuevo el uno del otro. Mi ícono de búsqueda
va a tener también este color gris por
lo que es menos visible. Y otra herramienta que voy a ser coloreada en negro y también
voy a disminuir
ligeramente el peso de
la herramienta de trazo un píxel. Perfecta menos solo
ambos de estos marcos y en realidad muévalos
un poco más a la cima. Para este caso, voy
a encender mis rejillas de diseño contra para que simplemente pueda
alinear básicamente mis elementos. Y como recuerdan, ya
cambiamos nuestro ancho
de la barra de menú. Por lo que es importante también
cambiar el desplazamiento de nuestras columnas para tener más espacio entre los elementos y
nuestra barra de menú izquierda. Así que vamos a tener un desplazamiento
ligeramente más grande y también disminuir un poco
el ancho. Si también necesitamos
asegurarnos de que nuestro ancho quede
perfectamente dentro de
nuestra cuadrícula de octavo pixel. Eso perfectamente por lo que
el ancho de 70 herramienta y desplazamiento de 256 encaja perfectamente en nuestra cuadrícula de octavo
pixel aquí mismo. Permítanme mover rápidamente
esta barra de búsqueda. También
lo alinearé al centro con nuestra capa pro gestionada. Y también estas celdas de dos capas van a estar
centradas en el medio. Vamos a moverlos un
poco a este lado. También aquí mismo,
voy a dibujar un círculo en el que se mostrará el perfil del usuario que se encuentra actualmente
en este dashboard. Entonces voy a establecer el
ancho y la altura de los pixeles
fatales y encontrar una
imagen de la persona. Voy a ir a
otro plugin llamado Unsplash y buscar
la imagen de la persona. Por ejemplo, esta imagen
encaja bastante perfectamente. Es bastante casual y
también profesionales. Por lo que si quieres modificar
la configuración de esta imagen, simplemente
puedes ir al relleno, click en la imagen e ir
a la viñeta de recorte. Y en realidad vas
a aumentar, por ejemplo, este retrato y centrarlo más en el centro de la forma. Así. Se ve
bastante perfecto. Voy a moverlo
también para decidir del crédito y voy a alinearlo en
el centro, equilibrio
perfecto, alinearlo de
nuevo con nuestra capa de búsqueda. El siguiente para este icono de búsqueda, también
voy a
escribir búsqueda de texto. Entonces es más obvio
lo que significa este ícono. También cambiemos el color de las especificaciones y veamos básicamente que tiene desplazamiento de
16 píxeles del icono. Cuando apago la cuadrícula de diseño, veamos cómo en realidad se ven nuestros artículos dentro
del tablero de instrumentos, por lo que se ve bastante bien. También vamos a
volver a poner nuestra rejilla de capas y voy a
hablar base el título. Eso significa que estás
dentro de la sección de la junta directiva. También aumentaré
el valor
del estilo de los
muchos nueve píxeles. Y también nos conformaremos con el peso
medio de este texto. También nos aseguramos de
que esté centrado con el primer elemento en
nuestra barra de menú izquierda. Muy bien, se ve bastante genial. Entonces voy a volver a poner mi rejilla de diseño y
voy a crear las tres columnas
donde vamos a pegar nuestras tareas que
tenemos que hacer en este proyecto. Entonces, por ejemplo, para hacer
en progreso y hecho. Entonces para eso, voy a ir de
nuevo a la herramienta rectángulo. Y como se puede ver aquí
mismo en nuestra cuadrícula, tenemos 12 columnas
y vamos a tener tres elementos
son del mismo tamaño. Entonces significa que cada
elemento tomará el ancho de cuatro columnas en esta interfaz de usuario. A menos que realmente se copien
y lo coloquen aquí. En realidad está centrado
y encaja perfectamente. Y voy a ir
al radio de la esquina y cambiar el valor a tenso. Nuestros forense son suaves y
en realidad a menos que sean tan afilados, que los acababan de tener en este momento, para mi proyecto premisa en realidad copié la paleta de
colores
aquí mismo que quiero
usar para mi tablero. Puedes aplicar tu propia
paleta de colores o realmente
puedes usar la
que estoy usando. También dejé en la
descripción de esta clase los códigos de color de cada color que utilicé
para este tablero. Por lo que voy a seleccionar
todas estas tres capas y cambiar su color por
el gris más claro. Y esto también escriben los títulos
para cada una de esta sección. Y por supuesto, quería
ser perfecta con el crédito. Así que vamos a asegurarnos de
que esté perfectamente alineado. Y también
agregaré otros iconos que es plus y ética Morris, para buscar el ícono más
y también para más configuraciones. Exactamente así. Por
supuesto volveré a ir y modificar el valor del
trazo, el que la salud. Y también haré lo mismo
con el segundo ícono. Pero también es amor
este rectángulo por lo que no se mueve en nuestro camino. Y vamos
a seleccionar
ambas capas y en
realidad ponerlas en el mismo nivel
con nuestro subtítulo. Si selecciono todas estas
tres capas y las alineo exactamente en el centro
y aquí mismo, también
me
aseguraré de que tengamos una buena alineación
de todas estas tres capas. Y la distancia entre
ellos va a ser también relevante para nuestras
ocho grandes redes babosas. Como alguien nacido para seleccionar estas tres capas y
agruparlas y también las alfombras dos veces para básicamente
ponerlas exactamente en la misma posición a
las otras dos secciones. El pensamiento final
será cambiar realmente el texto a en
progreso y hecho. Creo que nuestros escritorios se
empezaron a mejorar y mejor y más llenados con un
amigo tipos de elementos. En el siguiente video,
vamos a añadir más elementos dentro de
cada una de estas secciones.
5. Elementos de tarjeta y avatares - pasos finales: Bienvenido a la última
parte de esta clase. Y ahora mismo vamos
a terminar nuestro diseño con la creación de los autos simples que vamos
a colocar nuestra tabla. Antes de empezar a
diseñar nuestras tarjetas, seleccionemos rápidamente nuestro marco. Voy a activar de nuevo
la cuadrícula de ocho píxeles para mí solo para ver cómo voy a colocar mi guardia con
las tareas que hacer. Acerquemos rápidamente. Y voy a empezar
con una sección To Do. Y voy a seleccionar
la Herramienta Rectángulo y voy a dibujar aquí mismo un
rectángulo blanco. Entonces voy a asegurarme de que los márgenes encajen básicamente
al lado izquierdo y derecho de mis elementos que
antes creé. Y voy a
ir de inmediato al radio de
la esquina y
cambiar el valor a 20. Por lo que voy a tener las esquinas
redondeadas para mi tarjeta. Y por supuesto el
color será blanco. También voy a
aumentar un poco la altura de este elemento
y asegurarme de que el espacio entre
el título de tareas pendientes y mi elemento sea de 24 celdas grandes. Por lo que el siguiente paso va a crear la etiqueta
para la tarea Martha. Y en este caso voy
a escribir un sistema de diseño. Así que vamos a seleccionar esta capa. Y también cambiaré
el relleno a
gris claro y también el peso de la
fuente medio. Y voy a hacer
esta etiqueta un poco más pequeña, por lo que no es tan obvio como los otros elementos de la
mañana para crear un poco más tarde. Y también quiero
marcarlo con un código de color. Por lo que voy a crear rápidamente
LPS sosteniendo turnos. Entonces mis valores Q son
básicamente los mismos. Y ya preparé ante la paleta de colores
que voy a usar la herramienta de pipeta aquí mismo. Entonces cuando se activa,
estas se resaltan con un color azul claro y
voy a seleccionar, por
ejemplo, un
color verde para este caso. Al final,
también seleccionaré ambas,
ambas capas y las
alinearé exactamente en el centro. Entonces, por ejemplo,
agrupa rápidamente esta parte y voy
a asegurarme de que mi espaciado entre el margen superior e izquierdo sea de 24 píxeles. El siguiente paso va
a crear un título. Y en este caso voy
a leer una sección de héroes. Entonces esta va a ser la tarea. Por ejemplo, algún
equipo tiene que diseñar. El encabezado tendrá el peso de
fuente de 18 píxeles. Y también vamos a asegurarnos de que
esté alineado con mi etiqueta. Entonces aquí mismo
voy a moverlo un poco más cerca de la etiqueta. Y el siguiente paso
va a ser sólo una copia. Esto aquí, cariño. Y básicamente, este
va a ser nuestros textos primarios
donde vamos
a describir de qué se trata
la tarea. Y voy a
disminuir el valor de mi fuente y también
mantenernos regulares exactamente lo que mi descripción se va a
difundir a través de todas las cartas. Y solo para asegurarse de que
el espaciado sea de 24 pixeles de izquierda a derecha
y justo aquí fuera nuevo escriba rápidamente en
alguna descripción. Esto es igual de simple
gouache de texto y esquema hasta con. Y también voy a
asegurarme de que el espaciado entre los textos primarios
y el título sea ocho píxeles también. Quiero que mi auto tenga
también la configuración. Así que sólo voy a seleccionar los iconos de
configuración creados anteriormente y voy a copiarlo y
colocarlo junto a mi etiqueta. Por supuesto, se va a
centrar también hacia el lado derecho, igual que mi texto primario. El último paso va
a crear en realidad pequeñas etiquetas serían iniciales de personas que van a ser
responsables de esta tarea. Y para eso voy a volver a
seleccionar una herramienta de elipse. Y al sostener Shift,
voy a dibujar un círculo simple. Y de inmediato voy
a ir al trazo y agregarle un simple trazo con color blanco que va a estar
dentro del Alex. Y por supuesto,
al seleccionar fail,
seleccionaré el juego I de 5 bits e iré a mi paleta de colores y seleccionaré uno de los colores que
preparé antes en esta clase. También. Voy a crear algunas
iniciales de una persona que
va a ser
responsable de este GSK. Al seleccionar ambas
capas, voy a enviar la derecha Exactamente en posición horizontal
y vertical. Y en eso,
agrupe rápidamente ambos elementos. Por lo que también voy a bajar la posición de este
elemento por 16 celdas fijas. Y por ejemplo,
también copiaré este elemento. Y porque quiero, por
ejemplo, que la gente sea
asignada a este tema, volvamos rápidamente a mi paleta de
colores y cambiemos, por ejemplo, a este
color. Aquí mismo. Voy a cambiar así
las iniciales. El aquí mismo también
quiero que mi elipse tenga 24 pixeles de distancia
al margen de esta tarjeta. Así que simplemente voy a aumentar la altura de
este rectángulo blanco. Este es solo un simple ejemplo
de cómo creamos nuestra tarjeta. Voy a desactivar la rejilla solo para ver cómo
se verá. Entonces creo que se ve
bastante simple, pero también bastante agradable. Y acabo de seleccionar todas estas capas que
acabo de crear. Y voy a
agruparlos juntos aquí mismo. Sólo para terminar nuestro diseño. Copiaré esta tarjeta
y cambiaré el contenido en ella para que
al final podamos tener un tablero
bastante bonito con las tareas. Aquí vamos. Se ve como un
tablero impresionante que acabamos crear
simplemente por
tan poco tiempo. Por fin seleccionemos nuestro marco y lo veamos en el modo de
presentación. Es así como creamos nuestro tablero sencillo y muy
profesional para la gestión de tareas, para el equipo del proyecto. Entonces chicos, tengo mucha
curiosidad por ver tu trabajo. Ya sea que hayas creado un
tablero similar es un poco diferente, uno que querías crear
para tu portafolio o simplemente
por diversión para ti mismo. Hazme saber y
estaré feliz de darte una opinión y muchas gracias
por seguir esta clase y
espero verte en la próxima clase que
voy a preparar muy pronto.
Tetiana G, UX Designer
