Check it: World Press Photo Competition
And: Winners Gallery 2009

Yeah the basic grid is lets you create some amazing designs on its own, but by simply breaking out of the grid, designers can make truly stunning work. They do not ignore the rules of grid systems but, instead, take the rules and create something more with only a little spark of creativity (great typography definitely doesn’t hurt). Here are some designs that do so:

1. COMA



2. AEN UI



3. Devia



4. Vitsoe



5. The Grid System



6. I Abide



7. Good



8. Poccuo

Add to the list! I’d love to see more great grid designs.

In the course of designing and coding several things, I have learned a few very important things about planning. Designing is a process of creativity; it flows from the brain to the paper. But, in a jumble of ideas, this flow often gets contorted into a knot that destroys the original creativity. Thus, I shall attempt to summarize my mistakes into a few succinct lessons for you.

1. The importance of planning

Planning is one of the most important processes of design. This becomes especially true when designing websites. I have never been one to outline much, but after countless mistakes I urge you to plan your designs. Quickly you will find that without planning your design runs into problems as you head for disaster. The solution is quite simply to plan. While it may not necessarily save you, it sure does a good job of protecting you.

2. Grid design

Planning with grids is a great skill. It has no doubt tripled my ability to align items. Thus, I recommend you employ the use of grids; they are one of those subtle details that will enhance your website.

3. Schedules

Schedules are only important for pacing. You can create a schedule to have a design finished in an hour or one to finish a design in a month, either way schedules protect you from laziness. But they also protect you from eagerness. They force you to pause from your creating and not become obsessed. In terms of designing, they encourage you to take a break and look at your design from a different perspective, thus, enabling you to see obstacles before they occur.

4. Code and design

It is still important to plan with code or design. When doing both, it does become double-y important. When you code a design, you are setting the design’s structure into stone (this is why I also recommend less rigid structures). From there it is very difficult to fix your problems. It is definitely still possible, but it definitely demotivates you.

5. Love your design in the planning

I have learned that there are an unlimited number of designs out there that I love and would draw inspiration from. There is no doubt that I will find another design out there—one that makes me want to change my entire style—but, however much I may love that design, I must settle on one design or nothing will ever begin to be finished.

Therefore, plan the design you love. Keep planning until you could never wish to change this design and it embodies all the styles you love because, if you do not, you will find yourself wanting to constantly change your design. Set yourself on one design and create! This, however, does not mean to ignore outside feedback, but it does mean to discourage volatility in your designs.

Those are my lessons from designing and coding, but I have not answered your question of “how?” yet. So, here’s how. I encourage you to use a whiteboard. I like sketching on paper, but when you want to erase a single element on paper, you are limited to using a pencil which often does not show the same contrast as a pen. Thus, I prefer a whiteboard.

Once you have laid down the sketch for your design you must turn to mock-ups. Being able to create mock-up designs on a computer is a highly underrated skill. I suggest you take what your plans are for your final design (website, poster, etc.) and simplify it to the spartan look (block elements are great). Thus, you can see the contrast of the elements as well as color.

In summary, plan your designs!

“Skimmer℠ is an Adobe® AIR™ desktop application designed to streamline, beautify, and enhance the experience of participating in your most frequently used social networking activities. It improves upon your day-to-day interaction with multiple social networks, removing distractions and providing a rich experience that is particularly suited to multimedia content.”

Skimmer

Personally, I’ve never been a fan of Adobe Air applications, its too out-of-the-way. But I’m definitely going to get Air for this program (even though I only use a few of the offered social networking sites). Even just the screenshots are stunning:

“Any update in the aggregated feed view can be expanded in one click to reveal the content of the post. A Flickr set, for example, can be viewed in its entirety without ever leaving the feed view.”

Skimmer

“In Skimmer’s YouTube view you can also browse the most recent videos from all your friends.”

Skimmer

Honestly, has social networking ever looked this good? Separate networking websites do have their share of designers working to make the site look decent, but Skimmer compiles the contents of these sites (making feed browsing much more efficient) and presents it in a highly aesthetic way. Even though it’s still in Beta, even though it’s an Air Application, this is definitely one application to check out.

