Transcripciones
1. Introducción: Imagina que podrías construir
un prototipo de aplicación en solo unas horas en lugar de
semanas. Bastante genial, ¿verdad? Bien. Ya que estás
en este curso, una buena suposición es
que ya
eres diseñador de UX o estás en proceso
de convertirte en uno. En cuyo caso, este curso
está diseñado para ti. Eso también significa que
entiendes que la creación wireframes para las pruebas de usabilidad a veces
puede convertirse en
una tarea intimidante Estoy aquí para
decirte que tengo la solución perfecta para
ti. Kits de Wireframing Estos kits son herramientas que puede implementar
en su flujo de trabajo, haciendo que su proceso de encuadre de cables sea lo más fácil y emocionante
posible Mi nombre es Y, soy instructor de diseño AUX
UI. He estudiado y
practicado diseño por años. Actualmente imparto clases de más de 70 estudiantes de diseño guiándolos sobre cómo iniciar
sus carreras en tecnología. Estoy muy emocionado de dar
esta clase porque creo que kits de
wireframing son herramientas
tan subvaloradas
en cualquier conjunto de herramientas en cualquier La capacidad de crear un prototipo completo y
funcional en cuestión
de horas es muy
notable y empoderadora. No puedo esperar para llevarte
de principiante a maestro en el uso e implementación estos
kits de encuadre de alambre en tu proceso Discurso, vamos a cubrir una base muy previa de
lo que es el encuadre de alambre, y te presentaré
la idea de los kits de encuadre de alambre Estos son componentes de
interfaz de usuario prefabricados que
incluyen botones estándar, deslizadores, iconos,
formularios, lo que sea Imagine un conjunto de
bloques de construcción que pueda mezclar y combinar para crear el diseño de su producto
digital. Cubriré todo lo que
necesitas saber desde encontrar, descargar, personalizar y utilizar estos kits
en tus proyectos Vamos a aprender
todo usando Figma, un potente
software de creación de prototipos que le permite aprovechar al máximo los kits de
encuadre de cables Si no estás familiarizado
con Figma, no te preocupes. Te guiaré
a través del uso de Figma manera efectiva con instrucciones
paso a paso La belleza de usar kits de
encuadre de alambre es la eficiencia. No estás
perdiendo el tiempo creando cada elemento
desde cero. En su lugar, arrastras,
sueltas y vola. Tienes un diseño funcional, listo para pruebas y comentarios. Unirse, y vamos a dar vida a
sus visiones de diseño.
2. Qué es el wireframing: Es posible que ya conozca
todo sobre el encuadre de alambre como parte de su proceso de
diseño Pero por si acaso,
repasemos eso en este rápido video. Imagina que estás construyendo una casa. No empezarías a colocar
ladrillos al azar, ¿verdad? Primero necesitarías planos en bruto en tu diseño x. Los wireframes son como
estos planos. Son guías
visuales de símbolos que representan el esqueleto
de tu producto digital, ya sea un
sitio web o una aplicación. Wireframing te ayuda a
organizar la estructura y el diseño de tu diseño
antes de comenzar a agregar todas
las campanas y Se trata de
centrarse en la funcionalidad y la experiencia
del usuario sin
distraerse con colores, fuentes y otros elementos de
diseño Los marcos Wi son diferentes a las maquetas finales que
diseñas para tu producto Wi frames son la fase de
transición entre tus ideas y
el producto final. Tienen una
naturaleza experimental para ellos, ya que los creas, los pones a
prueba, y luego
vuelves a iterar sobre ellos. Ahora que ya sabes
lo que son los wireframes, también
debes saber que no
todos los wireframes son iguales Hay diferentes niveles
de faatlity en wireframes, que van desde baja
hasta Fidelidad es
básicamente una palabra elegante, refiriéndose al nivel de detalle y realismo
en el diseño. Echemos un vistazo. Primero, tenemos wireframes de baja fidelidad Estos son bocetos básicos dibujados a
mano a menudo hechos con lápiz y papel También pueden ser digitales, pero incluyen una cantidad muy
limitada de detalles. Son rápidos de
crear y súper útiles para comunicar ideas
iniciales. Piensa en ellos como garabateando tus primeros pensamientos en una A continuación, llegamos a wireframes de media
fidelidad. Estos suelen ser digitales y creados usando herramientas
como sketch o Figma. Siguen siendo básicos
y aproximados, pero incluyen
más detalles que los marcos de alambre de baja fidelidad. Este nivel es ideal
para definir ideas y preparar tu prototipo para probar y recibir comentarios. Por último, hay wireframes de alta
fidelidad. Estos casi funcionan como el producto final con diseños
más terminados
y un diseño bien elaborado. Los
marcos de alambre de alta fidelidad
se utilizan a menudo para
pruebas de usabilidad, ya que dan una imagen mucho más clara de cómo se verá
el producto final
y cómo funcionará. En pocas palabras, y framing es un paso muy fundamental
en el proceso de diseño Los marcos Y le dan un plano, enfocándose en la estructura
y el diseño de su producto Este curso se trata de
hacer que este proceso de encuadre
Y sea lo más fácil y
agradable posible
3. Qué son los kits de wireframing: En el video anterior,
hablamos de encuadre de alambre. Ahora es el momento de presentar nuestro tema principal, los kits de encuadre Wi Un kit de estructura de alambre es una colección de componentes de interfaz de usuario
rehechos Piense en ello como un
conjunto de piezas de lego. Estas piezas incluyen elementos como botones,
campos de entrada, iconos o incluso
diseños salariales completos que puedes usar para redactar rápidamente el esqueleto
de tu sitio web o aplicación. La idea es simple. Cuando construya
sus marcos de alambre, puede utilizar estos kits
como biblioteca de componentes. Arrastra y suelta fácilmente los elementos en
tus wireframes Pero, ¿por qué deberías
usar estos kits? Bueno, hay muchas razones. Los principales son la velocidad, la eficiencia, la consistencia
y un poco de diversión. Otra razón para usar kits de
wireframing es que ayudan a
mantenerte enfocado con láser en la funcionalidad de tu
producto sin que pierdas
tiempo o te distraigas con aspectos
de diseño visual Digamos que estás trabajando
en un diseño de app de alimentos. Quieres crear
un flujo de pago. Te pasas 5 minutos redactando el skitch para el
diseño de estas pantallas Pero luego pasaste 2 horas simplemente perfeccionando estas pantallas y
haciéndolas parecer consistentes Solo para descubrir
que después de las pruebas, es
necesario casi cambiar todo
el diseño nuevamente. Eso no es genial,
¿verdad? En lugar de comenzar desde cero
cada vez, puede comenzar con un conjunto de componentes
listos para usar. Tiempo ahorrado, significa que
puedes iterar más rápido, poner a prueba tus ideas antes y mejorar la usabilidad de
tu diseño en este tiempo También es divertido. La creatividad suele prosperar bajo algunas limitaciones. Y tener la capacidad de usar un conjunto de elementos en realidad puede
generar nuevas ideas. Simplemente porque no
te
preocupa crear estos
elementos desde cero. Puedes jugar con ellos, volver a organizarlos y
ver cómo encajan. Es como un
sandbox digital para ti. La eficiencia entra en juego
cuando trabajas en equipo. Si todos están
usando el mismo kit, todos
ustedes hablan el
mismo lenguaje de diseño. Esto minimiza los
malentendidos y reduce el tiempo
dedicado a las revisiones Además, asegura que un producto final tenga una apariencia
unificada. Ahora podrías estar
preguntándote, ¿Es ético para mí usar
estos kits de wireframing Algunos diseñadores
pueden sentirse incómodos, pensando que el uso de componentes
prefabricados de
alguna manera puede contar como robar
o ser menos originales Pero ese no es el
caso. Es absolutamente ético usar kits de wireframing Equipos de diseño alrededor del
mundo, los utilizan todo el tiempo. Es una práctica estándar, y dando los beneficios. Es un no prainer
usarlos en tus proyectos. Una cosa a tener
en cuenta es que
necesitas una herramienta de prototipado
para usar a estos niños Los populares incluyen sketch, Figma y un WXT Cada una de estas herramientas
ofrece todas las capacidades que necesitas para importar y
usar estos kits de wireframing Estas herramientas permiten que tus hijos se integren sin problemas en tus proyectos, haciendo que sea aún más fácil arrastrar, soltar y personalizar
según tus necesidades.
4. Uso de Figma en este curso: Para comenzar a diseñar tus wireframes y
poder usar el kit de wireframing, necesitas un Para este curso, hemos elegido una
herramienta de diseño muy potente, que es Figma. FGma es una herramienta de diseño
que le permite
diseñar sus wireframes y
crear sus prototipos Además de eso,
te ayuda a facilitar tus pruebas de
usabilidad. Lo que hace que FGMA se destaque en el mundo UX es una naturaleza
colaborativa Usted y su equipo pueden trabajar
en un diseño simultáneamente, haciendo actualizaciones en tiempo real, no más
archivos de correo electrónico de ida y vuelta, o lidiar con pesadillas de
control de versiones También es una herramienta basada en la nube. Todo lo que necesitas hacer es iniciar sesión en tu cuenta
desde cualquier dispositivo, y tendrás acceso a
todos tus archivos desde cualquier lugar, tu casa, tu oficina, tu
cafetería favorita, lo que sea. Como diseñador de UX, eventualmente, necesitas ser
competente en el uso Hay una gran cantidad de tutoriales
y recursos en línea. Puedes aprenderlo a medida que avanzas. Sin embargo, la belleza de usar kits de encuadre de
alambre es que
no necesitas ser un
experto en Figma. Cualquier usuario principiante
puede usar muy fácilmente un kit de encuadre de alambre para comenzar a
armar un diseño Pasaremos por
acciones específicas en figma que puede tomar al usar y
personalizar kits de enmarcado de alambre Pero hay dos características principales que debes conocer
antes de sumergirte. Estas características son
componentes y estilos. Un componente es algo
que puedes crear y luego reutilizar en tu
diseño una y otra vez. Con todos los usos, aún enlace
al componente principal. Un estilo es similar al
componente en teoría. Se crea un estilo para
tipografía o color. Aplica para diferentes
elementos en tu diseño, y todos estos elementos
permanecerán vinculados. Si cambias el estilo
original, seguirán
todos los
elementos conectados. Por ejemplo, un diseño de botón. Puedes diseñar tu botón una vez y luego usarlo
en todas partes de tu diseño. Por ejemplo, si quieres
cambiar este color
del spot y posteriormente, solo
necesitas cambiar
el componente principal y todas las instancias
seguirán. La principal diferencia
entre componentes y estilos es que los estilos
suelen ser más simples, apuntando a
propiedades específicas de los elementos. Mientras que un componente es
una unidad más compleja. Un componente lleva forma, color, tipografía y
muchos más atributos Es importante
que entiendas los componentes y estilos
antes de comenzar. Porque un kit de enmarcado de alambre en su núcleo es un conjunto
de componentes y estilos preparados y elaborados para que usted pueda
invertir y comenzar a usar en su diseño
5. Encontrar el kit de wireframing adecuado: Todo bien. Para comenzar
con su encuadre de alambre, necesita encontrar el kit de enmarcado de alambre
adecuado Antes de hacerlo, pregúntate, ¿cuál es el alcance de mi proyecto? ¿Estás creando una página de destino de
símbolos o una aplicación móvil compleja, o tal vez un sitio web completo Saber esto
te guiará hacia el kit que se alinea con los requisitos
específicos de tu proyecto Por ejemplo, si estás
diseñando una aplicación móvil, es posible que necesites un
kit que incluya componentes como barras de navegación, barras de
pestañas y varias plantillas de
pantalla. Por otro lado, si estás
diseñando un proyecto web, busca kits que sean ricos
en elementos enfocados en digtop Como variación de encabezado, diseños de
pies y secciones de
contenido Dicho esto, la
mayoría de los kits de wireframing incluyen elementos tanto para aplicaciones de
escritorio como para móviles Lo segundo que
quieres determinar es el nivel de fidelidad
para tus wireframes Al principio del proyecto, los kits de
baja fidelidad son excelentes para hacer una lluvia de ideas y obtener comentarios rápidos Más adelante, a medida que un diseño
se vuelve más refinado, quiere cambiar a kits
de alta fidelidad. Después de decidir el tipo de
kit de enmarcado de alambre que
necesita, está listo para comenzar a
buscar su kit de cableado adecuado. Ya que estamos usando
Figma y discurso, la comunidad Figma es un lugar perfecto para que
busques el kit adecuado Para comenzar, haga clic en la
pestaña Comunidad explorada en la página principal. La comunidad Figma está
llena de diversos activos y
t lugar para su diseño Empieza escribiendo algunas palabras clave, usa términos como wi framing kits, componentes de
interfaz de usuario o kit wi framing de baja
fidelidad, dependiendo de lo
que estés buscando Un rápido pro tep presta atención a la calificación y
número de descargas Los kits con calificaciones más altas
y más descargas suelen ser más confiables y tienen una
comunidad más fuerte de nuevo. Una vez que encuentres algunos kits
que te llamen la atención, abre el breviw para
ver qué hay dentro ¿Este kit incluye todos los
componentes que necesitas? ¿Es el
nivel correcto de fidelidad? ¿Se ve apropiado
para tu proyecto? Si lo hace, todo
lo que necesitas hacer es dar click en el
botón Abrir Figma. Esto creará un duplicado
del
archivo de kits de wireframing en sus borradores, y automáticamente
abrirá el archivo Ese es tu primer paso adoptar este
kit de wireframing para tu proyecto
6. Diseño con kits de wireframing: Ahora que has encontrado el mejor kit de
wireframing
para tu proyecto Comencemos a usarlo para
comenzar a abrir el archivo
que duplicaste, y luego seleccionar el
marco adecuado para tu proyecto, ya sea un marco de tope de cubierta, un marco móvil o
lo que sea, dependiendo del tipo de
producto que estés diseñando. Después de eso, puedes acceder a los elementos del kit de wireframing
desde el lado izquierdo Selecciona los activos de la pestaña,
y desde ahí, verías todos los
componentes en el archivo, categorizados y organizados
cada uno con su propio nombre. Puedes mirar la lista y
verificar lo que necesites, o puedes usar la barra de búsqueda en la parte superior y escribir el nombre de
lo que estás buscando. Aparecerá si existe. La idea es símbolo. Todo lo que necesitas hacer es arrastrar lo que necesites y
soltarlo en tu diseño. Necesita un botón, arrástrelo, necesita un campo de entrada de texto, arrástrelo. Es así de simple. Puede redactar rápidamente
la estructura básica de su aplicación y sitio web
organizando estos elementos. No tienes que
preocuparte por el detalle exacto en la etapa, y eso es todo. En solo unos segundos, tienes un diseño
funcional de símbolos que puedes
ajustar e iterar fácilmente Digamos que estás diseñando
una pantalla de inicio de sesión de símbolos. Primero, arrastre un marcador de posición
para que sirva como título. Después agrega dos campos de entrada, uno para el nombre de usuario y el
otro para la contraseña. Finalmente, arrastrando y botón
para la acción de inicio de sesión. La mayoría de los componentes también tienen algunos ajustes que puedes ajustar desde el panel lateral derecho Para este
campo de entrada, por ejemplo, ya que es para la contraseña, podemos agregar un icono
en el lado derecho. Todo lo que tenemos que hacer es usar esta opción desde
el panel lateral derecho, y aparecerá el icono que
queramos. Es importante tener en
cuenta que encuadre
de alambre se
trata de ser aproximado Estos kits le ayudan a
crear marcos de alambre con una representación aproximada
de su producto final. No son necesariamente
Exel perfectos o estilo para que coincida con su visión de diseño
final Piense en ellos como un esqueleto
de su interfaz de usuario. Entonces, mientras arrastras
y sueltas elementos, es posible
que no se vean
exactamente como te gustaría se
vieran al
final, pero eso está bien. El objetivo aquí es enfocarse en la estructura y el diseño,
no en el aspecto final. La belleza de los
kits de encuadre de fuego. Está en la eficiencia. Al usar componentes prefabricados, podemos ahorrar innumerables
horas que otro modo
pasaría creando
elementos desde cero. Esta velocidad le permite
iterar rápidamente en sus
diseños, obtener comentarios y realizar mejoras sin ralentizarse con los detalles
de estilo
7. Personalización de kits de wireframing: Hasta ahora, hemos cubierto lo básico
del wireframing,
exploramos diferentes kits de
wireframing exploramos diferentes kits de
wireframing y Sin embargo, dado que la idea es que
confiemos en un kit de wireframing pre
hecho, se espera que
el kit que
elegimos no coincida con el 100%
de nuestros requisitos Por eso es muy importante
que sepas cómo personalizar y diseñar
componentes adicionales para tu kit. Digamos que tenemos
un botón en nuestro kit. Es un botón
rectangular bastante estándar con una ligera redondez de esquina Sin embargo, para el tipo de producto que
estamos diseñando, es crucial usar esquinas
completamente redondeadas. Podemos hacer este cambio a todo
el
kit de wireframing muy fácilmente Para ello, necesito encontrar primero
el componente que
necesito cambiar. Ya que necesitamos cambiar
el componente de botón, buscaré una página llamada botones en el panel lateral izquierdo. Después seleccionaré todos los botones a
la vez, y desde el panel lateral derecho, voy a ver una opción
para radio de esquina. Cambiemos eso
10-36. Ahí vamos. Ahora, nuestro botón
tiene esas esquinas lisas y totalmente redondeadas que coinciden con el propósito
de nuestro producto. Una vez que cambies el
componente principal así, todas las instancias de este componente se actualizarán
automáticamente. Esto se puede hacer
con cualquier componente, cambiando cualquier propiedad,
color, fuente, tamaño. También debes recordar tener cuidado con estos cambios para mantener la consistencia del estilo general
de este kit de encuadre de alambre Además de cambiar algunas propiedades en los componentes existentes. A veces el
kit pre hecho simplemente no tiene
algo que necesitamos. Tal vez necesitamos un
componente único como un deslizador de página, por ejemplo, pero no podemos
encontrar en ningún lado en este kit. Aunque por suerte, puedes
crear esto desde cero. Para comenzar, buscaré la página apropiada para
este componente adicional. Esta cinta es sólo para fines
organizativos. Después de eso, creas
tu nuevo componente. Aquí hay un deslizador de base que me
faltaba . Ya lo diseñé. Ahora, hemos diseñado un slider personalizado que
se ajusta perfectamente a nuestras necesidades, pero aún no hemos terminado. Necesitamos convertir
este nuevo diseño en un componente reutilizable, para que no tengamos que
recrearlo cada vez Todo lo que necesitas hacer
es hacer clic derecho sobre él y seleccionar la opción
crear componente. También podemos agregar diferentes
variantes para este componente. Por ejemplo, puedo crear diferentes variantes para distintas
páginas que estén activas. Voy a crear estas
diferentes variantes aquí, y voy a cambiar el color de las diferentes aplicaciones de página que indica qué
página está activa. Ahora, este nuevo componente deslizante estará disponible en
su panel de activos, listo para ser arrastrado y
soltado cuando lo necesite Además, cualquier
cambio futuro que realice en el componente original
actualizará automáticamente todas las
instancias de su proyecto. Súper eficiente,
ahí lo tienes. Personalizar y
crear nuevos componentes es algo que casi
siempre
harás en tu flujo Cuanto más experimentes
con la personalización. Cuanto mejor obtendrá al
hacer sus kits de cableado,
realmente reflejará la visión de su
proyecto
8. Importación de kits como biblioteca en Figma: A estas alturas, deberías tener
un manejo bastante bueno en wireframing y
kits de personalización para Pero hasta ahora, la única forma en que
los usamos es trabajando directamente dentro
del archivo de kits. Sin embargo, para la eficiencia y el uso de kits de wireframing a
su máximo potencial, podemos utilizarlos como bibliotecas de componentes para nuestros proyectos Al centralizar tus
componentes y estilos,
te aseguras de que todos
estén en la misma página, haciendo que tu proceso de diseño sea
más rápido y organizado Además, es más fácil actualizar y mantener la consistencia
en todo su proyecto. Créeme, tu
yo futuro y
los miembros de tu equipo, te lo agradecemos. Vamos paso a paso
en el proceso de
publicación de un
kit de encuadre de alambre como biblioteca en Figma. Primero, necesitas tener una carpeta de
equipo para tu proyecto. Ya he creado uno aquí. Creaste desde el botón en la parte inferior y
siguiendo el proceso. Dentro de la carpeta del equipo, necesitas tener
una carpeta de proyecto. Aquí es donde vivirán todos los archivos relacionados con el
proyecto, como su kit de
encuadre de alambre Puedes crear tantos
proyectos como necesites. Ahora el siguiente paso es mover
el archivo de kits de encuadre de alambre que duplicó
de la
comunidad Figma a su carpeta de
proyectos Puedes hacerlo fácilmente haciendo clic
derecho en el archivo, seleccionando la opción mover archivo, y luego eligiendo el destino
apropiado. O puedes elegir mi
forma favorita que es arrastrar y soltar el archivo a la carpeta del proyecto de
destino Tu siguiente paso es publicar
tu archivo como biblioteca. Abra su archivo y desde la parte superior de la
barra lateral izquierda, vaya a activos. Después, da clic en la
biblioteca aquí. Verás una opción para publicar tus
componentes y estilos. Haga clic en publicar y
Figma abrirá una lista que muestra todos
los componentes y estilos que puede publicar Revisa todo
para asegurarte de que está todo listo y luego
presiona publicar nuevamente. Se puede acceder a la
misma opción desde la flecha pequeña junto
al nombre del archivo. También puedes publicar tu
biblioteca desde allí. Así, tu biblioteca
ahora está publicada para que todo
el equipo
pueda usarla
y para garantizar que todos los miembros de tu equipo también la puedan usar, necesitas habilitarla a
un archivo de diseño específico. Voy a crear un nuevo archivo de diseño en la misma carpeta del proyecto. Digamos que este es el
archivo principal en el que estamos diseñando. Todo lo que necesito hacer es ir
a la opción de biblioteca desde el menú de activos y agregar la biblioteca que acabo de
publicar a este archivo. Entonces has publicado
tu primera biblioteca. Pero, ¿qué pasa cuando haces cambios en el kit de encuadre de tu
esposa No te preocupes, también es bastante
sencillo. Siempre que realice cambios en
el kit de encuadre de su esposa, FDMA le solicitará
que publique actualizaciones Sólo tienes que seguir los mismos pasos. Vaya a los activos, haga
clic en el icono de la biblioteca y luego haga clic para publicar
la actualización de su biblioteca. Tu equipo también recibirá
una notificación para actualizar su versión
de
la biblioteca actualizar su versión
de
la biblioteca. Así de simple. Por último, así como agregamos
este kit a nuestro proyecto, sepa que puede agregar múltiples kits dentro de un mismo proyecto. Al hacerlo, tenga cuidado y organice y agregue un nombre
distinto para cada kit. Esto hace que sea muy fácil identificar un cambio entre
diferentes conjuntos de componentes. Sin embargo, es muy
recomendable usar un kit
a la vez ya que las cosas
pueden mezclarse muy fácilmente, y corre el riesgo de perder la
consistencia en sus diseños.
9. Para terminar: Esa fue mi clase en kits
de encuadre de alambre. Este conocimiento me ha
ayudado a acelerar mi proceso de diseño y fue esencial para mí
cuando empecé. Espero que también te sea útil
. En este curso, has
aprendido a elegir, usar y personalizar kits de
encuadre de alambre en Figma. También has
aprendido a
implementarlas como bibliotecas
en tus proyectos. Pero claro, esto es
solo el comienzo. Me encantaría que siguieras practicando y compartieras el marco
de alambre que creas. Cualquier cosa inspirada en esta clase en la sección de proyectos de clase. Empieza por trabajar
en pequeños proyectos. Tal vez rediseñar el blog de un amigo o el sitio web de tu propio portafolio. Pequeños proyectos,
te dan el espacio para experimentar y cometer errores
sin mucha presión. Una cosa que me encanta de ser diseñador de U XUI es una curva de aprendizaje
interminable Siempre surgen nuevas técnicas, herramientas y métodos, manteniendo las cosas muy emocionantes. Te
animo a adoptar una mentalidad de aprendizaje
continuo,
tomar cursos adicionales, leer blogs de UX, asistir a
seminarios web y seguirme aquí, y también en las redes sociales para mantenerte actualizado con
mis nuevos Si disfrutas de este curso
y te resulta útil, una reseña sobre el reparto de habilidades
significaría mucho para mí. Ayuda a los estudiantes a
descubrir este curso y me permite seguir creando contenido
valioso para ti. Muchas gracias por emprender
este viaje conmigo.
Yousef Shehabi, UXUI Designer | Educator
