Website Design

Website Design

1. User Interface

   • features
     • features: easy navigation, table, heading, call to action, testimoials, high quality inmages, heading
     • Easy Navigation
     • call to action
     • table
     • heading
     • testimoials
     • high quality images
   • Aesthetics
     • Astetics: color, contrasts, fonts, clear layout, images and graphics, interactives
     • clear layout
     • images and graphics
     • color
       • Beige
       • Light Grey
     • fonts
     • interactives
     • contrasts

2. User Persona

   • Name
     • Curtis Wong
   • Education
     • University
   • Goals
     • To make games more accessible.
   • Needs and Expectations
     • Transparency
   • Age
     • 23
   • Occupation
     • Programmer
   • Interests
     • To make a website as a manual for steam
   • Fustrations
     • Steam is complex to handle by one person. He needs to create website able to simply explain to others how to navigate through steam
   • Location
     • USA

3. Existing Solutions

   • https://help.steampowered.com/en/
     • cons
       • a bit confusing to navigate
     • pros
       • official website of steam
   • https://steamcommunity.com/
     • pros
       • Community of steam, made by users of steam
     • cons
       • Some misinfomation may exist

4. Task Requirements

   • Prescribed critera
     • Your website must include TWO aspects styled using CSS o E.g. Background colour / Background image / font type / font colour
     • You must use HTML to organise appropriate information on your webpages using FIVE of the following: o Image o Table showing information o Hyperlink to an external website o Ordered list or Unordered list o Button o Different heading sizes o Paragraphs o Video or moving image
     • Your website must have an aesthetic that suits/aligns with your User Persona
   • self determined criteria
     • Must function properly

5. Coding Enviroment

   • developer tools
     • VSCode
       • what is it used for
         • coding with css or html
     • Coding Languages
       • Html
         • what is it
           • The stucture of the website
       • CSS
         • what is it
           • The styling of the website
     • Notepad++
       • What is it used for
         • Coding with css or html
   • Key algorithms
     • website navagation
       • Buttons
         • homepage
         • Page 2
       • Hyperlink
         • https://help.steampowered.com/en/
     • other important algorithms