Georjane / Smashing-Magazine-Heatmap

This project shows a gray scale heat map of the Smashing Magazine Web page elaborating Visual Hierarchy in Design and UX

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Smashing Magazine Heatmap

This is a Heatmap of the Smashing Magazine Webpage built with HTML and CSS3.

screenshot

In this project, my partner and I designed a 'Heat-Map' of the original Webpage of Smashing Magazine with the aim of portraying our understanding of Visual Hierarchy used in designing Webpages to enhance User Experience (UX) as we dig deeper into our learning of the HTML and CSS3 concept of Design and User Experience (Design and UX).

The page uses GrayScale coloring and differentiation to show the prominence of different regions of the page to users where a darker grayscale color of a region indicates more prominence and attraction of users' attention to that particular region, and otherwise for lighter grayscale colored regions.

This project covers the following HTML and CSS3 concepts

  • Design and UX
  • Floats and Positioning
  • Flex and Grid
  • Backgrounds

Built With

  • HTML
  • CSS

Live Demo

Live Demo Link

Getting Started

To get a local copy of this repository, please run the following commands on your terminal

$ cd <folder>
$ git clone https://github.com/Georjane/Smashing-Magazine-Heatmap.git

Authors

👤 Witah Ngu Geojane

👤 Roy Ntaate

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

📝 License

This project is MIT licensed.

About

This project shows a gray scale heat map of the Smashing Magazine Web page elaborating Visual Hierarchy in Design and UX


Languages

Language:HTML 50.6%Language:CSS 31.2%Language:JavaScript 18.2%