https://github.com/kaushikshivam/smashing_magazine

Design Teardown Project is built to understand visual hierarchies with the heatmap. In this simple project, we broke apart the website for a popular design magazine. The goal for this exercise was to train ourselves to think in terms of visual hierarchy, typography and design principles.
https://github.com/kaushikshivam/smashing_magazine

css greyscale grid html layout smashing-magazine smashingmagazine teardown

Last synced: 28 days ago
JSON representation

Design Teardown Project is built to understand visual hierarchies with the heatmap. In this simple project, we broke apart the website for a popular design magazine. The goal for this exercise was to train ourselves to think in terms of visual hierarchy, typography and design principles.

• Host: GitHub
• URL: https://github.com/kaushikshivam/smashing_magazine
• Owner: KaushikShivam
• Created: 2019-07-16T20:01:47.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-16T09:54:00.000Z (almost 5 years ago)
• Last Synced: 2024-11-07T09:47:18.115Z (3 months ago)
• Topics: css, greyscale, grid, html, layout, smashing-magazine, smashingmagazine, teardown
• Language: HTML
• Homepage: https://rawcdn.githack.com/KaushikShivam/smashing_magazine/c92981fe8f496b79836092b36f1ba27a225db6d0/index.html
• Size: 875 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [Design Teardown Project](https://rawcdn.githack.com/KaushikShivam/smashing_magazine/c92981fe8f496b79836092b36f1ba27a225db6d0/index.html) of [The Smashing Magazine](https://www.smashingmagazine.com/)

![Design Teardown Project](screenshot.png)

## Table of content

- [Description](#description)

- [Installation](#installation)

- [Contact](#contact)

## Description

[Design Teardown Project](https://rawcdn.githack.com/KaushikShivam/smashing_magazine/c92981fe8f496b79836092b36f1ba27a225db6d0/index.html) is built to understand visual hierarchies with the heatmap.

In this simple project, we broke apart the website for a popular design magazine.

The goal for this exercise was to train ourselves to think in terms of visual hierarchy, typography and design principles.

We created a grayscale heat map of the website that indicates which elements have the greatest weight in the visual hierarchy. 

[Reference link](https://www.smashingmagazine.com/)

## Installation

1. Clone the project to your local directory

```

git clone https://github.com/KaushikShivam/smashing_magazine

```

2. Open the index.html file in your browser to view the website in all its glory (Live-server is recommended to view live changes automatically)

## Contact

This template was created in collaboration with Rodolfo and myself

You can contact Rodolfo at:

- [Email]([email protected])

You can contact me at:

- [Portfolio](https://www.shivamkaushik.com)

- [Email](mailto:[email protected])

- [Linkedin](https://www.linkedin.com/in/kshivamdev/)

- [Twitter](https://twitter.com/kShivamDev)

- [Medium](https://medium.com/@shivamkaushikofficial)

- [Angellist](https://angel.co/kshivamdev)