This is my proposed prototype of processing.js IDE designed in Adobe Photoshop. The name “I Draw” I choose this since its self explanatory and defines what the purpose of this IDE is. The buttons on the top right  ”Examples” “My Files” “Reference” “Help” are grouped together because it distinguishes them from the actual editor and its function. This will not confuse the user by having too many items grouped together, making it look cluttered. The colored buttons makes the design appear more cleaner and less repetitive.

The search functionality will be used as a universal search to locate any piece of information related to the IDE(examples, references. help, etc).

Each new file will have its own tab and each tab will consist of its own “Play, Pause, Refresh” button. The tab will contain two panels “Code Mode” and “Live Mode”. The user can toggle either mode on or off by clicking on the arrow keys, allowing either mode to be in full screen. The “+” symbol allows the user to create a new file(new tab).

I find “about us” on the bottom more appropriate since it can be grouped with other informative links that might not relate directly to the IDE itself.

My team members, Derek Ambrose, Anthony Alves, and Steven Ganeshram have also come up with their own prototypes and we are working with Robert O ‘Rourke who is assisting us in this project…In the next few days we will work with each others designs and finalize something!

p.s I still have not decided where to put the “save” button.