Design:

02 Jun 2009

10

A Guide to Simplistic Web Design

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

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

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.

Uses of Whitespace to creat feeling

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:

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?

24 May 2009

2

50 Textures of Man-made Origin

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.

20 May 2009

2

Web design tips: The pros and cons of splash pages

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.

16 May 2009

0

Important Components in Portfolio Design

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.

12 May 2009

5

5 Tools for the Lazy Web Designer

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.

07 May 2009

4

35 Grunge Resources: Brushes, textures, fonts and more

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.

30 Apr 2009

14

How did you become interested in becoming a webmaster, designer, or developer?

Share your experience on how you got into creating websites, no matter what kind of webmaster you are. Was it something you stumbled upon, or were you assigned into a job? What was your first website like, and what did you learn from it? Did it lead you to go on to better things? What do you do now– code, design, blog?

This is a post for discussion. Use the commenting section to tell your story, and include what you’ve learned, and what you’d like to learn or become in the future.

27 Apr 2009

5

10 Odd and Creative Social Media Icon Sets

Icon sets representing feed and social media sites are all over the web, giving webmasters noticeable promotion tools. However, most look the same, or very close to the same. These designers changed it up, and created 10 social media and feed icon sets that are sure be noticed, effective, and most importantly– fun.

Use these 10 icon sets as promotion tools, or for you’re own inspiration when creating icons.

1) Feed & Twitter Monsters

These only come in RSS and Twitter icons, but are fun nonetheless. Use the various sizes of these somewhere on your site, and the icon can be a main feature of a simplistic design. There’s nothing wrong with a design’s main feature being a form of promotion.

Page 11 of 14« First...910111213...Last »