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.

1. 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.
2. 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.
3. Next up, fix the spacing & padding.
4. Let's add some 'real' content and see how it all flows.
5. 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)
6. 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.

‍