Learn about grids and keylines and why they are important
- [Instructor] Take a look at this example.…Would you say this is a well done design?…What don't you like about it?…When designing user interfaces,…we shouldn't randomly cram the screen with all the elements.…Instead, we should use wide spaces…to segment the information on the screen…and create a visual rhythm that pleases eyes…and makes the information easier to process…by the human brains.…Take a look at the right side of the screen.…Notice how wide spaces make the interface…much easier to read.…
That's what we should be trying to achieve.…Material Design makes it easier to align elements…with standardized grids and metrics.…As developers, even if simply follow the guidelines…to align elements on the grid,…the interface will look nice and consistent automatically.…Take note that all components align…to a 8dp square baseline grid.…Text aligns to a 4dp baseline grid.…
Material design also defines key lines…for common UI elements.…For example, the image in the list…typically aligns with this keyline,…leaving a 16dp margin to its left.…
- Using material design principles
- Working with units and measurements
- Using elevation and drop shadows
- Leveraging grids and keylines
- Setting up React Native for Android
- Building floating action buttons
- Creating an immersive experience
- Adding motion and transitions
- Animating icons
- Using component libraries
Skill Level Intermediate
Android App Development: Data Persistence Librarieswith Annyce Davis4h 52m Intermediate
React Native Ecosystem and Workflowwith Emmanuel Henri1h 3m Intermediate
1. Material Design Overview
2. Tools and Environment Setup
3. Build the Materials with React Native
4. Material Motion with React Native
5. Component Libraries
Library selection strategy3m 10s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.