Interface Design – Mark 1

Here are some of the designs that I have been creating using Illustrator for the design of the DoodleBlocks Interface. There has definitely been a lot of development between the first and the last versions shown below. I have been going with the group ideas on what we want to achieve aesthetically and testing them out in all aspects such as the fonts, colours and layout etc. I am still not quite happy with how the final illustrations look here but I think we are on track with the purple and green colours and the sketchy font. From trying out a variety of different sketchy fonts I have found that many can make the designs look childish or illegible but in my opinion the last font works very well and it is clearly understandable. There are still ‘doodles’ and sketches that need to be incorporated on each page which are still in the design phase but I think they will really help to show what our group style is all about once they are complete. I hope to have all of the designs completed for the interface within the next few weeks, except for any final minor alterations that may occur from now until May.

First Mock Up:

Very simple layout. Testing out a handwritten font from dafont but some of the text is too difficult to read. The colours that we as a group feel worked best here are the two shades of purple which also coheres to our purple game show idea (see previous blog).

Interface 1

Second Mock Up:

Sample layout for the categories page. We would like to have arrows and other doodles such as these incorporated on the interface. For the buttons we would like to have a swipe animation where the selected category would come forward and be highlighted like below as it is changed.


Third Mock Up:

This is a sample mock up of what four of the interface pages could look like. The font is good. It keeps with our sketchy theme and is still clear and legible. Another aspect we think works well are the complimentary colours purple and green. It really helps the buttons stand out. This design will be used as a base and it will be continuously updated and changed to keep improving on it and make it better. The ‘doodles’ still need to be added to this design to test it out.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s