Markerboard: Early Concept Design

15 September, 2012

They say its better to put your concept on the paper than on software. It is so true, because of the complexity and the development stage, ideas keep changing and it is easy to change the ideas on the paper than re-working on the software.

Markerboard is Completely FREE! and its available in the App Store:



Markerboard concept was started on march, roughly. Close to the month end i got a better picture of the UI and its features, because of the simplicity i need to think over and over till it comes to the stage where i can start my sketch on paper. I prefer taking notes whenever i get some new points, if iam traveling i use the phone or if iam at home i write it on the markerboard (the real one on the wall (that's how this app concept started)).

Its hard for me to have a completely structure in mind before i start the work. Generally, i get the concept then i put it on paper, very roughly. Sometimes it will be very detail or very loose. Then i start the process of nailing it down one by one and see what works and what doesn't.

Then i make the design in photoshop, just to get a look and feel of the app. I prefer going back and forth (paper to photoshop back to paper) till i get a very clear picture of the design. You can see some of the initial design that went behind the markerboard app.

Most of the features you see here are on the final app. so i'll just walk you through the process of how i got some of the ideas.

The concept came from the real markerboard, since i wanted to imitate the real look and feel, some good about of time were given on the design work. The main tool markerboard have is the Pen and the Eraser. So i wanted to give the same feel on the app, in that way the user can relates the real life markerboard in a small size.

Changing the brush size was tricky, even though it is not much effort go to the brush panel and adjust the brush size, but i wanted to give some other way where you can adjust the brush size without going to the brush panel.

I don't know if it is going to work or not, but i just wanted to try. So i came up with this concept of swiping it down to reduce the size and swipe it up to increase. To avoid confusion there's a glow which appears behind the brush tip when you adjust the brush size.



History brush was later fix-up. Instead of going to the brush panel and keep changing the brush size, what if the user can select the previously used brush, because that saves time of adjusting the brush size again.

If you are drawing something you will be very particular of the size of the brush and sometimes you prefer some lines to the thinner and some to be thicker. With the history brush, you can go back to your previously used three brushes.



Since the marker pen have an option of adjusting the brush size without going to the brush panel, i wanted to give the same feature to the eraser. To access eraser panel you need to change the toggle switch from marker to eraser.

Eraser also has its own brush panel, which doesn't collide with the markerpen's brush panel. Because when you are drawing you always want both your brush and the eraser to be in different size, and the history brush on the eraser panel acts.



There are some features that are not included in this current ver, we are tying our best to give an update in the near future.



Another thing i was concerned was how to change the marker color. I don't want to add any new buttons to display just two colors and i don't want to display the color swatches on the board, which will disturb the UI.

The funny thing is, while i was wondering,  i had the marker pen on the table, and i kept on rolling it back and forth under my finger, then i just looked at the pen and thought how about giving the roll action to change colors then came the idea of rolling pen.

So when you roll the pen, the color change from black to red and you roll again it again goes back to black. The only thing i had to change was the stripes on the marker, everything was symmetric the initial design had vertical lines, so you don't notice the roll. Then the stripes were changed to diagonal to make the rolling visible.



Not everybody is comfortable of rolling the pen so i had to give the option of tapping the pen, which change the color instantly. The option can be adjusted from the 'Options Panel'.



It was a good experience while making this app, and it gives me less effort when i was discussing with the developer.

I strongly believe you should have the complete blueprint of your work before you discuss with the developer. It is not only for app design but for all the other designs, because it will save a huge time in the later stage.

Markerboard on App Store: 

Markerboard Website: 

Making of the Website:

Prototype Video: 

No comments:

Post a Comment