09.01. Methodology for learning user interface and prototyping
Learn how to design user interfaces to reflect in a tangible way all the design decisions and interaction models generated in the research and definition phases.
09.01. User Interfaces & Prototyping Basics Index
01. User interface design principles
The principles of interface design are governed by the common principles of design, but we have to adapt them to the specific casuistry of this type of media.
What is User Interface Design?
Interaction Design Foundation
Interaction Design Foundation
Level Beginner
Unknown
A Comprehensive Guide To UI Design
Christopher Murphy
Smashing Magazine
Level Beginner
21/02/18
User Interface (UI) Design Patterns
Interaction Design Foundation
Interaction Design Foundation
Level Beginner
Unknown
Devising Interfaces with UX Design Patterns
Yulia Z. & Maryna Z.
Ruby Garage
Level Beginner
27/07/17
Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces
Euphemia Wong
Interaction Design Foundation
Level Medium
11/2020
Adaptive vs. Responsive Design
Mads Soegaard
Interaction Design Foundation
Level Beginner
09/2020
Responsive Design vs. Adaptive Design: What’s the Best Choice for Designers?
Studio by UXPin
UXPin
Level Beginner
Unknown
02. Aesthetic and psychological patterns in the user interface.
Learning design principles will help us to reflect aesthetic and psychological patterns in our interfaces.
01.01.02. Design Principles
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 design interfaces with the atomic design method
Methodology par excellence in the world of interface design. Learn about its elements and philosophy and start creating atomically.
Atomic design
Brad Frost
Brad Frost
Level Beginner
10/06/13
04. Basic components for interface design
There are thousands and thousands of components, but here are the basic components of common, everyday interfaces.
Button Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Navigation Drawer Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Bottom Navigation Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Sliders Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Tabs Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Tooltips Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Checkboxes Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Radio Buttons Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Switches Toggle Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Text Fields Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Menus Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Cards Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Chips Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
Lists Component - Material Design Guidelines
Material Design
Material.io
Level Beginner
Unknown
05. Heuristic evaluation for interface design improvement
Learning heuristic evaluation will allow us to improve our interface on a human level and to implement smooth and efficient interaction models.
07.02. Heuristic Evaluation
It is highly recommended to study this topic before proceeding in order to master the subject at a reasonable level.
No items found.
06. Information architecture components
Engaging information architecture components and interaction models through an aesthetically pleasing and efficient interface will make your product extremely usable.
06.02. Information Architecture Components
It is highly recommended to study this topic before proceeding in order to master the subject at a reasonable level.
No items found.
07. Bosquejo and Figma interface design software
Using good interface design software makes our work easier, but it is not everything. Due to the changing nature of this type of software, I am only showing an article on the two best known tools with the largest community, especially Figma.
The Ultimate Guide to Getting Started In Sketch (With Free 99-Point Cheat Sheet)
Andrew Wilshere
Design Lab
Level Beginner
30/01/17
The Power of Figma as a Design Tool
Ben Kopf
Top Total
Level Beginner
Unknown
08. Software for the design of the interface prototype
A prototyped artefact is the highest fidelity we can achieve, either through prototyping software or low-code. A must-have artefact in the evaluation of interaction patterns and micro-interactions.
04.03.06. Prototype Feedback & Testing
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.
09. Animations and micro-interactions for the user interface
The use of animations and micro-interactions at the necessary moments will help through delight or utility.
The Role of Animation and Motion in UX
Page Laubheimer
NN Group
Level Medium
12/01/20
Animation for Attention and Comprehension
Aurora Harley
NN Group
Level Medium
21/07/14
Executing UX Animations: Duration and Motion Characteristics
Page Laubheimer
NN Group
Level Medium
09/02/20
10. How to transfer and print the user interface documentation
If we want our interface to be implemented correctly, we must learn to document our design and prepare the handoff or technical documentation for development.
The Best Way to Document UX/UI Design
Jake Tsacudakis
UI prep
Level Medium
23/10/20
Design Documentation: Why You Need It
Nick Babich
Adobe XD Blog
Level Medium
22/04/20
Creating a UI Style Guide for Better UX
Micah Bowers
Top Total
Level Medium
Unknown
Design Handoff Guide: What Makes Good Designer-Developer Collaboration?
Katica Babarczi
UX Studio
Level Beginner
15/05/19
A Comprehensive Guide to Executing The Perfect Design-to-Development Handoff
Kayleigh Karutis
Phase
Level Beginner
Unknown
Recap: Best practices for designer-developer communication
Tara Malone
InVision
Level Beginner
04/09/18
11. Review the interface design and receive feedback.
A great way to receive feedback is from other design professionals or your own team, always in structured sessions and giving the context, objectives and metrics of your design.
04.03.02. Design Review
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.
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 💖💖💖
09.02
User Interface Design Elements ->
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.
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.
