Skip to content
BranchesTags

Repository files navigation

Assignment Project 1

My project is to make a responsive website for a fictional company site of my own. My fictional company is a camera store in central singapore selling mainly camera goods and accessories, along with providing cleaning and repair services for cameras too.

Design Process

As photography is my hobby, I am deeply interested in all things cameras and thought to create this fictional camera website store. I wanted to design my website to cater to users of all types, while maintaining a design aspect that portrays quality and efficiency through the usage of different fonts, colours and website layout. I chose to use the EB Garamond font for my main texts for a classic and refined look, while using Poppins for the rest of my text for a more casual and easy to read look. For the colour scheme of my website, I decided after much trial and error to use navy, beige, white and grey for my main colours. I want customers to feel excited and a sense of assurance when browsing on our website store, confident that we only provide the best products and services.

Link to my figma wireframe - https://www.figma.com/design/Jvz0DN65N9FJdX08laDWOV/FED-Assignment-01?node-id=0-1&t=quE7e7Kh2S7bMUDa-1

Features

FOR INDEX.HTML I included a promotional banner at the top, advertising a code for first time buyers.

For my navigation bar, I have

  • My name logo which acts as a home button
  • A dynamic underline bar will emerge when hovering over navigation links to highlight it
  • Dynamic search bar will appear from the side of search icon after clicking it. Typing in the search bar will dynamically show a box of suggested products based of the words. Clicking on an option brings you to either the camera or accessory pages based of the product type.
  • Cart icon that once clicked, opens a hidden sidebar displaying cart items and a checkout button. When items are added to the cart, a small red circle will pop up to the side displaying the number of items in the cart.
  • Clicking the checkout button without having any items in your cart will display a pop up message informing the user.

For my testimonial section, testimonials will be displayed once at a time, fading in and out. Three dots at the bottom provide the user with manual control.

For the footer section, an email address box is provided for users to sign up for the website's monthly newsletter.

FOR CAMERAS.HTML/ACCESSORIES.HTML

  • Products pop out a little when hovering over them
  • Add to cart button adds items to the cart using custom data-name, data-price
  • Small tags on the top left side of products to indicate things like, best sellers, sales, etc.
  • For the camera X100VI, clicking on the product box takes you to the one working product page, displaying mroe information about the product.

FOR SERVICES.HTML

  • Information is about camera repair services are displayed, along with buttons allowing users to make appointments.

FOR CHECKOUT.HTML An order summary displaying all the info of your product and price, along with the shipping price and grand total is shown on the left side.

  • A working discount code box is placed under the subtotal section. If a valid code is entered, a row will appear displaying the amount discounted, with the grand total price changing as well.
  • Right section is a form page allowing users to input their shipping and card details.
  • Clicking on the pay button will create a fake delay, showing the word "processing..." then hiding the main checkout page and showing a thank you page showing the order code and order details, along with a back to home button

Issues

product.html - cannot get add to cart button to work despite multiple tries to fix it.

Media

The photos used in this site were obtained from:

Acknowledgements

  • I received some inspiration from browsing Leica Camera's website and Alan Photo's website to see and understand how they designed their website.

About

FED Assignment 1 Project

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages