Mobile Development 1

___________________________________________

The app is called Cabot Circus which is a shopping centre based in Bristol, England. The main purpose of the app is to give the users information about Cabot Circus such as the location/ latest new and events etc. The app will lead the users into 6 different pages including:
- News/ Offers
- Shops
- Opening times
- Find us
- Restaurants
- Contact us
To be able to build the mobile app the media used for this task were structure diagram, wireframe, layout/ design and choosing the suitable typeface.

structure

wireframe

Figure 1- Structure of the mobile app

Figure 2- Wireframe of the hompage

menu

template

typeface

Figure 3- Wireframe of the template

tittle

paragraphs (main content

design & layout

Final display

on iphone 4s

The structure for mobile application has been created in order to show how each pages will be linked. The homepage will lead the users to the menu page where the users to access through all the other pages and they will also be able to visit any other pages they wish to as the navigation will be consistent throughout the whole website and will be displayed as a footer. Back button will also be created so that the users can visit previous page.

Copyright © 2013 Suzie Designs. All Rights Reserved | Suzie Gurung | 13041080 | Web Design Studio

These two figures shows the properties of the typeface and colour scheme used for header on all pages. The text style used for the header is Cabin with bold text, size 13 and #ffffff (white colour). As shown on the figure the text is aligned as centre for both horizontal and vertical. The advanced section shows that the padding of the text within the text box is 5 with the line height of 1.2

The background colour of the header for each pages is different as explained on the wireframes of the mobile app. No background, shadow, border or rounded corners are used.

These two figures shows the properties of the typeface and colour scheme used for the main content on all pages. The text style used is Cabin with no text style, size 11. As shown on the figure the text is aligned as left in horizontal. The advanced section shows that the padding of the text within the text box is 5 with the line height of 1.05.

Background colour of the text boxes used for the paragraphs is #ffffff (white). The border has been as shown on the figure the size of the border is 1 with #666666 colour and the edges is set as top & bottom meaning only the top & bottom lines will be shown.