[Design]Step by Step

Anytime when designing an application, try your best to split the work into steps. Don't put every functions into one workspace.
For example, in our project, users can select an image from the image list and then create their character based on the selected image.
Initially, I didn't do any design work. I just listed all the functions that needed and split the whole workspace - the web page - into different areas: one for image list, one for user editing and one for control buttons.
After I implemented those functions and put them together, trucks of problems came! What will happen when user clicks a new image without store existing work? How to make it efficient when users only click images and never do editing? Should we restore everything to the initial state or keep the original state when users click a new image? Bla bla ...
To handle those interaction between all the areas makes the code really confusing. What should I do?
Stop! Try a new way.
Finally, I use different pages to host different functions. A page for users to select an image, a page to create the character and a page to show the result after handing in. In this way, I can avoid many accidental interaction between modules. Only limited interactions are allowed. A nice way!
Original:



Redesigned: