Transcripciones
1. Avance: Te estás desplazando por Behance
y ves un estudio de caso que está bellamente diseñado
y cuenta una historia atractiva, y piensas, wow, nunca
podría hacer eso. Bueno, es hora de repensar eso. Soy Maddy Beard. Soy diseñador
de productos y creador de contenido de diseño. He trabajado para agencias,
pequeñas empresas, grandes empresas como Adobe y startups
tecnológicas haciendo trabajos de diseño
estratégico. [ MÚSICA] A lo largo de mi carrera, como la mayoría de los diseñadores,
he llegado a entender la importancia de
elaborar estudios de caso. Ya sea que quieras
aterrizar un nuevo trabajo, aumentar tu credibilidad
como diseñador, o simplemente compartir tu trabajo
con la comunidad manteniendo tu cartera de hoy,
es extremadamente importante. Confía en mí,
lo entiendo , puede ser tentador terminar todo el arduo trabajo en un proyecto, publicar un par de fotos en Instagram o tu página web
y luego seguir adelante. Pero vale la pena
tomar algún tiempo elaborar un caso práctico convincente para
cada proyecto que hagas, ya sea un proyecto
personal, un proyecto para
un cliente freelance o para la empresa en la
que eres trabajando en. En esta clase, quiero
ayudarte a tomar todo ese trabajo impresionante, a veces desordenado de un proyecto reciente
y darle forma a algo que cuente una historia y resalta tus
fortalezas como diseñador. Podrás
usar este proceso para proyectos y
proyectos
pasados por venir. Esta clase está pensada para UX y diseñadores de
productos en cualquier nivel, ya sea que quieras mostrar
un proyecto desde la escuela, mostrar uno de tus proyectos de clientes más
recientes o tal vez has estado en
la industria para un mientras, y solo quieres una
nueva forma de diseñar tus estudios de caso con un
poco más de intención. Los videos que siguen te
ayudarán a
salir con algo de
lo que estás realmente orgulloso. Esto es lo que necesitarás, un proyecto que has
terminado recientemente, ojalá tengas algunas notas o
bocetos o cualquier tipo
de trabajo de proceso, Google Docs, notas de Apple, o algún lugar para
delinear el contenido, acceso a Adobe XD, Figma o una herramienta de diseño similar. Algunas bonitas maquetas de dispositivos que
puedo apuntarte a algunos de mis favoritos y un portafolio
online como Behance o
tu sitio personal. Te voy a llevar a
través de estas lecciones usando un ejemplo principal, un estudio de caso voy
a estar elaborando para uno de mis
proyectos más recientes y porque obviamente mi estilo
no es el único estilo Voy a estar compartiendo toneladas de otros ejemplos en el camino. Los estudios de casos son de lejos
lo número uno de lo que
me preguntan en mi
Instagram y YouTube, así que estoy muy emocionado de mostrarles
finalmente este proceso completo que
pueden hacer ustedes mismos. Vamos a bucear justo en. [ MÚSICA]
2. Resumen del proyecto: El proyecto para esta clase
es para que usted cree un estudio de caso fuerte a partir de un proyecto
que ya ha hecho. No importa si este es el primer o 31 proyecto
que has hecho alguna vez, probablemente nunca
te hayas acercado estudios de
casos exactamente
como este antes. A medida que vas, siéntete libre de
ponerle tus propios toques y seguir tu propio camino con él si
tienes ideas diferentes
de lo que muestro. Mi trabajo es solo
guiarte a través este proceso y
mostrarte lo que
me funciona para crear un estudio de caso que en
realidad
sea interesante de leer y mirar. Primero, empezaremos
recogiendo todas las cosas de tu proyecto. A continuación, describiremos
y escribiremos el contenido. Entonces realmente diseñaremos el caso práctico en
Adobe XD sin embargo, puedes usar cualquier
programa que quieras. En el camino,
estaré compartiendo consejos y tutoriales para cosas
que quizá quieras incluir
en esta parte. Por último, pasaremos por
las mejores formas de subir y publicar tus
estudios de caso a Behance, si es ahí donde
decides mostrarlo. Por supuesto, también puedes
mostrarlo en tu sitio de
cartera personal. Estaré compartiendo un paso de acción al final de
cada lección. Recomiendo seguirme a lo largo de este
proceso y publicar tu trabajo abajo en
la sección de discusión para retroalimentación y
hacer preguntas. Pero por supuesto, ya sabes
cómo aprendes mejor, así que siéntete libre de moverte por la clase al
ritmo que quieras. Cualquier nuevo proyecto
puede parecer desalentador, pero
te voy a estar dando pasos sencillos y
sencillos para que
si sigues esta clase, tendrás un estudio de
caso terminado al final. [ MÚSICA]
3. Tipos de estudios de caso: Durante mi investigación
para esta clase, miré decenas de casos
prácticos y se me ocurrió cinco categorías diferentes en las
que la tuya podría encajar. Echemos un vistazo a cada uno y los
desgloses para que puedas determinar qué tipo
de estudio de caso
vas a estar elaborando
durante esta clase. Mejora número 1, ya
existía
un producto y el objetivo de tu proyecto era mejorarlo de alguna manera, tal vez a través de mejores flujos de usuario, nuevas características o
mejor organización. Este caso de estudio de
Amy Lima por causa es un gran ejemplo de
esto porque
ya llevan más de 30 años en el negocio
, pero querían pivote para vender sus pólizas de seguro
directamente al consumidor. Para hacer eso, necesitaban mejorar
su experiencia de usuario para lo suficientemente simple como para que
sus millennials demográficos, conocedores de la
tecnología pudieran
usar y confiar en ellos. Número 2, re-imagina. Se nota una oportunidad para mejorar un espacio problemático utilizando nuevas soluciones que
podrían no
haberse implementado de inmediato. Este proyecto de guía de televisión Abdallah Salem hace
esto realmente bien. Notan que
hay
más opciones que nunca en este momento cuando se
trata de qué
ver y esas opciones
están muy fragmentadas y dispersas en torno a docenas de
proveedores y plataformas. Su solución incluyó búsqueda
universal, personalización y recomendaciones
inteligentes. Número 3, tierra arriba. Tu proyecto abarca desde la concepción hasta el lanzamiento
de un nuevo producto. Esto es en lo que cae mi proyecto
en bubble. Considero que este caso de estudio come explorer de Tony Jean
se cultiva. Es una aplicación de traducción para menús de
restaurantes para ayudar a romper las barreras culturales de la comida diseñada
específicamente para estudiantes
internacionales. Número 4, visionario. Tu proyecto es de
naturaleza conceptual y no
necesariamente ligado a un negocio aunque tienen ideas y
oportunidades
futuristas para los negocios. Diría que los
tres casos prácticos en los que trabajé en Adobe
entran en esta categoría. Este proyecto, buena vecina de Julie Sandusky es conceptual, pero tiene toneladas
de oportunidades en el mundo real porque se
basó en investigaciones
reales y problemas que
reducen el desperdicio de alimentos por facilitar el
intercambio de alimentos dentro de las comunidades. Número 5, culminación. Esto definitivamente es menos común en lo
que respecta a las carteras, pero definitivamente sigue siendo un trabajo
valioso. Con este tipo, tu
proyecto es más un análisis
de conjuntos de datos, mostrando resultados de investigaciones
que podrían ayudar a dar forma a un proyecto o ayudar a otros diseñadores a aprender
sobre un área específica. Este artículo de BMR
detalla el estado actual de las
experiencias de
checkout y e-commerce a través ocho trampas comunes
y mejores prácticas. Determinar la categoría en la que cae
un proyecto te
ayudará a descubrir la historia que vas
a estar contando, que vamos a entrar en mucho más
detalle en futuras lecciones. Pero el único elemento de acción para esta lección es dar que algún pensamiento y ver si alguno de estos describe el proyecto con el
que estás trabajando. Una vez que tengas eso abajo,
siéntete libre de sumergirte
más profundamente en cualquiera de los
ejemplos que mostré. Voy a estar
dejando un enlace en la sección de recursos a una
pequeña base de datos donde he recopilado todos los ejemplos
realmente buenos de estudios de casos que
encontré durante mi investigación. Siéntete libre de comprobar eso y te
veré en la siguiente
lección donde vamos a
empezar a compilar todos los materiales de
tu proyecto prepararte
para descifrar
este caso de estudio.
4. Compilar las piezas: Antes de ir más allá, quiero darles
una visión general de lo que conforma un convincente estudio de
caso. ¿ Cuáles son los imprescindibles, cuáles son los agradables para los que tienen? ¿ En qué deberías enfocarte, en qué no deberías enfocarte? Ahora recuerda,
vamos a entrar en mucho más detalle sobre todas estas cosas en futuras lecciones, así que no voy a pasar
demasiado tiempo en ellas, pero sí quiero darte una visión
rápida para que puedas tenerlos en cuenta mientras estás
reuniendo tus materiales. Mis imprescindibles son una declaración de problema
u oportunidad. ¿ Cuáles son los objetivos? ¿Cómo
sería el éxito? Tu rol y con quién
trabajaste, no la
gente específica por supuesto, sino sus roles y cómo
se unió el equipo. ¿ Por qué tomaste ciertas decisiones? ¿ Qué impulsó su
dirección de diseño y priorización? Por lo general eso es en forma de alguna investigación,
formal o informal. Algunos trabajos de proceso, visuales de sus entregables
finales y resultados o métricas de éxito. Algunos agradables a los que tienen podrían ser una explicación en profundidad de
sus investigaciones y hallazgos, que podrían ser cotizaciones o datos, un sistema visual o pautas de
marca. Más artefactos de proceso
como empatía, mapas, personas, sitemaps, flujos de usuarios. Maquetas que son interactivas para resaltar características específicas. Tal vez una hoja de ruta
futura si algunas cosas no fueran
capaces de ser priorizadas o tal vez se
plantearan algunas
iniciativas que serían beneficiosas de
hacer en el futuro. Por último, los retos que
enfrentaste y cómo los superaste. Quiero recalcar que
no tienes que hacerlo y de hecho, no
deberías incluir
todas estas cosas. Si solo estuvieras abrumado al
escuchar toda mi lista, entonces imagina lo abrumado que
alguien estaría mirando tu estudio de caso que tiene todas las
cosas posibles incluidas. Todo el punto de
esta clase es
enseñarte a contar una historia
convincente. Una historia convincente no incluye toneladas y toneladas
de detalles monótonos. Ten siempre en cuenta a tu lector. ¿ Cuánto tiempo
tienen realmente para leer esto
y entenderlo? Se trata de
mantenerlo conciso. Pero es importante reunir
todo primero y luego determinar qué es importante y lo que no está en
contar tu historia. Esta lección, vamos a
estar compilando todo, y más tarde vamos a
tamizar lo que no necesitamos. Con eso dicho, vamos a
crear una nueva carpeta en nuestro escritorio y
etiquetarla el nombre de nuestro proyecto. Por ejemplo, voy a
nombrar a mi estudio de caso de burbuja, luego crear algunas subcarpetas. Aquí están las que
recomiendo la investigación, es donde se pueden poner cosas sobre análisis
competitivos, datos,
grabaciones o notas de entrevistas, materiales de
reclutamiento,
encuestas, resultados, etc. Siguiente carpeta es bocetos. Esto podría incluir escaneos
de sus bocetos analógicos o
capturas de pantalla de bocetos en su iPad o en cualquier
otro lugar que dibuje. A continuación, archivos XD, tal vez tengas diferentes
archivos para tus wireframes, iteración
diferente,
tus diseños finales. Maquetas. Si
ya has marcado
algo o has grabado
algún tutorial, puedes ponerlos ahí. Además, puedes pegar
la plantilla de maqueta que quieras usar ahí, mis favoritos están enlazados a continuación
en la sección de recursos. A continuación se presentan resultados, cualquier análisis de datos o
cotizaciones que tengan que ver con su solución real y lo que probó
y validó. Estos son los resultados de
las métricas de éxito. Por último, tengo una
carpeta llamada Behance, esto es finalmente la guerra
exportará nuestros archivos finales de estudio de
caso a. Toma todo lo que obtuviste de este proyecto y
dátelo a todas las carpetas
diferentes. No te preocupes si no
tienes todas estas cosas, eso está totalmente bien,
pero además no te sientas limitado a todos
los ejemplos que di. Puedes seguir tu
propio camino con esto dependiendo de tu
proyecto si quieres. Nuevamente, solo incluye
todo más adelante, descubriremos qué es
realmente relevante. También recomendaría revisar
este material a medida que
avanza y
organizarlo en las carpetas. Esto refrescará
tu memoria ya que
potencialmente no has visto
este proyecto en un tiempo. Una vez que hayas poblado
estas carpetas con todas las cosas de tu proyecto, pasaremos a
la siguiente lección, que es esbozar tu estudio de caso usando estructuras de
historias. [ MÚSICA]
5. Describe tu estructura de historia: [ MÚSICA] Muy rápido antes de que
saltemos a escribir nuestros contornos, quiero compartir contigo
el error número uno que veo a tanta gente cometiendo cuando estoy revisando carteras y se
trata de trabajo de procesos . Sí, debes enfocarte en parte
del trabajo de proceso que
hiciste pero eso no
significa definir cada
paso del proceso de UX. Creo que muchos de
los estudios de caso que he leído de los diseñadores junior, esbozan un proceso de UX
idílico muy genérico, solo despojando definiciones
de diferentes ejercicios. Por ejemplo, algo como el siguiente creé una persona de usuario. Una persona de usuario es
un arquetípico vamos a usuario cuyos objetivos
y características representan las necesidades
de un grupo más grande de usuarios y luego incluyen una instantánea de su persona de
usuario. Esto no da
ninguna visión de cómo realmente
llegaste
a donde lo hiciste. Directivos de contratación y compañeros
diseñadores ya saben lo es
una persona y
clientes potenciales que podrían estar
mirando su caso de estudio. No se preocupe por su definición
exacta. Estas personas quieren saber
por qué determinaste que personas de
usuario eran importantes para hacer como parte de este proyecto, cómo se te ocurrió
la información su interior y lo más importante, qué ayudó
descubres o decides. Piensa cuál fue el
valor en ese paso y si no es una parte importante
de la historia, solo omita. Sigo siendo traído de vuelta a este punto realmente importante de contar una historia con
tu estudio de caso. Al igual que cualquier historia, ninguna
estructura va a ser exactamente la misma pero podría ayudarte a
pensarlo así. El enunciado del problema es
tu incidente incitante, el resultado final es
tu resolución, y en el medio
tendrás un clímax de algún tipo que es el
descubrimiento o acción más importante que condujo al resultado final y espolvoreado en alrededor
que tendrás alguna otra información que enriquece la historia y
pinta el cuadro. Ahora vamos a pasar por un ejemplo con el proyecto en el que estoy trabajando. Por cada historia primero
hay que establecer la escena. Para mí, creo que es
importante establecer el escenario de quién fue el equipo y
cuáles fueron nuestros roles. Ahora el incidente incitante o el problema u oportunidad
para la acción creciente, quiero incluir mis metas así, cómo sería el éxito, y luego algunos
wireframes, estilos estadounidenses, característica priorización,
flujos de usuario e iteraciones de diseño. Todo esto lleva
al clímax que para esta historia es el lanzamiento de nuestro MVP o
producto mínimo viable a nuestros usuarios beta. Después, para la siguiente acción, incluiré los datos
que fueron recopilados y las ideas recogidas
del lanzamiento. Para la resolución, voy a incluir las métricas de
éxito final. Esta es mi estructura de la historia pero recuerda que hay diferentes
tipos de estudios de caso. ¿ Y si el tuyo no es un proyecto de base sino una
de las otras cuatro categorías? Tomemos un minuto
para ilustrar las estructuras
potenciales de la historia para
las otras cuatro
categorías que
esbozamos en menos de tres,
empezando por la mejora. Un estudio de caso de mejora podría
verse algo así. Tenemos la declaración de
oportunidad problemática como el
incidente incitante, entonces tenemos alguna investigación que nos lleva a presentar priorización que
es el incidente incitante. Averiguando en qué
vamos a estar trabajando. Podríamos encontrarnos con
algunos retos, por lo que eso sería algo que delinear
a continuación. medida que estás trabajando a través de
esos desafíos, probablemente
estés trabajando
en diseños e iteraciones conducen al clímax
que es un lanzamiento de características. Lanzando lo
que pensamos va a mejorar el producto
y después de eso, como conclusión, por supuesto, hablaremos de si
en realidad sí mejoró
el producto. ¿ Cuáles fueron los resultados o las métricas
de
éxito de este proyecto? A continuación se reimagina. Nuevamente, comenzaremos con la declaración de problema
u oportunidad. A continuación, podríamos incluir
contenido sobre analizar las soluciones actuales que ya
están ahí afuera porque si estamos
re-imaginando algo, más probable es que haya algún análisis competitivo que lo hemos hecho a lo largo de
este proyecto. A continuación, podrías esbozar los impulsores clave o en base a
la investigación que hiciste, ¿qué quieres que tenga la
nueva solución? Antes de esta nueva solución, podrías delinear la investigación, tu estrategia incluye algunos
wireframes y diseños. El clímax aquí por supuesto, es la nueva solución propuesta. Entonces tal vez quieras
mostrar las reacciones
que la gente tuvo ante esta nueva solución o
resultados de prueba que obtuviste de ella. Por último, dado que esto es simplemente re-imaginarse y es
sólo una solución propuesta, podrías terminar
con los siguientes pasos, tomas o un resumen ya que esto probablemente no sea el final del
camino para este proyecto. A continuación es visionario y de nuevo, probablemente
estés harto de
escuchar esto pero siempre
empezamos con el problema
u oportunidad. A continuación, dado que se trata más
de un proyecto conceptual, posible que
desee
exponer su hipótesis para hablar de
qué beneficios se imagina podría venir
de una solución como esta. Entonces, empieza a
entrar en tu investigación, diferentes iteraciones, tal vez algunos desafíos a los
que te enfrentas, todos previos a esta solución
potencial. A continuación, al igual que la
última se puede
hablar de algunas de las
reacciones que la gente tuvo a esta solución potencial
si pudieras mostrársela a cualquier usuario
o negocio potenciales y terminarlo con cualesquiera que sean los próximos pasos
pudieran venir de esto. Por último, la combinación. Aquí, vas a empezar con
un problema o una pregunta. Podrías exponer tu
tesis o proposición y la
mayor parte de este
estudio de caso va a ser evidencia y ejemplos. El clímax aquí es qué acción debe tomar
el lector
y después de eso para
terminar se puede realmente simplemente resumir estos hallazgos que
compartió. Ahora es tu turno. Adelante y esboza una estructura de historia
basada en todo lo que
has aprendido aquí. Puede ser uno que ya
compartí o podrías
usar algo que sea un poco diferente
dependiendo de tu proyecto y llénalo con
estos puntos de historia,
pensando en cómo la historia
de tu proyecto desplegado. ¿ Cómo llegaste del
problema a la solución? Siéntase libre de tomar una
foto o una captura de pantalla de esto y compartirla a continuación en
la sección de discusión. Me encantaría verlo y
sé que otros estudiantes se
beneficiarían de ver un montón
de ejemplos diferentes. En la siguiente lección,
vamos a usar este pequeño boceto de
estructura de la historia para crear nuestro esquema y luego
en realidad empezar a escribir la copia que va a
componer tu caso de estudio. [ MÚSICA]
6. Escribe el contenido: Ahora, es el momento de realmente romperse en este estudio de caso. Si eres algo como yo, escribir el contenido es con
mucho la parte más desalentadora. Pero no te preocupes,
vamos a descomponer esto en trozos digeribles. Una vez que hayas terminado con esta parte, el resto del proceso se va a desplegar de manera
muy natural. Me gusta empezar
abriendo un nuevo Google Doc. Ya que odio comenzar
con una página en blanco, crearé un esquema de
viñeta basado en la estructura de la historia
que ya creamos. Empecemos a escribir eso. Estamos empezando con
alguna información de fondo. Aquí incluirá el cuándo, el quién, y un poco
más de información sobre mi rol. A continuación está la declaración del problema. Aquí tendré la declaración
real del problema u oportunidad. Entonces creo que aquí quiero tener algunas visuales de
esa oportunidad, y esto tendrá más sentido a
medida que conozcas un poco
mi proyecto, ya que trabajamos en esto. A continuación, llamo a esta
sección el camino a MVP. Objetivos o cómo sería
el éxito, priorización de
funciones,
incluiremos wireframes, estilos de
interfaz de usuario, flujos de usuario, iteraciones de
diseño, y
aquí creo que quiero
mostrar cada característica o flujo. Poner visuales. A continuación está el lanzamiento,
para que ese clímax. Hablar de lanzar
MVP a nuestros usuarios Beta. Podría empezar a
hablar de marketing, así que cómo conseguimos a los usuarios Beta. Después de ese lanzamiento inicial, hablaré de desafíos
y mejoras, por lo que algunos datos recopilados
y insights que recopilamos, más priorización de funciones,
y más iteraciones. Por último, la resolución va a ser algunas métricas de
éxito, cualquier toma de decisiones, y aprendizajes. Ahora que tenemos este
esqueleto con el que trabajar, podemos tomar el próximo
par de horas, tal vez mucho más rápido si
eres un escritor rápido, y empezar a agregar
alguna explicación a cada uno de estos viñetas. Voy a hacer
eso ahora y
volver a hablar de
cómo me acerqué. Voy a pasar por esto a un
alto nivel, pero por supuesto, puedes echar un vistazo al estudio de caso
real en vivo si quieres leer
cada palabra. Primero, pasemos por
la información de fondo. Decidí que quería incluir la línea de tiempo, los miembros del equipo, y luego un
poco más en mi papel ya que mi papel no era
solo en el diseño
de productos, sino que en realidad hice muchas otras cosas también. Quería asegurarme de
que eso fuera claro. Entonces me tomé algún tiempo para
escribir mi declaración de problemas. Esto en realidad me llevó un tiempo. Lo leeré para ustedes
ya que esta es una de las partes más importantes
del estudio de caso. Tanto de lo jugoso de lo social sucede en
la sección de comentarios. Dado que social se está
moviendo cada vez más hacia el contenido de
video de forma corta, ¿por qué no debería
comentar seguir ejemplo? Notamos que esto en realidad
ya está sucediendo, pero no hay grandes herramientas o plataformas por ahí
que lo incentiven. Este contenido de comentario
que podría ser tan rico,
divertido, informativo, o
perspicaz, simplemente se siente aficionado. Para que el problema. Hice una nota aquí que
quiero incluir un visual
del efecto de pantalla verde
en TikTok porque eso un ejemplo de cómo esto ya
está sucediendo, pero se ve y
se siente realmente aficionado porque hay no es mucho lo que ayude a la gente a hacer esto. Ese
efecto de pantalla verde es bueno, pero es super glitchy y simplemente no se ve
muy profesional. Entonces nos metemos en
la oportunidad. Aprovechamos esta oportunidad
para construir Bubble; la aplicación de
comentarios de video social que permite los usuarios agarrar cualquier
contenido de la web, grabar un breve
comentario de video encima de ella, y obtener reacciones
de su amigos. Todo eso es mi declaración de problema
y oportunidad. Entonces tengo esto que pone un
poco
la escena, pero para ser honesto, no
estoy totalmente seguro si
voy a usar esto o no. Podría ser exagerado. Entonces si te das cuenta aquí, no
voy a nombrar a estas
secciones titulares del proceso UX. Les estoy nombrando algo
más específico para el proyecto. Este rubro principal se va
a llamar Camino a MVP. Esbozo los objetivos, y por esos objetivos, qué características terminamos
queriendo priorizar. Cada vez que tengo
viñetas aquí en el contorno, esos realmente van a ser viñetas en el estudio de caso. No todo tiene que ser escrito
en formato de párrafo. Los puntos de bala son una muy
buena manera de
cruzar tu punto sin obligar a
alguien a leer tanto. Tengo más notas aquí sobre
lo que quiero incluir. Después de la priorización de funciones, tal vez
quiera mostrar un flujo animado para
cada una de estas características. Quizás wireframes o un boceto de
mapa de viaje para cada uno también, luego iteraciones de la interfaz de usuario. Quiero escoger una de las
pantallas y mostrar cómo
evolucionó la interfaz de usuario desde la primera
iteración hasta la final. Quizás esbozar algunas cosas que entraron en
ese proceso como, no
nos gustó esto
por XYZ, esto no funcionó bien
con los usuarios por XYZ, y mostrar cómo llegamos de la A a la Z. A continuación, voy a
mostrar un poco sobre el sistema de diseño. Esto no es 100 por ciento
necesario, pero como dije, también
hice otras cosas
que solo diseño de producto. trabajé mucho en el
branding,
así que pensé que sería
bueno demostrarlo aquí. Quiero esbozar
algunos retos y compromisos que tuvimos que hacer. Porque cuando se trata de un MVP, es solo que el producto
mínimo viable. Solo quiero mostrar algunos de los compromisos
que tuvimos que hacer. Entonces hablaré del
lanzamiento Beta, lanzando el MVP, y cómo conseguimos a esos usuarios Beta, un poco de
marketing ya que tuve algún trabajo de diseño de marketing
que entró en este proyecto. Después de eso, ¿qué ideas y mejoras salieron de eso? Datos que recopilamos, y específicamente donde
voy a obtener esos datos, algo así como
informes de errores que tenemos, retroalimentación de
aplicaciones dentro de
la app Bubble. Más priorización de funciones, y notas aquí que
puedes leer sobre lo queremos mejorar
después de recibir retroalimentación. Por último, el lanzamiento público. ¿ Cuáles fueron los resultados de eso? Tenemos todos estos
resultados que
tengo y cualquier toma
en el aprendizaje. A lo mejor no tienes todos estos
datos, eso está totalmente bien. Simplemente puedes mostrar tal vez
una cotización de lo que alguien dijo cuando interactuaron
con esto
que demostró que podría ser una buena solución
potencial. Cotizaciones positivas, negativas, cosas así. También podrías simplemente compartir tus tomas y
aprendizajes del proyecto, sobre todo si se trata de
un proyecto escolar o uno de tus primeros proyectos, o un proyecto desde bootcamp. No todo va
a tener todos estos datos, y eso está totalmente bien. Por ejemplo, algunos de los aprendizajes más personales
que quería compartir, estoy incluyendo al final. Trabajar rápido y obtener
retroalimentación temprano fue algo que realmente
saqué de este proyecto. Es algo en lo que no era
muy bueno antes empezar el proyecto y acabo aprender
lo importante que es y me puse mucho mejor en ello a lo
largo de este trabajo. Ahora, quiero compartir
algunos consejos generales para escribir este
tipo de contenidos. Primero, gravamen en encabezados
y subtítulos. Esto realmente ayudará a lograr
un equilibrio entre la profundidad, y de un vistazo la digestibilidad. Tener un
estudio de caso desnatable es realmente importante, especialmente para contratar gerentes. Intenta escribir como
si estuvieras contándole a un compañero amigo diseñador
sobre este proyecto. No te quedarías atascado en
las malas hierbas con los detalles, pero destacarías las cosas más importantes o
interesantes. No definas el proceso UX, hables de lo que realmente
hiciste y cuentes esa historia. Manténgalo breve. No tendría más de tres
frases por párrafo. Si una sección se está alargando, piense en a, cortando cualquier pelusa
innecesaria o b, dividiéndola en dos secciones que cada una tiene un punto principal. Vuelve a la cuarta lección
si necesitas un repaso sobre los imprescindibles frente a
los bonitos que tienen. Por último, no escribas lo que
podrías mostrar con visuales. Mientras estás escribiendo,
solo haz una nota de qué visuales
vas a mostrar dónde. Por lo general, pongo estas
notas en cursiva
entre paréntesis para que se
destaquen entre paréntesis para que se
destaquen contra del contenido escrito. Por último, siéntete libre de echar un vistazo a los ejemplos en mi mini
base de datos si te quedas atascado. Pero tampoco te paralicen
la trampa de comparación. El proyecto de todos
es tan diferente, así que intenta ir con tu arma. El paso de acción
para esta lección es el más duro, pero puedes hacerlo. Ve a escribir ese contenido y te
prometo si le pones
algo de pensamiento, el resto de este proceso
será una navegación suave. Como siempre, siéntete libre de hacer preguntas abajo en la sección de
discusión, y estaría
encantado de ayudar si puedo. En la siguiente lección,
vamos a abrir Adobe XD o su herramienta de
diseño de elección, y que su archivo esté
listo para funcionar. Vuelve y te veré en esa lección cuando
estés listo para ello. [ MÚSICA]
7. Configurar tu archivo XD: A la hora de
configurar tu archivo, tienes dos opciones. Ahora es el momento de decidir
si quieres optimizar tu caso de estudio para Behance
o tu sitio personal. Te voy a mostrar
rápidamente cómo hacer ambas cosas. Pero, ¿cuáles son los pros
y los contras de cada uno? En mi opinión, no puedes
equivocarte con Behance, sobre todo si
buscas nuevas oportunidades o estás interesado en conseguir
tu trabajo por ahí frente a
otros diseñadores, Behance es un gran
lugar para eso. Debido a que he sido
destacado en Behance, en realidad
consigo muchas
consultas de trabajo en mis DMs de Behance. Dicho esto cuando se
trata de Behance, definitivamente
hay mucha
menos flexibilidad en cuanto a
diseñar tu contenido,
específicamente tu texto. Por eso tomo
el enfoque de diseño que hago al diseñar todo el texto en Adobe XD y
exportarlos como PNGs. Sin embargo, con este enfoque, no se puede optimizar para otros puntos de interrupción, específicamente móviles, por lo que normalmente trato de mantener
el texto bastante grande. Eso me lleva a los pros de optimizar para su sitio
personal, como en Webflow,
Squarespace, o donde sea que aloja y construya su sitio web. Si vas con eso,
puedes tratar esto como más de
un
proyecto de diseño de página web real porque
en realidad tienes control sobre el diseño exacto y cómo se escala en diferentes puntos de interrupción. El otro pro a esto es tener tu propio pequeño espacio en Internet por lo general te
hace parecer un poco más profesional y
tienes un control completo sobre lo que el usuario ve como está viendo
su estudio de caso. Esos son los
pros y los contras en mi opinión, pero ¿por qué no puedes tener
lo mejor de ambos mundos? En realidad hay un
par de formas de hacerlo. Número 1, tener tu
propia página web personal y en la sección de trabajo, crea miniaturas para
cada pieza de trabajo que enlazen con el proyecto
correspondiente de Behance. Esto es lo que hago ahora. Tenga en cuenta que tengo el proyecto
Behance abierto en una nueva pestaña para que
nunca se les quite a los usuarios de mi sitio. Número 2, tenga su trabajo optimizado para
Behance en Behance, pero luego también tenga una versión
en su portafolio personal. Dependiendo de cuántos estudios de
caso
tengas y cuán profundos sean, esto podría ser realmente
lento. Es algo que personalmente he querido hacer desde hace mucho tiempo, pero simplemente no he hecho
tiempo para todavía. La buena noticia sin embargo, es que si decides
comenzar con Behance, siempre
puedes usar el
diseño Behance que creas y volver a él más tarde para construirlo en Webflow
o Squarespace. No tienes que diseñar diseños
completamente diferentes. Con todo eso dicho, la única diferencia en cómo configurarías
tu tablero de arte para cada acercamiento es la
altura de tus tableros de arte. Si decides que quieres optimizar
para Behance, vas a querer
crear una pila vertical tableros
de arte que tengan 1920 píxeles de ancho por
1080 píxeles de alto. Mantén siempre el ancho igual, pero puedes variar
un poco la altura y no importará. Después a un lado, crea otro tablero de arte
que sea 808 por 632 pixeles. Esto será para tu miniatura. Si estás mezclando Behance completo y
solo quieres usar XD
para diseñar el diseño de la página que
vas a construir en
tu creador de sitios web. Simplemente diseñarás en un solo tablero de arte de
1920 píxeles de ancho que terminará siendo todo el
tiempo que quieras. Entonces también recomendaría crear un tablero de arte largo con un ancho compatible con
dispositivos móviles. Yo uso 375 pixeles ya que ese es el ancho más pequeño del teléfono
común. Ten en cuenta que
construir una página web en Webflow o Squarespace
no forma parte de esta clase. [ MÚSICA] Si aún no tienes
experiencia haciendo eso o no
tienes un
portafolio personal en este momento, entonces te recomendaría simplemente quedarte con Behance por el momento. Eso es todo para la
configuración, bastante fácil. A continuación completaremos tu panel de activos de
diseño y tu archivo XD con todos los estilos que vas a necesitar
para tu caso práctico.
8. Define tus estilos: Ahora que tenemos nuestro archivo
XD todo configurado, hagamos las cosas fáciles en
nosotros mismos y llenemos nuestro panel de activos con todos los estilos que vamos
a necesitar en el futuro. Esto es súper fácil porque
es probable que quieras usar los mismos estilos que
utilizaste en el propio proyecto. Esto podría ser tan sencillo
como desnatar a través tus bibliotecas XD y tirar de la que
usas para tu proyecto. Si no lo has
hecho o no estás familiarizado con cómo funcionan
las bibliotecas en XD, es realmente simple. Vamos
a pasar por eso ahora. Hay tres cosas
que guarda una biblioteca,
colores, estilos de tipo,
y componentes. Para un estudio de caso como este, los colores y estilos de tipo son
definitivamente los más importantes. Dentro de este archivo de proyecto sólo
voy a
dirigir su atención a la izquierda donde
tenemos nuestro panel de activos. Se puede ver que tenemos colores, estilos de
carácter,
y componentes. Los componentes son como símbolos, pero de nuevo sólo
vamos a enfocarnos en colores y estilos de texto. La forma en que consigues que estos poblen aquí es súper simple. Digamos que
eliminamos esto por ahora, este rojo, y va a
decir que quiero agregarlo. Sólo estoy seleccionando un elemento
que sea de ese color, y estoy subiendo aquí y
haciendo clic en el botón más, y luego llamamos a
este registro rojo. También puedes hacer lo
mismo por los textiles. A lo mejor quiero un
estilo para esta etiqueta, solo
puedo golpear plus aquí. Pero y si quiero poder acceder
a estos activos desde
un archivo diferente
como mi expediente de estudio de caso. Realmente se puede
publicar fácilmente esto como una biblioteca. Vamos a llegar
a este ícono de compartir. Me va a decir
que este archivo actual está listo para ser publicado, así que sólo estoy golpeando Publish. Ahora si cambio a mi archivo de
estudio de caso , puedo ir aquí, golpear Ver bibliotecas,
y puedo encontrar esta biblioteca aquí mismo donde puedo tirar todos
estos mismos estilos en. Si ni siquiera te
apetece lidiar con eso, solo
puedes copiar y
pegar algunos elementos o pantallas de tu archivo y agarrar los colores y estilos de texto y agregarlos a una nueva biblioteca
en este caso práctico archivo. Por supuesto que no te
limitas a nada aquí. Probablemente voy
a necesitar hacer muchos
estilos de estos textos más grandes, porque antes estaba
diseñando para una aplicación móvil, ahora voy a estar diseñando
para un estudio de caso de Behance. También es posible que tengas que
agregar más estilos de texto, e incluso puedes cambiar las cosas y usar una fuente
completamente diferente. Puedes usar diferentes
colores si quieres, depende totalmente de ti, pero es mucho más fácil, en mi opinión solo tener
este lugar para empezar. También es importante
tener en cuenta que
puedes alternar de ida
y vuelta entre tus bibliotecas y los activos
documentales que tienes, por lo que estos activos que
son específicos de
este documento frente a tirar
de un biblioteca diferente. En este punto, también
puedes empezar a traer algunos iconos diferentes, o logotipos, o ilustraciones, si alguno de eso es
relevante para tu proyecto. O bien puedes
mantenerlos alejados a un costado o
puedes golpear el comando
K y en realidad
convertirlos en componentes
que van a vivir abajo en esta sección para ser tirado
siempre que los necesites, y vamos a estar profundizando
mucho en
los visuales en la lección futura, así que si aún no tienes nada
así, no te preocupes. Una vez que tengas algunos estilos listos en tu expediente de estudio de caso, siéntete libre de pasar
a la siguiente lección donde voy a
estar respondiendo una de las preguntas más comunes que
obtengo sobre mi Behance
estudios de casos. [ MÚSICA]
9. Consigue esa mirada perfecta: [ ANTECEDENTES] Quiero responder a una pregunta frecuente antes de sumergirnos en
construir este estudio de caso, ¿cómo hago que mis estudios de
caso
parezcan un desplazamiento suave, página web
sin fisuras, pesar de que están
formados por un montón de tableros de
arte diferentes
separados y la respuesta es elementos
superpuestos. Permítanme mostrarles algunos ejemplos. Este es uno de mis antiguos
estudios de caso y quiero mostrarte justo cuántos elementos
superpuestos utilizo para lograr este look. En primer lugar, hablaremos de
los elementos de fondo. Si acabamos de mover este iPhone
fuera del camino por ahora, se
puede ver que el color de
fondo de
ambos de estos tableros de arte
es este color gris beige. Lo que tengo encima es este tipo
blanco de forma de onda. Lo que he hecho es que en
realidad
lo he duplicado en ambos
tableros de arte así que si ves, si elimino esa, puedes ver que
en realidad hay dos formas separadas. Si acabo de golpear “Comando
C” y luego voy a este tablero de arte y
golpear “Comando V” Se va a pegar por
defecto en su lugar. Pero si solo lo escojo
hasta que esté perfectamente
en línea como esta y luego hago “Comando soporte izquierdo” hasta
que vaya a la parte de atrás. Entonces he creado esta forma que continúa en dos tableros de arte
diferentes. Eso es sólo el fondo. Hago esto en algunos lugares
diferentes. Aquí, he usado esta forma de
onda que es verde, en lugar de tener esta transición
realmente aguda donde definitivamente se ve
como dos tableros de arte separados, he venido con esta forma de onda
verde para que sea especie de fluye un poco más suavemente
en este contenido. Hago lo mismo
aquí con esta forma, y lo hago con otros
elementos también, por ejemplo, esta maqueta de iPhone, se puede ver que en realidad son dos imágenes
diferentes. Lo he duplicado en este tablero de arte y luego
simplemente lo vuelvo a levantar para que se
alinee perfectamente y parezca una perfecta continuación
del elemento visual. He hecho
lo mismo con esta imagen. Aquí abajo
lo he hecho con esta maqueta. La gente se
tropeza con esto porque tableros de
arte actúan como máscaras. No puedes simplemente lanzar
un elemento entre dos tableros de arte y obtener el efecto
exacto que deseas. En cambio hay que
copiarlo manualmente, pegarlo y alinearlo. Que se duplique en un tablero de
arte y el otro. Es súper fácil aunque solo
acerque todo el camino y comprueba que la continuación
sea una combinación perfecta. Probablemente hace
falta decir que tienes que tener tus tableros de
arte exactamente alineados como a tope
entre
sí para
que esto funcione. Eso es todo. Es un consejo simple, pero va un largo camino en
darte la capacidad de hacer que tu proyecto Behance desplace
sin problemas como un sitio web y súper flexible con cómo
quieres que se vea. Prueba esto con un par de diferentes formas o máscaras o fotos y mira si puedes jugar
con cómo funciona esto, entonces estarás listo para
aplicar la técnica cuando realmente
iniciemos construyendo su caso
[ANTECEDENTES] [MÚSICA] estudiar en la siguiente lección [MÚSICA].
10. ¡Construye ese estudio de caso!: Ahora que tienes todas las partes necesarias para crear
este caso de estudio, realmente
es el momento de
empezar a desconcertarlas. Adelante y abre
todo lo que tienes. Deberías tener el archivo de diseño
vacío que acabas de configurar
para tu caso práctico, cualquier archivo de diseño de
tu propio proyecto, tu esquema escrito,
y tu carpeta llena de notas de proyecto y trabajo en
curso y cosas así. Lo primero que me
gusta hacer es crear la imagen de cabecera que dará
inicio a mi caso de estudio. Esto puede ser en cualquier
estilo que te guste. Junto a lo más
importante que es un visual
fuerte en
esta sección de encabezado, también
me gusta incluir
el título de mi proyecto, una descripción unifilar, y un poco
de información de fondo para el contexto inmediato. Entonces apenas empiezo
a moverme por las diferentes
secciones de mi contorno y
copiando y pegando la copia en mi expediente de estudio de
caso, colocándola en el tablero de arte, y todo el tiempo
pensando en lo que puedo mostrar versus solo decir. Por ejemplo, en mi
declaración de problemas recuerdas que hice referencia al efecto de
pantalla verde en Tiktok. Voy a mostrar una captura de pantalla
real, tal vez incluso un GIF de eso. Hay un visual emparejado con verbal que realmente saca
el punto a través de esto es lo que está sucediendo
ahora y hay esta oportunidad para
una mejor solución. [ MÚSICA] Una vez que he presentado dos
o tres secciones, me gusta asegurarme de
que estén fluyendo muy bien juntos y tengan alguna variación
visual. A veces hago esto
con colores de fondo, a veces con formas,
imágenes, cosas así. Una vez que haga esto puedo repetir ese patrón a
lo largo del resto
del estudio de caso usando estilos consistentes de
encabezado y texto corporal. [ MÚSICA] Al
igual que cualquier
otra cosa en diseño, no
hay una fórmula exacta a este proceso por lo que lo mejor que
puedo hacer es simplemente mostrarte cómo me acerco a ella
y apuntarte a algún otro gran ejemplos en esa base de datos que mencioné
en la sección de recursos. Pero con todo eso dicho, sí
quiero caminar
por un montón de formas
diferentes en que se pudiera presentar
información visualmente. Eso es lo que vamos
a hacer en la próxima lección.
11. Información presente visualmente: A lo largo de su caso de estudio, van a
haber varias
oportunidades diferentes para que usted presente
información visualmente. Esto va a ayudar a que el estudio de
caso sea mucho más digerible,
menos pesado con texto. Hay ocho formas principales por las que vamos
a recorrer; datos, iconografía, gráficos, destacados,
viñetas, cotizaciones, imágenes y maquetas. A medida que vamos,
te voy
a estar mostrando muchos ejemplos de otros casos prácticos así que si
quieres mirar estos
en su totalidad,
solo echa un vistazo a la mini-base de datos enlazada en el recurso sección. En primer lugar, hablemos de datos. En cualquier momento que estés
hablando de métricas o investigaciones, considera
presentarlo con un gráfico de barras, un gráfico circular, o
algo más en visual que los espectadores puedan
entender de un vistazo. Iconografía, cuando
tienes una sección con más de dos o tres puntos
diferentes, mira si puedes usar una serie de iconos para introducir o
representar cada uno. Gráficas. Visuales
no solo tiene que significar imágenes,
formas o iconos. La forma en que
diseñas texto también puede realmente ayudar a que una sección sea
más fácil de leer y entender. Ve si hay alguna sección de tu estudio de caso donde puedas organizar ideas y
texto visualmente. Destacados, al igual que usar un estilo de texto más grande
para tus encabezados, resaltar puntos importantes es otra gran manera de hacer que tu estudio de caso sea más
digerible y desnatable. Bullet points, intente evitar largos párrafos de textos porque no son
fácilmente escaneables. Usa viñetas
siempre que puedas en su lugar. Cotizaciones, si tienes una cotización que fue realmente
informativa durante tu investigación o una que muestre el impacto
de tu solución. Podrías
amplificarlo
diseñándolo para que destaque en
tu caso de estudio. Imagery, personalmente me
gusta usar imágenes para mantener mi estudio de
caso atractivo. Este tipo de visual realmente no hace ni rompe
tu estudio de caso. De hecho, si usas demasiado, realidad puede distraer
de tus puntos principales, así que asegúrate de que cualquier imagen
que uses sea relevante. Normalmente trato de
fotografiar imágenes yo mismo, pero cuando no puedo,
confío en Unsplash. Tienen muchas opciones realmente de
alta calidad que son libres de regalías. Por último, maquetas. maquetas son una pieza realmente
importante de la mayoría de los casos prácticos, así que asegúrate de que estás usando o creando maquetas de
alta calidad. He incluido algunos
de mis favoritos en la
sección de recursos de esta clase. Siéntase libre de
mantenerlos simples o realmente hacerlos suyos
como este ejemplo. Algunos de estos pueden
no ser relevantes para tu estudio de caso y
eso está totalmente bien. Lo peor que puedes hacer es incluir todo y exagerar tu caso de estudio haciéndolo realmente confuso y diluyendo
tu mensaje. Entonces, en caso de duda,
manténgalo conciso. Antes de pasar a
la siguiente lección, aquí tienes tu paso de acción. Diseña cada sección
siguiendo tu estudio de caso
escrito. Esto podría sonar intimidante, pero todo lo que realmente estás haciendo es combinar la parte escrita de tu caso de estudio con cualquier visual o visual
que tenga sentido. Ya has hecho
todo el arduo trabajo de contar la historia. Siéntase libre de dejar
en blanco o crear formas de
placeholder para cualquier área donde desee
incluir animaciones. [ MÚSICA] Vamos a abordar
eso en la siguiente lección.
12. Crea un GIF animado: Amigos nos estamos
acercando realmente a terminar estos estudios de caso. En esta lección, te voy a
guiar a través de cómo crear un GIF animado para incluir
en tus estudios de caso, sin importar dónde
termines publicando. Para mi estudio de caso de burbuja, en realidad no
hay
mucha animación involucrada
en el proyecto. Para mostrarles esto chicos, he saltado a uno de mis proyectos anteriores y estudios de
caso llamado fase. Eso es lo que estamos
viendo aquí. Si te desplazas hacia abajo, puedes ver que he
diseñado esto
igual que he diseñado
mi estudio de caso burbujeado. Tablas de trabajo apiladas verticales como esta que todas tienen
el mismo ancho. Quiero mostrarte lo que
hago cuando decido que
quiero tener una animación
dentro de una de estas secciones. Para esta sección,
quería mostrar
cómo se vería cuando
alguien arrastraba en esta escala
y seleccionaba un número. He creado una animación con
solo duplicar esta mesa de trabajo dos veces aquí y
manipular el diseño. Cada cosa permanece
igual a excepción de
estos pocos elementos. [ RUIDO] Esto, acabo de
mudarme a los siete, y esta línea que acabo arrastrar para que sea
lo suficientemente larga como para llegar a eso. Entonces acabo de duplicar
esta sección en esta próxima mesa de trabajo
y hice lo mismo, trasladé este selector
a los ocho, y luego lo
he cableado en modo prototipo. Si entramos en modo prototipo, he hecho un gatillo de tiempo
y lo puse en un bucle. Después de 0.5 segundos, se animará
automáticamente a esta pantalla. He hecho flexibilización, facilidad y salida, y luego acabo de hacer lo mismo aquí
después de 0.7 segundos, y luego después de 0.7 segundos más, va a
volver al principio. Si no estás súper
familiarizado con animar y usar
auto animate en XD, sí
tengo algunos tutoriales
en mi canal de YouTube que puedes usar como
recursos para ponerse al día ahí. Así es como
se ve esto aquí, esto es lo que estás
viendo aquí, es básicamente solo
una animación en bucle que muestra un
poco de movimiento aquí, eso solo lo hace un poco
más visualmente interesante. Ahora, para capturar
esto como un video, lo que [RUIDO] queremos
hacer es volver a subir a reproducir este prototipo y
sólo vamos a golpear récord. Quiero asegurarme de
que mi mouse esté completamente fuera
del camino, mi cursor, y voy a dejar que
esto reproduzca a través del bucle un par de
veces para asegurarnos que tengamos al menos uno
realmente bueno lleno de la animación en este video. Entonces, dejaré de grabar y voy a guardar este MP4. Tenemos esta animación aquí, y la voy a
abrir en QuickTime Player para que podamos
recortar esto a un ciclo completo. En QuickTime, solo voy
a golpear el Comando T para recortar, y sólo voy a encontrar
un bucle perfecto [MÚSICA]. Justo ahí, se ve bien
y luego voy a hacer el comando S para salvar. [ RUIDO] Sólo voy
a llamar a esto recortado, y podemos deshacernos de
esa más larga allí. Ahora, una aplicación realmente fácil
que he aprendido a usar para convertir un MP4 en
un GIF se llama gifski. Lo puedes encontrar
en la App Store. Se ve así en
la tienda de aplicaciones en Mac, también
hay una herramienta
llamada GiftUna que
puedes usar si estás
usando un PC con Windows, que creo que es
lo mismo. Vamos a abrir eso, [RUIDO] y sólo se
ve así,
esta linda ventanita
cuando lo abres, y sólo voy a arrastrar
este MP4 a la derecha a esa ventana. El único ajuste que queremos
cambiar es el ancho, vamos a hacer la década de 1920, ya que ese es el ancho
del resto de nuestras mesas de trabajo. Queremos asegurarnos de que el
bucle para siempre esté encendido. Tenemos la calidad
todo el camino hacia arriba y el tamaño estimado es de
solo 1.9 megabytes. Esto usualmente forma
sobreestima el tamaño, te
mostraré lo que
en realidad termina siendo. Voy a notar si tienes
una animación mucho más larga, es posible que tengas que rebajar un poco
la calidad, pero en mi experiencia, nunca ha hecho una diferencia
enorme, enorme. Siempre se ve
realmente de alta calidad, por lo
que realmente me
encanta esta herramienta y es gratis si no lo mencioné
ya. Voy a golpear a Convert. Eso tomó menos de 20 segundos, así que ahora sólo
vamos a hacer Guardar como, y lo
guardaremos en nuestro escritorio. Ahora, sólo voy a
seleccionar en él y golpear la Barra Espaciadora para previsualizar cómo va a verse
esto. Como se puede ver, es de
súper alta calidad, la velocidad es agradable, no
es salteado ni laggy en absoluto, todos los colores
se ven súper precisos. Si te gusta cómo se ve esto, sigue adelante y repite
el proceso para cualquier otra animaciones que
quieras incluir en tu caso práctico y pon
todos tus archivos GIF en la carpeta Behance que tú hecho al inicio
de la clase. Usualmente nombro estos archivos
con números basados en el orden en que
aparecerán las mesas de trabajo, en
tu caso de estudio. Puedes mezclar este GIF
con toda tu P, y Gs que estarás
exportando en la siguiente lección. Conoces tu
paso de acción para esta lección, sigue
adelante y crea
tus gifs y
colócalos en la carpeta organizada como
quieras. En la siguiente lección, vamos a estar
exportando el resto de tu estudio de caso y realmente
subirlo a Behance. [ MÚSICA]
13. Exportar y subir: [ MÚSICA] En primer lugar,
sí, lo hiciste. Su caso de estudio por fin
ha terminado, felicitaciones. Ahora todo lo que necesitas hacer es
prepararlo para publicar. Dependiendo del
enfoque que estés tomando, vas a avanzar
en una de las dos direcciones. Si realmente estás
construyendo este
estudio de caso en Squarespace o Webflow, entonces no vas a exportar
realmente
estos tableros de arte. En este caso, solo
vas a querer exportar los activos visuales individuales, como tus imágenes,
formas, maquetas. Simplemente puedes guardar todos esos
elementos en una carpeta y luego cuando vayas
a construir tu página, entonces solo puedes traerlos. No obstante, creo que la mayoría de ustedes
han optimizado para Behance. Si ese es el caso, en realidad
puedes arrastrar, seleccionar cada tablero de arte, pulsar “Comando E” para exportar y exportar estos SPNGs a la carpeta Behance
que creaste anteriormente. Nuevamente, si quieres
mantenerte organizado, por lo general
me gusta nombrar estos tableros de arte en orden
ascendente, empezando por la parte superior, en una, luego 2, 3, 4, etcétera para que puedan mantenerse organizados
en tu Carpeta Behance. A continuación, sumérgete a tu cuenta de
Behance y pulsa “Comparte tu trabajo”. Esto abrirá un nuevo proyecto. Una nota aquí,
vas a ver prototipo como una opción para importar desde XD o Figma y puedes
sentirte absolutamente libre de hacer esto. No obstante, a veces
un prototipo
sin contexto realmente
no hace mucho por tu espectador. Recuerda que todo el punto de
tu caso de estudio es contar la historia de cómo has
resuelto este problema. Antes de ir
agregando un prototipo, pregúntate dónde o si este prototipo
encaja en tu historia. Siguiente pulsa “Imagen”, navega a tu
carpeta Behance y selecciona todos
los PNGs y GIFs que
quieras subir. Una vez que estas cargas,
notarás que hay algún espacio predeterminado
entre ellos. Para eliminar ese golpe “Estilos”
en el lado derecho y cambiarlo de 60 pixeles
a cero luego pulsa “Guardar”. Asegúrate de que tus imágenes estén
en el orden correcto. Si necesita editar
el pedido en absoluto, cursor sobre una imagen, haga clic en ese icono de edición azul
y seleccione reordenar proyecto. Desde aquí se puede cambiar
y guardar el nuevo pedido. Una cosa a tener en cuenta, si estás usando GIFs con colores de
fondo
que no son blancos, puedes notar algo
un poco funky. Debido a que tu GIF puede ser una
imagen de calidad diferente a tus PNGs, el color puede haber cambiado un
poco
en el proceso. Si este es el caso no te preocupes, es una solución súper fácil. Vuelve a XD
y selecciona todos los tableros de arte estático que tengan ese mismo color de fondo. Entra en la herramienta cuentagotas y muestra el color de fondo
GIF exportado. En XD se verá como dos colores de fondo
diferentes, pero una vez que estén todos en Behance, serán perfectamente consistentes. El ítem de acción para
esta lección es simple. Simplemente sigue esos pasos que
hice para subir todo
a un proyecto de Behance y en la siguiente lección agregaremos
los toques finales, como tu miniatura, título del
proyecto, descripción y cualquier
etiqueta. Nos vemos pronto.
14. ¡Termina y Finish: Aquí vienen los toques finales. Has subido todas
tus imágenes en tu proyecto de Behance, y ojalá te hayas
desnatado para asegurarte de que
no haya errores tipográficos o cosas extrañas y
funky sucediendo. Ahora es casi el momento
de golpear “Publicar”, entrar en configuraciones y subir
una miniatura del proyecto. Al inicio
de la clase
te hice montar un
tablero de arte para esto, pero si aún no lo has
diseñado, no te preocupo, te voy a
dar un par de consejos. Número 1, no uses
demasiado texto pero síincluyas
una descripción realmente corta para
que alguien
sepa qué esperar
al hacer incluyas
una descripción realmente corta para
que alguien clic en esto,
cuentan con
maquetas relevantes para que los espectadores
sepan cuentan con
maquetas relevantes para que los espectadores cuál es el real
salida del proyecto fue. Elige la pantalla más
interesante para exhibir en tu maqueta. Personalmente, me gusta tomar
mi diseño de cabecera y simplemente adaptarlo para esta miniatura que terminen buscando
súper similares. A continuación, dale un título a tu proyecto. El título no
importa demasiado si solo estás usando
esto como cartera, pero si estás tratando de obtener
toneladas de uso en la plataforma, intenta nombrarlo algo que la
gente pueda buscar. llamaron los dos proyectos que me
destacaron, Smart Difusor App y
Cycle Syncing App. Pero para ser honesto, mis
títulos podrían no haber tenido nada que ver con ser
destacado. ¿Quién sabe? A continuación, agrega algunas etiquetas. Esta es otra
oportunidad para pensar términos de búsqueda
relevantes
para tu proyecto. Usualmente empiezo con UI, UX, diseño de
productos, y
luego me vuelvo más específico, como la automatización de aplicaciones
móviles de tecnología futura, diseño de
aplicaciones y cosas por el estilo,
luego llene las
herramientas que usaste en el categorías en las que cae tu
proyecto. Por último, agregarás
la descripción
usualmente copio y pego una de las primeras secciones de mi caso de estudio para
este párrafo que introduce
muy bien el proyecto y eso es todo. Revisar todo una
vez más y luego golpear, “Publicar”. Ser destacado
en Behance
no debería ser tu objetivo
porque para ser honesto, tienes muy poco
control sobre eso. No obstante, es posible que
quieras saber que tu proyecto solo es enviado
al equipo de curación de Behance una vez en tu primera publicación. Así que no solo subas la mitad de tu caso práctico y luego
regreses y terminarlo más tarde, solo publica una vez
que hayas terminado por completo. Ya conoces tu paso de acción aquí, llena todos los campos para este proyecto de Behance
y pulsa “Publicar”. En serio, ustedes deberían estar realmente orgullosos de sí mismos
por llegar tan lejos. Esto es mucho trabajo. Realmente espero que
compartan el enlace conmigo en la sección de discusión a continuación. Me
encantaría ver lo que ustedes crearon y sé que otros estudiantes de la
clase realmente se
beneficiarían de ver
estos como inspiración. [ MÚSICA]
15. Conclusión: Primero quiero decir
un enorme enhorramiento por terminar esta clase. Estás un gran paso más cerca de
aterrizar ese próximo trabajo, ganar más credibilidad
como diseñador e inspirar a la comunidad
creativa. Sinceramente me divertí
tanto
llevándote chicos por el
proceso de escribir, diseñar y publicar
tus estudios de caso en profundidad. No olvides
subir tus proyectos a continuación en la sección de
comunidad de clases, realmente
quiero ver en
qué trabajaste. Puedes siéntete libre de publicar el enlace a tu
proyecto o subir algunos de tus tableros de arte favoritos o todos tus tableros de arte, depende totalmente de ti. Si te gustó este estilo de
enseñanza, siéntete libre de echar un vistazo a mi otra
clase aquí en Skillshare. Se llama Intro to UI UX para diseñadores
gráficos así como mi canal de YouTube
e Instagram, donde también comparto
contenido de diseño todo el tiempo. Gracias por seguir
conmigo a lo largo de esto, y espero veros chicos en otra clase o
video muy pronto. Adiós. [MÚSICA] Mis
manos están tan frías. [ RUIDO] Muy genérico idílico,
¿cómo se dice eso? Idílico. Idílico. Vamos amigo,
puedes hacer esto.
Maddy Beard, Product Designer & Educator
