Le Timeless Trésor
Le Timeless Trésor.netify
Click on the image/logo to view our self-made video of our 5 star luxary hotel on youtube
or you can click on this link: https://www.youtube.com/watch?v=IMENVfR-2eA
💯 Distinction
Our team was tasked with creating an interactive prototype of a hotel website utilizing HTML, CSS, and JavaScript. Each team member was assigned to design and develop one content-rich webpage and one interactive webpage, which would include an online form.
The name "Trésor" is a combination of English and French, with "trésor" translating to "treasure" in English. We chose this name as it represents the precious memories that guests will create during their stay at our resort.
The design of the resort website was based on the feedback from a user survey. The survey revealed that 95.7% of respondents preferred a monochromatic color scheme and 87% chose a brown color template.
UX Designer
April 2022 - August 2022
📖 Multi-Page Layout
🎨 Styled with HTML, CSS, JS with special themed colour. All pages are coded by us. Please do not take our code without crediting us.
📱Responsive on many different devices
🙎♂️Damian: Homepage, Accomdations, Ordering , Sign In , Sign Up
👨Ye Yint: The Restraunt , Contact
👱Natelie: Events, Events Reservation, Gallery, 360 Photos
👩Amber: Facilities, Services, Forms
👧🏻Javerine: About Us, Reservation, Promotions, Forms
✍️ Sitemap
🎨✏️Wireframe
-
Based on our goal for Le Timeless Trésor, we build our design base on our theme.
- The logo was designed by the inspiration of creating a icon to represent treasure of the time of our visiotors.
-
Color scheme template we use for our hotel website:
- These colors were chosen based on the idea of creating a luxury feel and minimalist hotel.
💬 References/ Features included in our website
- These are the websites that we referenced to base on the design we preferred, and improving on these ideas to make our website better. Key features and references.
🔨 Protoyping by skecthing and on Pencil app
After the research phase, we moved on to the prototyping stage. In this stage, we designed the various pages by sketching and using the pencil app to enhance the design quality. I focused on user experience and easy navigation while designing. I defined the features I wanted on the site, with the goal of ensuring that users would be able to easily find and access the information they needed, presented in an organized and visually pleasing manner.
Sketched Prototype:
While sketching the prototype, I included pop-up visuals to represent buttons and drop-down menus. This allowed me to better visualize the ease of use and navigability of my design, helping me to make improvements where needed.
Link to drafted prototype on pencil app
👩💻 Development
- Once all sketches were approved by each team members, we began developing the website using HTML and CSS.
- Our team leader, Damian, set up a GitHub repository to facilitate collaboration on the project.
- This improved the collaboration and streamlined the deveopment process, as all the members were able to work on the same file, allowing the integration process to be smooth sailing
- I started by working on the About Us page, as it required a significant amount of content.
- This was my first experience using HTML and CSS to code a website, and it proved to be a valuable learning experience.
- I learned by observing and studying various online tutorials on how to code different elements of a website.
👩💻Here is some codes written by me:
🧪 Deployment and testing
We ensured optimal performance on various devices by optimizing the website for both mobile and different screen sizes on computers. We conducted thorough testing on multiple devices, including different iPhone models and computer screens ranging from 14 to 20 inches, to ensure compatibility and seamless user experience across all platforms.
After successfully deploying our website, we sought feedback from a diverse range of users to gauge their perception of the design and usability. To our satisfaction, a vast majority of our users expressed positive reactions to the website's appearance and felt it was indicative of a hotel they would want to visit. Overall, we were extremely pleased with the final outcome as it was not only visually appealing but also received approval from a diverse group of users.
- Good team work
- Excellent integration
- Well explained
- Interactive and excellent design
As a beginner to website development, I encountered various challenges, particularly with styling using CSS. However, with the support and guidance of my skilled teammates, I was able to overcome these obstacles and learn the art of coding while enjoying the process.