Developing TicToe HTML5/User interface mock

Development log of TicToe HTML5

• Why tic tac toe?‎
• Idea and concept
• Core
  • User interface mock
  • Object model
  • Implementing Client Entities
  • Preparing the Server
  • Implementing Server Entities
  • Client-Server communication
  • Implementing the game logic
• Adding Features
  • Login and account creation
  • Hall of fame
  • Avatars and outfits

After we spent some thought on the game design in the previous article, we should now design a rough user interface. Designing a sketch up of the user interface before the complex logic, has the huge advantage that it helps in communication. It's important not to raise too high expectations at this point because a good user interface may look to non-developers as a finished application, although most of the work still remains to be done.

We will break the user interface into the following parts:

The main game screen

We start with the main screen. This is the most important part of the game.

One player uses crosses to mark their field and the other player uses noughts . Those tokens are placed or drawn on a 3 x 3 game board.

Hall of Fame

TODO: Design hall of fame

Login

TODO: Design hall of fame

Account creation

TODO: Design hall of fame

Avatar outfit selection

TODO: Design hall of fame