Designing With Strong Simple Focal Points

by on 7th October 2010 with 18 Comments

In design, we tend to think of simplicity in terms of recent trends towards minimalism. A simple design by this definition is one with lots of literal whitespace and very little on the page outside of what is absolutely necessary.

However, instead of blindly following this trend, it’s important to understand the ideas behind it so that we don’t find ourselves trapped in a minimalist box with obvious grid-based layouts, white backgrounds and newspaper-style typography (not that this is bad, it’s just not good to be stuck in this idea). When you consider the principles of design that are at work in minimalism, you can successfully break out of the box and create clean designs that aren’t bound by an obvious and strict visual style.

Who Cares About Focal Points?

What’s the purpose of focal points and why should you care about them? The answer lies in controlling how people view your design. This is crucially important because no matter who your target audience is, they’re going to have a limited attention span.

Being able to capture the viewer’s attention and hold it, even if only for a second or two, is the key to effective design. By effective design I mean design that does more than look pretty, it accomplishes a given goal. This can be anything from getting someone to notice a sale at Wal-Mart to building awareness for the name of a political candidate.

One of the primary aspects of a minimalist design is reducing superfluous distractions, which in turn highlights the important elements on the page. You can use this same technique to simplify your designs by reducing the number of focal points without taking it to the extreme of dramatically reducing your design options.

The theory alone is a little abstract and useless so let’s see how to apply it by working with a couple of actual designs. The goal will be to create clear focal points that simplify the visual message and successfully draw the viewer in.

Example 1: Finding The Perfect Flower

We’ll start off by taking a typical design and seeing if we can improve it. Below is a sample that I created that uses an attractive photographic background. Overall, it’s an good looking design. The flowers communicate the message effectively and there’s plenty of whitespace in the sky to make the text easily readable.

screenshot

However, despite being attractive, the design doesn’t really pull you in and hold you. One of the main reasons for this is the that you don’t really have any strong focal points. The headline is nice, but it’s probably not enough to grab and hold your attention all by itself.

As I said above, the field of flowers is attractive, but it’s also a little too busy to provide the strong message we’re attempting to create. Let’s try simplify this design a bit by grabbing a different photo.

screenshot

Here we’ve rotated our orientation, which is completely feasible if you’re designing a business card, flyer or something else in print. The simple nature of the messaging made a vertical layout just seem like a better fit because we can maximize the size of the objects.

The primary change though is obviously in the photo selection. This time we’ve selected a photo with a strong single focal point. The result is something beautiful that we can’t help but want to stare at. The contrast of the flower against the background, the shallow depth of field and the lack of other distractions all contribute to the irresistible nature of the artwork.

Example 2: Free Concert

Let’s say you’re going to create some graphics for a free rock concert. While searching for some good imagery to use, you might be tempted to grab (or shoot) a photo like the one below:

screenshot

One one hand, this is a great start. You’ve already strongly communicated the idea of music through the visuals. However, the photo has three objects that the viewer must take in and interpret. When you combine this with some sort of messaging you’re going to end up with something that’s unnecessarily complex and consequently, not enticing to your viewers.

If we look at this photo and try to decide which object clearly communicates the concept of rock music to the greatest amount of viewers, we’ll no doubt settle on the guitar head. We can then use this as inspiration for our photo search. We’ve now gone from a general concept for the photography we want to use (a rock concert) to something much more specific and concrete (the head of a guitar).

Using this as our starting point we might end up with something like the design below:

screenshot

Notice that we’ve done the exact same thing we did with the flower setup above. We’ve reduced the visual complexity by cutting the unnecessary objects out of the scene. Unlike the flower concept though we’re going to take this idea much further to see how to apply this technique in a more realistic situation.

Odds are, you don’t spend too much time creating designs as simple as the one above. Instead of one headline, you have an entire page full of content that needs to be arranged in a logical manner.

The good news is, the same techniques work just as well in this setting. The key is to separate your design into visually distinct areas. Since headers are traditionally the place where you grab a viewer’s attention, this is a natural place to insert a strong focal point.

Let’s take our guitar design and expand it into a full-blown flyer or webpage.

screenshot

As you can see, using this setup we can cram as much content as we need into the lower portion of the design. Notice that the design doesn’t really feel minimalist in the sense that we’ve come to know the style, but it does use the heart of the theory to create a strong layout.

Examples in Web Design

Now that we’ve discussed enough theory to get you on your way to creating awesome designs with clear focal points, let’s close off with a few real examples from the world of web design. Pay close attention to how each layout grabs your attention and where the focal points lie.

Creative Mints

screenshot

Supersteil

screenshot

Hunderprodukte

screenshot

Printed Threads

screenshot

Godmode

