You are currently browsing the tag archive for the ‘White Space’ tag.

As promised, I’ve got 6 web sites today looking at good design and bad design. Of course, it’s all relative. I had a hell of a time getting these pictures to look just OK in the previous post and I imagine this one won’t be any easier. That’s the downside of working with a template – it’s not always the right fit. So while this could be construed as the pot calling the kettle black, I do realize my layout leaves a lot to be desired. I’m just not letting that get in the way of getting the post out the door. (I’ve promised myself that any post started *will* get posted.) On to the comparisons, and keep in mind these aren’t the worst or best I’ve ever seen – just the ones I’ve seen today:

Web Sites with Poor Design

  1. Poor Design - online print site Ex 1

    Poor Design - online print site Ex 1

    Online Printing site: At first glance this is not bad. There’s a nice order to the informational images near the top. However, the block of text below those is too dense. The line length is too long to comfortably read, the line height is too close, and the font size is too small. Also, the left column of navigation buttons is almost overwhelming.

  2. Poor Design - online print site Ex 2

    Poor Design - online print site Ex 2

    Another Online Printing site: Obviously, this page isn’t plagued with densely packed text, however the pricing table is almost impossible to read without holding a piece of paper up the screen so your eye can follow the line to a particular data point. Not to mention, the font size will make your eyes cross trying to discern that much information.

  3. Poor Design - online print site Ex 3

    Poor Design - online print site Ex 3

    One more Online Printing site: I’m not saying online printing sites are notorious for poor design, I’m just showing what I’ve found. This is the home page, scrolled down the page just a bit to show the absolutely dense section of text that *no one* will actually read. Add to that the plethora of little boxes all around and I’m not sure where to look first.

Web Sites with Good Design

  1. Good Design - Ex 1 web design site

    Good Design - Ex 1 web design site

    Web Site about web design: This is one of the definitive sites for reading about good web site design, so, as expected, it has a nice layout. There’s plenty of white space for the eye to rest and the layout is reminiscent of an upscale magazine. (Actually, for good layout, this site is in my top ten favorites.)

  2. Good Design - Ex 2 movie rental site

    Good Design - Ex 2 movie rental site

    Online Movie Rental site: For ease of use, this site is tops. That ease of use springs directly from the layout. If the layout is so dense that it’s hard to find what you’re looking for, then the layout is a FAIL. There’s an immense amount of information on this page, but the layout ensures it’s not overwhelming.

  3. Good Design - Ex 3 blogging site

    Good Design - Ex 3 blogging site

    A Popular Blogging site: Again, lot’s of choices on this page, but they are not so densely packed as to be a turn off. The information is accessible and nicely ordered with enough white space for each element to be independent, yet part of the overall layout.

Well, that’s all I’ve got. Do you agree or disagree with the reasoning behind my choices? What are some sites that stand out for you as particularly good or bad? Let me know in the comments.

Advertisements

Since I began studying design in earnest a year and a half ago, I’ve gotten in the habit of noticing lay-outs of printed matter and comparing that to websites I visit. I’ve looked at website design with a shrewd eye for years, but it’s only recently that I’ve been making the comparisons with print.

Print Matter

Here’s six pictures of different layouts, from magazines to newspapers to ads, showing both good and bad layout. As I said when I was 5 and forced to eat everything on my plate, “Worst for first.” We’ll start by looking at what I consider sub-par design. These are by no means the worst examples of design I’ve seen, just what I came across today.

  1. Example of bad layout design - mailbox flyer for rental store

    Example of bad layout design - mailbox flyer for rental store

    Mailbox flyer for rental store: This piece has way too much going on, there’s not much white space in which to rest your eyes, and it’s difficult to tell what the main focus is. Yes, it’s advertising all the amazing things you can get, but the text is small and I spent all of 5 seconds looking at it before tossing it aside because it required too much energy.

  2. Example of bad layout design - mailbox flyer satellite TV

    Example of bad layout design - mailbox flyer satellite TV

    Mailbox flyer for satellite TV: This isn’t all bad, the main parts of the offer have sufficient padding around them. My big objections are the top where it looks like a salesperson ingested too much company propaganda, got too excited about more than 150 channels, and threw-up up on the page, much to his boss’ dismay. Then there’s the fine print. I always object to fine print because it’s impossible to read, but at least it’s usually at the bottom of the page. This ad includes fine print in the boxes of the main offers. Ugh!

  3. Example of bad layout design - ad page weekly alternative paper

    Example of bad layout design - ad page weekly alternative paper

    Ad page on back of weekly alternative newspaper: This is also not horrible, especially considering the source. I include it here because it’s just not good. There’s too many colors and typefaces, not enough white space. Yes, the ads are competing for attention, but they end up all loosing the fight because it’s too much trouble to look at this page and glean anything from it.

Now on to the good design. Again, these aren’t the best layouts I’ve ever seen, just what I found today.

  1. Good example of design layout - weekly alternative paper

    Good example of design layout - weekly alternative paper

    Weekly alternative newspaper: Considering the type of publication, this is a decent layout. It has a comfortable line-length so reading isn’t too arduous. There’s a nice pull-quote to draw the reader’s attention and there’s enough white space to give some breathing room while not too much to drive up the costs of a small paper. It’s a good compromise.

  2. Example of good layout design - designers magazine

    Example of good layout design - designers magazine

    Magazine for design professionals: This is a magazine I’ve gotten for years and have always enjoyed reading. The layout affords breathing room and the artwork is not crowded. There’s quite a bit of white space on the page, giving the feel of a higher end publication.

  3. Example of good layout design -tutorial magazine

    Example of good layout design -tutorial magazine

    Magazine for digital manipulation of photographs: This magazine caters to artists and designers who want to learn more about the programs they’re using. The layout of the tutorials is clean and organized. It’s easy to follow the steps and see the process from beginning to end.

So, there’s 6 examples of printed matter looking at layouts and paying particular attention to white space – the empty space on the page. Without it information gets lost and reading is too hard.

The next post will look at six examples of web sites and compare the layouts, and the use of white space, to the printed examples.

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 9 other followers