ubercj / design-teardown

Assessing a site's visual hierarchy by creating a heat map

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Design Teardown

The goal for this project is to assess the visual hierarchy of this Smashing Magazine page by creating a heat map. Elements that are a darker shade should indicate areas where a user's eyes are drawn first.

You can see the end result here.

A secondary objective is to practice importing fonts, in this case from Google Fonts.

So the obvious question is... how did they do? How does the design enhance the UX of the site?

Well, as a site that hosts articles and workshops about UX/UI and front-end design, the designers of this site obviously have much more experience than I do. That said...

As a newcomer to the site, I might find it more useful to have their "Smashing Guides" closer to the top of the page rather than the big sign-up form for their newsletter. But that's probably an intentional decision on their part - they're probably prioritizing getting peoples' emails.

Otherwise, I think it strikes a good balance of sleek visual appeal without being "over-designed."

About

Assessing a site's visual hierarchy by creating a heat map


Languages

Language:HTML 50.9%Language:CSS 49.1%