Ben's blog and portfolio » WDD

The design process vs. design-as-product

Ben — Tue, 05 Oct 2010 12:17:11 +0000

The trouble with the word “template” is that its meaning depends on one’s point of view. To some, a template is a ticket to an instant website. Many content management systems allow owners to change plug-and-play themes as easily as they change clothes, and inexpensive skins are just a Google search away. To others, templates are learning tools. Studying samples of real-world code and style is more practical for them than following examples in a book or reviewing lecture notes.

Templates can also represent independence. Anyone, even someone without basic design or development skills, can choose from hundreds of templates without fear that a “design expert” will question their decision.

Read the full article I wrote at Webdesigner Depot.

Editing Opacity With Layer Masks

Ben — Thu, 09 Sep 2010 03:31:04 +0000

On screen, the colors of pixels are a mix of red, green and blue values. A fourth value, opacity, controls how pixels blend with pixels laid over them.

In image-editing programs such as Photoshop, changing the opacity of a layer is straightforward: Setting a layer to 50% opacity makes all of its pixels half-visible. If the situation calls for variable visibility, then layer masks are the answer.

Read the full article I wrote at Webdesigner Depot.

Above: Using non-destructive masks to replace a face.

Above: Looking for natural seams when mixing images.

Exploring Photoshop’s angle gradient tool

Ben — Mon, 26 Jul 2010 16:28:46 +0000

The angle gradient tool is an overlooked gem tucked away in Photoshop’s toolbar. Often passed over for its more popular sibling, the linear gradient tool, angle gradients create clockwise blends of color around the point a user clicks.

The angle gradients create clockwise blends of color around the point a user clicks. Most people stop there. But when combined with other techniques and some creativity, the angled gradient has some surprising uses.

Read the full article I wrote at Webdesigner Depot.

Thoughts on applying duotones to data

Ben — Mon, 19 Jul 2010 13:55:04 +0000

The ability to tint black-and-white photographs with color has been a staple of photography for decades, and modern image editors make warming and cooling grayscale images a snap. This concept of a steady progression of shades can be used to present information as well.

This technique of tinting digital photos works well for presenting information and can improve usability. Just as a gradient shows a range of colors, a monotone or duotone can be used to show a range of data.

Read the full article I wrote at Webdesigner Depot.

How to manage a controlled collision of type and imagery

Ben — Thu, 15 Jul 2010 13:49:47 +0000

Setting images into text mixes words’ straightforward communication with photos’ emotional implications. Words state; photos express. But conflicts result when the images get lost or the text becomes muddled. Or both. Images and text can successfully mix—if we follow some guidelines that balance readability in both text and images.

Read the full article I wrote at Webdesigner Depot.

Above: Turning block-shaped photos into text means cutting into the image. The more cuts made, the greater a chance for cutting out something important.

Big stature, small caps, good technique

bbb — Tue, 06 Jul 2010 04:14:48 +0000

Few type treatments give dignity to design as efficiently as small capitals, or “small caps.” This technique keeps all letters in a line of text uppercase, but retains hierarchy by making the first letters of important words noticeably larger.

Stately text doesn’t need to hurry. When used well, small caps make a design look stable and reliable. They can appear official or solemn. But like any technique, small caps requires understanding the why behind the how.

Read the full article I wrote at Webdesigner Depot.

Above: The differences are subtle; the effect is profound.

Using FAQs as content launchpads

bbb — Fri, 25 Jun 2010 14:08:27 +0000

In the past, I had trouble with vague ideas. Fighting my own limp-wristed attempts to frame content, I discovered that most topics can be phrased as a FAQ. Since questions spawn questions, thinking in FAQs turned out to be a useful mind-mapping-like tool as well.

Each of the examples here use a vital question word: who, what, when, where, why and how. That’s important to avoid incomplete answers and assumptions. For example:

Bad: “Can I create my own grid?”
Good: “How can I create my own grid?”

The first question inspires a weak answer. Can I? Yes. Good for you. The second question demands some thought and a more elaborate response. It works so well that I’ve started using questions to start everything I write. It’s like free writing or mind mapping, but with question marks.

“Color alignment is important.”

Thinking FAQ-style:

What is color alignment?
Why should colors be aligned?
When are colors misaligned?
Who else has written about this?
Where can I find tools to make colors match?
How can I change colors to match each other?

“Grid-based layouts are useful.”

Thinking FAQ-style:

Who invented grid layouts?
Who uses grid layouts now?
How are grid layouts different on the web than in print?
What are different types of grids?
Why don’t more people use grids?
Where can I download grid systems?
How can I create my own grid?

“PNG vs. GIF.”

Thinking FAQ-style:

Who owns the licensing behind PNG and GIF?
What are the advantages of PNG and GIF?
When is PNG or GIF more appropriate?
What browsers support GIF and PNG?
Why should anyone use GIF over PNG or vice versa?
How might PNG or GIF change in the future?

Photoshop Curves does more than change highlights and shadows

bbb — Tue, 22 Jun 2010 08:56:22 +0000

Photoshop’s Curves has long been associated with making images brighter or darker. But few people know that it can also change color with greater degrees of control than the Hue/Saturation or Color Balance controls.

From slight selection changes to creating great duotones, Curves is a powerful tool to master… if you’re willing to practice.

Read the full article I wrote at Webdesigner Depot.

Above: Using Curves to create a precise duotone from a grayscale photo.

Above: Curves is a grid of before & after. The horizontal axis represents an image’s current values; the vertical represents change.

Using opacity and Photoshop blend modes pattern magic

bbb — Tue, 08 Jun 2010 06:33:59 +0000

When it comes to creating patterns, the ability to duplicate, resize and turn a layer is one of Photoshop’s greatest features. Translucent shape layers can be very useful when creating repeated geometric “textures” of color and form. They’re easy to create, fun to play with and best of all, they can be uniquely yours.

In searching for interesting patterns, designers sometimes pass over basic shapes in favor of more complex geometrics. But simpler is often better. The trick is to pay attention more to how shapes interact than to how a shape looks on its own. The concepts are simple:

As translucent shapes overlap, they create new shapes.
Complex patterns emerge from apparently simple origins.

The question’s been asked: Other than looking pretty, what good is it? Like any tool, the strength of a pattern lies in its application. The examples here show how a pattern emerges from simple shapes and how patterns may be applied to text.

Read my article about about creative Photoshop patterns at Webdesigner Depot.

Signposts: Helping users navigate content

bbb — Mon, 17 May 2010 07:23:05 +0000

Navigating unfamiliar information on the web requires aids.

These aids don’t have an agenda or bias the way advertising does. Instead, navigational aids help people find the right path based on their interests.

Signposts are one type of navigational aid. They provide the information people need to make their own decisions while searching and surfing the web.

Should a designer worry about a website losing readers? Many websites compete for attention by luring audiences with vibrant illustrations, catchy typography and rich user interfaces.

In addition to being attractive, other websites strive to be useful. The goal of usability isn’t to get attention, but to get repeat visits. Advertising loses readers, in the sense that it directs them to other websites, whereas usability is about making sure they don’t get lost.

Read my article about about navigation at Webdesigner Depot.