Episode Two: Visually design information elements and user interface

This is the second part of the series, “Environmental friendly CSS

In the previous episode we’ve created a creative/technical brief. In this article we are going to use that document to design the category cloud area. For all busy readers, here is the final result:

Final image

The process

Most of the time, you’d want to first scribble some sketches, the old school way — pencil and paper. Yes, another Moleskine sucker.

Final image

As you can see, it all comes down to some quick ideas and metaphors in order to get rid of the noise. This way you can rapidly test proximity, contrast and alignment and set the overall look-and-feel.

Before I fired-up Photoshop, I knew I was going to have a dialogue between two characters on a window, carelessly enjoying the force of the nature. As a contrast, I planed another character who’s experience wouldn’t be so pleasant and optimistic.

See some different/transitional design versions:

ver. 01

ver. 02

ver. 03

ver. 04

Photoshop steps

The approximate Photoshop process goes like this:

  • Rectangular marquee tool: for the dimensions (300px in width, random in height), set Guides
  • Rounded rectangle tool (Shape layers toggled): draw main box (the window), set stroke
  • Elliptical marquee tool: create random circles and ellipses by holding Shift to form the big cloud, fill selection with color.
  • Pen tool (Shape layers toggled): draw lightning
  • Type tool: write copy (tags and the label)
  • Custom shape tool (Shape layers toggled): choose Talk 4 shape, draw dialog cloud, set stroke
  • Elliptical marquee and Polygonal lasso tools: draw the character prototype using selections and then filling it with black.
  • Duplicate the character and test downscaling, rotation and perspective (Edit → Transform).
  • Set the characters in place, modify the one that is going to be hit by the lightning (I used a combination of elliptical selections and brushes for the face).
  • Draw radiator with Pen tool (Paths toggled), then Make selection, and then Fill. If you draw the perspective freehand, it could take a couple of attempts to get it right.
  • Pen tool (Paths toggled): draw a cable curve, then Stroke path with Brush (toggle simulate pressure checkbox).
  • Draw grills, color them red, make it all looks hot (as in hot temperature) with Outer Glow.
  • Select one of the inside character layer, then Select → Modify → Contract for about 2px, then create new Layer via Copy (Cmd/Ctrl + J), keep the selection toggled.
  • Brush tool: set Opacity to very low, color: red, and gently draw the reflection on the character; repeat for the second one.
  • Custom shape tool (Shape layers toggled): choose Heart card shape, draw a couple of hearts, variate size and opacity.
  • Elliptical marquee tool: select some ellipses, fill with black, free-transform and lower the opacity.
  • Make final tweaks.


To get a better picture about how it looks like in layers, download open source PSD file environmental-friendly-css.psd.zip (68 KB).

Movie anyone?

I’m aware that the written steps and a PSD don’t get you as close as you might want to, so at the end of the series we’re going to deliver a screen-cast of the whole process.

In a mean-time, please share your thoughts: Would you do it in the similar fashion? Or would you take totally different approach?

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?