Define Minimalism

To start, think about what makes a website the opposite of minimalistic: A lot of color, images, shapes, and not enough whitespace. Also think in terms of content. Simplistic web design also strips the design of unnecessary content, so what a visitor does see, is what the visitor needs to see.

By subtracting the unnecessary elements in a web design, we create more meaning to the remaining pieces. What are those remaining pieces? Portfolio pieces, blog posts, a resume…you name it, it’s important.

Typography is a #1 Priority

Let’s think about what we do need in simplistic web design. Content, content, content. The number one way to dress up content is in the form of typography. Paying special attention to typography in simplistic design can create great aesthetic appeal by adding minor detail like italics, serifs, and defining spacing and proximity.

A List Apart features one of the greatest examples on the web of typography. It is obviously a very basic and minimalistic design, featuring black white, gray/beige and orange. The only image that is used in the logo, which is also minimalistic, and the majority of shape on the design is rectangular.

Looking closer at the design, we can see that the designer spent a lot of time thinking about typography. They first thought about the size of the headers, paragraphs, navigation, etc. relative to all other content. Then, color came into place. Notice how the brightest color on the page, orange, highlights the titles of fresh content.

There are other ways to highlight content with just typography. Bolding, italicizing, size, and font change all come into play. Using correct hierarchy in typography is also a must, so pay attention to proximity and spacing as well.

Boring Color? No. Little Color? Yes.

Many designers want to spice up simplistic web design with bright, interesting colors. However, as a general rule of thumb, a simplistic design should not use more than 2 colors in the actual design. This is because pops of color creates strong contrast, opposed to weaker forms of contrast like change in shape or size.

Janic Design uses two contrasting colors: green and orange. The rest of the design is variations in gray, and uses contrast to get the point across. Also notice that the bulk of the design are in these grays. Those bursts of color lead the eye to what is most important: logo, navigation, and portfolio content.

The only other colors in the design are in the portfolio pieces themselves, leading the eye even more. This strong contrast in color and style creates a design where the visitor sees the portfolio pieces first; this is a great goal for any designer making a portfolio.

An Effective Use of Whitespace

Whitespace is often overlooked as such a big part of web design. Ever wonder why adding a bit of margins on the side of a layout makes it ten times more appealing? Whitespace frames whatever it’s around, meaning side margins frame an entire layout. This gives focus to the whole design.

Experienced designers know how to take the knowledge a bit further. Using whitespace to properly frame headers, intro text, content, and navigation can make for a more effective layout. A good designer knows how to influence their audience with their design, either to read the content, donate money, make a sale, or leave a comment. Whitespace is one of these biggest influences.

Whitespace is not only used to frame, but to also create a sense of feeling. The more whitespace there is, the lighter it feels, and the more luxurious it is. Luxury can be compared to professionalism, high-quality, and high-price.

The image above is from a very informative article from A List Apart: Whitespace. Mark Boulton goes into what exactly whitespace is, how to use it effectively, and a walkthrough of basic practices when working with whitespace. I highly suggest everyone read the article completely through:

• Whitespace by Mark Boulton

What do You Think of Simplistic Design?

Share your thoughts, practices, and tips on simplistic design.

How do you use whitspace in design?

Do you have any special Typography tricks?

How important do you think color is in minimalistic design?

Just because you have a blog or website, it does not mean you are getting the traffic you deserve. And if you are not getting traffic, why? What about if you want to know how your website ranks, or how to improve it? These six resources will check your site and give you helpful information on improving tags, search engine optimization, usability optimization, and website traffic overall.

1. Mint

http://haveamint.com

Like the motto says, have a fresh look at your site. Access statistics on all sorts of parameters from number of visits to unique referrers. If you want to analyze your website page by page, this is a great source.

2. Submit Express

http://www.submitexpress.com/analyzer

Get information on how to improve META tags and get statistics on keyword density. It’s incredibly hard to write meta tags, and Submit Express helps a lot.

3. DN Scoop

http://www.dnscoop.com

DN Scoop’s intent is to give an estimated value of a domain. But it also provides information on Pagerank, links pointing to your domain, and traffic values.

