WEST HILL CEMETERY PROJECT - HANDOVER DOCUMENT JOSH OLADUNNI, TOM GALE AND KRISTIAN HOVLAND

3D MODELLING TOM GALE

As the 3D designer I used Google Sketchup to design all of the 3D models. I

then used textures within Google Sketchup and textures i took myself within

the cemetery or its surroundings for added realism. The final model

screenshots are below.

I made the infographic for when a grave/site on the map is clicked and this is

made within the brand guideline colours which are below as hex codes:

The darker green is: ##417e82

The lighter green is: ##5c8b8f

The white is: ##5c8b8f

WEB DESIGN JOSH OLADUNNI

The website has been designed in a way so that it complies with the

University’s branding guidelines. I have used the University’s signature teal

green colours in conjunction with the white square grid, to keep the overall

design looking clean and related to the University.

Within the design, I have used original imagery of the Cemetery’s landscapes.

Any images of the Cemetery used on this website should be displaying the

nature and beauty of the site. The sun should also be present in the image, to

represent the sacredness of the site sunrise or sunset will also suffice. The

images we obtained were taken by Em Millis and she has more that she can

provide.

(E.Millis.13@unimail.winchester.ac.uk)

INTERACTIVE MAP DESIGN JOSH OLADUNNI

The interactive map has also been designed using the University’s branding guidelines. No other

colours, apart from the colours used in the design, should be added to the Map.

Any imagery of the graves found in the cemetery should feature the gravestone as the central

feature. The images used must be of a high quality, as visitors to the Cemetery must be able to

recognise the grave stones from the pictures on the map.

Any text used on the map

should use the ‘Trajan’ font

and have a white fill colour.

To maintain readability, all

text should have a black

stroke colour.

Any borders used

around the images

must also comply

to the University

branding

guidelines.

INTERACTIVE MAP DEVELOPMENT JOSH OLADUNNI

The Interactive Map has been developed in a way so that it’s very easy to add new graves, if you

have a basic knowledge of HTML and CSS languages.

From rows 42 to 287, you can find the HTML code for the different circular modals on the map.

● The

‘wrapper’ div ID is

used to wrap all of

the grave icons’

code together.

● The ‘text1’ div class is used to define the text that appears when the mouse hovers over the

grave icon.

● The ‘h1’ header contains text that will appear on mouse over.

● The link below refers to ‘#grave1’, telling the code to open the modal box for grave #1.

● The image used is referred to as ‘icon1’, and holds an ‘icon’ class. These will be used to

position the icon.

● The image used for the icons is within the ‘images’ folder and is named ‘grave.png’.

● All icons are 25 x 25px.

Use the above specifications when

adding/editing a grave.

To position the location of the grave names

and icons, use the following specifications:

● The text is positioned by changing the values of the ‘left’, ‘bottom’ and ‘right’ variables. A

‘top’ variable can be added as well.

● Ensure that the z-index for the text is always larger than the z-index for the map canvas and

other elements below the text.

• The grave icons are also

positioned in the same way.

From rows 289 to 647, you can find the HTML for the content within the pop-up modals.

● As mentioned before, the div ID ‘grave1’ is used to refer this modal box to the icon, when the

icon is clicked.

● The ‘modalDialog’ class is used to define the modal box as a whole. This class can be used in

CSS to customise the appearance of the modal box.

● The link with the class name ‘#close’ is used to close the modal box.

● The class name ‘header’ is used to define the header. Here, the name of the person buried in

this grave is written.

● The class name ‘modalbody’ is used to define the body of text, containing the desription of

the person buried in the grave.

● Be sure to use <br> tags to create spacing between paragraphs. Use the <p> tag to create

paragraphs.

To customise the modal boxes, go to row 1256 within the CSS file.

● Change the ‘font-family’ value in order to change the font style. Note: Only fonts specified

within the University branding guidelines may be used.

● The font colour can also be changed by changing the value of the ‘colour’ row.