plainbeta

Can a Site be too Minimal?

First of all, what is a ‘minimalist’ web site?

Minimalist design is web design that is, well, minimal. There isn’t much to ‘em in the way of graphics, widgets, etc.
Most have a white background, one image/graphic (in the layout), and not much else.

Personally, I think minimalist design is often the best. (Note: often - not always) It puts the focus on the meat of the web site - the content.
After all, that’s what your visitors are here for, right? The content, not the fancy graphics. ;-)

So, now my question is, can a web site be too minimal?

Let’s take a look at Justin Blanton.com.

Justin Blanton.com is a minimalist web site - obviously.
But what I want to know, is it too minimal?
(Another example: Daring Fireball)

Sure, the only thing to look at is the content, but, there’s no personality to the site.
Let’s look at RandomJabber.com

Yes, RandomJabber.com is a minimalist site, but it has come character and individuality.
It’s memorable, and isn’t completely bland.
(Another example: Maniachal Rage)

Now, the question is, what’s the balance?
What makes a web site too minimal, and what makes a web site memorable?

I’m gonna have to say the ‘blocks’ stuck in there.
Skelliewag.org is a good example.
Skelliewag’s logo, sub-header off to the right, navigation, and ‘popular posts.’

Those components anchor down the web site, give it some character, and make it memorable.

I believe the key is memorable.
If you can make something memorable, then it works.

Any thoughts?

A Few Components of ‘Good’ Web Design

What makes a ‘good’ web site design?

If you can answer that, you’ll be the best web designer of all time.

Truth is, good web design is one of the most complex things in the digital world.
Yes, one of the hardest things in the digital world.

I said web design. Not web coding. Web design.
You may be able to code a web site backwards in your sleep while hanging by your ears over a lake of boiling water and still not be a good designer.
Web design is not just coding.

Coding is the easy part of design.
Coming up with the layout, color scheme, components, etc is the hard part.

So what makes a web design good?
Like I said, if you can answer that, you’re a billionaire.

Though we may not be able to nail down all the components off good web design, we can nail down a few.
So let’s get started.

1: Simplicity and Contrast Draws the Eye

If you make your site busy and without any contrast (Like the Microsoft 404 Page), you’ll confuse your visitors.
They won’t know what the site is for, nor what they’re supposed to be focusing on.

A good example of simplicity and contrast is Expression Engine’s Home Page. The layout is clean, simple, and too the point.
The dark blue/grey background and white content area contrasts with the bright blue featured section. That contrast draws your eye instantly to the featured section - which also includes their sales pitch. Exactly what they want.

2: Icons Convey Ideas and Stick in the Head

Just look at Apple, everyone recognizes the apple with a bite out of it.

Another good example is Elixir Graphics.
On their home page are three main icons: two test tubes (for their Themes), a radioactive symbol (for their Icons), and a brain in a jar (for their blog).
While they’re not as memorable as Apple’s logo, they’re very good at drawing the eye and stick in visitor’s heads longer than plain text.

3: Ease of Use

This right here is the most important component of web design - yet often the most ignored.
Designers will pass over ease of use for what looks cool.
Don’t do that.
If someone won’t return to your site because it’s hard to read, navigate, etc - then why bother creating it?

1ogro.com is an excellent example of poor usability.
Sure, it looks neat, and the flash based scrolling adds a neat effect - but it’s difficult.

Among the first things you’ll notice is that you can’t use your scroll wheel. That’s because the scrolling is flashed based.
You’ll also notice that the text is small and can’t be resized. Again, that’s because it’s flashed based.
And finally, there’s no about page or sales pitch. Sure, it’s good looking design work and all, but it’s missing it where it counts - usability.

They say the customer is always right.
The same goes for web design.
If your visitor can’t use your web site, then they’ll find someone else. There’s plenty to choose from. (Choose me! :-P)

Skelliewag, on the other hand, considers the visitor first.
The layout is clean, fast loading, easy to navigate, and easy to learn.
The About page is very prominent. The tagline is clear and stands out, but isn’t overwhelming. There are links to the popular post.
Very nice design - very easy to use and understand.

So Now What?

Now what?
Experiment.
I have just shown you three components of ‘good’ design.
What else is there? What makes your web site ‘good?’
Have something new? I’ve experimented with different design ideas. So should you.

Have a new idea?
Know of something that works?
Share it!

Image Credits: Spider’s Web by ScoobyGirl | Easy to Use by luisvilla

The New World Design Association - Coming Soon

Remember when I told y’all about the World Design Association - but didn’t tell y’all anything?

Well, I now have more information for you.

The World Design Association is coming soon! The tentative launch date is February 1st, 2008.

The WDA is something that the online design world has not seen the likes of before. It will feature an archive of designers, a job board, a high-quality showcase, forum, and blog.

So what does this have to do with you?
Lots!
If you are a designer and want to get in on this web revolution, head over to WorldDesignAssociation.com and fill out the contact form!

But wait, there’s more!
Stick around! In the coming weeks I’ll be giving out more information about this web revolution as well as starting a contest for one month of free advertising on the WorldDesignAssociation.com!

And one final note.
If you’re interested in writing some guest posts about any aspect of design, then now is your chance!
Fill out the contact form and get in on the action! Armen Thomassian has already agreed to write some guest posts, so why shouldn’t you?

Any other questions? Comments?
Drop a comment here or fill out the contact form!

» WorldDesignAssociation.com

Three of the Best Logos of 2007

First of all I am not saying that these are the best logos of 2007. It was so hard to narrow it down to three for this post anyways. And there are probably a lot of others out there that I haven’t seen. But these are three of my favorites that were made in 2007.

Purely Artistic
URL: PurelyArtistic.com (Site Status: Under Construction - 12.08.07)
Designed By: Dache

This is a very unique and well thought out logo. The typography is custom (do a degree at least) and the logo is unique, memorable, and scalable. Furthermore, the entire logo can be used with different color schemes. The version that I’m showing was used on FaveUp.com (a great design showcase). If you visit PurelyArtistic.com or Dache’s portfolio, there are two more color schemes for the logo.

All of the previously stated qualities are all needed in good logo design. The logo needs to be unique and memorable. Scalable isn’t absolutely needed, but it makes the logo all the better. That way it can be used for anything - favicon.ico for example [?].

Ok, so what’s so unique about this logo?

“This identity was designed by combining the letters “p” and “a” all in creating a unique mark.”
-Dache

If you look at the symbol closely, you will notice that it is an oval with a “p” and an “a” cut out of it - if you follow me. (See modified img to the right)

And finally, the logo is designed in such a way to be adaptable to any color scheme. It could be all one color, or any combination of two colors. Adaptable logos like that are ideal for obvious reasons and show that the designer thought through his/her design (or got lucky…).
My only regret is that the web site is Under Construction - I’m very curious to see what is going to be on.

All in all, the logo very well thought out nicely done.

Video Community .tv
URL: VideoCommunity.tv
Designed By: Good Creative

Like the Purely Artistic logo, this is a well thought out logo. The color scheme is very nice and fits extremely well with Video Community’s web site. The logo is memorable, easily recognizable, and scalable. Furthermore, the colors are interchangeable while still retaining the logo’s individuality.

Again, it is a well thought out and well done logo. Not quite as unique as the Purely Artistic logo, but still very nice.

Xanadu
URL: WhatIsXanadu.com
Designed By: Raja Sandhu

This logo may actually be just random pointless design work by Raja Sandhu. I can’t find a URL for the site, nor anything referring to it on the web. I may just be blind (if I am, someone tell me), but there may be no Xanadu company or web site.
Never mind. The logo is for a health club in Lakeshore, Ontario. (Thanks Raja)

Even so, this is a very nice logo and probably my favorite.

The typography is very nice and perfect for the look. The simplicity makes the name stick more. And furthermore, the simplicity allows the color to be altered if needed.
The symbol is great! It’s very unique, and very well done. The two circles meeting with the thicker and brighter line is a great idea. It’s scalable, very memorable, and very cool.
Some may disagree with me, but I think it is an incredible design.
I just wish I had come up with it.

Well, there you have it - three of the best logo designs of 2007.
I hope they helped inspire you and aid you in your design work.
Check out FaveUp.com for more logo inspiration.
Further reading: What Makes a Good Logo? by: David Airey

A Comprehensive List of Design Showcases

Jose Gonzales by homme de chevre

Before you sigh and say this is just another design showcase list, let me put a word in.
This is not just another design showcase list. It is a very comprehensive list of high-quality, active, and english only design showcases.
I have scoured the web for as many showcases I could find and this is the result - over 70 high quality showcases of all kinds.

This list is broken up into two categories - CSS/Mixed and Specialty.
The first part are the CSS and Mixed Showcases. I have included one to two sentence descriptions, the form of approval, and the site’s Google PageRank (What is Google PageRank?).
The second part are the specialty showcases. I included the same info with the second set as the first.
After the two parts (Regular and Specialty), they’re sorted by PageRank.
Enjoy!

59 CSS and/or Flash Showcases
18 Specialty Showcases
77 Showcases in All

Updated 05/08/08

CSS Drive
Not the greatest design, alright submissions.
Approval by: Vote:
PR: 8

CSS Vault
Alright design, good submissions.
Approval by: Vote
PR: 8

CSS Collection
Alright design, good submissions.
Approval by: Vote
PR: 7

CSS Beauty
Good design, multiple resources, nice submissions.
Approval by: Review
PR: 7

Style Gala
Nice minimalist design, good submissions.
Approval by: Vote
PR: 7

muse
Minimalist design, good submissions.
Approval by: Review
PR: 6

FaveUp
Good design, incredible submissions. Not only web sites - logos and business cards as well
Approval by: Review and Vote
PR: 6

xhilarate
More than a showcase, a list of bookmarks.
Approval by: Review
PR: 6

CSS Mania
The ever popular CSS Mania - good all the way ’round.
Good design, good submissions.
Approval by: Vote
PR: 6

DesignSnack (My Favorite)
A great community, great showcase.
Good design, varying submissions.
Approval by: Vote
PR: 6

CSS Import
Not the best design, ok submissions.
Approval by: Review
PR: 6

Unmatched Style
Not the greatest design, multiple resources, good submissions.
Approval by: Vote
PR: 6

CSS Remix
Not the greatest design, alright submissions, large following.
Approval by: Vote
PR: 6

The Best Designs
Soothing design, good submissions.
Approval by: Review
PR: 6

W3C Sites
Alright design, good submissions, large following. Sites must be valid.
Approval by: Review
PR: 6

CSS Heaven
Nice design, good submissions.
Approval by: Vote
PR: 6

Web Creme
Poor design, good submissions.
Approval by: Review
PR: 6

CSS Tux
Nice design, nice submissions.
Approval by: Review
PR: 6

Most Inspired
A gallery that aggregates from thirty three high profile design galleries.
Approval by: Submission to External Sites
PR: 5
(Thanks Cellie)

Pro Web Art
Nice design, good submissions.
Approval by: Vote
PR: 5

Boxed CSS
Nice design, good submissions.
Approval by: Vote and Review
PR: 5

Design Creme
Not the greatest design, not the greatest submissions.
Approval by: Review
PR: 5

Best Web Gallery
Good design, good submissions.
Approval by: Review
PR: 5

CSS Smooth Operator
Alright design, good submissions.
Approval by: Review
PR: 5

CSS Impress
Alright minimalist design, alright submissions.
Approval by: Vote
PR: 5

Unique CSS
Soothing design, good submissions.
Approval by: Review and Vote (can win $25!)
PR: 5

CSS Based
Good design, good browsing, good submissions.
Approval by: Vote
PR: 5

CSS Clip
Ok design, filled with ads, ok submissions.
Approval by: Vote
PR: 5

Piematzel
Pixel style gallery, good submissions.
Approval by: Review
PR: 5

CSS 11
Alright design, good submissions.
Approval by: Vote
PR: 5

Screenalicious
Ok design, ok submissions.
Approval by: Vote
PR: 5

CSS Website
Minimalist design, good submissions.
Approval by: Vote
PR: 5

Daily Slurp
Alright site (busy), good submissions though.
Approval by: Review
PR: 5

Inspiration King
Alright design, good submissions, nice sized following.
Approval by: Review
PR: 5

CSS Glance
Nice Design, good submissions.
Approval by: Review
PR: 5

Epreo
Not the greatest design, good submissions.
Approval by: Review
PR: 5

Design By Grid
Unique design, multiple resources, good submissions.
Approval by: Review
PR: 5

Designs Creme
Not the greatest design, nice submissions.
Approval by: Vote
PR: 5

CSS Creme
Ok design, fairly good submissions.
Approval by: Review and Vote
PR: 5

Alvit CSS Showcase
Alright design, alright submissions.
Approval by: Review
PR: 5

CSS Artillery
Nice layout, great submissions.
Approval by: Vote
PR: 5

CSS Design Yorkshire
Good design, good submissions.
Approval by: Review
PR: 5

Selected Webdesign
Good submissions, good filter.
Approval by: Review
PR: 4

Website Design Awards
Alright design, good submissions.
Approval by: Review and Vote
PR: 4

Design Shack
Good minimalism design, pretty good submissions.
Approval by: Vote
PR: 4

One Pixel Army
Alright design, good submissions, good vision.
Approval by: Review
PR: 4

Style Crunch
Nice design, alright submissions.
Approval by: Vote
PR: 4

CSS Elite
Not the greatest design, good submissions.
Approval by: Review
PR: 4

ShareBrain Showcase
Slightly confusing site… alright submissions.
Approval by: Review
PR: 4

Perfection Gallery
Alright design, multiple resources, alright submissions.
Approval by: Vote
PR: 4

CSS Leak
Nice design, multiple languages, good submissions.
Approval by: Vote
PR: 4

Cult-f
Nice submissions and a blot as well.
Approval by: Vote
PR: 4

Style the Web
Not the best site, nice submissions.
Approval by: Review
PR: 3

One Star Gallery
Alright site, and pretty good submissions.
Approval by: Review and Vote
PR: 3

Delicious CSS
Alright design, good submissions.
Approval by: Review and Vote
PR: 1

CSS Blue
Ok minimalist design, good submissions.
Approval by: Review
PR: 0

Nice Stylesheet
Good design, CSS only submissions.
Approval by: Review
PR: 0 (new site)

stylevault (thanks Bjorgvin)
Alright design, pretty good submissions.
Approval by: Review and Vote
PR: 0

Comand Shift 3
Unique way of rating web sites. It has the same idea of ‘hot or not’ - but this is for web sites.
Approval by: Vote
PR: 0

DesignFlavr
It has a blog too. :-)
Approval by: Review and Vote
PR: 0

Another Gallery
I like this one. Good design, good submissions, and unique tagline.
Approval by: Review
PR: 0

Specialty Galleries:

The FWA
The design looks good, but confusing. All flash based sites. Great submissions
Approval by: Review
PR: 8

Movable Love
Websites powered by Movable Type.
Approval by: Review
PR: 6

Light on Dark
Websites with light text on a dark background.
Approval by: Submission
PR: 5

CSS MESS
They accept good and bad sites and display them in real time. (thanks Dan)
Approval by: Submission
PR: 5

The Horizontal Way
A showcase of horizontal sites.
Approval by: Submission
PR: 5

CSS Princess
A collection of sites with that ‘feminine touch.’
Approval by: Submission and Vote
PR: 5

