Website Design

Website Design

1. User interface

   • Features
     • Heading
     • Table
     • Easy navigation
     • Testimonials
     • High quality images
   • User interface Components
     • Buttons
     • Images
     • Links
   • Aesthetic
     • colour and contrast
     • Typograpghy
     • Clear layout
     • images and graphics
     • Interactivity

2. Existing Solutions

   • Spotify
     • Cons
       • Only 10,000 song limit for your library
       • Sometimes it can be buggy and difficult to upload and play music
       • Has multiple adds, and you cannot skip it
     • Pros
       • You can find new music you would love automatically.
       • Shows what friends hear, and could make a personal playlist
       • Many songs features shorts, looping visuals of the album
   • Youtube music
     • Pros
       • It has options to choose whether if you want the music video or just the lyrics.
       • Has skippable ads
       • It allows you to upload up to 100,000 of your own audio files
     • Cons
       • Low audio quality
       • Messy library
       • Can't listen when the phone is turned off, or while doing something in another app.

3. User persona

   • Needs
     • Ad-free, the song goes even when you close the app.
   • Frustrations
     • So many ads, when they close the app, the song stops.
   • Goals
     • I want to a music website that lets me do anything
   • About them
     • Their name is Charlotte, she is 15 years old. She lives in Brisbane, QLD. She is a student and in year 9. Her hobbies are Music, art, badminton

4. Task requirements

   • Prescribed criteria
     • Your website must include TWO aspects styled using CSS
       • Background image
       • Font colour (white)
       • font type
     • You must use HTML to organise appropriate information on your webpages using FIVE of the following
       • Image of playlists
       • Paragraphs
       • Different heading sizes
       • Ordered list or Unordered list
       • Table showing information
     • Your website must have an aesthetic that suits/aligns with your User Persona
       • Clear layout
       • Typography
       • colour and contrast
   • Self-determined criteria
     • Website must be styled using CSS to make it look appealing for the viewers
     • 3. The website must include at least 2 aspects of CSS such as background colour, background image.

5. Coding Enviroment

   • Developer Tools
     • Notepad++
       • editor for coding and handling large text files.
     • Coding Language
       • HTML
         • the standard language used to create and structure the content of a web page
           • <p></p> for paragraph
           • <h1></h1> for heading 1
       • CSS
         • the language used to style and design the visual presentation of a website
           • p {color: blue; }
   • Key Algorithms
     • Website Navigations
       • Buttons
         • Home Page
         • Page 1
       • Hype
         • Spotify
         • Youtube music