Design the UI
Explore the process of designing user interfaces by sketching layouts and breaking them into React components. Learn how to organize these components hierarchically, plan user interactions, and create reusable UI elements for different screens such as sign-in, game, win, and lose. Understand how to prepare components with properties and inputs to build a smooth, modular front-end for your web application.
We'll cover the following...
Sketching layout
To begin, we want to sketch out all the screens. In our case, there are four.
Sign-in screen
For example, the first one, the sign-in, has the title Lang-Man and subtitle, the gallows, the name entry, the language selection, and a “Start” button.
Once the diagrams have been sketched, it’s useful to overlay the pieces with boxes representing the components. The edges of these boxes must never cross, but the nesting of boxes is okay. These boxes will be the React components from which the application is built. It may also help to draw guidelines for any grid system that will be used. Here’s what the same sketch looks like again with those details overlaid. ...