Check it: Skimmer
Fallon also has some other neat work here.

From this:

This theme, in my opinion, while having a nice header, lacked any decent typography. A decent theme nonetheless (if I do say so myself). Had a nice minimalistic feeling to it, with some decent illustrations to spice up the design. But anyways, look at me talk on about my own design. Bottom-line: it got the job done, but it lacked in different ways.

That was so yesterday. It’s the 16th of April now! We went from that pitiful design…

TO THIS!

An amazing new minimalist design featuring great typography, comments, and my favorite feature: a working search bar I probably should have had awhile ago.

Anyways, moving on. It’s been awhile. I’ve been working on some illustrations and stuff, but that’s no reason to leave all of you here, with nothing to read. I know my writing has been more spastic than your grandmother’s colon but I will get back into the swing of it in a week or two.

Still don’t believe me? I’ve got an article lined up for Pro Blog Design already. In the meantime, go read some of my older articles, or click on that lovely feed button to the right; it’s your friend.

Design Process

• Using White Space Effectively In Web Design
  This article, while being very new has received much attention in its insight into the usage of white space in design. A great article. I expect to see much from this website in the near future.

  

• 6 Interface Design Principles and Tips Every Web Designer Should Know
  While it seems like any other article, this article actually provides important points that are easily overlooked when designing. In web design, you design for the audience, and this article really goes into that fact.
• To be or not to be: Minimalist
  This article delves into both sides of the arguments on whether or not to be minimalist, explaining the difference and clarifying what makes a good design.

  

• Five Looks, One Layout: How to Develop a Library of Web Design Styles at Your Fingertips
  The main attraction of this article is its detailed explanation on how to take any design and transform it to one of five different styles. Each of these styles is detailed and the features pointed out.
• Paper Prototyping
  This article explains the commonly overlooked process of paper prototyping. A great read for every web designer, as it shows a great method of usability prototyping.
• The 3 Components of Good Web Design
  Covers how to achieve balance between interface, aesthetics and information. Useful for designers new to web design.
• 10 Principles of the UI Design Masters
  

User Interface makes a web design. Read this article to learn how to make your design right.

• My web design process from sketch
  While a short article, this article covers the importance of going from sketch to prototyping, what may be becoming a lost art.
• The Golden Ratio in Web Design
  Everybody loves ratios. This article covers the usages of ratios in web design.
• Web Design Trends For 2009
  Not only does this article introduce the web trends, but it also gives a detailed explanation of each.
• Design is in the Details
  Design really is in the details. Read this article to learn how to make your design the best it can be.

  

• FOWD Speeches
  Okay, this may not be an article, but it has the lectures from FOWD. Find more on Vimeo. Be sure to listen to these, you get a lot more than from any article.

Typography

• The Elements of Typographic Style Applied to the Web
  A great book. Now a series of articles you can read off of the web.
• On Choosing Type
  Typefaces say a lot about a design. Read this to know how to choose yours to give off the proper impressions.
• Five simple steps to better typography
  Five tips to improve your typography. Could it be any simpler?
• CSS Typography
  Using CSS to make your typography shine. May seem obvious, but some of these ideas are overlooked way too often.
• Web Design is 95% Typography
  95%?! You should be reading this… if 95% of web design is typography, you’d better pay attention to it.
• CSS Typography: Contrast Techniques, Tutorials and Best Practices
  More CSS techniques for developing a readable and consistent typography design on your website.
• Read My Design: A Guide Typography in Web Design
  A guide for the usage of typography in web design. Great to understanding how to increase readability and scannability.

  

Development

• Slice and Dice that PSD
• 50 Extremely Useful And Powerful CSS Tools
  Make your life easier. Learn about many CSS tools to make coding an ease.
• Using CSS to Do Anything: 50+ Creative Examples and Tutorials
  CSS can be used to do so much. Check this article out to learn what and how.

  

• 70 Expert Ideas For Better CSS Coding
  
  We can always improve. Look at this article to learn how to make your CSS coding better.
