#h1 Reflective Essay for Project 1: Responsive Website ##H2 Due date:18/04/2022 ###H3 by David Sim u3197534

The design of my website using HTML and CSS code was a new experience. I used a variety of websites to influence the design choices I made and used the previous contour 556 websites to influence how I would remaster their website. I also spent numerous hours learning HTML and CSS code while incorporating javascript to provide my website with a better user experience.

![alt text] (assets\images\Img 0.jpg) (Image 0)

The approach I took to the website was starting with the website's basic layout and design using a low-fidelity prototype to enable me to rapidly generate ideas of what I wanted to include in my website design. By having a low-fidelity prototype (Image 0), I could erase and redesign without rewriting much code. My low-fidelity prototype looks similar to my final product but differs in multiple ways due to code complications. David Verba (2008) explains that "Prototyping allows us to see problems more clearly and often earlier in the design and development process." This was a common issue for me when creating the website, as it was my first time using HTML and CSS. I relied on my prototype when I got stuck with the structure and the layout of my website. I wanted to approach the low-fidelity prototype of my website as an upgrade to the original contour 556 websites. I used this method to gather the necessary information from the contour 556 websites. This method gave me the basic setup of what my website needed to have and what it did not need to include. It gave me ideas such as the index page required to provide the user with an explanation of what contour 556 is, as this was not shown in the original and compared to other websites description of the festival offers users a better understanding of what your website is about. Various websites also influenced the low-fi prototype, which helped me create a final low-fi prototype that I wanted and attempt to start coding. Referring to my low-fi prototype worked for a majority of the coding. Still, some areas of the low-fi prototype I was not able to achieve due to my experience in coding and did not understand how to properly code to get the main video on the title of the index page, so I was not able to achieve this from my low-fi prototype was instead it was replaced with an image. This became an issue in some aspects of the design as I could not achieve what I had planned, and improvisations and changes to the layout occurred to fix the problems I faced while coding.

Websites such as the Australian war memorial webpage and the Australian art gallery were the first websites that I used to influence the design choices on my website. These were purposely selected as they are both Canberra based websites, and I wanted to have my website carry any themes from those websites to mine, so users would be familiar with and recognise the layout of my website. The themes carried over included the title layout of hero-text with an image and the country's recognition, the number of images, a slideshow and the same font. I also used these websites to find what I did not want my website to include, such as the Art Gallary of Australia is overstimulating and messy when scrolling and viewing the website (Image 1), so the choice of a more simplistic design such as the Canberra website it is simplistic and shows off the same amount of content more neatly. The Canberra website influenced the design choice of the menu bar/navigation bar. Having the website's responsiveness to different screen sizes shows a four-lined bar in the top left corner that, once clicked on, becomes the navigation bar I liked this design choice as it is simplistic, and users know what that icon does (Image 2). These websites influenced most of the design choices I made during the low-fi prototypes and referred to during the coding phase of my website.

 (Image 1)

 (Image 2)

 (Image 3)

My main goal for my website was to provide an inclusiveness design for all cultures and ages, such as a simplistic design that does not overstimulate the user but provides a positive experience. The average age of the expected user is to be estimated at around 30-40 years with a Caucasian background. To include a more diverse/multicultural background of people, I purposely developed the site to involve images that show different cultures' art shown in images 3. This would create a more inclusive environment for website users and showcase the multicultural of the contour 556 festival. For the older, less tech-savvy users of the website, the simplistic design of having enlarged headers, large text, simple navigation, and bright, colourful images provides an approach to design that does not overstimulate the user experience but provides the necessary information for with the 'users' needs. The website's layout is designed to be easier for the users to understand what contour 556 is by having images and texts aligned. Using Matt Saunders's (2021) explanation, "Designers tend to focus on the aesthetics and functionality of their work. This means that content writing is a task often pushed onto the client to fulfil. The unfortunate consequence of this decision is that the website's content ultimately comes in too late, in the wrong format, and poor quality." This focused on designing a web page that provides text content for a higher quality user. This is shown in image 6, to have the content writing works in conjunction with the image to provide that higher quality of design.

(Image 4)

The choice I made in the website's design that I could improve on is the choice of the donation hero image (image 5). I was able to do this effectively on the index page by having a convincing header, a colourful image, and a button that links to the donate page. Next time, what I would do differently is to spread the donate image throughout the website so users would constantly be drawn towards donating, and the use of repetition would convince users to click on the donate icon. The donate forum was a problematic part of my coding experience as it was difficult to code and work out how to align the different categories of information properly. I used websites such as the WFF-Australia donate page and the invisible children donate site to work out how to code my donation forum. I particularly liked how it provided a variety of choices in the donation amount and the frequency. I had too many errors when trying to code a frequency amount. Next time I would work on trying to provide the user with this option as it would be a beneficial user experience and the festival.

(Image 5)

The aspect of my website that I am most proud of is my use of JavaScript (Image 6). I was able to make a working countdown clock for the main page of my website. This was influenced by the Groove in the Moove website and rebel sport and eBay, as the count down is used in these websites to provide urgency and excitement, and it becomes a main attraction for the websites. This design choice provides a reason for users to revisit the webpage to check on the count down. This code area was challenging to create, but it is an essential aspect of my website that I wanted to include to make it different and produce excitement. I had continuous errors in overdesigning the website and trying to copy too many things from my referenced websites. This caused me to try and use code that I was unfamiliar with, induced errors and mistakes, and the website's responsiveness to breakdown. I tried to implement flip cards in the team member section. This caused the layout to become unresponsive to mobile screens and the pictures to become uncentred. This was resolved by referring back to my low-fi prototype and building the simplistic website, as the code was too advanced for my skill level and did not appeal to my intended audience for the website.

(Image 6) I intended my website for an international multicultural middle-aged population by including various images and text that provide an understanding of what contour 556 is and explaining and showing only the most important information without oversimplifying but without overstimulating the user experience. The development of the website provided me with an introduction to HTML and CSS code and the development process of making a website. I learned how to correct errors in my code using the w3 validator and how to incorporate javascript for a better user experience.

References Saunders, M. (2021, April 21). Why Content Is Such A Fundamental Part Of The Web Design Process — Smashing Magazine. Smashing Magazine. https://www.smashingmagazine.com/2021/04/content-fundamental-part-web-design-process/

Verba, D. (2008). Sketching in Code: the Magic of Prototyping. https://alistapart.com/article/sketchingincode/

Websites Used

https://www.awm.gov.au/ - Australian War Memorial

https://nga.gov.au/ - National Art Gallary

https://www.contour556.com.au/ - Contour 556

https://gtm.net.au/ - Groove in the Moove

https://invisiblechildren.com/ - Invisible Children

https://donate.wwf.org.au/#gs.xpv2jr - WWF Australia

https://canberra.com.au/ -Canberra Home Website

https://www.rebelsport.com.au/ - Rebel Sport

https://www.ebay.com.au/ - eBay