09.02. Learn the fundamental elements of user interface design
Learn the fundamental elements of interface design, from how to apply the principles of colour and typography in these environments, to elements we couldn't use such as sound or interaction.
09.02. User Interface Design Elements Index
01. Colour semantic coherence
The colour element is common to all areas, as we must maintain semantic coherence across all platforms.
01.03.03. Colour
It is highly recommended before continuing to study this sub-topic in order to achieve a reasonable level of mastery of the subject.
No items found.
02. Learn how to use typography
Learn how to use typography as a narrative element in your interfaces and learn to use its different parameters to create hierarchies and structures for legible and rhythmic typography.
01.03.04. Typography
It is highly recommended before continuing to study this sub-topic in order to achieve a reasonable level of mastery of the subject.
No items found.
03. How to create a coherent and consistent icon
One of the most prevalent elements in the world of interfaces is iconography. Learn how to create coherent, consistent systems with a clear and intuitive meaning.
System Icons - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Product Icons - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Animated Icons - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
04. Interaction and its most common patterns
We interact with our devices through gestural or tangible tactile interactions, so recognising the most common patterns ensures that we create frictionless experiences.
Gestures Interactions - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Selection Interactions - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
States Interactions - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
05. Sound as a design element
One element we can learn to create more holistic experiences is sound. Knowing how to use acoustic design or the use of sound as a design element will create a very mature interactive design.
Applying Sound to UI - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Sound Attributes - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
06. The shape of the elements
Learning how form can create new meanings through the use of curves, strokes, thicknesses, colours, organicism... will help us to transport a conscious semantic value to our artefact.
Shape - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Shape Hierarchy - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Shape as Expression - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
07. The communication of an interface
Remember that an interface is a living, active and multimodal artefact, so teaching it to communicate is a critical task when deploying it in real environments.
Confirmation Acknowledgement - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Data Visualization - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Empty States - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Help & Feedback - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Imagery - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Launch Screen - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Onboarding - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Offline States - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Writing - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
08. Interface design and layouts
Learning the different layouts and compositions that we can use to distribute our elements in the interface will ensure a compression and a narrative that our users will appreciate.
Understanding Layout - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Pixel Density - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Responsive Layout Grid - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Spacing Methods - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Component Behavior - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
09. How to give volume and depth to the interface
Although the vast majority of interfaces are still 2D, it is very important to learn how to create volume and depth by elevating components.
Elevation - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
10. Wrong patterns in interface design
Not all that glitters is gold. We can both use and implement delightful interaction patterns, and the opposite, patterns full of traps and dead ends.
Needy Design Patterns: Please-Don’t-Go Popups & Get-Back-to-Me Tabs
Kate Moran & Kim Salazar
NN Group
Level Medium
15/05/16
Topic complete! 🎉🎉🎉
Congratulations! We recommend you to continue studying with us, completely free of charge, to reach your goal and apply for the job you are looking for. Don't forget to donate to keep the project alive 💖💖💖
10.01
Designing Information ->
Learn how to design and arrange information and structure it in a coherent and narrative way. Learn the history and its main elements, as well as the principles of data visualisation and some super-enriching cheatsheets.
Stay up to date or donate to the project
This project is created by one person only, so if you subscribe to the newsletter, or collaborate by donating coffees to maintain the database, or recommend new resources, you will be more than welcome 💜
Explore all subjects in Block IV - Design & Prototype
Explore all the topic in each subject. Each subject is divided into different topics that contain a series of resources to study. Start from 0 or wherever you want.
