Inspiration
The Motivation behind this project was to make such a website using HTML and CSS which shows the basic functionality of a selling website as those available all over the internet as well as connect it to the database using PHP and learn how to maintain a real time database. Drawing inspiration from modern luxury brand websites, we aimed to design a digital space that effectively communicates elegance, sophistication, and quality.
What it does
This project involved creating a full website for SMAR’s, a fictional perfume brand developed through teamwork between project members. The site also showcases the brand's luxury suite of fragrances and offers a rich user experience. This also includes aesthetics such as an amazing layout, organized content, and interactive elements aimed at increasing user experience and identifying with your brand. Moreover, the website also provides interfaces for admin and sales person to manage the customers, orders placed by the customers and products displayed by the website as well. Both the admin and sales person have their own view of the website which allows them to easily manage and carry out their required functionalities.
How we built it
The website is created with the help of HTML and CSS codes, and its connectivity with database using PHP. The intention of the website is to offer an aesthetic, functional, and easy to navigate experience to the users. The website’s design employs modern typography, organized page structures as well as a easy layout that facilitates its functionality. The design of the website and its layout is chosen to produce a visually appealing and effective impact on the users. Database Design: The database is designed using a relational model. The main tables includes: • Products • User • Orders • OrderItem • Cart • Staff • Categories • Payment Front end Designing Process: The designing process of SMAR’s website was thoughtful and creative filled with our efforts and emotions. It was not an easy process because we sometimes faced an error that we were not able to catch and fix but we tried hard together to find the error and make our website beautiful and eyepleasing.The following things were kept in mind while designing the website to make it beautiful and attractive. Background Color Scheme: We decided to go with warm, earthy tones like browns and beiges to create an essence of luxury and natural beauty. These colors are consistent with the luxury position of its portfolio and the eternal nature of elevated fragrances. Design: The design has a centrally aligned logo, intuitive navigation, and product displays arranged in a grid format for clarity and ease. In its homepage, a big, high-resolution banner image is used to get a attention of the visitor right at the first moment.The products are displayed in an aligned form in the catalogue page to create a pleasing and appealing format. The sign in page and the cart are also designed in such a way to make it easy for the user to use whereas the about page tells all about the brand and team in a interactive and informative way. Typography: We used sophisticated serif fonts for headings to show elegance, whereas body text was in legible sans-serif fonts so people could easily read and understand it.The font sizes and weights are also well thought about to make it easy for the user to read and a warm brownish color scheme has been used to make the website appear as elegant as possible. Views: Three different views have been created to manage staff, admin and customer. Customer View: Customer has a very subtle and elegant front-end design having 5 pages- Home, About, Catalogue, Cart and Profile. The home page of customer shows the best-selling perfume and gives a small intro to SMAR’s. The about page tells about SMAR’s brand. The catalogue shows all the details of the perfumes and allows customer to add these perfumes to cart. The cart shows all the perfumes customer has added in the cart while browsing along with the total prices of the perfumes and a button to process order. Admin View: Admin has a relational database sort of view having details in the form of tables. It has 5 pages Dashboard, Profile, Products, Orders and Customers displaying all the details of products, customers, orders placed, low stock alerts and also giving the functionality to add new products and manage customers. Staff View: Staff also has a relational database sort of view. It has 4 pages including dashboard, products, profile, orders displaying all the details of products and orders placed along with pending orders and low stock alerts on the dashboard. The staff has the functionality to change order status as the order progresses.
Challenges we ran into
The following challenges were faced while building the website: I struggled to keep my HTML structure clean, and half the time my layout broke because I forgot to properly nest or close tags. I spent way too long fixing CSS issues where nothing aligned properly, and I realized one small mistake could destroy the entire design. I found it difficult to make my website responsive, especially when trying to adjust layouts for mobile screens. I had trouble connecting my HTML forms with PHP, and my data just wouldn’t show up no matter what I tried. I kept getting errors in PHP, and debugging them was frustrating because sometimes the error messages made no sense.
Accomplishments that we're proud of
Building the SMAR’s brand website provided me with a great learning opportunity to use my knowledge about HTML and CSS languages to develop a functional and interactive website for perfumes and also integrate it with a relational database with the help of PHP. It led me to learn more about the best way to present a brand, responsive design, and how to incorporate a user-centered approach to design. Working on this project further enhanced creativity skills and showed how intentional design decisions can provide a unified and compelling online presence. The knowledge gained from this project will certainly assist me in future web development tasks
What we learned
Through this project the major findings that we did are: • The importance of a visually appealing designs • Many new tags in HTML like a figcaption tag where you can add captions to a figure, similarly we discovered many new functions in CSS as well • The impact of well-chosen color schemes and layout on the website design • The importance of a smooth navigation from one page of the website to other • The importance of a well maintained and normalized database • How to handle real time data in database • How to connect the front end with back end using PHP • Many new features of PHP like how we can display all our products using loops or how we can maintain a live cart using PHP
What's next for SMAR's Fragrances Website
Next I would like to use javascript to make the website more interactive and dynamic and also use supabase to make the app fully functional with the help of its APIs to add maps and payment gateways to the website..
Log in or sign up for Devpost to join the conversation.