March 3, 2009

Simply put, I am a minimalist lover. From the content focused layouts to the proper incorporation of color, there is nothing I don't like. Despite its simplicity, it can be very difficult to properly implement. Since I realize it is a hard style to understand at first, I thought it would be a great idea to compose a list of some of the things that I feel are necessary for a great minimalistic design.

Before I go into the guidelines I follow when designing with this style, let's talk about what a minimalism is.

What is Minimalism

Minimalism is defined as art that is stripped down to the bear essentials. Only leaving what is necessary to convey the message the artist had intended for it. But it relates to much more than just works of art. It can relate to lifestyles, music, technology, and so much more.

In web design, minimalism is viewed as being a website a simple layout, with a white background, and the only other colors being black, or a shades of gray. This is a representation of minimalism in web design, but only one part of it. Minimalism doesn't mean the absence of color. It represents a style of designing where the designer focuses on letting the content be the main focus of the design. Not letting it be overtaken by anything else on the site.

Organization

This is the most important thing to consider in minimalism. Your information has to be organized in a way where it is easily accessible to the users, where there is enough white space between different sections so the design doesn't feel cluttered, and there are clear parameters for each sections.

This all corresponds with choosing an appropriate page layout for your site. When looking into your layout you must look at what information your site will display. Here are a few common ones that I like:

Two Column Layout

Now the two column layout is probably the most commonly used layout structure amongst minimalist web designs. Generally, it is when you have all your main content on one side of the page and a sidebar on the other side. The main content is usually on the left side because people naturally read from left to right. The sidebar is designated in the smaller right column. This type of structure is quite common amongst blog sites, like my own. Here are a few other examples:

N. Design Studio is a great example. Nick La, creator of the site, did a great job in choosing an appropriate layout that truly enhances the content of his site, without fighting against the graphical elements of this design. This is also one of my favorite sites of all time.

Web Designer Depot is another great example. It uses the two column layout in the same fashion as Nick La's N. Design Studio and my blog.

Magazine Layout

The main goal of a magazine site is to present useful information to the readers. This is commonly referred to as being organized clutter, because sites that use this layout have a lot of information to display. This is a good choice for those that offer many different types of information on their site. Here are some good examples:

CNN is a good example of how a strong magazine layout can make a site look, and feel, good when implicated rightly. They also do a good job with the hierarchy of the information they display. All the important headlining information is displayed at the top, and the least important is towards the bottom of the page.

Creative Review is another great example. The thing I like about it most is that it has a lot of information to display on one page, but it is not cluttered and does not feel overwhelming. Also, they did a good job of incorporating every section of the site into the layout style from the header to the footer.

Progressive Layouts

A progressive layout is typically a one page site, with the information displayed in a particular order of importance. This is a good type of layout for those with very little information to display, so having more than one page would be a waste of time. A typical feature of these types of layouts are links to the other sections of the site, usually accompanied by some form of animation. Some good examples are:

Vitart, the portfolio site of Vita Levchenko, uses a progressive layout flawlessly.

Sursly, the portfolio site of a New York designer named Tyler, is a good example of how you can get creative with progressive layouts. Tyler does a good job of implementing the progressive layout, while going against the norm and opting to laying out his site horizontally.

A good tool to greatly improve your organization is using a grid system. A grid system is a layout structure known for bringing visual clarity, balance, and good organization to a site. An added plus for using a good grid system is that the user experience will be enhanced, as opposed to being a cluttered disaster when not using a good one. Some good sites that can help are: 960 Grid System, The Grid System, and Fluid 960 Grid System.

Color Scheme

Have you ever took the time to carefully plan out the colors used in your designs, based on what the color represents and the emotion it provokes from visitors. This is necessary to consider, even more so when you are doing a minimalistic design.

Now the typically overused color scheme you will find for a minimalistic web site would be some combination of black, gray, and white. This is a good scheme, but it needs something more to set your design apart from the rest. Like depending on your design concept, add a yellow, blue, green, red, or any color under the rainbow to add diversity and stop your design from looking like your average minimalistic design.

Good resources for finding great color schemes are Color Scheme Designer and Adobe Kuler.

Typography

By now, everyone should have heard about either Cufon, sIFR, Typekit, or @font-face. For those who haven't, these are ways that allow you to use whatever fonts you want for your site. Which means, designers no longer have to be restricted with their font choice.

With minimalism, the font used for the information is just as important as the information itself. When looking into font choices you must consider many things. Like how readable the font is, does its design go well with the style of the your site, is it strong enough to draw attention and focus, and does it look good at different sizes. Another aspect of font choice that is lacking in the design community these days is originality.

Having a font that is fresh and not overused is important. Using a font that everybody uses, like Helvetica, will make your site look like everything else on the web. A good fresh font will also give your site better vibe. Good places to look for free fonts are Dafont and Deviant Art. Here are a few sites that have strong use of typography:

Finch is the online presence of Francisco Inchauste. The brilliant use of typography also gives users something to draw their focus too.

My portfolio site is a good example because it shows the typography in my site used to create focus for the user, give off a clear message, and used for good call to action with the implementation of the red on key words.

Focus

By focus, I mean something in your site that automatically draws the users to it, and has the ability to tell what the site is about. This could be something as simple as some text with good typography or a properly incorporated image. All the sites mentioned in this post are all good example of this. They know where they want their users attention to go and have done something to draw them to that area.

Paragraph Structure

With the attention being drawn to the information, you must make sure that it is attractive to view. By attractive, I mean that is displayed in a way that a user would want to read it. For example, if you saw a paragraph with the line's width being something like 800px, the font size being about 25px, and the line-height setting somewhere around 28px or 30px, nobody would want to read it.

That was a bit of an extreme example, but paragraphs must be attractive for someone to want to read it. The paragraph Structure I typically use is a 13px font size and a 21px line height, used with Arial. This is a big enough font to be readable, but not too big, and the line-height is big enough to separate the lines while keeping them connected as a paragraph. Also, I don't recommend using the same paragraph structure for different fonts.