Visual Hierarchy - Wk 2 - part 3/3
t's been a full couple of weeks that I've missed on posts, but I don't think we missed that much. Week 3 was about understanding layouts and how they can affect interaction. The downside to Week 3 and Week 4's modules is that the whole concept of layouts seems like a course in itself.
- You can have something linear and super scroll-y if you want to create a story.
- You can craft a single no-scroll with ample area for interaction and simple messaging.
- Or you can craft a million combinations of something in between.
Now that I've at least had a chance to look into the concept of layouts, I'm amazed at how designers don't throw themselves into a wall. This task was daunting and far more complex than I anticipated. For my task, I wanted to concept something around SolFox, a small startup I'm advising. While the content and the product content hasn't been fleshed out, the theme is using data to discover a deeper story about your customers, without spending much time in doing so.
Here are the iterations I came up with. Explanations on rationale below.
- Before I jumped into grid patterns, I wanted to figure out the feel. As you can clearly see, I'm an incredibly gifted illustrator. 3rd graders everywhere love my work ;) Ok, while learning to draw is somewhere in my set of skills to be gained, for right now, I wanted to draw trees that felt like the design impression I had in mind. Something very direct and object oriented or something more fluid. Since I'm designing for something within the renewable space, I played around with different types of trees to get a better idea for the feel I'm trying to project. I chose a predominantly simple and bold version, but some elements of curve and whimsy.
- Once I settled on the 'feel', I wanted to find a grid pattern / landing page that was similar to what I was thinking and used that as a baseline reference for what the final product might look like. That's the 2nd image.
- Next up, fix the spacing & padding.
- Let's add some 'real' content and see how it all flows.
- Adding in most of the relevant text. Adding in a new section that separates the objects from the main hero above the fold. Seemed too jarring to push someone from hero to lots of information. (PS. The dark grey boxes indicate pictures / background images)
- More padding and alignment fixes.
Overall thoughts: WIth some pictures, things might look better. But this might get really busy really quickly. The font choices don't seem ideal for this, but I think the layout is the larger issues. If I need to add space for content, a more simple layout should accommodate for that vs. trying to cram it all in from the beginning. Maybe.
There's room to explore more, but for next steps I want to start over with something much simpler and cleaner.
You might Also Like
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
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
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