After collecting your feedback and suggestions I created a few paper mockups and arranged the most important elements.
I’m currently working on the design (using Photoshop CS5).
Paper prototyping / Mockups
(the mockups are posted in chronological order)
Photoshop Mockup and Implementation
First I create a mockup in Photoshop (I usually use a dark background and a light color for the main areas).
After creating the mockup I start working on the most important area first (for the speedtest it is the Input field and the words the user has to type).
If you compare the Photoshop Implementation with the last paper mockup you can see a difference in how the words will be displayed. Instead of having a huge word block with 3 rows I now experiment with a “word-slideshow”. This hopefully saves space and will get rid of the irritating “line-switching”.
(Please help me improve my english by telling me my mistakes).