Front- End Development assignment 1
What is the website catering for?
=A platform to resell branded goods from trusted sources to customers who are looking after specific products that are hard to come by from the physical store and official store websites.
External User’s Goal:
=The site’s users are individuals who are into the world of fashion and are up to date with the latest design trends and products specifically those coming from designer brands such as Louis Vuitton, Salvatore Ferragamo and so on. Having said that, since these items are so sought after, they are often sold out relatively fast upon being put up for sale in their official websites as well as physical stores hence the users of this website are individuals who value branded goods and are willing to buy those exact items at a resale price from an online trusted source.
Site owner’s goal:
=Presenting the items being listed on the platform in the best possible way in order to satisfy customer user experience and increase engagement amongst potential customers.
Potential features to include: • Contact information so that customers could contact the helpline • Scrolling through the site • Specific brand navigation panel • Product image collection • Cart
Websites used for reference: LOUIS VUITTON - Official International Website The official Hermès online store | Hermès Malaysia (hermes.com) GUCCI® SG Official Site | Redefining Luxury Fashion Poshmark: Buy and sell fashion, home decor, beauty & more
DESIGN PROCESS:
My ideation process was fully driven by my love for fashion. I often found myself scrolling through numerous luxury brand sites just for the pure satisfaction of looking at the attractive layouts and often I found myself thinking "why are all these sites showcasing so much information which would be unnecessary to someone who is set on buying one item?"
Often these sites bombard the user with images and information on their products and I thought to myself "what if I created a wesbite that is direct and straight to the point which caters to people of similar interest who would've already posessed the neccessary information on the product they intend to purchase and go straight to the point of just seeign the product and purchasing them and that led to the creation of Timeless Treasures, a site specifically catered to those who love fashion and intend on getting preloved items in a simple and user friendly manner.
OVERALL WEBSITE RATIONALE:
The site has 4 functional pages which is the catalogue, home, contact and the cart. The common pattern used to code is by making use of numerous divs and lists to achieve the layout goal.
The catalogue page showcases a slider which contains numerous luxury brands and it is scrollable to make it presentable in a more visually appealing manner.
Upon clicking the desired brand, the site brings the user to the page where the products in that particular brand is showcased in a nice manner both horizontally and vertically for desktop and vertically for mobile. On the desktop there's also a feature where the product has a slight zoom affect upon hovering and this is to give a better view of the product to the user.
Moving on, there's the contact page where users can input their personal details to send to the customer service department which in this case would always be available to assist the customers. The contact page is added with a visually appealing input section which takes in user inputs and this affect was achieved using javascript.
The colour scheme I opted for this site is more to the brown-ish end as upon research, most of the well established brands like hermes and louis vuitton make use of that colour scheme throughout their site and those colours are also iconic in the fashion realm.
The site also has a icon of a swan representing elegance in the browser window.
FUNCTIONAL FEATURES FOR THIS PARTICULAR SITE (1) The index.html page contains 4 full linked pages which is the menu, catalogue, cart and contact (2) The catalogue brings up a page with a rectangle on the left of the screen which contains numerous brand which the user can scroll and click to navigate to the specific brand's page, in our case the working one is the LOUIS VUITTON page (3) In the product page the use is greeted with some products presented in a beautifull manner with a sticky header and navigation bar so that the headers and navigation bars stick in position when scrolling through the page. (4) We have a contact page developed with javascript to add a visually appealing interaction between the user and the site. The input sections move upwards when clicked upon. (5) Finally we have the cart page which doesnt work as of yet but shows a general look at how it would look like if it were to work. The layout is fully done.
SOFTWARE USED TO DEVELOP:
The entirety of the site was coded using html, css and javascript.
links for the images used throught the duration of developing Timeless Treasures: LV Alma MM Handbag https://www.bagborroworsteal.com/handbags/louis-vuitton-alma-mm-handbag/16533/
LOUIS VUITTON MONOGRAM PETITE BOITE CHAPEAU BAG https://lovethatbagetc.com/products/louis-vuitton-monogram-petite-boite-chapeau-bag
Louis Vuitton 2015 Pre-owned Petite Malle Crossbody Bag https://i.pinimg.com/originals/d4/c7/62/d4c762b6d87a89d6a015e1e95f339d6e.png
Louis Vuitton White Multi Speedy 30 Handbag https://www.fashionphile.com/images/product-images/large/e926b9393962fd75cc19083a69712188/6638b6e6c5534d4775c0e9ae7227cded.jpg
LOUIS VUITTON EPI ALMA PM TASSIL https://a.1stdibscdn.com/louis-vuitton-black-epi-leather-alma-pm-for-sale/v_1702/v_158882621653582076666/v_15888262_1653582077522_bg_processed.jpg
LOUIS VUITTON empreinte neo almahttps://www.fashionphile.com/images/product-images/large/b0ac87d2891a923fc7234607198c4da6/e73ba70a8ade321631830f2af82ed634.jpg
email icon https://cdn-1.webcatalog.io/catalog/icloud-mail/icloud-mail-icon.png
maps icon https://img.icons8.com/color/1600/google-maps.png
lv photoshoot background: https://images.squarespace-cdn.com/content/v1/55f45174e4b0fb5d95b07f39/f2692796-38b3-473e-b3b6-f503a0668b28/Louis-Vuitton-Mens-2023-Ad-Campaign-Tyler-mitchell-00005.jpg
