wirenotcable/asg1

Starbucks Website

Ngee Ann Polytechnic - Interactive Development (ID) Assignment I

website live at : https://wirenotcable.github.io/Asg1/index.html

Objective :

This is a starbucks website for users to buy Starbucksmerchandise.

Design Process:

As a user, I am sometimes unaware of which things are clickable, so i decided to add hover effect to any clickable texts and buttons.

As a user, I want the website to be organised so that the website is viewed from the top to bottom.

As a user, I want to have similar colour schemes as starbucks for better relatability so i decided to make white and green the main colours of my website.

Link to Wireframe

Features :

Home page:

• It will include a homepage with a navigation bar for starbucks merchandise. User will be brought to the merchandise page after they click on the category.
• It will include banners on the current events/promotions as a slideshow.
• It will include a footer with content related to the company and its social media sites.

Merchandise:

• Image, Description and price will be available for each item listing. There is also an add to cart button for users to add the items they want to their shopping cart.

Shopping cart page:

• It will have a shopping cart for users to see the details of the things they bought and the total amount. There will also be a checkout button.

Checkout page:

• It will include a checkout page for user to enter their bank card information, address etc.

Technologies Used

• HTML
• CSS
• Javascript

Credits

Images and Content

• Starbucks Singapore website
• Starbucks Coffee Company

Acknowledgement

• W3Schools
• NavBar was inspired by CodePen
• Shopping Cart page was inspired by UX Planet
• Design inspired by Dribble