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:
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
Tesla's Roadster, For Your Roof.
Last Friday, Elon Musk announced a solar roof made of glass Tiles. We've been hearing about this for sometime and now we're hearing all sorts of reasons of why this won't work. I'm skeptical of the skeptics. This is a fantastic step for the solar industry. This is Tesla creating a brand, and building excitement around what was supposed to be a compelling product. If it works, solar will no longer a commodity, but a true fixture of the home - the muscle, the skeleton and the brain of your home.Read More
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
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 More