Visual Hierarchy - Wk 2 - part 2/3
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.



These are my iterations to v1:





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.
You might Also Like

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
Visual Hierarchy - Wk 2 - part 1/3
We were asked to create a visual hierarchy for what amounts to a twitter clone. My original thought was to look at what others have done for train-of-thought social sites, but this time around I wanted to hold off on exploration. My goal was to build as much as I could given my inspirations, and then if I got stuck I could poke around on other people's ideas.
Read More