4. Website Grader

http://website.grader.com

Website Grader is pretty basic, but free SEO tool that analyzes the effectiveness of your website. One should also do a competitive analysis. Type in other competing websites to find out SEO, website traffic, social popularity and other factors. You will get suggestions on how to improve the site from a marketing perspective.

5. Crazy Egg

http://crazyegg.com

One of the best tools out there, Crazy Egg comes in four flavors: basic (free), standard, plus and pro. The packages depend on how many visits and pages to track at once. CE visualizes visitors, a cool concept through heatmaps, lists or overlays.

6. Popuri

http://popuri.us

Popuri gives you information on everything from PageRank to del.icio.us Bookmarks to Alexa rank, at once. It is similar to Smart Page Rank but with a more attractive interface and more statistics.

I’ll probably be adding more as I find things, and feel free to add your own resources in the comments. I’ll add them to the list as well when I get a chance.

For a bit of motivation, here are the prizes again!

1st Place: $100 via PayPal or 1yr. of free advertising on Webitect.net

2nd Place: $50 via PayPal or 6mo. of free advertising on Webitect.net

3rd Place: $25 via PayPal or a free domain name

All participants have the choice of their Wordpress theme being featured on Webitect during and after the contest, and available for download. As a benefit, any theme is allowed to host a personal link to your own blog or website.

General Code you can Copy

• Easily Adaptable WordPress Loop Templates
• Huge Compilation of WordPress Code

Cheatsheets

• The Wordpress Help Sheet
• Advanced Wordpress Help Sheet
• My Wordpress Cheat Sheet
• Web Design WordPress Template Tag Reference Guide
• Wordpress Codex Site Architecture

Tutorials and Walkthroughs

• So you want to create WordPress themes huh?
• Designing a WordPress Theme From Scratch
• See How Easy It Is To Widgetize WordPress Themes
• Wordpress Tutorial: How to Create a Wordpress Theme Dissection of a WordPress theme
• Building Custom WordPress ThemeTheme Development Codex
• Wordpress for Designers: Screencast Series
• [Day 1, Day 2, Day 3, Day 4, Day 5, Day 6, Day 7, Day 8, Day 9, Day 10, Day 11, Day 12, Day 13, Day 14, Day 15]

Blank Starter Themes

• Refueled Blank Wordpress Themes
• Blank Themes, Frameworks and Templates: Resources to Speed Up Your Development Time

• Blank Wordpress-themes ready for 2.7 up for grabs!

I’ve collected 50, relatively large and high-resolution textures created by humans in some way, under the categories of fiberglass, packaging, rubber, Styrofoam, tape, electronics, tile, concrete, brick, signs, and graffiti. With such a wide variety of form man can make, using these textures to create art is only a small step away.

Splash pages are often thought of as ‘pretty little additions’ to a website, but not thought of more than that. One should look closer, however, and truly examine the benefits or deficits of splash pages, before just throwing one on a website.

Why does one need to think closely about this? Many new webmasters don’t realize how big of an impact a splash page can have on an entire website. This impact can be good or bad, depending solely on how, and why, a designer uses a splash page.

For those planning on building a portfolio for the first time, an important initial step is to understand the basic components of this type of website, and why each are important. By understanding what’s needed, a designer can then work around these core features to create the unique and visually appealing design they need to get noticed.

Here are 5 major components of portfolio designs to help a beginning web designer get started on the right track.

Sometimes we get lazy from time to time, but still need to get some website work done. Fortunately, there are thousands of tools to help designers, with some being more beneficial than others. Here are 5 of the best tools for web designers I’ve found so far.

They deal with a variety of topics covering typography, colors, navigation, layouts, and dummy text. Hopefully these tools can also help a lazy designer find the first small step into getting back into the designing routine.

Grunge design is very popular right now, but can only be implemented with the correct resources. A design may need brushes, textures, fonts, the correct colors, and a set of tutorials to pull off a variety of effects.

Here are 35 excellent grunge resources for anyone to use. For more information on how to create a grunge-style website layout, visit Webitect’s tutorial: Grunge Web Design Tutorial.