Contenido del curso
Composición
Diseño de Interfaces
¿Cómo ser creativos?
Herramientas Esenciales para el Diseño de Interfaces y Prototipos
Marco Emilio Marquez Trejo
Estudiante
Susan Vélez
EstudianteContenido del curso
Herramientas Esenciales para el Diseño de Interfaces y Prototipos
Figma sirve para realizar diseños web de forma colaborativa. Así, permite crear tanto diseños de interfaces como prototipos, con imágenes, iconos, diagramas de flujo y color, entre otros elementos visuales.
En los últimos años, esta herramienta ha ganado popularidad, ya que es muy sencilla de utilizar, tiene muchas funcionalidades y es perfecta para trabajar en equipo organizadamente. Además, dispone de una versión gratuita.
Sketch es una herramienta de edición de vectores en interfaces web y móviles. Así, sirve para el desarrollo web y el prototipado. Por otra parte, también sirve para crear logos, y otros elementos relacionados con la identidad de marca.
Algunos de los puntos fuertes de esta herramienta son que es compatible con otros softwares del mercado (ej., Adobe) y que permite trabajar en línea.
No obstante, y aunque es una de las herramientas para el diseño de interfaces más extendidas, solo está disponible para Mac.
InVision Studio es una herramienta que sirve para diseñar interfaces con un alto nivel de interacción y para crear prototipos. Uno de sus puntos fuertes es que permite incluir animaciones y movimiento en la interfaz.
Prueba de su gran valor es que la utilizan marcas como Spotify, Netflix y HBO.
Studio Design es una herramienta de diseño y prototipado. Al igual que la herramienta anterior, permite incluir animaciones y movimiento en la interfaz. Permite implementar una gran variedad de funciones avanzadas sin necesidad de implementar código.
Adobe XD (Adobe Experience Design) es una herramienta de edición de gráficos, que permite crear interfaces web y móviles y prototipos. Al igual que Figma, es ideal para trabajar en equipo.
Al ser una aplicación de Adobe, sus funcionalidades son muy similares a las de otros programas de este paquete, como Photoshop e Illustrator. Por tanto, si ya sabes utilizar estos dos últimos o estás pensando en aprender a hacerlo, la interfaz te resultará familiar.
Por supuesto, las anteriores solamente son algunas de las muchas herramientas que existen para el diseño de interfaces y prototipos. Como has podido comprobar son muy similares, y tan solo tienen algunas sutiles diferencias entre sí.
Lee: Top 35 Programas y Software de Diseño Gráfico para 2023
En el mercado hay una gran variedad de herramientas, y es posible que haya otras que se adecúen más a tus necesidades o con las que estés más cómodo. En cualquier caso, lo importante es que, antes de decidirte por una herramienta, te documentes a fondo sobre ella y, que pruebes la versión gratuita si está disponible.
Conclusión
Reto
Visita las páginas web de las anteriores herramientas y comparte en los comentarios cuál es tu favorita. Igualmente, si conoces otras herramientas de diseño de interfaces, no dudes en compartirlo.
Marco Emilio Marquez Trejo
EstudianteSusan Vélez
Estudiante
Carolina Cabezas
Estudiante
Carolina Martínez
Estudiante
Lucas David Ramírez Idárraga
Estudiante
Daniel Raul Toledo Soto
Estudiante
Ahinoam Hidalgo Arguedas
Estudiante
Stefany Conde Sánchez
Estudiante
Eduard Mejía Martínez
Estudiante
Richard Steven Parra
Estudiante
Raúl Oswaldo Sánchez Guerrero
EstudianteBryan Ramirez
Estudiante
Jack D. Castilla Romero
Estudiante
Geraldine muñoz
EstudianteSusan Vélez
Estudiante
Daniel Alberto Portillo Rico
Estudiante
iecgerman .
Estudiante
Betzaida Valencia
Estudiante
Daniel Steven Carrera Osorno
EstudianteJosé Alexander Rivas Cevallos
Estudiante
Ana Graciela Torres Valencia
Estudiante
Catalina Jiménez Martínez
Estudiante
María Alejandra Espinosa
EstudiantePaginas web InVision Studio
Platzi tiene cursos de https://platzi.com/cursos/adobe-xd/ https://platzi.com/cursos/figma/ https://platzi.com/cursos/sketch/
Gracias Marco por tú aporte.
No he utilizado ninguna hasta el momento pero la que me llama más la atención porque la nombran mucho en equipos de diseño es FIGMA.
Estoy más familiarizada con los editores de Adobe pero todavía no he probado Adobe XD. A preferencia general me decanto por las herramientas de Adobe.
Me pasa igual. Mi herramienta por excelencia es Photoshop, completa versátil increible.
Genial todas la paginas , No conocía InVision Studio y Studio Desing.
Las demás ya las conocía e incluso uso activamente Figma en mis proyectos actuales.
Hola Daniel! Que te ha parecido Figma?
He manejado Figma, Adobe Xd, Sketch e Invision cloud. Mi favorita es Figma porque pienso que es super intuitiva y le lleva algo de ventaja a las demás en flexibilidad y funcionalidades para diseñar y adaptar componentes a diferentes tamaños sin tener que hacer muchos cambios, también me gusta que es una herramienta en linea, lo que a mi manera de ver la hace más robusta al momento de manejar grandes prototipos y facilita el trabajo colaborativo.
Continuo por ahora aprendiendo PHOTOSHOP, ILLUSTRATOR E INDESIGN. Hasta ahora mi favorito es illustrator. Como aporte de lo investigado sobre los programas de esta plataforma Adobe, comparto algunos los usos o medios para lo cuales fueron creados esos programas es tomado de un publicación realizada por la empresa Imprenta On line 24. Cuando utilizar Adobe Indesign Indesign es el programa para el diseño de medios o soportes impresos con muchas páginas. Aquí desarrollar y diseñar folletos, boletines informativos, revistas, libros e incluso tarjetas de visita. Se puede crear cualquier diseño que tenga una combinación de texto e imágenes. Nos permite tomar los elementos que se han creado en Illustrator y Photoshop y ponerlos en una página, dándole a un diseño coherencia y que sea consecuente con su esencia. Hace fácil el manejo de texto versus imagen, su función de ajuste de texto –en el que literalmente se puede ajustar el texto alrededor de las imágenes u objetos- es mucho más simple y fácil de usar que en Illustrator. Si bien que podemos generar diseños de varias páginas con Photoshop e Illustrator, es bueno conocer que generamos archivos demasiado grandes que pueden dificultar su manipulación posterior e incluso su impresión. Si bien Indesign tiene sus limitaciones. Por un lado, no tiene la capacidad de editar fotos. Te brinda la posibilidad de dibujar gráficos vectoriales, pero las funcionalidades son mucho más limitadas que en Illustrator. Cuando utilizar Adobe Illustrator Su razón de ser es la creación y edición de ilustraciones vectoriales como pueden ser logotipos, marcas comerciales u otros elementos de diseño. Los gráficos vectoriales son imágenes escalables que pueden redimensionarse a mayor o menor tamaño en función de las necesidades sin perder resolución ni nitidez. Aunque también se puede utilizar Illustrator para crear documentos de varias páginas como, por ejemplo, folletos o memorias, presenta algunas desventajas. Para empezar, no permite trabajar con páginas maestras como Indesign, algo prácticamente necesario y obligado cuando necesitamos trabajar sobre plantilla. Por otra parte, Illustrator tampoco permite automatizar los números de página a diferencia de Indesign que sí que ofrece esta función y que es especialmente útil cuando trabajamos con documentos con gran cantidad de páginas. Cuando utilizar Adobe Photoshop Photoshop es el programa que nos permite crear y editar imágenes a partir de píxeles. Aunque originariamente fue un software que se desarrolló para el retoque fotográfico, lo cierto es que con el tiempo sus funciones han ido aumentando hasta el punto que, hoy en día, también se puede utilizar para gráficas web, diseño de interfaces para software, web y móviles, y gráficos de vídeo. Debido a que hay tanta información sobre Photoshop en Internet en forma de tutoriales y guías, algunas personas creen que es la panacea y la herramienta que necesitan para sus trabajos, pero no es así. Photoshop no es una ventanilla única porque hay momentos en los que será necesario descartar este programa y recurrir a Illustrator o Indesign. Un ejemplo es cuando queremos diseñar un logotipo. No tendría sentido recurrir a Photoshop porque trabajaríamos a partir de píxeles y a la hora de redimensionarlo perderíamos calidad. En estos casos, por tanto, tenemos que optar por Illustrator para tener un archivo vectorizado.
Las herramientas de diseño de interfaces son interesantes, ya habrá la oportunidad de seguir aprendiendo.
Nota: Aunque la que me llama la atención es Adobe XD
Adobe XD, sinceramente no sabia mucho sobre el programa, pero ya que investigue a fondo se me pareció interesante, y por lo visual creo que seria "fácil" (entre comillas pq no seria tan fácil) manejar el programa.
Pero sin duda Sketch no se que atrás por lo visual se ve que es un programa un poco fácil de manejar.
Creo que Figma porque considero que es muy fácil de usar y supera a las demás en términos de flexibilidad y características. Permite diseñar y ajustar componentes a diferentes tamaños sin necesidad de realizar muchos cambios. Además, me agrada que sea una aplicación en línea, lo cual, en mi opinión, la hace más sólida para manejar grandes prototipos y facilita el trabajo en equipo. Les dejo un curso para comenzar con lo basico: https://platzi.com/cursos/figma-basico/
paginas web
FIGMA
SKETCH
INVISION STUDIO
STUDIO DESING
ADOBE XD
Hasta el momento no he tenido experiencia con ninguna de las herramientas nombradas, pero creo que por el momento iniciaré con Adobe XD.
Todas me parecen aplicaciones muy buenas con prestaciones diferentes pero muy funcionales y se pueden hacer cosas muy buenas con creatividad. Igual, no por fanatismo sino por la facilidad para entenderla me inclino por la de Adobe.
Conclusión
Algunas de las herramientas que se pueden utilizar en el diseño de interfaces son:
Figma Sketch (Sólo para Mac) Lunacy (es el Scketch de Windows) InVision Studio Studio design Adobe XD. https://www.justinmind.com/ https://www.axure.com/ https://www.uxpin.com/
La que he utilizado hasta el momento es Adobe XD y me gusta.
Figma es el nuevo líder de industria y siendo una sola solución de software.
Un programa de diseño que era excelente y facil de usar era <u>FREE HAND. </u>Lastima que lo hayan retirado del mercado.
por lo demás algunos programas se complementan con otros .Sin embargo,
todos son buenos, solo hay que aprenderlos a utilizar.
Wow!!! había escuchado mucho de Figma, pero jamas había ingresado a su página, ¡es muy interesante! :)
He usado Figma y Adobe Xd. Con las actualizaciones y mejoras en Figma, definitivamente es un software de diseño que ha implementado características más allá del UX/UI, convirtiéndola en una herramienta bastante útil en el uso de vectores (Figma Make, así se llama), creación de presentaciones (Figma Slides). Es importante estar al tanto de los lanzamientos que vienen después de Figma Conf, porque los de este año sí fueron un acierto tremendo.
Hola! Adobe XD esta disponible para IOS?