Pasar del diseño gráfico a UI/UX | Diseña una aplicación móvil desde cero | Sepi | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Pasar del diseño gráfico a UI/UX | Diseña una aplicación móvil desde cero

teacher avatar Sepi, Product Designer at Microsoft

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      2:04

    • 2.

      Comprender los roles de diseño

      3:11

    • 3.

      Grandes beneficios para los diseñadores gráficos al diseño de UI/UX

      2:59

    • 4.

      ¿Por qué debes cambiar al diseño de UI/UX o UX

      2:41

    • 5.

      Mapa de la ruta para los diseñadores gráficos

      5:36

    • 6.

      Investigación, Interviews, Interviews, Surveys y análisis de competencia

      12:22

    • 7.

      Análisis, personas, trazos y Flows de usuarios

      4:36

    • 8.

      Explorar y bocar, el marco de Wireframe y el prototipo

      9:40

    • 9.

      Crear, elementos de UI y íconos, íconos, fuentes y colores

      15:44

    • 10.

      Cierre

      1:19

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

5585

Estudiantes

3

Proyectos

Acerca de esta clase

El diseño de UI/UX es el mejor trabajo del mundo.. y esta clase te enseñará a pasar desde el diseño gráfico a este campo de diseño innovador e adventurous

En esta clase de 60 minutos, compartiré mi proceso de diseño y experiencias de hacer un paso del diseño gráfico al diseño UI/UX de UX Aprenderás sobre las similitudes y las diferencias entre estos dos camas, significados de roles de diseño digital, herramientas relevantes que necesitas para aprender y el camino que tomas para convertirse para convertirse en un diseñador UI/UX

En el abordado, el prototipo y la iteración, te enseñaré cómo diseñar una aplicación móvil desde cero. Aprenderás a usar la figura diseñando la interfaz para una aplicación de una simple compartir, compartir. Figma es una herramienta fantástica y colaborativa para sacar tus ideas de tu cabeza, en la pantalla de bellamente.

Esta clase es perfecta para diseñadores de la diseñadores web y cualquier persona que haya estado de prueba el diseño de aplicaciones móviles, pero no sabe por dónde empezar. Las lecciones incluyen:

  • Significado y responsabilidades de diseño digital
  • Similitudes y diferencias del diseño gráfico y el diseño de UI/UX
  • El hoja de trabajo que tomas, las habilidades y las herramientas que necesitas para learn, lo que debes preparar antes de aplicar para una posición de diseño UI/UX
  • Cómo realizar una entrevista de interés para obtener más información sobre el proyecto
  • Mapeo de el viaje de usuarios en un contexto de la cena
  • Cómo tomar entrelas y surveys
  • Explorar el mercado y hacer un análisis competitivo
  • Crear personas, storyboard y el flujo de los usuarios
  • Dibujar ideas, crear trazados y transformarlas en protos de baja fi, y clickable
  • Aprende sobre las diferencias y las directrices de Android y iOS
  • Cómo elegir la paleta de colores adecuada, las fuentes y y los conjuntos de iconos de colores para diseñar la interfaz de usuarios de la aplicación móvil o
  • Diseño de una UI de la aplicación de intercambio parcial con Figma
  • Hacer protos de alta hi-fi con Figma

Prepárate para perfeccionar tus habilidades y crear un cambio de vida en tu carrera de diseño.

Conoce a tu profesor(a)

Teacher Profile Image

Sepi

Product Designer at Microsoft

Profesor(a)

Hi there, I'm Sepi! Originally from Tehran, Iran, I'm now based in Vancouver, Canada. I started my design journey in Graphic Design and made the transition to UX Design in my first job.

With 8 years of experience in Product Design, I've worked on a wide range of projects, from startups to big companies, creating visuals, illustrations, and animations. My Graphic Design background gives me a unique flair for visual design, and I'm excited to share my journey and experiences with you!

