Design the UI
Let's take a look at how to sketch UI and identify components from the sketches.
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. ...