• 10 Useful Web Application Interface Techniques
  Interface design is a difficult topic. This article offers insight on this tricky matter.

Well, that’s all folks. Leave your comments and additions!

I think I should try to get a category made for you so here it goes.
I feel aargh.
I feel zygomorphic.
There, that should be the first and last options alphabetically. Tell me if I get on the list.

Anyways, check it:
Website: We Feel Fine

Recently put together this 26 icon set of small icons that are illustrated using negative and positive space. The main advantage of these icons is their ability to adapt to any design with the simple shift of color. Just pop it into photoshop, hit the colorize button in the hue saturation menu, and there! you can switch it to any color by simply adjusting the lightness and hue.

Download: Here

Although at first, from a nondesigner’s perspective, typography seems like a small field, it is actually a very extensive part of design; one that can be applied to many others. In order to apply typography to web design, you must understand some fundamental concepts.

“Text will inevitably be read before it is looked at” – Reading Design, Dean Allen

In web design, particularly content-based web design, good typography mostly comes down to what maximizes readability (and doesn’t detract from quality). With cascading style sheets for fourth generation browsers, designers have many options in implementing typography, making it important to understand what to look for.

Fundamentals of Readability

Size and Hierarchy

Starting with your main body of text, understand that you must have a font size larger than 10pt. While it looks stylishly minimalistic for someone with perfect vision, it is hard to read with weaker eyes. Also, with long articles, having a larger font (and line height) makes it easier to keep track of your place, as well as read from a distance (if a reader wants to lean back in a chair).

Size also plays an important role in hierarchy. Unfortunately, with web design, it is difficult to have much control of in line spacing elements to emphasize hierarchy, as well as control emphasis. This means, hierarchy is mainly controlled by size (and font choice, if you are willing to give different font choices to different headers).

In this example, we see that, with only size being change, hierarchy can easily be distinguished.

Emphasis

Emphasis and de-emphasis are both relative in web design. What this means is, whether you make the font lighter or darker, heavier or lighter, anything that breaks from the normal flow of reading is going to be emphasized.

In this example, we see that emphasis is effective in, well, emphasizing. However, we also see that three types of emphasis only do one thing… emphasize. Unfortunately pragmatic web design limits you to normal and bold font, meaning you only have regular and darker text. This actually works to your advantage, as de-emphasizing using a lighter color decreases readability.

This brings us to another method of emphasis, italics. Italics, while they provide slight emphasis by breaking the normal pattern of text, decrease the quality of the text, as italicized text does not have effective anti-aliasing. Thus, while it may increase readability slightly, italicized text detracts from the quality of your works, making it less beneficial then it is harmful.

Contrast

In web design, there must be enough contrast to be able to easily distinguish text from the background. With small blocks of text, it’s acceptable to have light on dark, yet as blocks of text get longer, it’s better to have dark on light. I have yet to see a book be printed as white on black; it’s much easier to read, and less stressful on the eyes. Apply this knowledge to your designs.

Here we’ve got a scale for both a grayscale contrast, as well as a scale for color. As you can see, the last three provide sufficient contrast. The next two are acceptable, and the rest are not usable, as people with different types of monitors may be unable to distinguish them. Note this is about contrast in web design, particularly the main content of the site. Having decreased contrast is great for de-emphasizing in other uses of typography.

White Space

Spacing between both letters and lines are both very important aspects to consider. While you do not want the spacing to be two little, spacing too much has an equally negative effect.

Spacing also comes into play when writing. Often readers are frightened by large blocks of text, making it crucial to have small paragraphs. However, in web design, indentation is a generally ineffective way to distinguish paragraphs. Instead, have short paragraphs with distinguishable spacing between.

What this all comes down to.

Though I did not directly state it when describing each of these elements, they all contribute to readability and scannability. See, typography in web design is used not as an art, but as a function. This means, whatever you do typographically on a content based website, your ultimate goal is to increase readability.

This concludes my small guide to typography in web design. I’d love to hear your insights on the matter, so feel free to drop a comment.