Curso De Diseño UI
Tabla de contenidos
Introducción
Qué tal bienvenida bienvenido al curso de diseño y web de que se tratara este curso te estarás preguntando bueno este curso se trata de conocer todos los conceptos necesarios para poder diseñar interfaces digitales este curso es más bien teórico así que en este curso no nos vamos a centrar en aprender a usar una herramienta en particular eso es algo técnico y lo podemos eventualmente conocer en otro momento en este caso nos vamos a concentrar en los conceptos en las ideas en lo que necesitas saber para que tus diseños independientemente de la herramienta en la que los construyas sean fáciles de utilizar y se vean bien para que permitan que la aplicación que estás diseñando el sitio web que estás diseñando tengan una buena apariencia y sea sea bastante intuitivo fácil de utilizar para sus usuarios así que habiendo hecho esta aclaración te doy la bienvenida y pasemos a la siguiente lección en donde ya vamos a entrar en materia conociendo qué es efectivamente el diseño y nos vemos.
Qué es el Diseño UI
Bien para comenzar el curso de diseño y white creo que lo más importante es establecer que es el diseño y white así que vamos a partir con esta definición probablemente algunos de ustedes ya sepan lo que es el diseño igual o tengan alguna noción pero vamos a explicarlo de igual manera para que todos tengamos de aquí en adelante una definición estándar y entendamos de qué es lo que hablamos cuando hablamos de diseño web entonces de dónde viene este concepto del diseño higüey bueno y hay es una forma de pronunciar las dos letras y la letra i en una pronunciación inglesa porque habitualmente se dice en inglés porque suena raro decirlo en español sueña suena raro decir soy un diseñador uy cierto no nadie quiere ser un diseñador uy pero por eso suena más bonito decir soy un diseñador y guay pero en el fondo de de eso se trata de las letras y la letra y de dónde vienen estas dos letras bueno vienen del concepto y user interface y qué significa usar interface interfaz de usuario así que con eso ya tenemos claro lo que significa el diseño igual y podemos seguir adelante no no es así porque ahí hay que profundizar un poquito más y entender bien de qué se trata este concepto de diseño igual porque si te digo interfaz de usuario capaz y entendemos cosas diferentes así que vamos a profundizar un poquito más partamos definiendo qué es una interfaz bueno una interfaz es un dispositivo capaz de transformar las señales generadas por un aparato en señales comprensibles por otro aparato son un poco abstracto pero no lo es tanto si observamos un ejemplo veamos por ejemplo una interfaz de audio que es lo que hace una interfaz de audio captura las señales electromagnéticas creo que son electromagnéticas que envía un micrófono o las señales electromagnéticas que envía una guitarra por ejemplo o las señales en el formato que sea pero una interfaz de audio toma estas señales las procesa y te las devuelve como señales digitales a través del cable usb de tal forma que tu computadora leer estas señales y trabajar con ellas bien eso es lo que hace una interfaz toma señales toma contenido que viene de una forma lo agarra lo convierte en una señal de otra de un tipo distinto para que otro contexto lo pueda entender entonces es un dispositivo en el fondo que permite que dos entes que por sí solo no pueden comunicarse esta interfaz permite que estos elementos puedan finalmente comunicarse o transferencia información bien se entiende lo que es una interfaz veamos ahora qué es un usuario pareciera ridículo pero tenemos que hacer esta definición que es un usuario alguien que usa habitualmente un servicio entonces por ejemplo podemos mencionar a una persona que hace uso del servicio del transporte público bien el transporte público está ahí funcionando y las personas que se suben con tanto estilo como la persona que sale aquí en la foto esa persona es una usuaria del servicio de transporte entonces en este contexto en el contexto de este curso estamos hablando acerca de diseño de digital de interfaces.
Diseño UI vs UX vs Front-End
Bien creo que todos hemos visto a alguien que tenga en su descripción o que se defina a sí mismo como un diseñador y guay y uex o wikis pero qué significa esto porque las personas usan estas estas dos siglas o estas dos acrónimos al lado del otro entendamos en esta elección cuál es la diferencia entre y white y su ex y por qué muchos muchos confunden lo que son estas estas dos terminologías entonces ya sabemos lo que es y hay cierto es y es el interface que para fines prácticos en el fondo es un sinónimo de decir interfaz gráfica de usuario pero que es uex veámoslo a continuación uex al igual que igual viene de un acrónimo en inglés y las letras y la letra x vienen de la palabra y user experience que en el fondo significan en español experiencia de usuario entonces la experiencia de usuario es se refiere a las interacciones que un usuario tiene con una marca producto o producto le hacen sentir me explico yo tengo por ejemplo un ipad cierto que es donde estoy viendo esta presentación entonces hay una experiencia que yo tuve al momento de ir a la tienda de apps cierto había 10 todos estos mesones blancos la forma en que me atendió la persona de esta tienda me hizo sentir de cierta forma me hizo sentir acogido me respondió a todas mis dudas por lo tanto me hizo sentir escuchado me hizo sentir que las preguntas que yo tenía no eran estúpidas me atendió de buena forma y finalmente terminé comprando este ipad posteriormente cuando llegué a casa abrí este esta caja del ipad que venía en una caja blanca muy bonita con algunas terminaciones brillantes que lo hacían ver relativamente elegante así que lo saqué de la caja que calzaba perfectamente casi que estaba al vacío el ipad dentro de la dentro de esta caja venían unos manuales de instrucciones muy bonitos bien empaquetados y luego venía el ipad en sí mismo envuelto en un plástico entonces abrí este plástico que venía muy bien la barra dito y al momento de sacarlo generaba esta sensación de estar abriendo algo nuevo que es muy interesante y el momento de prender el ipad aparece esta manzanita te pregunta un par de cosas y ya está lista para que la pudiera utilizar.
Diseño UI vs Diseño Gráfico
En esta lección vamos a hablar acerca de la diferencia entre el diseño gráfico y diseño higüey esta no es una lección que sea súper relevante para entender el contexto del curso podrías perfectamente seguir con el resto del curso y saltarte estoy entenderías de igual forma pero creo que es importante hacer una pausa para hablar de este tema porque he visto por ahí un par de publicaciones en instagram y asumo que también está dispuesta en este tipo de opiniones disponibles en otras partes en donde se habla del diseño igual como algo completamente distinto al diseño gráfico y yo creo desde mi perspectiva quizás ésta no sea la opinión más académica cierto por eso está esta lección es más tiene una opinión personal así que tómala como lo que como lo que es pero desde mi punto de vista diseño gráfico y diseño y white son parte de una misma cosa el diseño y white desde mi perspectiva es el diseño gráfico aplicado al diseño de interfaces digitales entonces para entender esto vamos a primero partir de esta premisa de que hay personas por ahí que dicen que son cosas diferentes y lamentablemente estas estas publicaciones que yo he visto pasar no las he guardado así que quizás si eres escéptico estarás pensando que esto me lo estoy inventando y no tengo cómo no demostrárselo pero te pido por favor que confíes por lo menos en mi palabra en esta ocasión porque he visto personas que hablan de esto entonces voy a tratar de presentarte mi argumento de por qué creo que si son lo mismo entonces partamos viendo qué es el diseño gráfico veamos lo que lo que dice la definición oficial de lo que es diseño gráfico según la wikipedia el diseño gráfico es una profesión cuya actividad consiste en proyectar comunicaciones visuales destinadas a transmitir mensajes específicos a grupos sociales con objetivos determinados es una ensalada de palabras que en el fondo lo que quiere decir es que el diseño gráfico lo que hace es entregar comunicación visual y a través de esta comunicación visual transmitir mensajes con ciertos objetivos particulares hacia un grupo en particular.
Diseñar para Webs vs Apps
Bien ya entrando en materia en esta lección nos vamos a enfocar en las diferencias que existen entre diseñar interfaces para un sitio web y diseñar interfaces para una aplicación porque son diferentes y por qué hacemos esta distinción y finalmente lo que vamos a hacer es diseñar una interfaz que presente información en la pantalla cierto bueno es es generalmente distinto lo que nos encontramos en un sitio web y lo que nos encontramos en una app porque las las intenciones de un usuario o de una usuaria son generalmente diferentes en ambos contextos mientras que en un sitio web una persona generalmente lo que busca es acceder a información cuando está utilizando una app por lo general lo que busca es realizar una tarea específica obviamente estamos hablando de generalizaciones porque hay hay hay cosas que pueden salirse a esta norma por ejemplo puede tratarse de una aplicación de noticias en este caso en esta aplicación lo que va a querer persona es acceder a una noticia y consumir contenido cierto acceder a información pero por lo general un sitio web lo que presenta es información para que el usuario pueda consumir mientras que una aplicación facilita el caso de que una persona realice una tarea en particular y cuando hablo de la diferencia entre aplicaciones y sitios web no estoy refiriéndome necesariamente a separar el contexto computadora del contexto celular estoy hablando de cosas que son transversales a cualquier dispositivo podemos tener sitios web en computadora de escritorio podemos tener un laptop podemos tener en tablet podemos tener el celular e incluso de una forma más limitada pero también podemos acceder a sitios web desde un teléfono o de un de un reloj inteligente al mismo tiempo para todas estas plataformas existen aplicaciones particulares para computadoras de escritorio para laptop para celulares para tablets para para un reloj entonces no estamos hablando de una diferencia entre contexto ahora es cierto que en ciertos dispositivos la gente está más dispuesta a utilizar aplicaciones que a usar la web por ejemplo en un celular la gente tiende a utilizar más aplicaciones que a navegar en la web mientras que en una computadora la gente tiende a navegar más en la web que utilizar aplicaciones específicas pero en general estoy hablando de algo que puede aplicar a cualquier dispositivo.
Proceso de Diseño UI
En esta lección vamos a hablar acerca de el proceso de diseño de interfaces digitales y el proceso se ve más o menos como lo que se está mostrando en este momento la pantalla parte con un diseño juego con una con un entendimiento del proceso de negocio continúa con el diseño de un ser personal con la elaboración de un flujo de pantallas on screen flow con el diseño de wireframe continúa con un diseño de alta fidelidad continúa con un prototipado con obtención de feedback y finalmente con la entrega de estas interfaces digitales es un proceso que contempla varios pasos pero como te voy a explicar a continuación en cada uno de estos pasos es bastante importante así que vamos a ir viendo uno por uno estos pasos el primer paso es el proceso de negocio es decir entender lo que hace el negocio cómo lo hace y para que partamos entendiendo qué es el negocio cuando generalmente al usar la palabra negocio uno puede estar más o menos hablando acerca de comercio cierto de una tienda que vende y compra cosas bueno cuando hablamos de negocio en el contexto de la creación de sistemas digitales cuando hablamos de negocio nos referimos al modelo operacional base de esta institución o de esta empresa o de este de este cliente para el cual estamos haciendo la interfaz por lo tanto si estamos diseñando una interfaz para una interfaz contable o si estamos diseñando una interfaz para algunos de los procesos de una empresa que se dedica a la contabilidad bueno el negocio de la de la empresa o el negocio de nuestro cliente es la contabilidad entonces tenemos que entender en qué proceso de o en qué parte de todo el proceso de negocio de contabilidad de nuestro cliente se enmarca aquello que nosotros estamos diseñando cuándo la palabra en negocio en este caso lo estamos usando más bien en un contexto como en el significado que se usa en eeuu en el sentido gringo de la palabra cierto por ejemplo cuando alguien le dice a otra persona es nada por business quiere decirle esto no es de tu incumbencia entonces en este caso lo que estamos tratando de entender es cuál es la incumbencia de nuestro cliente y una empresa tiene múltiples procesos de negocio cada empresa cada cliente tiene múltiples procesos de negocios por eso es importante que nosotros conozcamos cuál de esos sub procesos o cuál de cuál parte de todo el proceso es aquella que se relaciona con la interfaz que nosotros tenemos que diseñar.
Herramientas de Diseño UI
En esta lección vamos a hacer un repaso rápido sobre las aplicaciones que nos van a permitir trabajar en nuestros proyectos de diseño de interfaces digitales eso sí aclarar de inmediato que esto no va a ser un tutorial de cada una de estas aplicaciones mi objetivo con esta lección es básicamente presentarte estas diferentes aplicaciones y que sepas a grandes rasgos qué es lo que hace cada una de ellas para que luego por tu cuenta puedas ir a investigar y encontrar tutoriales sobre la documentación al respecto entonces vamos a partir con la herramienta que probablemente sea una de las más populares hoy día que es sketch sketch es una aplicación de diseño de interfaces digitales y nació directamente para ese objetivo por lo tanto en los años en donde se volvió más popular que creo creo esto fue cerca del año 2013 2014 cuando esta aplicación alcanzó su máxima popularidad empezó a destronar a photoshop que venía siendo la herramienta que la mayoría de los diseñadores utilizábamos para crear interfaces digitales porque era una herramienta exclusivamente creada para él y hoy día sigue incluyendo cosas muy potentes y sigue estando a la vanguardia sigue siendo una de las más potentes herramientas para este objetivo así que lee el punto en contra que tiene sketch y lo que ha impedido que sea la máxima herramienta que todo el mundo usa es que sólo está disponible para equipos a pie si tienes windows no vas a poder utilizar esta aplicación y eso es bastante lamentable sería ideal que estuvieran ambas plataformas pero los creadores han decidido seguir con esta línea y trabajar sólo con equipos más vamos con la siguiente aplicación que es adobe ext y si sigues mi contenido regular regularmente seguramente ya has visto que es la aplicación que yo más uso hoy en día y con la cual he hecho un montón de tutoriales porque me gusta a dovi xxvi básicamente es la respuesta de adobe los creadores de photoshop illustrator y un montón de otras aplicaciones es la respuesta de esta empresa a sketch porque es que se estaba comiendo el mercado del diseño de interfaces digitales y ado y dijo bueno vamos a crear nuestra propia versión y sacaron a dobles de que la equis y la d viene por experience design por si no lo sabías la principal ventaja de adobe xdi sobre sketch es que funciona en windows y el mac por lo tanto puede abarcar la mayor cantidad posible de público no sé si funciona en linux probablemente no pero por lo menos sabemos que en mac y windows está disponible que es lo que la mayoría de la gente usa se pueden crear se pueden diseñar las pantallas se puede crear interacción entre ellas.
Principios del Diseño Aplicados al UI
En esta lección vamos a hablar acerca de los principios del diseño gráfico y de cómo podemos aplicarlos a la hora de diseñar interfaces digitales pero antes de comenzar a enumerar cada uno de ellos vamos a responder la pregunta que seguramente te estás haciendo que son los principios del diseño bueno básicamente los principios del diseño son un conjunto de reglas que podemos tener en cuenta a la hora de diseñar para que nuestros diseños sean cada vez más exitosos entendiendo el éxito cómo cumplir con el propósito para el cual estamos diseñando cada una de las piezas bien entonces estas reglas son dependiendo de quién le preguntes hay un montón de reglas que seguramente vas a encontrar algunas que o algunos principios que no están enlistados en este en este vídeo o hay otros que que podrán decirte que algunas de las cosas que voy a decir acá no son necesariamente principios de diseño pero en este caso he decidido hacer un listado de los principios de diseño que me parecen más útiles y más atingentes a la hora de diseñar interfaces digitales así que vamos a ver la lista que elegimos a continuación y vamos a partir con legibilidad que es la legibilidad bueno la legibilidad es el acto de hacer que las cosas dentro de una interfaz dentro de un diseño sean completamente legible es decir si leemos el texto que dice aquí nuestro trabajo es hacer que el usuario que al usuario le resulte fácil leer los textos que hay en el diseño e identificar la función de cada elemento.
Elementos de una Interfaz
En esta lección quiero hablarte de una distinción que a mí me resulta bastante útil a la hora de diseñar interfaces digitales qué es la separación entre tres tipos de elementos que pueden formar parte de una interfaz y te voy a contar cuáles son estos tres elementos a continuación con algunos ejemplos vamos a partir con los elementos informativos que entre paréntesis le vamos a llamar informativos pasivos a qué le llamamos elementos informativos a elementos que están dentro de una interfaz cuyo único propósito es entregar información y que no requieran de ningún tipo de interacción del usuario para poder cumplir ese propósito de entregar información ahora antes de que veamos los ejemplos estos son distinciones son nombres que yo mismo he ido desarrollando a lo largo de mi trabajo probablemente alguno de ustedes se le ocurra un nombre más apropiado para llamarle más allá de pasivo y bo etc así que si tienes alguna sugerencia déjame la en como un comentario debajo de esta lección pero por ahora vamos a continuar con estos nombres que son los que yo he establecido entonces como te iba diciendo los elementos informativos de pasivos son elementos que en cuyo trabajo es entregar información y cuando mostramos estos elementos si el usuario los lee o adquiere la información que están entregando ya cumplieron su propósito y no necesitan más que eso.
Principio UI: Claridad
En esta lección en el próximo par de lecciones vamos a hablar acerca de principios esenciales del diseño de interfaces de usuario y en esta lección en particular vamos a hablar acerca de la claridad que entendemos por claridad la claridad es cuando en el diseño de interfaces digitales buscamos que el usuario pueda cumplir con el objetivo deseado de manera sencilla y directa vamos a plantearlo de la siguiente forma hay un meme clásico que es monísimo problems que viene del creo que viene del videoclip de dj y con dady en donde decían que nos morimos como problems en donde básicamente significa que mientras más dinero una persona tiene más problemas se enfrenta porque hay más personas que quieren quitarse ese dinero comprar las cosas tienes más dificultades y te lo quieren robar te le quieren quitar bueno entonces más dinero es más problema y si eso lo extrapolamos al diseño de interfaces digitales más opciones es más problemas o más opciones es menos claridad y básicamente eso quiere decir que mientras más sencilla es una interfaz mientras menos hagamos pensar al usuario más fácil y más intuitivo le va a resultar trabajar con nuestra interfaz.
Reglas de Usabilidad
Patrones de Diseño
Te doy la bienvenida al curso «Bases del Diseño de Interfaces Gráficas de Usuario» o para ponerlo más cortito «Curso de Diseño UI». Si te gusta este contenido, suscríbete para ver más, dale me gusta y compártelo con tus amigos diseñadores. #cursoDiseñoUI #DiseñoUI #UIdesign ::: ¡¡¡Nuevos videos todas las semanas!!! ::: ACERCA DE MÍ Soy Francisco Aguilera G., creativo enfocado principalmente en el diseño web. Diseño y desarrollo sitios web para clientes y paralelamente me dedico a enseñar sobre diseño web a través de videos en línea.