designerkamal.com

The power and ease-of-use of today’s computer applications has raised the bar drastically on the quality of design expected in the documents we produce. As recently as ten years ago, it was typical to produce business letters, memos, and other documents using a courier-like, monospaced typeface, often with only underlining available for emphasis of key passages or section headings. The only options for correcting typos and other mistakes were white-out, pencilled-in marks, or re-typing. Our documents looked boring, but they were expected to look boring.

Today that’s all changed. Word processing and desktop publishing software are everywhere, and offer dozens (if not hundreds) of fonts ranging from the simple and elegant to the downright bizarre. Style sheets on the web and easily accessible styling options in our desktop software allow us to easily create section headings, pull-quotes, bulleted lists, and text columns — giving us the potential to greatly enhance the layout and delivery of information.

The result, of course, is more likely to be a mish-mash of difficult-to-read fonts, seemingly random italics and boldfaced text, extraneous sidebars, and awkward layouts. In unskilled hands, the tools available to us can very quickly produce messy, over-designed documents that are far less readable than the plain typewritten documents of old.

Applying a few basic design skills can help avoid those mistakes, instead allowing the features we often regard as “extras” to take their rightful places as means of enhancing the readability and impact of our work. While design is a skill — equal parts art and science — that can take years to develop to a professional level, the core ideas are quite simple, and applying them can produce a marked improvement on your day-to-day work.

All design starts from four basic principles, abbreviated as CRAP (they come in no particular order, so the more squeamish can rearrange them to form “CARP”, if you like. I’d advise against “PCRA”, though…). These are Contrast, Repetition, Alignment, and Proximity.

• Contrast: Contrast refers to any difference of size, shape, or color used to distinguish text (or other elements, though here we’re focusing on text) from other pieces of text. The use of bold or italics is one common form of contrast — the difference in shape makes the bolded or italicized text stand out from the surrounding text. Increasing the size of headers and titles, or using ALL CAPS or smallcaps are other ways of distinguishing text. These techniques only work if used sparingly; a document typed in all capital letters has less contrast than one typed normally, so is harder, not easier, to read.
• Repetition: Repetition in your text is bad; repetition of your design elements is not only good but necessary. Once you’ve decided on a size and typeface for second-level headers, for instance, all second-level headers should look the same. For most documents, two or maybe three fonts — leaning heavily on one for all the body text, with the other two for headers and maybe sidebars — are enough. The same bullets should be used on every bulleted list. Information that appears on every page should appear in the same place on every page. Design elements — like horizontal rules between sections or corporate logos — should appear the same whenever they are used throughout the document. Repetition of design elements pulls the document together into a cohesive whole, and also improves readability as the reader comes to expect text that looks a certain way to indicate certain qualities (e.g. the start of a new section, a major point, or a piece of code.
• Alignment: Alignment is crucial not just to the cohesive appearance of your document but to the creation of contrast for elements like bulleted lists or double-indented long quotes. Your document should have a couple of vertical baselines and all text should be aligned to one of them. Unaligned text floats mysteriously, forcing the reader to figure out its relation to the rest of the document. Centered text is particularly bad (and is a novice’s favorite design trick). One immediate step you can take to vastly improve the appearance of your documents is to remove the “center” button from your software’s toolbar (or, less drastically, just ignore it). It is rarely self-evident what centering is meant to communicate, and too much centered text creates a sloppy, undisciplined look.
• Proximity: Pieces of information that are meant to complement each other should be near each other. One great offender here is business cards and ads in local newspapers, where the name, address, and phone number are all scattered around the ad or card (for example, in the corners). Your reader shouldn’t have to seek out the next logical piece of information; rather, use proximity to make sure that the next piece of information a reader sees is the next piece of information they should see.

None of these principles stands alone. Repetition and alignment together create the “normal” state that allows changing the shape or position of a piece of text to produce contrast; repetition and proximity go hand-in-hand to create useful formats like bulleted lists — the repetition of the bullet adds force to the proximity of the points. In fact, the bulleted list above uses all four of these principles to work: it contrasts with the body of this article by being aligned to a different baseline than the rest of the paragraphs; each principle is in boldface, providing contrast, and is also directly followed by its explanation, providing proximity; the bullets, the boldfaced text, and the alignment are repeated in each new point on the list.

Almost all design builds on the foundation laid out above. Asking yourself how well each element of your layout satisfies these basic principles is a good way to make sure your work remains readable to your audience while also communicating a bit of your organization’s or business’ character. You may already unconsciously use these principles in your work, but knowing the principles and recognizing their use will help you make better, more conscious decisions in the future.

Ultimately, the goal is for the work you put in to designing a document to disappear, to become invisible, leaving your reader or viewer with unfettered access to the points you are trying to convey — both directly in your text and, ever-so-subtly, in your choice of design elements. In this respect, it’s a thankless job, because only rarely will anyone comment on (or even notice) the quality of design — but they will notice, and act on, the message. And that’s what’s important, isn’t it?

From Lifehack.org

Smashing Magazine made a list of Ajax frameworks out there in the wild. Could be useful for somebody to do a proper review and comparison of the different frameworks

Ajax, DHTML and JavaScript components are important in the era of Web 2.0. Recent Web-applications tend to use them to provide more interactivity and guarantee better functionality. But what Javascript libraries can be used for a new web-project? What functions, effects and useful techniques are actually provided by them

read more | digg story

Working with Photoshop can be quite time consuming for both beginners and advanced users. Once you’ve worked with it for a while, you begin to find that you’re constantly going back and forth between the same menu items or palette buttons. If you’re anything like me, you’re switching tools so often that most of your time spent in Photoshop isn’t even on the photo — it’s messing with the vast array of editing tools. Fortunately there’s a way to help streamline your Photoshop workflow.

Keyboard commands, or shortcuts, are simply a way to bypass a few mouse clicks when doing tool changes or tool property adjustments. They’re a little awkward and cumbersome at first, but once you pick up a couple of commands on the keyboard you’ll never go back. The whole idea is that while one hand is running the mouse, the other hand might as well be doing something too. This method of working with Photoshop can really decrease your time spent on the computer and give you more time to get behind the camera.

The following are 18 of my most commonly used shortcuts, broken out into three groups: simple, intermediate, and advanced. The simple commands are pretty easy to pull off, and they’re heavily used. The advanced commands take a little coordination, and I don’t use them quite as often. The intermediate commands are somewhere between the two. Again, these are MY most used Photoshop shortcuts. I’m also only showing the commands for Photoshop CS3 (thought CS2 should be almost identical) on a PC (sorry Mac users). So if you want to learn more about this topic, read to the bottom of the article for additional resources.

read more | digg story

The unique combination of the open source model with the universalism of web design remains one of the ideal applications of the open access philosophy. Here are 100 resources–including open source design software packages, CSS tools and generators, templates, and code sources–that can save you time and money while designing web sites.

read more | digg story