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
Product Differentiation - Pick 2
How you position your company impacts every aspect of product development and marketing strategy. It's never too late to realign how you address your market, but the sooner the better. When kicking off a strategic plan, my interviews always begin with the question: what is your differentiation strategy? And Why?
Read MoreInteraction 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