Broad to subtle — when designing I use this way of thinking that stems from a drawing background.

Drawing from broad to subtle

1. One approach to drawing, say the human figure, is to first look for the big abstract shapes or broad angels.
2. Then you go deeper and start thinking about the major muscles and bone structures, getting a little bit more refined.
3. Then you refine even more, as you think about minor muscles, joints, and about facial features.

When approaching design, you can use this same philosophy. It gives yourself a framework from which you can more easily get things started, especially when you are staring at a blank layout screen.

Approaching design from the broad to the subtle gives yourself a framework from which you can more easily get started when are facing a blank layout screen.

1. Start broad

What are the main areas that you are going to have in your layout? What are those shapes? Maybe you even start out using a particular grid. These are broad strokes. Thinking from a more general point of view, you can begin to place the primary areas of importance.

How could this apply when designing the Scottus Robus site? The general or broad layout for the Scottus Robus site has a navigation/branding area on the left that is always present on larger screens and then the main content area on the right. I wanted this to remain consistent throughout most pages on the site.

Looking at the broad layout on the course index page, there’s really just two primary sections — an intro/header section. This is where I’m essentially pitching the course via text and a planned trailer. Below that is the course cascade or grid. I wanted the intro at the top as a lead-in, but I wanted it not to be too large so courses could still be seen above the fold giving people a clear path to them, say if they want to quickly skip the intro area and just get to look at the what they really wanted — the courses.

Following a similar pattern for the course page, the two primary sections are the intro/header area and the lesson rows. Same idea here, where I wanted to lead-in to the course, via text and a planned trailer and then ensure that getting to the lessons was clear and didn’t require much scrolling.

The video/lesson page introduces a slightly different layout, specifically to give students a full page experience for their learning since this page would be where students are most of the time, so I wanted to make use of the space as best as I could.

The broad strokes are the video pane, the header/navigation, supplementary material area, the transcript area, and the contents sidebar. These four blocks specifically aim to satisfy the core wants that I had as a potential customer as discussed previously in the lesson on anticipating your customers' desires.

Starting broad isn't worried about the details. Our goal is to just to begin getting something down and visualize the primary shapes and areas of the design.

2. Move through each area

As you start to get those big pieces in place, it becomes easier to think about particular shapes and what goes in them and their characteristics. You begin asking questions like:

"What size fonts should I use?"
"What colors should I use here?"
"Should we have some sort of image or illustration?"

Let's continue with the Scottus Robus website from where we left from a broad perspective. After the core areas have been established, I can start to think about each particular area and what goes in them.

For the side navigation/branding area my primary goal is to relate the personal aspect of the site, and thus I include a handwritten logo and a profile image along with links to the primary areas of the site — which along with the courses gives people a way to get to know more about me if they want.

Looking at the course index page, I start to think about what text I’m going to have, and the hierarchy of the text, and what each particular course item will look like and its primary calls to action.

Looking at the course page, in the same vein, I’m thinking about the hierarchy of type, how to bring interest in the intro area, and then what should go into each lesson row — the lesson number and whether it's free or not. I aim to show as little as possible while getting across the primary points that are important for the user to make a decision (whether to click to not). I'm also considering how can I include an unobtrusive but noticeable call to action for buying the course, for those that are interested.

Looking at the video/lesson page, I begin to fill in particulars by asking more questions:

"What does the video look like before being played?"
"What is the hierarchy of the text on the page?"
"What is the basic layout of the contents bar?"

I again am considering for those users who come and watch free videos, how can I include an unobtrusive but noticeable call to action for buying the course for those who are interested.

After our broad layout has been established we can begin to think about more detail and specifics like colors, images, and typography. What goes into each area that we've defined in our layout?

3. Interactions & States

At the beginning and the second phase, I am not thinking about hover states nor every possible flow or path. I’m primarily concerned with the interface’s initial state, or the “happy path.” Once you’ve gotten most of the pieces in place, you can start to think about all the little details of all the interactions the user might take:

"What happens when they hover or click or this particular element?"
"What happens when they enter in wrong information?"
"What does this dropdown look like?"

Again let's take a look at the Scottus Robus site.

On the course index page, we have the course items or cards. If the user visited the site as a guest or is not logged in, they will see a different course card where there is a call to action to watch for free as well as an option to buy. For users who are logged in and have purchased a course, they will see that any purchased courses are in their library with calls to action to continue.

On the course page, the lesson rows will have different states depending on if you are logged in, have purchased a course, and whether you’ve watched it or not.

On the lesson video page, one example is the contents sidebar. We need to consider all the different states. The default state, its hover state, whether it has been watched or not (for logged in users), and whether it is currently playing.

We don't want to bog down our minds from the onset with all the various interactions the design will require. Once we've established our initial states, we then can begin to hone in on what each area will look like as the user interacts with it.

Conclusion

This approach of thinking broad to narrow can be an iterative process. As with drawing, and as the Designer’s Circle guides us to do, we can circle back around. We can step back and start again from a broader perspective, and then slowly hone in on any particular areas that might need more finessing.

Moving from the broad to subtle coincides with moving around the Designer's Circle. We design, step back, evaluate, and then circle back around and hone in on any particular areas that need more work.

We move from the broad to the subtle, continually making our designs clearer, and addressing all the flows and states that we can think of.