Website Design

Website Design

1. Coding environment: I used Notepad++ to write my HTML and CSS because it’s easy to use and lets me see my code clearly.

   • Key Algorithms:My algorithm helps users move between pages. When a user clicks on “Christmas,” it takes them to the Christmas menu page.
     • Website Navigation: I made a navigation bar with links to Home, Menu, Christmas, and About pages. It helps users move around easily.
   • Developer Tools: Chrome DeVol's — I used this to test my website, check if my buttons worked, and fix layout problems.
     • Notepad++: I wrote all my website code here and saved it as HTML and CSS files. It helped me keep everything organised.
   • Coding language: HTML for structure and CSS for styling. HTML made the content, and CSS made it look good with colours and fonts.

2. User Personal

   • Wants: Visit a website where I can easily order my Starbuck drink.
   • Needs: I need the website to be easy used, asthetics, tells me the price of the drink and ingredients so I can check I’m allergic to any of the liquids.
   • Details: Website that allows me to learn all about Starbucks drinks, including prices and ingredients. I want it to be visually appealing so that enjoy using the site. And it also should include a another link when I press word, picture, or a button.

3. Task requirements

   • Self-Determined Criteria
     • SDC1 Description: I will have the prices bold up and written clearly where the person can see it easily. Price updates visible to users so they can know if has been sold out or not
   • Prescribed Criteria
     • PC1 Description
       • PC1 Requirement: I will be using background color in my website to make my person happy about their website CSS.
       • PC2 Requirement: I will be using font type and color in my website to make my person happy about their website CSS.
     • PC2 Description
       • PC1 Requirement: Firstly, I would be like to used the image so I can show the people how their drinks looks like.
       • PC2 Requirement: I will be using a button to make people to make an order like saying “Add to cart.”
       • PC3 Requirement: I will be using heading sizes to make sure that people can see the menu types like breakfast, snacks, drinks etc.
       • PC4 Requirement: Table showing information is good for my website as it shows the ingredients for the drink.
       • PC5 Requirement: I will lastly used a paragraphs to show the name for the drink and stuff.
     • PC3 Description
       • PC1 Requirement: Aesthetic will be mostly dark green and white colors to match the Starbucks theme.
       • PC2 Requirements: I will focus on visual design principles such as a clear layout, a balanced color palette, and while ensuring a smooth user experience.

4. User Interface

   • Features: I have a bit of description for my drinks. It has a lot of pictures rather than words.
   • User Interface
     • Buttons: I have buttons used in my website, to make the drink order. So the button is label with "Add to cart." The button filled with white color and the text is in green.
     • Image: The images I used in my website was for my Starbucks drinks to show how will it look. I used like 6 images. The six drinks I used was Caramel Frappuccino, Matcha Latte, Iced Mocha, Peppermint Mocha, Gingerbread Latte, Christmas Cookie.
   • Aesthetic
     • Colours: The theme of my website is on the logo of Starbucks with is dark green and white.
   • Links: I Have one link to have a menu for Christmas drinks.