Instructional Overlay for Webmaking 101 tool prototypes

In preparation for the Open News design sprint next week I did a few mock ups playing around with an Instructional overlay. The idea is that this is a slider that could be toggled over the js.bin interface that we use in the lovebomb.me, webpage maker and soon- open news prototypes. It will give the user helpful tips and pointers on how to write html and css.

As you look at these designs, keep in mind that the grey bar can be moved up and down (or side to side) with your mouse.

This first iteration is a horizontal overlay. My concern here is that if a user has a small screen it might be cluttered. Additionally, I am not sure if this is the most logical design for a user who will probably have to go back and forth editing the html and reading the instructions.  The numbers 1- 5 are a progress bar. I am not convinced that this is the best placement or if this is appropriate. I think that once we think through how badges might be integrated into this prototype, the progress bar will be reconsidered. (Note: all language and branding graphics are place holders)

 

Below is the second iteration- I am trying out a vertical overlay.  I think that this feels a little bit more logical and intuitive in terms of design. I also changed up the progress bar a bit and the slider toggle.

I was having a bit of a prototyping party testing out some different ideas for progress bars below. Also- playing around with potential palette options. Such a small detail can really structure the entire learning experience- as well as infuse a little piece of personality into the design.

 

We will be having the design sprint next week in Brooklyn. I am excited to really dig into the project and to think a bit further about the question- "what do journalists want to use the web to make- and how can we help them do that?"  We will be exploring if these designs are useful for the project. I'm not really concerned if they aren't because we can actually use them on the lovebomb.me experiment.