screenshot

Closing Thoughts

To sum up, complicated graphics can often detract from the visual messaging and allure of a design. By studying the principals used in minimalist design we can extract a useful technique for reducing the visual clutter and ultimately arrive at an attractive finished product that uses clear, strong focal points to both convey a message and attract attention.

Leave a comment below and let us know if you found the information above helpful. Also be sure to share any techniques you use to simplify your designs while making them more attractive.

Comments & Discussion

18 Comments

  • Pingback: CSS Brigit | Designing With Strong Simple Focal Points

  • http://www.bennycreative.com Benny

    I see what you’re saying, and I agree with your argument. However, I think the first Flowers image is more effective than the second one. The black background replaces “pretty” with “dark”, and the choice in font weight is not as effective with the second one.

    I liked how the fonts were heavier on the first image as it all came together as one logo. The second image feels like all the text is isolated and I just don’t think “pretty” when I see such an overwhelmingly dark background.

  • Biyified

    Great article,Thanks for sharing. I like how the examples you of the website you used.I Think Most good designers already do this even though they might not have a formal definition for it.

  • http://www.webdesignandsuch.com mike i

    I love that curli website. So fresh and so clean, clean.

  • http://www.wangyufei.org/blog 王宇飞

    Supersteil seems nice

    I LOVE green.

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok

    We tried to do the same as well, the focal point for our site was pictures of real people and their stories.

    http://www.webcoursesbangkok.com, so we looked at attracting people by showing that others like them can achieve what they aim to with our courses.

  • Mark

    I thought example 1 was a very bad example.

  • http://www.valid-interactive.de Nils

    Great article, however the only thing the first example needs is a little bit more “air” to breath. Give it the same height, as the “dark” version and you will see it will work fine. The problem here were not the graphics, but the lack of space between image and font. However i thought this was a very interesting article!

  • Shukri

    While I agree with your overall message, I don’t agree with your examples. Sorry to say this, but you’re falling into the same trap than many people land in : you like dumbed-down pictures that are overly-simplified and pleasant at first glance, but lack depth.

    The sunflower picture is by far the more striking of the two. It has a focus too : the horizon.

    And I really disagree with example2. The first image is way better than the the second – the red pedal stands out strongly against the other monochromatic elements in the photos. That picture has more visual balance to it. The second pic, with just a guitar neck, has no visual meaning or message, it’s just filler.

  • http://Twitter.com/kimwylie0523 Kim Wylie

    Great article! Now to convince clients to ease up on their desires for tons-and-tons-and-tons of content/imagery. One simple, bold image can speak volumes; too many are incredibly distracting.

  • http://www.digital-results.com/ Russell Bishop

    It’s a good message; we should be weighing and dividing attention to certain important parts of an interface, but I think you were a little too literal with your web examples.

    Huge objects with a lot of white space around them is maybe a little exaggerated in comparison to some minor hierarchical changes you could make to draw new importance to something in a design.

  • Rafael GG

    Nice article man!! Perfect for novices!! Ty for sharing, my young friends’ll be glad!!

  • JJ

    I haven’t finished reading but I felt I needed to comment on the 1st example. And as I can see, I’m not the only one.. :D

    To me the 1st sunflower pic is better than the “improved” one. ON the 1st picture, the field of sunflowers is so crowded and somehow messy that becomes just background noise, making the text pop up and get all my attention.
    On the “improved” example, however, both the text and the single flower have a very strong focus. Therefore it becomes a bit uncomfortable to look at, because my attention seems pulled towards both the strong white-on-black text and the picture.

  • http://www.elfvision.com/ RobinQu

    Nice read!
    i found web design can be inspired a lot from some excellent designs of postcards, CD cover, etc.

    They all have one thing in common : simplicity, which brings extreme clean focus to readers.

  • St

    Informative! thanks for sharing

  • http://www.crearedesign.co.uk Laura Meider

    I particularly like the free concert designs, I think the orange really stands out well against the dark colours making the design very appealing and bold.

    The only way of capturing a main focal point is to make the design very clean and simple allowing this element to shine through. I also really like the Godmode design as this is very clean but at the same time it is very appealing.

    Thanks for the helpful post.

  • Pingback: What I’ve Read: 10-10-03 to 10-10-15 | CSS Radar

  • http://gdma.deviantart.com GDMA

    How about extremely complex art with details everywhere like a corpse ripped to shreds by chains in a spiky dark forest where blood is sprayed in all directions? That’s my style and I don’t see any place to add focal points! My drawing style is pure insanity (not for those looking for minimalistic kind of art). Make me a visit if you have a deviantart account and please tell me if you can see any places in my drawings where I could use focal points!

Subscribe
Membership
About the Author