January 4, 2025
Reynard Wu / 0366763
Interactive Design / Bachelor of Design (hons) in Creative Media
Final Website Design
Final Project Instruction:
Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website based on
the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.
Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Website Development:
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, and any other relevant technologies or framework (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Submission:
A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio.
the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.
Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.
Website Development:
Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, and any other relevant technologies or framework (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.
Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.
Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).
Core Features:
Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.
Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.
Technical Considerations:
Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.
Final Testing and Deployment:
Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.
Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.
Submission:
A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio.
Final Design :
Report
in terms of making this website I came across few problems. But every problem there must be a solution to it so i search how can I overcome the problem. In this website that i build or create, the minor problems are like typo in one of the formulas of the coding but with the help of my friends and some YouTube vid to cover up those mistakes. Placing the component and making the button to be interactive can be challenging also and by learning CSS on YouTube and with some friend recommendation i can make this website final product at last. But the most challenging one is about the placement of the images to make it exact same position as in the prototype. And i make around 6 pages of websites the homepage, images, about us, membership, maps, contact us, and book now
Homepage
And this is my final coding, on the heading section I put the Merapi Golf logo on top left of the heading section and I align it with the interactive features like images, maps, membership, About Us, and contact us. I make the contact us different from other with box or rectangle around it to indicate the user. And there's body paragraph and images below it, On the footer section i put copyright logo and link To the Instagram account of the Merapi Golf. and for the interactive button at the header i put <a href="link'> so that the user can move on to the next page.
And this is for the Style.CSS, it's pretty hard for me to align the images and it is very time-consuming part. For the padding i kept it compact so that the header doesn't look too crowded.
Images
This is where i put all the Merapi golf images and put in all the description here. At this part where it goes pretty time consuming because to align the image the same as the prototype. And i add container for each image, For the fairway, greens, and clubhouse so the user not easily confused.
This is the CSS section for the images page, I came across few errors whilst trying to align the images. And for the back button i linked it back to the homepage, i don't make it fixed because it would look strange when user was scrolling down the page.
About Us
In the about us page i kept it simple it shows about our purpose in making this website, is to make playing golf easier and accessible for all.
this is the appearance of the CSS.Style I kept it simple with the heading and the paragraph and just put it inside a container with the same footer. I kept is simple as possible so that the customer doesn't get confused whilst reading my main purpose of the website.
Maps
I kept it also minimalist throughout this page for the map, I am highlighting the map so the user that visit the can directly watch where's the course is located without having to scroll and tap anything.
Because there's only one main image here, I just need to align it with the container and put title.
Membership
As for the membership info i have to make it like it's still under construction or developing and give a direct button to contact us page so the customer has to contact the contact agent on their own so there's no misinformation between the user and the course management.
In the CSS.Style i just need to put the title in the middle and container to indicate that this site is under development. And putting the contact us button and directing the user to the contact us page.
Contact Us
In this page i put name, email, and confirm the email with description box below it. Simple is the main key in this web design, for user easy accessibility.
For the CSS.Style i just need to align the boxes and put submit button below all the background are similar to other pages.
Booking page
In this page is similar to the contact us page but I add additional fill box which is pax and date and time.
For the time for tee off I put <input type="datetime-local"> formula so that the user can pick their time more efficiently. And the rest are the same with the contact us page just need to line up more.
Reflection:
In this project Mr. Shamsul taught us more than enough and because I always sat in front of the class i manage to learn a lot from him. And from this project I know that managing a website is not easy and need a lot of knowledge for the design and the programming. How to design the layout and finding inspiration does eat up a lot of time because good and modern looking website is hard to make. and for me this is a pretty challenging project but with patience.
Komentar
Posting Komentar