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