Visual Design & User Experience:

Visual design is all about using text, colours, images, videos etc, in a way that improves a design or interaction. Across this webpage, we will label what we deem to be some of the most important concepts of this module and some priceless resources that can be used along the way to make learning easier and more efficient.

Goals of Visual Design:

The main goal of visual design and user experience is the ability to make interfaces usable. In short this means that the users eyes at nearly all times should be drawn to the important information and functionality. In order for us to do this, designers enhance particular content on a page by using different fonts, colors, sizes etc.



Table of Contents:

  1. Home (you are here)
  2. Intro Visual Design
  3. Important Concepts
  4. Colours
  5. Purpose of HTML
  6. Purpose of CSS
  7. Our Members
  8. Resources
"> Home | Continuous Assessment 2

Visual Design & User Experience:

Visual design is all about using text, colours, images, videos etc, in a way that improves a design or interaction. Across this webpage, we will label what we deem to be some of the most important concepts of this module and some priceless resources that can be used along the way to make learning easier and more efficient.

Goals of Visual Design:

The main goal of visual design and user experience is the ability to make interfaces usable. In short this means that the users eyes at nearly all times should be drawn to the important information and functionality. In order for us to do this, designers enhance particular content on a page by using different fonts, colors, sizes etc.



Table of Contents:

  1. Home (you are here)
  2. Intro Visual Design
  3. Important Concepts
  4. Colours
  5. Purpose of HTML
  6. Purpose of CSS
  7. Our Members
  8. Resources
"> Home | Continuous Assessment 2

Visual Design & User Experience:

Visual design is all about using text, colours, images, videos etc, in a way that improves a design or interaction. Across this webpage, we will label what we deem to be some of the most important concepts of this module and some priceless resources that can be used along the way to make learning easier and more efficient.

Goals of Visual Design:

The main goal of visual design and user experience is the ability to make interfaces usable. In short this means that the users eyes at nearly all times should be drawn to the important information and functionality. In order for us to do this, designers enhance particular content on a page by using different fonts, colors, sizes etc.



Table of Contents:

  1. Home (you are here)
  2. Intro Visual Design
  3. Important Concepts
  4. Colours
  5. Purpose of HTML
  6. Purpose of CSS
  7. Our Members
  8. Resources
">
Presentation Sample

Code Sample

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Home | Continuous Assessment 2</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- ********* NAV BAR ********* --> <nav id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="intro.html">Intro Visual Design</a></li> <li><a href="concepts.html">Important Concepts</a></li> <li><a href="colours.html">Colours</a></li> <li><a href="html_purpose.html">Purpose of HTML</a></li> <li><a href="css_purpose.html">Purpose of CSS</a></li> <li><a href="bios.html">Our Members</a></li> <li><a href="resources.html">Resources</a></li> <li ><a onclick="dark()"><img src="img/dark-mode.svg" height="30px" width="50px" alt=""> DarkMode</a></li> </ul> </nav> <!-- ********* MAIN BODY ********* --> <div id="container"> <h1 >Visual Design & User Experience:</h1> <section> <div id="row1"> <p>Visual design is all about using text, colours, images, videos etc, in a way that improves a design or interaction. Across this webpage, we will label what we deem to be some of the most <em><strong> important concepts</strong></em> of this module and some priceless resources that can be used along the way to make learning easier and more efficient. </p> </div> <div id="half"> <h3>Goals of Visual Design:</h3> <p>The main goal of visual design and user experience is the ability to make interfaces usable. In short this means that the users eyes at nearly all times should be drawn to the important information and functionality. In order for us to do this, designers enhance particular content on a page by using different fonts, colors, sizes etc. </p> <br> <br> <h3>Table of Contents:</h3> <ol> <li><a href="#">Home (you are here)</a></li> <li><a href="intro.html">Intro Visual Design</a></li> <li><a href="concepts.html">Important Concepts</a></li> <li><a href="colours.html">Colours</a></li> <li><a href="html_purpose.html">Purpose of HTML</a></li> <li><a href="css_purpose.html">Purpose of CSS</a></li> <li><a href="bios.html">Our Members</a></li> <li><a href="resources.html">Resources</a></li> </ol> </div> <div id="half"> <img src="img/home.jpg" alt=""> </div> </section> </div> <footer id="footer"> <ul> <li><a href="#navbar">Click to go to the top of the page!</a></li> </ul> </footer> </body> <script> var checked = false function dark() { checked = !checked let section = document.getElementsByTagName("section")[0] let container = document.getElementById("container") let heading = document.querySelectorAll(".heading")[0] let list = document.getElementsByTagName("ol")[0].children console.log(list); if (checked) { document.body.classList.toggle("dark-mode"); container.classList.toggle("dark-container"); section.classList.toggle("dark-section"); heading.classList.toggle("dark-container"); for (let i = 0; i < list.length; i++) { list[i].children[0].classList.add("dark-mode"); } } if (!checked) { document.body.classList.remove("dark-mode"); container.classList.remove("dark-container"); section.classList.remove("dark-section"); heading.classList.remove("dark-container"); for (let i = 0; i < list.length; i++) { list[i].children[0].classList.remove("dark-mode"); } } } </script> </html>

CodePen

Presentation

JSFiddle

Tutorials