Back to Blog
January 21, 2016
Design

Visual Hierarchy - Wk 2 - part 2/3

I

n this design, we were given a few blocks of text and tasked with creating a visual hierarchy. "Play around with weight, spacing, alignment, contrast (shades of grey), and try to simplify your design as much as possible while still conveying hierarchy. "

For this, I wanted to focus on white space, and how that could bring out contrast without needing to bold everything. I love classic style text and felt it would be more appropriate for a sincere feeling vs. a 'headline' big shouty feel. Playfair offered me a sense of professionalism and whimsy. Lato was clean and easy to read - especially if I had to deal with a much longer post.

I chose a two column layout (across 16 total columns) to help keep content separate (and I loved the extra white space between the columns).

When I thought about design goals, I wanted to the user to focus on the copy if they felt it was something they wanted to read about. I kept the summary / highlight text deliberately lightweight so it wouldn't interfere with reading the copy. I didn't realize it, but choosing a lighter font style added enough extra white to accomplish my goals.

UPDATE: Based on mentor feedback, these are 3 updated variations: TL;DR:

Removed the 3rd column, shifted the timestamp closer to the cutout and experimented with two 2-column layouts.

feedback - v1.png
feedback - v2a.png
feedback - v2b.png



These are my iterations to v1:

Desktop-Original.png
Desktopv2.png
Desktopv5.png
Desktopv4.png
Desktopv3.png


In terms of visual path, my take on this is:
1: Headline
2: Author
3: Summary
4: Copy
5: Date
6: Carousel arrows

In the copy text, I chose to bold the first two as they would accomplish a few objectives:
- Pull the eyes toward the copy text after reading through the summary / highlight, add a sense of gravity to the authors first choice of words, and to add enough weight where the eyes wouldn't naturally drift back to the headline.

I kept the date toward the very bottom as that would allow easy scalability for anyone who wanted to see (quickly) how recently the article was written. Additionally, I wanted to keep the users eyes focused on the post itself, and date/time is an identifier, not actual content.

I added the shadow box and carousel arrows as it was hard for me to envision this as a static landing page.

‍

Download File

You might Also Like

Strategy

A Holistic Approach to 'Marketing'

The difference between marketing and conversation is you’re selling someone something - whether it’s a thought, a service, or a product. My problem with traditional marketing is how scattered it quickly gets. The idea behind data-driven marketing helps ground ideas back to measurable results, but it tends to work at a tactical vs. strategic level.

Read More
Product

Beyond the Seemingly Impossible Status Quo

It's Beyond Possible.

Read More
Design

Interaction Design Theory

Ever work with someone and they ask you to design something ‘fun’? First off, I love designing fun experiences, but then again, I’ve never been asked to design a painful experience - 90s era web pages not withstanding. Today, when presented with that challenge, my first response is always, “help me understand what you mean by fun”.

Read More
About Me

I help companies build better products through data, good design and an unwavering committment to the voice of the customer.

SAY Hello.
I’m based in Reno / Tahoe, NV
nikhil@samasana.io
linkedin.com/in/nikdaftary
twitter.com/lets_daft
Send Message
Follow

NIKHIL DAFTARY

HOME - Nikhil DaftaryAbout MEEXPERIENCE & PORTFOLIOBlogCOntact