C2-07-09 From Abstract to Visual, Step 2

For the past three days I’ve been slugging-it-out with the tag cloud and the first pass layout, trying to bring them out of the abstract and into something tangible. This is the part I always find really difficult. I’ve been spending a couple hours a day on this, pushing past all my negative reactions to the design as it evolves to find the next visual idea.

Mockups for the past couple of days The above graphic shows the progression from the first ugly step (A) just getting some image and text down. Compared to the original thumbnail sketch (which itself is a bit vague), there are some differences, but the general idea is the same:

  • There’s a BIG IMAGE at the top, which will be “responsive” in that it always fills the space from edge-to-edge in a browser. The image is a placeholder; ideally it will be an image that visually supports what I’m about.
  • There’s a DAVE IDENTITY somewhere within that image, or next to it. Since it’s near this big image, I don’t have to lead with my face/name alone. Maybe this is a cop-out, but it is personal preference.

Also within the header are opportunities for additional supporting links. Right now I have a “what’s new” and “what is creative independence”. The image area might become a slider that cycles through several backgrounds, or there might be a small menu on the right.

Below the header are the content areas, which I will be constraining to 960 pixels wide centered in the frame. As this is the front page, the content areas will be stacked on top of each other and then divided horizontally according to whatever grid system makes sense.

Mockup Starting Point I’m trying to get away from my current blog design, which is constrained in a white rectangle. I’ve admired some other website designs that have a more open feel by eliminating the edges, instead implying them through alignment. The result is a layout that feels more open, which is how I want to feel.

I’m thinking that the stacked content areas will give me some flexibility in design. As the content area is 960 pixels wide, this divides cleanly into halves, thirds, or quarters. It also isn’t a bad basis, from what I can tell, for a responsive design that crunches down to fit any screen. I’m not planning on making the design responsive, however. Perhaps in the future, but not right now.

Anyway, I’m thinking there will be at most two stacked content areas. The top one will be a slider that covers the three or four main features on the website using mostly graphics and large type, serving as a lead-in to inner pages. The bottom one will be more text-y, showing recent stories and whatever. This is what I have to design next.

Also in the queue, after the content areas are done to a rough pass, will be to design the inner pages: the blog templates, page templates, and shopping templates. Next week I’ll have to think about the minimum I need to launch with new content areas + shopping areas. I’m thinking I’ll be VERY lucky if I can get this all done by April 4.

For the rest of this week I’ll be quite busy so I don’t know if I’ll make much progress, but I can at least do the daily 15M on this to keep it fresh in my mind.


About this Article Series

This series is about improving my website, thinking about it for 15 minutes a day first-thing in the morning. You can see the raw 15-minute text here. These posts are collected on The March 2013 Challenge Page.

3 Comments

  1. I love the series Dave, it’s really great to see a fellow designer at work.

    I don’t have anything critical to add, but there are a couple of things I want to comment on:

    a) The measure: I’m a big proponent on a measure of max 80 characters to get the best legibility (though I must credit Mark Boulton for saying this better and louder). I believe the copy area of your current design suffers from being a tad too wide. I’m not saying necessarily make things smaller, but perhaps a slightly larger type size could help?

    b) Responsive Design: I think responsive design is all fine and dandy but people tend to get on the bandwagon without first pondering on the benefits they will get out of putting in the effort required to design and implement it. As with everything else in design, it’s usually a matter of tradeoffs: not every website will be read from a mobile device nor every website should be.

    PS: I’m not sure if it’s ok to include a link on the comments like I did Dave. Feel free to delete that (and this PS) if it won’t fly.

  2. Author
    Dave Seah 4 years ago

    Hey, thanks for the comments and design communion! I really appreciate that you’re taking the time. Sharing is caring, right? :D

    The idea of the measure being max 80 chars is interesting. I’ll revisit the copy area once I actually put some copy in it…I’m still trying to decide overall page balance. We shall see!

    Agreed on Responsive Design. I’m not sure there’s really a mobile component to the website, but it’s fun to think about.

  3. Nancy 4 years ago

    When you design what you feel the results are beautiful and pragmatic. I am a big fan of your Dream Context Tracker. I find that it incorporates the beauty, logic, and usefulness.

    Thank you, and many blessings .

A message from Dave:

I believe we all benefit when we respectfully share our perspectives on common experiences. My house rules are "please be respectful of divergent views" and "enjoy the flow of ideas!"

Leave a reply

Your email address will not be published. Required fields are marked *

*