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

Product

A Push for Something Different.

What do I love more than creating heartfelt experiences? Literally the only thing I am more passionate about than creating memorable experiences for people, companies and end-users is the mission behind the plant-based foods world. If you asked me whether I'd choose running my dream pizza restaurant or getting the world to consume less animal products - I would easily choose the latter.

Read More
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
Design

Sketch vs Keynote?

I've always appreciated good design, but I've always wanted to actually design the designs. Much like karaoke, what I envision in my mind isn't exactly what comes out. I've bought numerous sketchbooks, fancy felt pens and a couple drawing tutorials, but I'm usually discouraged by the presence of permanent ink.

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