In my classes, I'll share insights from my career, tips for landing a design job, and ways to succeed in the industry. I hope you enjoy learning with me and join me on this creative adventure!

Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: Hola. Mi nombre es [inaudible]. Diseño experiencia visual y de usuario para productos digitales. El diseño siempre ha sido mi mayor pasión y se ha convertido en el papel principal de mi vida cuando elegí el diseño gráfico. Después de graduarme, obtuve mi primer trabajo como diseñadora gráfica en una empresa que trabaja en productos sanitarios. Diseño modelos que sin duda ampliamente está diseñado, para trabajar con técnicos, interactuar con diseñadores estadounidenses, medidas de producto [inaudibles], luego [inaudibles] la combinación de diseño y tecnología cosas que [inaudibles] debería mirarlo. Al principio no sabía cómo hacerlo, empiezo por sí mismo como estudiar, tomando cursos en línea, leyendo artículos y viendo tutoriales de YouTube. Me tomó un tiempo aprender los conceptos básicos del proceso de diseño U I Unix, mitologías mixtas y aprender más sobre cómo diseñar un sitio web, aplicación modal, o un dashboard desde cero. Ahora [inaudible] que estoy trabajando como diseñador gráfico [inaudible]. hoy en esta clase, te voy a llevar por todos los pasos que he dado a algún pequeño diseño gráfico a U I diseño Unix. Pero hablaremos de las similitudes y diferencias de los rellenos de acero D. Bueno o a herramientas y software es que necesitas aprender lo que debes hacer para cambiar al diseño U I Unix, y finalmente, vamos a diseñar una aplicación de split sharing juntos. [ inaudible] Tan pronto como genere su primer proyecto U I Unix para su portafolio. Diseñaremos este proyecto en cuatro pasos. En primer lugar vamos a restablecer, yo aliados, pero también sobre entrevistas a usuarios, encuestas en línea y compensar. Siguiente en segundo paso donde todo puede crear personas, storyboards, y flujos de usuarios. [ inaudibles] e ideas de lluvia de ideas como bosquejar, hacer prototipos y crear vibraciones. Por último, diseñarás la U I usando figma. Como [inaudible] para diseñadores gráficos [inaudibles]? [ inaudible] Diseño [inaudible] en sí [inaudible]. 2. Comprender los roles de diseño: Antes de sumergirme en el proyecto, me encantaría darte más información sobre [inaudible]. Érase una vez, el diseño significa diseño gráfico. Pero hoy en día, hay más posiciones relacionadas con el diseño como UI, UX, diseño visual, diseño de atracción, [inaudible] sigue acumulándose. Estoy a punto de darte una definición muy corta para un [inaudible] para que no te confundas con los títulos. Empecemos con el diseño gráfico. El diseño gráfico ha tenido probablemente uno de los mejores títulos de empleo nuevos en el mundo del diseño y la tecnología. A menudo trabajan más con diseños de impresión y entregables. Los diseñadores gráficos conocen los fundamentos del diseño, como la tipografía, la teoría del color, la ilustración, e incluso la fotografía. El otro término que has escuchado con frecuencia, es interfaz de usuario o diseño de interfaz de usuario. En pocas palabras, la interfaz de usuario es cada elemento visual que un usuario podría interactuar con otro dispositivo tecnológico, incluidas las aplicaciones móviles y los sitios web. Un diseñador de UI es esencialmente el encargado de cómo todo se alinea en la página en relación entre sí. Ella decide el trabajo superior de elementos como [inaudible], textiles, colores, etc. El objetivo es hacer que la interacción sea lo más simple y eficiente posible. Por otro lado, UX, que significa diseño de experiencia de usuario. Se preocupa principalmente de cómo se siente el producto. Los diseñadores de UX miran el diseño desde la mentalidad de un usuario y resuelven problemas potenciales. Para hacerlo, investigan, dibujan, hacen prototipos a partir de marcos blancos, y hacen diversos tipos de pruebas con los usuarios para mejorar la idea inicial. La interfaz de usuario se centra en cómo se ve y opera un producto. Esto incluye todo, desde diseñar el flujo de navegación de un sitio web hasta su diseño visual. UX, sin embargo, se centra en cómo se siente el producto y se asegura de que todo sea satisfactorio para los usuarios y los hace felices. Imagina un cuerpo humano, los huesos son el código. UX es todo en su interior que hace que el cuerpo funcione bien y la UI es todo fuera que hace que el cuerpo se vea atractivo y agradable. La otra regla de diseño es el diseño visual. El diseño visual nació de una mezcla de diseño gráfico y de interfaz de usuario. Se enfoca en visuales de un sitio web o de cualquier otro producto digital. ¿ Se ve bien el producto acabado? Esa es la pregunta que responden los diseñadores visuales. También, es posible que haya escuchado a diseñador de productos. Diseñador de productos es una suma de término para describir a un diseñador que generalmente está involucrado en la creación del look, UI, and feel, UX, de todo un producto. ¿ Entendiste los objetivos de negocio? ¿ Qué problema va a resolver este producto? ¿ Quién tiene este problema? Trabajan con mayores alcances de responsabilidad y supervisa la visión del producto desde alto nivel. Hay otras posiciones relacionadas con el diseño en la industria pero quería destacar las que quizá hayas escuchado con frecuencia. En el siguiente video, vamos a hablar de por qué los buenos diseñadores gráficos con capacidades de diseño fuertes pueden cambiar fácilmente al diseño UI/UX. ¿ Cuáles son las similitudes entre estos dos campos? 3. Grandes beneficios para los diseñadores gráficos al diseño de UI/UX: El diseño gráfico y el diseño UI/UX tienen muchas habilidades superpuestas. El cambio de carrera puede llegar de forma natural a quienes ya tienen grandes habilidades de diseño. Una de las habilidades similares es el diseño emocional. Tanto los diseñadores gráficos como los diseñadores de UX intentan crear una conexión emocional con sus usuarios. El diseño gráfico trata de evocar emociones a los usuarios a través de imágenes, color y tipografía, pero los diseñadores de UX se limitan a la parte visual del diseño. Nos enfocamos en: arquitectura de la información, diseño de interacción y accesibilidad del diseño. La otra habilidad que ambos tienen es la atención a los detalles. diseño está en los detalles, y las habilidades de diseño gráfico a menudo se orientan hacia una gran concentración de detalle como el escaneo de texto y la alineación de elementos. Los diseñadores de UX son los mismos; prestan mucha atención a los detalles que mejorarían un producto y traerían una mejor experiencia para los usuarios. También, ambos son hábiles en Pensamiento Creativo. Los diseñadores son solucionadores de problemas. Los diseñadores gráficos y los diseñadores de UX son igualmente hábiles en el pensamiento creativo y la solución de problemas. Para entender por qué los diseñadores de UX necesitan habilidades de pensamiento creativo, primero debes aprender sobre el proceso de pensamiento de diseño de UX. Design Thinking es un proceso continuo que fluye por las siguientes etapas: empatizar, definir, idear, prototipo y prueba. Dentro de cada etapa se enmarcan los problemas, surgen preguntas e ideas hasta que aparecen las mejores soluciones. La otra habilidad superpuesta es Convenciones de Diseño. Las convenciones son la selección de buenas soluciones que los usuarios les gustaron o encontraron fáciles de entender a lo largo de los años. Para entender mejor, consideremos las convenciones sobre el uso del color y la forma. El primer signo utiliza dos convenciones fuertes para transmitir peligro; el color rojo y la forma de rombo. Si bien la palabra advertencia es visible en ambos signos, la primera imagen puede transmitir el mensaje sin los textos. La segunda imagen requiere de un texto con el fin de identificarlo instantáneamente. Muchos diseñadores gráficos ya están familiarizados con las convenciones en el diseño web o de aplicaciones, lo que significa que pueden adaptarse fácilmente a un rol de diseño UX. El otro habilidad similar es Estética. Uno de los beneficios para el diseño gráfico pasar al diseño UI/UX es que pueden hacer las cosas hermosas. Los diseñadores gráficos han conseguido esta habilidad natural para hacer las cosas visualmente [inaudibles] mediante el uso de principios de alineación de la jerarquía visual. Pero el diseño visual puede mejorar la experiencia general del usuario de un producto al hacer que los usuarios se sientan mejor al respecto. No olvides que las habilidades de diseño gráfico son un activo mientras se trabaja en un proyecto UX. Los campos de diseño son transferibles, por lo que si pretendes aprender una nueva especialidad, solo necesitas practicar, nada es imposible. 4. ¿Por qué debes cambiar al diseño de UI/UX o UX: Trabajar en tecnología diseñando productos digitales innovadores e interactuar con los consumidores es tan agradable. Te quiero dar algunas razones por las que UI/UX es el mejor trabajo del mundo. Los diseñadores de UI/UX están en alta demanda. electrodomésticos inteligentes [inaudibles] se han convertido en una parte esencial de nuestras vidas. Con esto, constantemente para el diseño UI/UX. El otro motivo es que los diseñadores de UI/UX son más que diseñadores gráficos. Un diseñador de UX gana más que un diseñador de interfaz de usuario, mientras que un diseñador de interfaz de usuario gana más que un diseñador gráfico. Según PayScale, el salario promedio para un diseñador gráfico en Ámsterdam es de 29,000€ mientras que un diseñador UX promedio recibe 58,000€. El otro motivo por el que debes cambiar a UI/UX es que cuando estás diseñando un producto digital, nunca te sentirías aburrido, porque los diseñadores de UX enfrentan diferentes tipos de preguntas todos los días. Estás cambiando la vida de las personas. El papel central del diseño del producto es hacer vida de las personas más cómoda que nunca por lo que usted como diseñador de productos se sentirá tan satisfecho porque está directamente conectado con los usuarios y puede ver el impacto de su diseño. Una de las razones más importantes por las que me encanta UI/UX es el proceso de diseño colaborativo que tiene. Los diseñadores de UX trabajan en estrecha colaboración con otros diseñadores, desarrolladores, gestores de productos e incluso partes interesadas, con el fin de garantizar que los diseños finales coincidan con las expectativas de todos. El otro motivo para cambiar al campo UI/UX es tener la oportunidad de investigación y pruebas de productos. Harás mucha investigación y esto te parece un recorrido. Necesitarás mucha gente, y hablarás con ellos, y analizarás cómo [inaudible] afectan sus vidas, cómo se sienten, qué necesitan. Esta es una ventaja muy grande sobre los sitios de diseño tradicionales sentados detrás del escritorio a lo largo del tiempo, y simplemente diseñando sin ninguna interacción con el usuario final. El último motivo es la demanda de diseñadores multicualificados UI/UX. Las empresas prefieren contratar a un diseñador de UX/ UI en lugar de diseñar una regla particular para UX. [ inaudible] depende de la escala o presupuesto de la empresa, pero afortunadamente para los diseñadores gráficos convertidos diseñadores UX, que podrás destacar de otros candidatos porque ya conoces el diseño visual y de comunicación, y eres un diseñador multi-calificado. ¿ Cuál es la hoja de ruta para que los diseñadores gráficos se conviertan en diseñadores UI/UX? En el siguiente video, vamos a hablar formas en que puedes elegir practicar esas habilidades. 5. Mapa de la ruta para los diseñadores gráficos: El diseño gráfico ya está hablando el lenguaje del diseño. Solo necesitas afinar tus habilidades para incluir aquellas que son únicas del diseño UI/UX. En este video, vamos a hablar de formas en que puedes afilar estas habilidades. El primero es la educación. Podemos buscar tus mejores universidades locales que ofrezcan cursos especializados como; interacción humano-computadora, diseño de experiencia de usuario o diseño de interacción. La otra forma de adquirir nuevas habilidades que yo mismo siempre elijo es aprender con grandes programas educativos, plataformas en línea como Skillshare, Coursera, Udemy, y LinkUp. Existen muchas otras plataformas en línea. Acabo de enumerar los más famosos. Además, puedes buscar en YouTube. YouTube tiene muchos tutoriales de diseñadores que enseñan diseño de productos, software de diseño, o simplemente expresan sus experiencias. El número dos es leer artículos de UI/UX. Un buen lugar para encontrar artículos de UI/UX es Medio. Hay algunas buenas publicaciones que puedes suscribirte como Muzli, Prototypr.io, UX Design, CC, UX Planet. org. Otros sitios para aprender sobre UX incluyen la sección IDEO, UX Magazine y Smashing Magazine UX. El número tres es aprender prototipado. prototipo interactivo permite experimentar verdaderamente el producto, por lo que es esencial que cualquier diseñador de UI/UX aprenda una herramienta de prototipado. Existen algunas herramientas de prototipado como InVision, Marvel App, Axure, Framer o Flinto. El número cuatro se está poniendo al día con las tendencias de la interfaz de usuario. Ex diseñadores y Behance a ser enseñado con tendencias de diseño de UI. En Behance, hay muchos profesionales creativos que muestran tus últimos trabajos en la plataforma. Dribbble es una plataforma de cartera de diseño social que es similar a Behance, pero en su mayoría exhibe trabajos en ilustración y diseño de interfaz de usuario. Para poder publicar tus trabajos en la plataforma, los usuarios tienen que recibir una invitación de otros compañeros usuarios. Hacer una búsqueda de invitar y conmutar a recientes para nuevas publicaciones por parte de los usuarios. Estos usuarios suelen realizar un mini concurso para revisar sus obras antes de reenviar una invitación. Alternativamente, echa un vistazo a UPLabs y Awwwards. El número cinco es para comenzar a practicar UI/UX. Hay algunas formas en que puedes practicar el diseño de UI/UX. Si no tienes proyectos reales donde puedes aplicar, conocimientos de UI/UX, puedes participar en el reto diario de UI y poner tus favoritos en tu portafolio. Podrás encontrar muchos casos para estudiar sobre diseño de una app o sitio web en Medium. último, pero no menos importante, puedes adquirir más habilidades prácticas solicitando prácticas. Tienes la oportunidad de aprender de otros diseñadores en el equipo de diseño, así como la oportunidad de construir un portafolio a partir de un proyecto real. Además, no olvides meterte en el hábito de pedir retroalimentación. Nuevamente, Dribbble o Behance son grandes lugares para mostrar tu diseño. número seis se centra en construir una cartera de UI/UX. En la industria del diseño, siempre que quieras solicitar un puesto de diseño, el empleador siempre pide un portafolio de diseño. Uno de los mejores lugares para encontrar cientos de carteras de diseño es Bestfolios.com. Se pueden ver las carteras de diseñadores, sus proyectos, estudios de caso, o sus currículums. Para su portafolio, puede utilizar sus trabajos de diseño gráfico como diseños visuales, identidades de marca, infografías, logotipos. Todos están a tu favor. Las personas son criaturas visuales y disfrutan viendo un diseño bellamente elaborado. Pero para tu portafolio de UI/UX, debes escribir casos prácticos. Los estudios de casos son proceso o registro de sus investigaciones y decisiones para diseñar un producto digital. Debe mencionar el problema, sus soluciones, sus pensamientos, y todo lo que experimentó durante el diseño de su proyecto. También para construir tu portafolio, no necesariamente necesitas construir un sitio web desde cero. Hay algunos constructores de sitios web que ofrecen plantillas de portafolio por un precio fijo al mes, como Squarespace, Wix, o Webflow. El número siete está asistiendo a talleres y eventos. El establecimiento de redes es esencial. A veces se encuentran mejores oportunidades cuando alguien en el campo te recomienda para un puesto. Para las redes, debes encontrar comunidades locales de UI/UX. Puedes encontrar algunos en hackerthon.com o simplemente en Google para trabajos de diseño o concursos UX de tu zona. También consulta meetup.com para encontrar talleres, conferencias, y reuniones de UX cerca de ti mismo. Si quieres pasar del diseño gráfico al diseño UI/UX, no va a ser tan difícil como podrías pensar. Si bien hay una brecha entre las escalas de diseño gráfico y las escalas de diseño UI/UX, no es inmejorable. Solo necesitas practicar e incluir aquellos que son únicos para el diseño de UI/UX. 6. Investigación, Interviews, Interviews, Surveys y análisis de competencia: Esta parte es la mejor parte de nuestra clase. Justo antes de sumergirme en el proyecto, me encantaría preguntarles, hacer el proyecto paso a paso conmigo y subir cada pieza de proyecto, asignaciones al final de cada paso. Además, no olvides hacer tus preguntas, no dejes ninguna pregunta sin respuesta. Vamos a empezar, con todo el diseño es Split Sharing Mobile Application. Elegí este tema para el proyecto de esta clase porque pensé que ya estás familiarizado con escenarios en los que se utiliza una Aplicación de Compartir Split. Creo que en su mayoría entiendes esto cuando sales con amigos a comer y después de la cena [inaudible]. La mayoría de las veces un descanso, vamos a seguir adelante y su tarjeta de crédito pagará la cuenta por cada uno, no solo estúpida sino si es un gran grupo de amigos ahí empieza el dolor. Cuando quieras diseñar, una aplicación móvil, sitio web, o cualquier tipo de producto digital. El proceso por el que se pasa varía según la escala de la empresa, el presupuesto del proyecto o el marco de tiempo. No obstante, el proceso de diseño normalmente comienza con la investigación y el análisis. Definamos primero el objetivo. Tener una mentalidad clara sobre lo que vamos a diseñar. El objetivo de esta app es resolver problemas, con factura dividiéndose entre amigos para una cena. En un proyecto real cuando se tiene [inaudible] se obtiene más información mediante la realización es entrevista a las partes interesadas. Entrevista a Stakeholder te ayuda a enterarte de las escuelas de negocios, las restricciones técnicas en las partes interesadas leads actuales sobre las necesidades de los usuarios. El objetivo principal de esta entrevista es obtener información acerca de cuáles son los objetivos del negocio? ¿ Existe algún material de investigación o diseño? ¿ Qué ya se sabe de los usuarios? ¿ Alguna retroalimentación? Por ejemplo, suficiente retroalimentación, llamadas de atención al cliente, mensajes , revisiones, lo importante es que no reemplace a unas unidades adecuadas de investigación. Otras preguntas podrían ser, ¿quiénes son competidores conocidos? ¿ Cómo se ve el mercado? ¿ Hay alguna limitación tecnológica? Otras especificaciones del proyecto como plazos, miembros del equipo. Durante una entrevista con los interesados es tan fácil que puedes hacer en tres pasos. En primer lugar, debes preparar tus preguntas para no perder el tiempo el uno al otro, después piensas en la entrevista. Si se trata de un proyecto pequeño lo puedes dar en una entrevista, pero si es un proyecto más complejo y más grande, debes hacerlo en varias entrevistas con varias personas como gestores de producto, dueños de productos, gerente técnico, plomo diseñadores. En el primer paso, debes registrar los documentos todas tus notas y sus respuestas. El segundo paso te ayuda a obtener más información sobre el proyecto y evitar malentendidos. Pintado, viaje de usuario, imaginamos que tenemos cinco amigos entrando a un restaurante, se sientan y luego esperan el menú. Después de navegar por el menú a escenarios podrían suceder. ¿ Está listo el mesero para obtener el pedido? Si no, deberían esperar más y esa es la frustración. Destaco las frustraciones con el color rojo. En caso afirmativo, ordenarán y obtendrán comida. Después de comer. Cuando terminen, pedirán el proyecto de ley. Obtienen la cuenta y empiezan a charlar sobre cómo pagarla. Dos casos son posibles. Deberían dividirlo de manera uniforme o por pago por artículo. Si lo dividen uniformemente, entonces es mucho más fácil ya que una cantidad total será dividida por cinco personas. Pero en la mayoría de los casos, los platos son diferentes porque uno es más caro, mientras que otro puede haber pedido un alimento más barato, por lo que deben calcular la parte de cada uno. Amigos sacan sus tarjetas de crédito, dos escenarios son posibles. Si encontraste nómina en método de pago, lo que resulta en ponderaciones más largas para que el camarero tramite el pago. Un pago [inaudible] paga toda la cuenta, entonces el resto debe calcular cuánto tiene que pagar cada uno y cómo pagar? ¿ Cuál es la frustración de las facturas para nuestro usuario objetivo? Entonces todos le pagan la espalda. Al final, dejarán la propina y luego saldrán del restaurante. Enumeremos problemas hipotéticos de acuerdo a las frustraciones de los usuarios para determinar eso. Aquí solo nos enfocaremos en problemas que vivieron al compartir la factura y el proceso de pago. Los problemas hipotéticos están pensando en cómo dividir la cuenta, pagar splitter paga para todos. Cuánto deben pagar todos si tenían pedidos diferentes, esperando a que un mesero tramite el pago, entonces hacemos hipótesis sobre quién tiene este problema. Jóvenes con edad de rango de 18-35 años, así que esa es una buena primera hipótesis porque están utilizando la tecnología diario y ya están familiarizados con hacer pagos a través de una app. Para una hipótesis validadora se debe hablar con la gente. Por ejemplo, llevas a cabo cinco comensales es s observación crucial o tus clientes entienden sus necesidades, casa o vidas son como y cómo encajaría tu producto en sus vidas. Por hacer una entrevista inicial de usuario. No necesariamente necesitas invitar a la gente a un cargo. Puedes hacerlo en la cafetería mientras esperas a que lleguen tus amigos, o incluso hacerlo de forma remota a través de Skype o Google Hangout. Siempre surgiendo tus pruebas de hipótesis en el contexto, por ejemplo, cuando estás fuera con tus amigos para una comida o haciendo encuestas en línea. Encuestas en línea si son consultadas cuidadosamente puede ser de gran utilidad aún. Especialmente si los usas como y charla adicional y complementaria. Tan solo recuerda cuanto más corta sea tu encuesta, mejor. Existen grandes herramientas para realizar una encuesta en línea, como Survey Monkey, Google Forms y Wufoo, si lo estoy pronunciando bien, te proporcionan datos claros en forma de resumen para cada respuesta. En base a los resultados del uso de tenuras y encuestas, se puede verificar cualquier hipótesis aguda. Digamos que eso no fue lo que pasó. La mayoría de la gente del interior, mencionaste que generalmente el 1 por ciento paga la factura y calcula para otros y no tienen ningún problema esperando a que un mesero tramite el pago. Pero también agregaron que imputar artículos manualmente es frustrante y es difícil dividirse en gastos grupales incluso, digamos sobre la hipótesis del cliente. Entendimos que la mayoría de las entrevistas son estudiantes universitarios que viven solos, por lo que se preocupan por sus gastos. Entonces debes probar nueva hipótesis y si las necesitas, afinarlas. Iteramos el ciclo de desarrollo del cliente para acercarnos a nuestro cliente potencial. Hacemos hipótesis, las probamos, y de acuerdo a nuestros aprendizajes, la refinamos. Entonces si tienes una mejor comprensión de los usuarios contra el mercado para ver qué están haciendo las aplicaciones de la competencia. ¿ Qué están ofreciendo a los clientes? Esta investigación se denomina análisis competidor. Análisis Competitivo se trata de marcar lo que los competidores están haciendo en este momento. Simplemente desnudo en mente no copiar errores de tus competidores. Por evitar errores de competidores. Podrá realizar pruebas de usuario de la aplicación o sitio web de la competencia. El objetivo es identificar sus errores al no usarla en tu diseño y buscar una mejor solución. Para hacer una prueba de usuario simplemente necesitas darle tu aplicación de campus a un amigo. Dales una tarea y anota cualquier dificultad que tengan. Por ejemplo, para una aplicación de reparto dividido, le diré a mi amigo que cree una nueva experiencia con sus amigos y anotaré cada vez que vea si se confunde esos son los problemas más nuevos que no debes copiar en tu diseño. Para encontrar competidores, simplemente puede Google Splitwise. Como ves, hay una lista de cosas, split sharing apps que nos ayuda a encontrar a nuestros competidores. Una de las buenas herramientas es SimilarWeb. Permite revisar todo en detalle, incluso palabras clave que el competidor ha utilizado. La otra herramienta que me gusta para encontrar productos relativos es Alternativeto.net. Al realizar búsquedas en el cuadro de búsqueda, AlternativeTo te muestra información sobre la app, como sitio web, plantea características, etiquetas y también capturas de pantalla. Otra herramienta para encontrar competidores es Product Hunt. Al igual que AlternativeTo, se puede ver la información del producto así como los productos relevantes. Aquí lees las críticas de las personas. Esto es tan bueno. Te permite saber cómo piensa la gente sobre el Splitwise. Para tu análisis de hipótesis debes escribir tu información de composites, como dirección de sitio web, capturas de pantalla la fuerza como una bonita característica una hermosa interfaz de usuario o una debilidad como estudiantes [inaudibles]. Para esta clase, revisaremos un Splitwise. En primer lugar, escribiremos un breve resumen para el producto. Obtienes lo que sepas sobre el producto, como dirección de sitio web, tarifa de producto en Google Play, y tienda [inaudible] y así sucesivamente. ¿ Quién es el cliente objetivo? En el Splitwise, el cliente objetivo son compañeros de piso y amigos que comparten gastos. Acerca del producto, servicio, o el precio de un Splitwise es gratuito, pero ofrece algunas características exclusivamente para los usuarios que se han suscrito por $2.99 mensuales. Debes saber lo que tu competidor ofrece a sus clientes porque puedes aprovechar eso. fortalezas aquí son grandes características como el cálculo automático, división uniforme y desigual, realización de pagos a través de la aplicación, la solicitud de pagos, la asignación de artículos a amigos, y la visualización del historial de pagos y debilidades de características u opciones. Splitwise no ofrece imputar artículos automáticamente, no escanear recibidos en versión gratuita y no ser en tiempo real. También guardo las capturas de pantalla y traté de revisar la aplicación y anotar las notas. Además, trabajo con la app y graba mi pantalla. Veo la funcionalidad, características, animaciones y si el competidor hace algún cambio y lanza nuevas versiones, puedo volver a mis grabaciones y tiros. Para tus asignaciones descarga e instala una aplicación de un solo split share o usa cualquier aplicación de split sharing que ya tengas en tu teléfono. Al igual que el ejemplo aquí. Escribe una cosa que te guste al respecto, y una cosa que veas podría ser mejor. Sería genial que subas las capturas de pantalla para lo que te gusta y lo que no te gusta para que tus compañeros puedan entender mejor tu punto de vista. Tan bueno ver y leer tus críticas. 7. Análisis, personas, trazos y Flows de usuarios: Después de hablar como usuarios reales en función de la información que obtienes, puedes crear personas. Las personas son personajes ficticios creados para representar diferentes tipos de usuarios, que van a utilizar tu producto de una manera muy similar. La mejor práctica es definir 3-5 personas diferentes, y describirlas como si fueran personas reales. Empieza con un nombre, un trabajo, vida y estilo, o sus aficiones, y tal vez incluso un código que el usuario pudiera decir. Utilizaremos esto para crear un perfil real para cada persona. Por ejemplo, aquí dentro tenemos a Dan. Dan tiene 25 años. Es pasante de mercadotecnia. Es tan preciso. Se preocupa por no ser jodido por sus amigos descuido, cuando se trata de la cuenta. mayoría paga por sus amigos, documenta el recibo, generalmente tomando una foto, luego se va a casa y envía mensajes a cada individuo de la fiesta por separado, para identificar lo que consiguieron antes de hacer las matemáticas es alguna calculadora. Rara vez olvidará cobrar. Por lo general, enviará algún lindo recordatorio para amigos olvidadizos. También tenemos a Sarah. Tiene 28 años. Es diseñadora gráfica, y no le importa un par de centavos de diferencia, mucho al preciso Dan. Normalmente deja un par de eros a los textos y propina, y dependiendo de su estado de ánimo, o será más tacaño o será más generosa con la cantidad que agregan. Después de la cena, procederá inmediatamente pagar a su amigo divisor de facturas como para evitar olvidarse más tarde. Otra persona es Robin. Robin tiene 22 años y es estudiante. Robin es mucho menos cuidadoso de lo que se trata de pagar, y muchas veces es perseguido por diferentes partes para pagar sus cuentas. Por lo general, tiene un servicio celular muy terrible y se abstendrá de recoger su teléfono para pagar sus cuotas de inmediato. Eso es probable que encuentre tres tipos de personas en un grupo de amigos. Con personas, puedes crear storyboards. storyboards son grandes herramientas para describir e ilustrar cómo un usuario atrae al producto. Despliegan cualquier tracción requerida para lograr un objetivo, como un cómic. Dan, Sarah, Robin y Mia entran al restaurante. Se sientan y piden comida. Terminan su comida y Dan le pide a mesero que traiga la cuenta. Amigos empiezan a hablar de quién paga la comida. Dan saca su teléfono móvil y sugiere que paga por todos. Ellos le pueden devolver el dinero. Mesero trae la cuenta, Dan paga el dinero. Después crea un grupo con sus amigos. Toma una foto de factura vía Happy Split. Happy Split escanea la foto y muestra listas de gastos a Dan. Dan asigna cada comida a la orden y toca a cargo. Sarah, Robin Mia, recibe una notificación en su teléfono. Tocan en la devolución de la paga. Amigos salen del restaurante. Ahora basado en storyboards, podemos crear flujo de usuarios. Podemos usar la capa de flujos del usuario para revisar el viaje, y podemos crear referencia en la parte superior de cada paso. flujo de usuario es la ruta que un usuario toma en un sitio web o aplicación para completar una tarea. Hay grandes herramientas impresionantes que puedes usar para crear un flujo de usuario. El que disfruté trabajando con varios proyectos es flowmap.com. Es tan fácil trabajar con. La otra herramienta es macflow.com. También puedes crear marcos de alambre y sitemaps con estos. Para este proyecto, me gustaría usar mapas de flujo, así que empecemos. Dan abre la app. Quiere crear un proyecto de ley y luego crear un grupo. Por lo que agrega a sus amigos al grupo y luego puede escanear la factura o introducir elementos manualmente. Cuando se agrega factura, debe asignar artículos a cada amigo. Después de que agrega tip y escriba on charge button, ve una página de éxito, diciéndole que sus amigos recibieron la factura. Para tu asignación, crea una persona para un estudiante universitario. Al igual que la muestra, anote sus necesidades, sus metas, y su actitud. Tengo muchas ganas de ver a tu persona y discutirlas contigo. 8. Explorar y bocar, el marco de Wireframe y el prototipo: Ahora que tienes todo listo desde tu [inaudible], toma tu lápiz y cuaderno y diviértete. Para esta clase vamos a trabajar en Pantalla de inicio y agregando un nuevo gasto o proceso de construcción. Empecemos. Ahora que hemos visto apps de competidores y sabemos lo que buscamos en esta etapa. En la primera pantalla de inicio, quiero mostrarle un resumen al usuario, como un saldo total, la cantidad de dinero que le debe, y por otro lado, la cantidad de dinero que debe. Ella ve la lista de sus amigas y la cantidad de dinero que deben darle o debe pagar. En la pestaña todo lo que ve es amigos, grupos, botón de agregar para agregar una nueva factura, notificaciones y ajustes. Además, agrego este tipo de libros para encontrar amigos y un botón para agregar nuevos amigos. Si hace clic en el “Botón Agregar”, va a una página donde tiene que elegir a otros destinatarios del proyecto de ley. De nuevo, tenemos un cuadro de búsqueda, los subgrupos, lista de amigos y en última lista de contactos. Cuando se elige a mi amigo, aparece el siguiente botón. Si elige a más de un amigo, el siguiente botón se convierte para crear grupo. Para que pueda distinguir más fácil lo que está pasando. Cuando se agregan los destinatarios, ella tiene que escanear la factura. Añado icono de carne, si está usando la app en la oscuridad, igual que la cámara, también puede ingresar artículos manualmente. Cuando esa factura es escaneada, todo se divide uniformemente entre amigos, pero ella puede elegir una opción de división desigual. De repente, ella tiene que asignar cada artículo a un amigo o asignar un artículo a todo el grupo. Después toca botón sin confirmar. El paso menor es elegir el monto del impuesto. Doy algunas opciones como sin propina, cinco por ciento, 10 por ciento, y también entro una propina personalizada. Todos los gastos se listan con los nombres de los destinatarios. Y luego cuando toca el botón de carga, ve la página de éxito que dice que los amigos reciben la factura. Eso es todo. El prototipado de papel, como habrías adivinado, es un esbozo de capturas de pantalla de papel para presentarlo como un producto digital. El prototipado en papel tiene diferentes niveles de complejidad. Los más básicos son los bocetos de cada pantalla en un papel, y cualquier prueba de usabilidad, los bocetos se conmutan de acuerdo a las acciones del usuario. No obstante, puedes ir más allá y producir prototipos más avanzados con elementos esenciales. Te ayuda a precrear de forma rápida y precisa botones e iconos. En la etapa más avanzada, puedes subir fotos de tus bocetos en papel en software de prototipado digital y agregar interacciones reales con una herramienta como el prototipado pop en papel. Después de probar tus prototipos de papel, si encontraste algún problema, los usuarios tienen mientras están trabajando con tu prototipo, puedes repetir el proceso de nuevo, esto vuelve a tener tu boceto [inaudible]. Si todo salió bien y no hubo problema, puedes estructurar tu idea y agregar más detalles para crear wireframes. Un modelo alámbrico es un contorno de baja fidelidad, simplificado de su producto. Las tramas alámbricas son las atrasadas para el diseño. Por qué no puedes entrar en demasiados detalles. Es necesario crear una representación sólida del diseño final. Estás en tu camino de la ciudad para todo el proyecto y para las personas con las que estás trabajando como Project Managers, otros diseñadores, redactores, y todo el equipo por lo que necesitan unos wireframes bien creados, bien estructurados. Estas herramientas para crear tramas alámbricas son [inaudibles] que ya conoces, solo en mente, lo que proporciona elementos de interfaz de usuario para tramas alámbricas y prototipos de alta fidelidad. El otro es wireframe CC, es una herramienta mínima. No hace complicada la creación de tramas alámbricas. El que me encanta usar hoy para crear nuestros wireframes es [inaudible]. Al igual que just-in-mind, los moqups tienen plantillas listas para usar para todos los casos de uso populares. Además, simplemente podemos crear tus alambres en un boceto, [inaudible] o incluso Photoshop. Creo wireframes en la parte superior del flujo de usuario para que no deje nada atrás. Entonces, solo empecemos. Este es el Lienzo que tienes en Moqups para cambiar el tamaño de tu tablero de arte. Vaya a Espacio de trabajo y elija la configuración de página. Este es el tamaño de un iPhone 8. Además, puedes encontrar iOS y componentes de diseño de materiales. Estas bibliotecas facilitan mucho más el proceso de creación de tramas alámbricas. Empiezo con traer y uso la barra de estatutos. En la sección de comentarios, puedes encontrar todos los objetos comunes que necesitas para crear tu estructura alámbrica, como un rectángulo, un botón, texto rellenado, etcétera. Para todos nuestros bocetos no olvides nada en tus alambres. A veces es posible que necesites contar con una pieza en tu diseño, pero normalmente es mejor no usar ningún tipo de color en tus alámbricas. alambres son destructores para el diseño y no se supone que presenten ningún tipo de especificaciones visuales. Especialmente si quieres presentarlos en tus reuniones con el resto del equipo, como Desarrolladores o Gerentes de Producto. Es mejor no distraer tu atención a ningún color. No lo hagas falso a los wireframes. Los bocetos, prototipos de papel y alambres son herramientas económicas para diseñar y probar el producto. No gastes mucho tiempo en algo que necesita muchas iteraciones. No se supone que los wireframes sean bellos. A partir de ahí transferimos las tramas alámbricas a prototipos de baja fidelidad. Queremos probar nuevas tracciones lo antes posible. Utilizamos InVision para hacer un prototipo. Hacer un prototipo en InVision es tan fácil. Solo necesitamos subir tus wireframes, imágenes o si has diseñado en un Sketch o Photoshop, puedes descargar el plug-in de manualidades para hundirte y enviar tus diseños fácilmente a InVision. Para construir un prototipo, necesitas crear hotspots. Aquellas áreas que serán enlazadas a otra página, como un botón luego seleccione el destino de pegar. También puedes compartir un enlace a tu prototipo con tu equipo para que puedan dejar retroalimentación. Recuerda que debes probar el diseño en cada etapa. Primero con hipótesis, luego con el boceto, la tercera etapa con alámbricas, y luego con el diseño final. Esto cada vez que pruebes tu refinamiento y mejora tu diseño e iteras el proceso de nuevo. Para su asignación, dibuja sus ideas para toda la aplicación de compartir pantalla y luego encubra su boceto en una estructura alámbrica. Al igual que el ejemplo que vemos se dibuja una pantalla de inicio teniendo las siguientes características: lista de amigos, lista de grupos, botón de agregar gastos para agregar una nueva factura costosa, notificaciones y ajuste. Decide cómo vas a poner todas estas características en una sola pantalla y luego cuando termines con el boceto, elige una herramienta para convertir tu boceto en un modelo alámbrico más detallado. Podría ser [inaudible] o simplemente Photoshop. Sube tu trabajo y obtén comentarios de tus compañeros de clase. 9. Crear, elementos de UI y íconos, íconos, fuentes y colores: Es hora de agregar más detalles y diseñar una interfaz de usuario, la interfaz de usuario, unos marcos [inaudibles]. Diseñando la interfaz de usuario, la interfaz de usuario es el trabajo más fácil para los diseñadores gráficos porque ya estás familiarizado con los diseños visuales. Pero para hacer una aplicación más de diseño, la primera pregunta que se puede hacer es que ¿cómo debo saber las diferencias entre Android e iOS? ¿ Cómo debo conocer los lineamientos? ¿ Y las tallas? Comencemos con las diferencias de Android e iOS. En primer lugar, tienen diferentes lineamientos. Google utiliza el Diseño de Materiales, iOS utiliza el diseño de interfaz humana. He mencionado sus vínculos en los recursos del proyecto. Google creó un lenguaje de diseño llamado Material Design. Si estás diseñando para Android, esto es algo que definitivamente necesitas echar un vistazo. Hay tantas grandes herramientas para comprobar, patrones de interfaz de usuario, iconos, colores y diseños de prueba. Por ejemplo, la herramienta de color ayuda a los diseñadores a elegir fiestas de color. Para iOS, están las pautas de diseño de interfaz humana de Apple. Esta es una lista exhaustiva de patrones de diseño para aplicaciones iOS. Apple, incluso proporciona algunos recursos de muestra de Photoshop o Sketch en este sitio. Desplazarse hacia atrás y hacia adelante entre pantallas es una acción común que los usuarios toman en las aplicaciones. En Android, hay un universal [inaudible] en la parte inferior. El botón Atrás es una manera fácil de volver a una pantalla anterior y funciona en todas las aplicaciones. El enfoque en iOS es un poco diferente. Obviamente, aquí no hay un botón de retroceso universal y esto cambia un poco el diseño. Cada otra pantalla necesita tener un botón en la esquina superior izquierda. Solo para entender mejor, comparemos una versión antigua de Facebook App. Ajustes y Opciones de la App. Las apps para ambas plataformas nuevamente siguen un enfoque diferente aquí también. Los patrones más populares aquí son el menú de hamburguesas en Android y menú tapeado en iOS. App para Android de Medium tiene un ícono de hamburguesa en la parte superior, que muestra diferentes opciones y áreas de App. Ahora, llegando a Medium para iOS, está el familiar enfoque de toque de botón. Observe cómo algunas opciones de la hamburguesa de aplicaciones de Android son empujadas a la pestaña de opciones del usuario en iOS. Uniformidad. Después de todo, siempre hay excepciones. No todas las aplicaciones siguen diferentes interacciones y patrones de diseño de interfaz de usuario para las dos plataformas. Algunas apps siguen patrones de diseño de materiales en iOS como Gmail, otras siguen el mismo modelo de interfaz humana en ambos, como Instagram. Por ejemplo, en un boceto puedes elegir tu tablero de arte y ver todos los tamaños en diferentes dispositivos, como Apple, Android, web responsive y prototipos de papel. [ inaudible] es lo mismo, elige tablero de arte y puedes ver la lista de tamaños de dispositivos. También en Photo shop e Illustrator. Puedes elegir el tamaño de tu dispositivo fácilmente. Un elemento importante en el diseño de la interfaz de usuario son los iconos. Los iconos deben ser tan simples y lo suficientemente racionalizados que se vean geniales en el pequeño puerto de vista de una pantalla modelo. En una situación de iOS tienes tiempo suficiente para diseñar tus propios iconos para cada proyecto pero en realidad estás bajo tanta presión y tienes que usar los conjuntos de iconos listos. Hay grandes sitios web de los que puedes encontrar y descargar iconos de como Flaticon, Ion-finder e Icons8. Solo recuerda que es mejor usar un conjunto de iconos en lugar de descargar iconos individualmente. Proporciona un diseño más consistente. Una fuente puede ser fácilmente el diferenciador más sutil y atractivo para su diseño de interfaz de usuario. Hay cuatro fuentes que utilizo en su mayoría para diseñar un sitio web o aplicación móvil. El primero es Open Sans. Open Sans está optimizado para interfaces impresas, web y móviles y tiene una excelente legibilidad. Roboto forma parte de la familia Google y son los teléfonos Android predeterminados desde 2012. Funciona bien para tipos de cuerpo. Avenir Next es una cara geométrica tipo San Serif, es muy versátil con seis vías y es legible en todos los tamaños. Proxima Nova es adecuado para sitios web y aplicaciones móviles centradas en contenido moderno. Igualmente grande para encabezados y tipo de cuerpo. Una de las etapas vitales de tu creación son las gráficas de color, a veces pasamos horas para elegir la mejor paridad de color. Ahora, [inaudible] y consejos para elegir tu paridad de color más fácil. El primero es el significado del color. En primer lugar, debes conocer conceptos fundamentales sobre los colores. Cada color tiene un significado que varía dependiendo de la cultura. En segundas instancias los colores crean emociones. Por lo que debes aprender sobre los significados para usarlo en el contexto correcto. Por ejemplo, el azul se asocia con confiabilidad, productividad, confianza y seguridad. Se ven varios tonos de color azul en las principales plataformas de redes sociales como Facebook y Twitter. Inspírate de la naturaleza. Las mejores combinaciones de colores provienen de la naturaleza. Siempre se verán naturales. Además, nunca se ve gris puro o negro puro en la naturaleza. Por lo tanto, agrega un poco de saturación a tu color. Inconscientemente, se verá más natural y familiar para los usuarios. El número tres está llamando la atención con contraste. Usando mezcla de contraste, consumir información más fácil. Un ejemplo muy común es el negro o el gris oscuro y el blanco. Estos dos colores producen mucho contraste. alto contraste en realidad puede ayudar a que tu contenido sea más legible. Exagere las diferencias de ligereza entre los colores de primer plano y de fondo y evite usar colores de ligereza similar. número cuatro se está inspirando en Dribble o Behance. Cuando estás diseñando UI, Dribble es uno de los mejores lugares para conseguir ideas. También te permite buscar por color. Entonces si estás haciendo investigaciones visuales sobre un color en particular, cómo lo usaron otros diseñadores, y qué combinación de colores encaja bien, puedes usar esta herramienta. Existen algunas herramientas populares que puedes usar para encontrar tu paridad de color más fácil. El primero es en Adobe Color CC, que originalmente se llamaba Adobe Color. Se trata de una herramienta gratuita. Simplemente elige un estilo de esquema de color y arrastra alrededor de las opciones de color para construir tu nuevo esquema de diseño. Obtendrás detalles hexagonales RGB completos, y la mayoría de los colores se pueden ajustar para incluir tonos más claros y oscuros que aún caben dentro del esquema. El otro es Paletton. Es similar a Adobe Color CC, pero no estás limitado a sólo cinco tonos. Si tienes colores primordialmente, puedes jugar con los tonos adicionales. El otro es paleta de materiales. Es una gran herramienta para ver una vista previa de los colores en acción. La aplicación web empareja dos colores juntos en un diseño de interfaz de usuario simulado con colores dominantes y subordinados. Aunque el diseño se limita a los colores de diseño de materiales, la función estadística en vivo es una gran manera de entrenar tu ojo y aprender qué colores suelen funcionar mejor juntos. Hay cantidad de softwares que puedes usar para diseñar buenos sitios web o interfaz de aplicaciones: Sketch App, [inaudible] o Figma. Hace cuatro años, cambié a Sketch para Photoshop y me ha encantado tanto desde entonces. Figma es muy similar a Sketch. Ambos están basados en vectores. Cuentan con un lienzo infinitivo donde puedes crear tableros de arte para diseñar. Pero con Figma, puedes compartir un enlace a tu proyecto con el resto del equipo, especialmente con otros diseñadores para dejar comentarios y comentar tu diseño. Pueden exportar elementos e incluso pueden editar el proyecto contigo. Generalmente, es una herramienta muy colaborativa. Además, puedes usar Figma si tienes un Mac o un PC. En el día de hoy, en esta clase diseñaremos nuestra aplicación en Figma tal y como está acordado tanto para los alumnos de Windows como para los de Macintosh, y podrás compartir fácilmente tu proyecto con nosotros. Es mi primer proyecto diseñando con Figma. Será interesante. Figma tiene una versión de escritorio así como una versión de navegador. Podemos iniciar sesión en tu cuenta y ver los proyectos anteriores en los que has trabajado. Sigamos adelante y creemos un nuevo proyecto. Como ven, tenemos que lienzos aquí. Estas son las capas, los componentes y para empezar, utilizamos este marco de herramientas para crear un tablero de arte. Aquí eliges el tamaño de tu marco de diseño; teléfono, tableta, escritorio, reloj, papel, o incluso publicaciones o banners en redes sociales. Elijo un iPhone 8. Cambié el nombre de la obra de arte a “Inicio”. Antes de comenzar, descargué kits de interfaz de usuario de iOS desde el diseño de iOS, [inaudible] para Figma. Estas bibliotecas ayudan mucho. No es necesario crear empresas desde cero. Además, Figma cuenta con biblioteca para diseño de materiales si quieres diseñar una app para Android. Copio una barra de herramientas del Kit de UI. Quiero crear mi barra de herramientas sobre él porque no tengo el teléfono usado en el kit iOS. Lo sustituyo por Avenir Next. Ya he preparado mi conjunto de iconos en Illustrator. De acuerdo con el alambres y bocetos, traigo los iconos a la barra de herramientas. Para el botón Añadir, dibujo un círculo con un plus en el medio. Para la paleta de colores, decidí usar un verde fresco con el naranja rojizo. No olvides pequeños detalles. Puedes traer tu página de wireframe para diseñar la interfaz de usuario sobre ella. Para los iconos, casi siempre uso feathericons set. Son muy simples y mínimos. También para texto y títulos, nunca uso negro puro o gris puro. Prefiero usar un color oscuro como el azul oscuro sobre todo cuando tienes verde o azul en tu trabajo, se ve muy atractivo. Me encantan los emojis. Siempre me encanta tener la oportunidad de agregar emojis al diseño de la interfaz. Siento que la gente se lleva muy bien con ellos, sobre todo los jóvenes ya que los están usando todo día para chatear con amigos en aplicaciones de mensajería. Cuando se haga el diseño general, se puede agregar más detalles. Detalles que hacen que el diseño sea más hermoso. Utilizo otros colores para piezas pequeñas. Creo que si se trata de una app para universitarios, debe verse fresca de una manera que a los jóvenes les encantara. Una de las apps más coloridas que he visto en mi vida es Zenly. Si no me equivoco, Snapchat lo ha adquirido. Se ve tan fresco. Me encanta el uso de colores. El app se ve tan animado. Página de inicio está hecho. No olvides descargar archivo Figma. Ahí se puede ver la página principal y el proceso completo de agregar un nuevo proyecto de ley, páginas, wireframes recreados, y prototipos para antes. En Figma, también puedes crear prototipos. Es igual de fácil como la aplicación InVision. Aquí puedes elegir el marco del diseño. ¿ Es vertical u horizontal? Incluso el modelo de tu iPhone. Es genial, ya ves. También puedes elegir el color de fondo. Para empezar, seleccionas el marco u objetos en un marco y lo conectas a otro fotograma, como crear puntos de acceso en la aplicación InVision. En la página de inicio, cuando el usuario hace clic en el botón Agregar, va a la página siguiente donde elige a su amigo o amigos para crear un proyecto de ley. Si elige a más de un amigo, el botón Siguiente se convierte en un botón Crear grupo. Por lo que es más fácil para un usuario distinguir lo que está sucediendo. Después captura una foto del proyecto de ley, y luego elige Split de manera uniforme, y luego asigna a sus amigos a gastos, elige el impuesto y toca el botón Cargar. La última página también está vinculada a la página de inicio. Analicemos lo que hicimos. Ya ves, este es el prototipo con Figma. Es posible que hayas visto hermosas interacciones para aplicaciones móviles y sitios web de diseñadores en Three bill o Behance. Se puede crear este tipo de animaciones de principio. Se trata de una aplicación muy práctica y súper fácil de trabajar con. Para su asignación, diseña la interfaz de usuario para la página de la pantalla de inicio. Ya tienes el Sketch y creado por un marco para. se puede hacer. Puedes diseñar interfaz en Figma o cualquier otro software que ya tengas y te sientes fácil usarla. Basta con subir un JPG de tu trabajo final. Compártelo igual que el ejemplo. Esta es la asignación final y muestra lo que has aprendido durante esta clase. Estoy esperando a ver tus apps de compartir split. Además, no te olvides de hacer tus preguntas. 10. Cierre: Está bien. Hemos llegado al final. Hemos hecho un montón de trabajo impresionante. Espero que ustedes, chicos creativos, se divertieran creando ideas para una aplicación split share [inaudible] en poco tiempo. Es importante conocer todos los esfuerzos te harán lanzar. Con las acciones que realizas tras el lanzamiento, ¿te acercará más a la UX perfecta de tu app? Es tu responsabilidad como diseñador de UX anticipar el comportamiento del usuario. Crear experiencia visual sin fricción no es fácil. Toma tiempo, esfuerzo, dedicación, pero con las herramientas adecuadas puedes optimizar tu app de forma rápida y efectiva. Al usar herramientas analíticas para aprender de la vida útil in-app de tus usuarios, puedes crear la experiencia de usuario de toda la vida. Recuerda también que serás un buen diseñador si trabajas y compartes tu trabajo con otros para obtener retroalimentación. Sé cómo se siente al principio cuando acabas de empezar y aún no estás satisfecho con lo que estás diseñando, pero créanme, trabajar y compartir con otros para obtener retroalimentación te ayuda a mejorar y trabajar más. Trabaja, practica, compártelo con otros, obtén retroalimentación y buena suerte.