We Love WP
Wordpress powered sites.
Approval by: Submission and Vote
PR: 5

We Love TXP
Blogs powered by TextPattern.
Approval by: Submission and Vote
PR: 5

Happy Codr
Sites designed with Ruby on Rails.
Approval by: Submission
PR: 5

CSS Nature
Nature based only submissions.
Approval by: vote
PR: 4

Full Single
A showcase of web sites just one page in size
Approval by: Submission
PR: 4

EDU Style
A collection of campus focused sites.
Approval by: Submission
PR: 4

CSS Liquid
Fluid CSS Sites only.
Approval by: Submission
PR: 4

Only Wii
Websites for the Wii only. (They do that?!?)
Approval by: Submission
PR: 4

My Virb
Designs for Virb.com Sites
Approval by: Submission and Vote
PR: 4

Church Beauty
Church web sites only. Good submissions.
Approval by: Submission and Vote
PR: 4

Portfolio Base
A portfolio showcase.
Approval by: Submission
PR: 4

typesites
Showcasing sites displaying good typography.
Approval by: Review
PR: 4

Banner Blindness

We’re all interested in making money - we need it to live. That’s why ads are included in web sites - for the revenue. After reading an excellent article on banner blindness, I decided to explore the topic myself.

Banners generally look the same - be it Google AdSense ads, banner ads, or the newly popular 125×125 ads. (just head over to Yahoo.com and you’ll see what I mean) With that standardization in effect, web users have developed a way to ignore the ads and focus on the content.
Take a look at this image and you’ll see what I mean:

click to expand - image via useit.com

The three images are examples of quick scanning, partial reading, and thorough reading. The red is the most viewed, yellow is a step down, blue a step further down, and grey is not viewed at all. The green boxes are drawn around ads upon adding the heat-map.

It’s easy to see that web users hardly ever look at banner ads or anything that looks like banner ads.
That’s not good for us bloggers and web designers - ads are often how we make our living. We need that money.
(granted, there are many more ways to making money online, but I’m just exploring ads right now)

So how do you get visitors to look at your ads?
That is the question - and one I shall explore on an upcoming post.

But in the meantime, How do you get your visitors to look at your ads?

(Oh, by the way, Happy Thanksgiving y’all!)

Different Uses for Animated GIFs

If you’re a web addict (like me), you’ve probably stop-start action. They’re fun and designers can do a lot with stop-start action.

But not only can designers create videos with stop-start action, designers can use stop-start action in .GIF images.

They’re easy to make. Photoshop’s Image Ready will create them, and there are myriads of programs out there that will create them for you.
If you’re interested in learning how to create an animated GIF using Image Ready, contact me and I’ll see what I can do.

Animated GIFs are very common in advertisements, allowing the advertiser(s) to convey more information about their product/service in a small amount of space. Furthermore, the ‘movement’ attracts the eye.

But not only can animated GIFs convey information, but they can give the idea of a movie.
Normally animated GIFs are very choppy (Example), but some can be quite smooth. Naturally, the more frames there are, the smoother the animation is. That of course takes more time and can often drive someone up the wall (like me).

And for another example, here’s me doing a backflip in GIF format.

Though animated GIFs are common on MySpace Profiles and the like, they’re virtually non-existent in web design.
Why?
Simple.
They’re slow loading, choppy, time consuming to make, and very difficult to incorporate well into a web site design.

That doesn’t mean they’re impossible to use in web design - they’re just difficult. Most of the time, the choppy nature of GIFs give an air of un-professionalism and detract from the site.

However, on rare occasions, animated GIFs can add to the site.
So far I have found only two examples of good use of GIFs.
Both of them were on OSWD - but I can only find one of them: The Thin Green Line.

In the nav bar there is a flashing green highlight on the active page and on the a:hover effect.
In this case, I think it adds a nice effect to the site.

Do you know of any other good uses of animated GIFs in web design?
If so, share them!