Designs and Annotations (Mobile Design)

Template 1

This is the first mobile design. I do not like it because it is too gray and the shape in the middle is not appropriate for the mobile design.

Template 2

I like this design more than the previous one. Here I slightly changed the logo adding the red colour to the zig zag line, changing the perspective view of the logo and adding some shading effects. The white background looks better than the gray one. There is only one thing that I am going to change and that is the size and place of the buttons. In my opinion, they have to fill the blank white space on the left and on the right space. This way, the buttons will be bigger and the end user easy will finger tap on them. Also, I could add a home button in the top right side and slightly change the size of the logo.

 Template 3

I do not like the shape and size of the buttons because there is still a white space between them.

 Template 4 

Home Page

This is the final mobile template. As you can see, I changed the shape and location of the buttons. Therefore, they are bigger and it will be easier for the user to tap buttons. In the mobile design the button is active not the text like in the desktop design as the mobile design requires larger target on its screen. There are not white spaces on the left and right side of the buttons. Also, I slightly changed the location of the logo, placing it on the top left side instead of the top centre part. This way, there is a place for Home icon. I used Georgia font for headings and for the body-Verdana font. Buttons’ font size is 16pt. I also changed labels of the buttons.

 Template 5  

Buttons’ Layout

This layout appears when the end user clicks on one of three buttons with a relative information. The home button on the top will open the Home page again.