Los guidelines de Material Design 😄
Bienvenido al Curso de Diseño de Interfaces Moviles
Lo que aprenderás sobre el diseño de interfaces móviles
Introducción al Diseño Mobile
Mobile hoy en día
Diseñando para mobile
Lineamientos
Anatomía
Interacciones
Bases
Navegación
Cards
Presentar información
Acciones
Onboarding en diseño de interfaces
Otros lineamientos
Quiz: Lineamientos
Introducción al Proyecto
Platzitinerarie
Web
Anatomía en web
Bocetos en papel para web
Expandiendo sistema de diseño
Analizando el diseño de todas las pantallas
Quiz: Web
Metodología
El rol del diseñador
Volver a la pizarra
Mejorar experiencia de onboarding
Quiz: Metodología
iOS
Anatomía en iOS
Bocetos en papel para iOS
Cierre en papel
Expandiendo sistema de diseño en iOS
Quiz: iOS
Android
Anatomía en Android
Bocetos en papel para Android
Expandiendo sistema de diseño para Android
Quiz: Android
Notificaciones
Funcionamiento
Notificaciones en nuestra app
Prototipos
Prototipos en Sketch
Implementación de Prototipos en Flinto
Handoff
UI Kit
Zeplin
Conclusiones
Conclusiones del curso y próximos pasos
You don't have access to this class
Keep learning! Join and start boosting your career
Material Design is the design system created by Google for all its digital experiences. Although it was originally designed for a more mobile-oriented audience, its application transcends this field, allowing the development of functional and aesthetically pleasing interfaces on various platforms. Material Design is not limited to Android; both Android and iOS have their own rules that share many basic concepts. The essential thing is to always keep in mind how and where the device will be used, effectively analyzing how to present information to the user.
Material Design has extensive documentation available at material.io/guidelines. This guide is an impressive source that will not only allow you to design under Material Design guidelines, but will enrich your knowledge of design in general. In particular, the section on components stands out, where the elements are broken down in theoretical and practical terms, helping you to understand their functionality. Reading and studying it is highly recommended to acquire a solid mastery of this system.
Navigation design in Android differs from iOS mainly by the location of the navigation bar. In iOS, this is anchored at the bottom, while in Android it is closer to the top. Another distinctive element of Material Design is the Floating Action Button (FAB), a persistent button that sits in the bottom right corner of the screen. This button is intended for important actions, not necessarily primary, and its design can be limited by the use of icons that are sometimes not so explicit.
Android allows moving between applications using gestures and has navigation options such as tabs and the Bottom Navigation Bar. The choice between one or the other depends on design and personal preference, although it is important to consider visual integration with the FAB. Design decisions in this regard should be well informed, making it clear that the design itself is a subjective matter and linked to the designer's personal taste.
Material Design offers several variants of lists, each with different elements and layouts such as lines of text, images, and buttons on the left or right. Familiarizing yourself with these options and experimenting with them is essential for a smooth transition from desktop to mobile apps on Android.
One of the best methods to learn and improve in design is to thoroughly observe and analyze other apps. Taking screenshots of visually appealing apps and breaking them down in design tools such as Photoshop or Sketch is very beneficial. Observing the sizes, margins, colors and shapes used in other designs serves as a great source of inspiration and learning. This approach of "imitating" and learning from the best is essential for honing skills and producing quality interfaces.
In summary, the invitation is clear: explore and study all available guidelines, evaluate the applications you admire and don't be afraid to be inspired by them. By thoroughly understanding the Material Design guidelines, you will be able to take a firm step towards developing Android mobile apps that offer uniform and enjoyable user experiences. Don't stop and keep learning to improve your design skills!
Contributions 10
Questions 1
Los guidelines de Material Design 😄
https://dyna.mo/blog/a-beginners-introduction-to-the-differences-in-ios-and-android-design
Lista de algunas diferencias entre Human Interface y Android
https://materialdesignkit.com/android-gui/
Aqui pueden encontrar el materia desing kit y descargarlo para adove xd, sketch y figma.
Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point. Floating action buttons come in two sizes: the default and the mini.
A leer las guías 😃 Estos guidelines ¿Pueden quebrantarse en algún momento? O si se hace algo diferentes ¿pueden no aprobarnos la app? o ¿Simplemente son recomendaciones?
Ohhhh genial, me encanta 😃
Este comentario lo pongo para bajar la animación de Hugo (que distrae muchísimo).
Hay un pequeño detalle, este curso fue hace dos años y ahora la barra de navegación del twitter esta en la parte de abajo, pero sigue manteniendo el botón flotante para crear un nuevo twit. Pero estaría bueno antes de hacer wireframes hay que revisar el material design y aplicaciones similares en ambos sistemas operativos antes de bocetear.
Want to see more contributions, questions and answers from the community?