Design For Web

Page 1

Andrea Hannah Cooper / OUGD504 / Design Production

Design For Print Web / A Tourist Guide to Khayelitsha Initial concept & plan for each page

Index

Culture

Contacts

A brief introduction to the website and the area, with links to each page, the website logo and a slideshow of images of the area.

Providing an introduction to the culture of the area, depicting and explaining the housing situation, food, shopping, lifestyle, etc of the people and the area. Also briefly explaining the dangers of the area, but not in a way that puts potential tourists off visiting. The aim of the website is to promote the positive aspects of Khayelitsha, rather than the bad reputation the area has in the media.

Listing different contacts within the area which would be useful for someone visiting Khayelitsha, such as contact details for different township tours and accommodation. A simple list to avoid there being an unnecessary amount of text, but still keeping all the essential details.

History A very brief history of the area, including images to illustrate the points, possibly including a timeline. A simple history provides the viewer with an introduction to the area without giving too much text which won’t be read.

Tourism Brief explanations of different places to visit around the area with links out to other websites, and images illustrating the points.

Maps Linking out to Google Maps as a way of providing a guide to getting around the area. Another map may be added which illustrates the places suggested to visit, but this is dependent on time constraints.

Concept The concept behind this website is to promote the positive aspects of the area, and increase positive tourism, while keeping the website simple, clean and easy to navigate, making the viewer actually interested in visiting.

The concept behind this website is to promote the positive aspects of the area, and increase positive tourism, while keeping the website simple, clean and easy to navigate, making the viewer actually interested in visiting. 1


Andrea Hannah Cooper / OUGD504 / Design Production

Design For Print Web / A Tourist Guide to Khayelitsha

Research - Existing Websites The majority of tourism websites for the area are all rather badly designed, and on a very low budget. Also, there are only a couple of websites specifically promoting tourism and the history of Khayelitsha, although the area features on many other tourism websites, such as the official South Africa tourism website and TripAdvisor.

2


Andrea Hannah Cooper / OUGD504 / Design Production

Design For Print Web / A Tourist Guide to Khayelitsha

.DWT

.CSS index.html

history.html

tourism.html

culture.html

maps.html

contacts.html

Contents of root folder ‘ahistoryof’: index.html history.html tourism.html culture.html maps.html contacts.html template.dwt stylesheet.css

jquery.nivo.slider. pack.js jquery.nivo.slider.js Javascript folder CSS folder Images folder

Slider folder containing slideshow images Lightbox folder containing icon images folder

Site Map The site map showing how the connections between each of the pages and how they relate back to the template, index page and CSS stylesheet. 3


Andrea Hannah Cooper / OUGD504 / Design Production

Design For Print Web / A Tourist Guide to Khayelitsha

Wireframe This wireframe shows the measurements of each of the different elements of the website as set in the template so all pages fit these measurements. The title, intro text and editable region (where the slideshow is as this wireframe is for the homepage) all change on each individual page.

4


Andrea Hannah Cooper / OUGD504 / Design Production

Design For Print Web / A Tourist Guide to Khayelitsha

Specifications

Alignment: central Navigation: centered along the top of page

Futurafrica 44pt

Navigation links: roll over images

O U IS R

T

Content and images: taken from summer brief research and tourist guide

L I E T Y

A SH

Dimensions: 1024 x 768 px

Text colour: #000000

Helvetica 12pt

M

Pages: - index - history - tourism - culture - maps - contacts

Font Family: Arial, Helvetica, sans-serif

KHA

- a tourist guide website to the township of Khayelitsha in Cape Town, South Africa

Colour Scheme

Background colour: #FFFFFF

Logo Colour Scheme Blue: #23428A

Green: #169656

Red: #EA1D33

Yellow: #FCD45F

Specifications The specifications of the website to which the template was made so that these fonts, colours, sizes and layouts were applied to every page of the website. 5


Andrea Hannah Cooper / OUGD504 / Design Production

Design For Print Web / A Tourist Guide to Khayelitsha

Website Pages In context images of each of the pages of the website.

6


Andrea Hannah Cooper / OUGD504 / Design Production

Design For Print Web / A Tourist Guide to Khayelitsha

Website In Use Application of the website to different applicances to see how it appears on different screens. The website is ideally for use on a desktop or laptop computer screen, but can also be viewed at smaller resolutions so it is accessible from iPhones and iPads.

The iPad mock up also shows how the tourism page pop up images works.

7


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.