This website is about a few key landmarks located in Leicester. It is available online, mainly targeted towards any individuals who are interested in the landmarks in Leicester.
The idea for developing a website about the history of Leicester is because I am from Leicester and there is a vast amount of history embedded within Leicester.
-
Wireframe screen designs have been developed for the website, for the end user. They are located in the images folder.
-
The website has a total of 5 pages. It was originally a Single Page Application (SPA), but it was more user friendly to have multiple pages for the website.
-
The Navigation Bar is positioned at the top of every page. If also stays fixed at the top of the page, even if the user has scrolled down the page. The navigation bar also provides buttons/ links to the other pages of the website.
-
Some images include an animation or transition. This allows the website to be interactive for the user. This can be seen when hovering over the image. Another feature included is when the user is hovering over the text, a caption is shown. This was achieved by the use of Cascading Style Sheet (CSS).
-
The navigation bar should be functional, so users can access all the pages, from what page they are currently on.
-
Animations/ Transitions should be working correctly, especially when a user is hovering over an image.
-
The website should be responsive, for all devices.
-
Navigation bar is fully functional and is responsive.
-
Animations and transitions are working correctly.
-
The website is adaptable for all devices.
Proximity, Alignment, Repetition and Contrast (PARC) should be considered when designing a website, as these are the four fundamentals.
Proximity: Similar content should be grouped together; done by using similar styles.
Alignment: Content on the website should be structured, so it is easy to read and view for the user. The page/ website is seen as whole.
Repetition: This provides consistency throughout the whole website. The title of the website is placed consistently throughout the website. The navigation bar is also placed at the top of the website throughout.
Contrast: Even though the website should blend together, there should be some distinction between some images and some text. The headings are in larger size, compared to the content of the website.
During the course of this module, I have learnt the basics of how to utilise HTML5, JavaScript and CSS to create a simple functional website, which can also be applied to real life situations. This module has encouraged me to apply and further develop these skills in the future.
- Content:
Adams, D. (2017). King Power Stadium | Leicester City FC | Football Ground Guide. [online] Footballgroundguide.com. Available at: http://www.footballgroundguide.com/leagues/king-power-stadium-leicester-city.html [Accessed 3 Dec. 2017].
Bbc.co.uk. (n.d.). BBC - History - King Richard III (pictures, video, facts & news). [online] Available at: http://www.bbc.co.uk/history/people/king_richard_iii [Accessed 3 Dec. 2017].
Biography.com. (n.d.). Richard III. [online] Available at: https://www.biography.com/people/richard-iii-9457120 [Accessed 3 Dec. 2017].
Historic England. (2017). The Arch of Remembrance. [online] Available at: https://historicengland.org.uk/listing/the-list/list-entry/1074786 [Accessed 3 Dec. 2017].
King Richard III Visitor Centre. (n.d.). Home - King Richard III Visitor Centre. [online] Available at: https://kriii.com/ [Accessed 3 Dec. 2017].
Le.ac.uk. (n.d.). 10 facts you may not know about Leicester — University of Leicester. [online] Available at: https://le.ac.uk/student-life/city/10-facts [Accessed 3 Dec. 2017].
Le.ac.uk. (n.d.). Who was Richard III - Last Plantagenet King to die in battle -Timeline - University of Leicester. [online] Available at: https://www.le.ac.uk/richardiii/history/whowasrichard.html [Accessed 3 Dec. 2017].
Leicestercathedral.org. (n.d.). History of Leicester Cathedral – Leicester Cathedral. [online] Available at: http://leicestercathedral.org/learn/history-of-leicester-cathedral/ [Accessed 3 Dec. 2017].
Storyofleicester.info. (n.d.). [online] Available at: http://www.storyofleicester.info/city-heritage/built-heritage/the-clock-tower/ [Accessed 3 Dec. 2017].
Tripadvisor.co.uk. (n.d.). Leicester Cathedral - TripAdvisor. [online] Available at: https://www.tripadvisor.co.uk/Attraction_Review-g186334-d7854973-Reviews-Leicester_Cathedral-Leicester_Leicestershire_England.html [Accessed 3 Dec. 2017].
Tripadvisor.co.uk. (n.d.). Leicester: Background - TripAdvisor. [online] Available at: https://www.tripadvisor.co.uk/Travel-g186334-s2/Leicester:United-Kingdom:Background.html [Accessed 3 Dec. 2017].
Tripadvisor.co.uk. (n.d.). National Space Centre (Leicester, England): Top Tips Before You Go (with Photos) - TripAdvisor. [online] Available at: https://www.tripadvisor.co.uk/Attraction_Review-g186334-d489790-Reviews-National_Space_Centre-Leicester_Leicestershire_England.html [Accessed 3 Dec. 2017].
Tripadvisor.co.uk. (n.d.). Welford Road Stadium (Leicester, England): Top Tips Before You Go (with Photos) - TripAdvisor. [online] Available at: https://www.tripadvisor.co.uk/Attraction_Review-g186334-d2081161-Reviews-Welford_Road_Stadium-Leicester_Leicestershire_England.html [Accessed 3 Dec. 2017].
World-guides.com. (n.d.). Leicester Landmarks and Monuments: Leicestershire, England. [online] Available at: http://www.world-guides.com/europe/england/leicestershire/leicester/leicester_landmarks.html [Accessed 3 Dec. 2017].
World-guides.com. (n.d.). Leicester Landmarks and Monuments: Leicestershire, England. [online] Available at: http://www.world-guides.com/europe/england/leicestershire/leicester/leicester_landmarks.html [Accessed 3 Dec. 2017].
- Images:
Church View Hotel (n.d.). National Space Centre. [image] Available at: http://www.churchviewhotel.com/images/thumbs/national-space-centre.jpg [Accessed 3 Dec. 2017].
Citizen British Museum (n.d.). New Walk Museum. [image] Available at: https://citizen.britishmuseum.org/wp-content/uploads/leicester-museum-mg-1099-jpg-827x550.jpg [Accessed 3 Dec. 2017].
Digital Building Heritage Group (2015). Leicester Arch. [image] Available at: http://digitalbuildingheritage.our.dmu.ac.uk/files/2015/11/Leicester-Arch-Small.jpg [Accessed 3 Dec. 2017].
Flickr (n.d.). Haymarket Clock Tower. [image] Available at: https://farm4.staticflickr.com/3274/3057401080_9f01dd29d1_z.jpg?zz=1 [Accessed 3 Dec. 2017].
Julia Holberry Associates (2016). Leicester Cathdral. [image] Available at: http://www.juliaholberry.org.uk/wp-content/uploads/2016/01/Chancel-banner.jpg [Accessed 3 Dec. 2017].
Leicester City Council (n.d.). Leicester Skyline. [image] Available at: https://www.leicester.gov.uk/media/180600/leicester-skyline.jpg?center=0.4924812030075188,0.49&mode=crop&quality=90&width=920&heightratio=0.2173913043478260869565217391&format=jpg&slimmage=true&rnd=131522026190000000 [Accessed 3 Dec. 2017].
Leicester City Council (n.d.). Museum Banner. [image] Available at: https://www.leicester.gov.uk/media/179629/museums_banner2.jpg?anchor=center&mode=crop&quality=90&width=920&heightratio=0.3260869565217391304347826087&format=jpg&slimmage=true&rnd=131451061740000000 [Accessed 3 Dec. 2017].
Leicester Tigers (n.d.). Leicester Tigers. [image] Available at: https://darkroom.leicestertigers.com/980/2746d5c8c180c291cbda84385b43e0b8:62ba1c338a6458fd45019a55bb1f74b0/welford-road [Accessed 3 Dec. 2017].
Leicestershire Churches (n.d.). Leicester Cathedral. [image] Available at: https://www.leicestershirechurches.co.uk/wp-content/gallery/leicester-st-martins/Leicester-Cathedral146.jpg [Accessed 3 Dec. 2017].
National Space Centre (2016). National Space Centre. [image] Available at: https://venuehire.spacecentre.co.uk/wp-content/uploads/2016/01/tower-homepage-767x767-c-default.jpg [Accessed 3 Dec. 2017].
pBS.Twimg (n.d.). Haymarket Clock Tower. [image] Available at: https://pbs.twimg.com/media/DJgxG3_X0AAjo1D.jpg [Accessed 3 Dec. 2017].
Prime (n.d.). King Power Stadium. [image] Available at: http://media.prime.md/image/201703/full/sport_publika_04211800.jpg [Accessed 3 Dec. 2017].
Ringing for England (n.d.). Leicester Cathedral. [image] Available at: http://ringingforengland.co.uk/wp-content/uploads/2016/02/LEICESTER-Cathedral.jpg [Accessed 3 Dec. 2017].
Trip Advisor (n.d.). Dinosaur. [image] Available at: https://media-cdn.tripadvisor.com/media/photo-s/03/8a/d9/9a/dinosaur-us.jpg [Accessed 3 Dec. 2017].
University of Leicester (2016). Arch of Remembrance. [image] Available at: https://www2.le.ac.uk/news/blog/2016-archive/july/new-play-centres-on-arch-of-remembrance-in-leicester2019s-victoria-park/image [Accessed 3 Dec. 2017].
Wikipedia (2012). Richard III. [image] Available at: https://upload.wikimedia.org/wikipedia/commons/0/09/Richard_III_earliest_surviving_portrait.jpg [Accessed 3 Dec. 2017].
Wikipedia (2016). King Power Stadium. [image] Available at: https://upload.wikimedia.org/wikipedia/commons/b/bb/King_Power_Stadium_wide_view.jpg [Accessed 3 Dec. 2017].
Windsbird (2013). Richard III. [image] Available at: https://windsbird.files.wordpress.com/2013/07/o-richard-iii-570.jpg [Accessed 3 Dec. 2017].
- Sketches:
All sketches were created using inVision= https://projects.invisionapp.com/d/login
Master Page: ![Storyboard 1] (images/wireframe-sketches/masterpage.png)
Home Page: ![Storyboard 2] (images/wireframe-sketches/homepage.png)
Key Landmarks Page: ![Storyboard 3] (images/wireframe-sketches/keylandmarkspage.png)
Reviews Page: ![Storyboard 3] (images/wireframe-sketches/reviewspage.png)
Contact Us Page: ![Storyboard 5] (images/wireframe-sketches/contactuspage.png)
Sitemap Page: ![Storyboard 6] (images/wireframe-sketches/sitemappage.png)
Navigation Bar/ Sitemap Page: ![Storyboard 7] (images/wireframe-sketches/navbar-sitemappage.png)