website design

website design

1. user interface

   • features
     • other features
     • example
     • negative bar
     • easy page negation
     • external hyperlinks
     • responsive layout
   • user interface components
     • button
     • images
     • link
     • headings
     • paragraphs
   • aesthetic
     • colours
       • example: a colourful background picture with wolf and repeated pattern
       • example: grey colour theme background

2. coding environment

   • developer tools
     • Notepad++
       • HTML
       • CSS
     • coding language
       • tags
   • key algorithm
     • other important algorithm
     • website navigation
     • opening webpage
     • clicking links

3. task requirments

   • described criteria
     • PC1: Your website must include TWO aspects styled using CSS o E.g. Background colour / Background image / font type / font colour
       • req 2:background image: light background paper.png
       • req 3：front colour: black
       • req1：background colour:Gainsboro
     • PC2: You must use HTML to organise appropriate information on your webpages using FIVE of the following: Image, Table showing information , Hyperlink to an external website, Ordered list or Unordered list, Button, Different heading sizes, Paragraphs, Video or moving image.
       • req 1: clear and big headings
       • req 2: hyperlinks
       • req 3: clear list
       • req4: clear information
       • req5: clear images
     • PC3:Your website must have an aesthetic that suits/aligns with your User Persona
       • req 1: clear layout
       • req 2:intractivity
       • req 3: typorgraphy
   • self-determined criteria
     • SCD 1: Provide information about wolf species
       • req 1: at least 5 wolf types
       • req 2: images included
       • req 3: facts included
     • SDC 2: at least 2 pages
       • req 1: clearly information
       • req 2: links liked to other pages
       • req 3: facts included in every page

4. existing solution

   • solution 1
     • pros: easy to use , good images
     • cons: too much text, hard invigations
   • solution 2
     • pros: good colours, interesting facts
     • cons: small front , too many adds

5. user persona

   • needs
     • easy to read informations
     • clear images
     • simple nevigations
   • goals
     • learn about wolfs
     • finding interesting facts
   • frustrations
     • too much text
     • confusing layouts
     • hard to find information
   • about them
     • students
     • animal lover
     • wildlife learners