Web design – small but nice

By Dirk Metzmacher

When little information must be presented very quickly on a website, such as preview information for a site prelaunch or a portfolio demonstrating skills, miniature websites that show only the most necessary content in very little space are the way to go.

1. Small content area

Base

In the background, draw a linear gradient from #bbddff (RGB 187, 221, 255) to white. On top of that, make a new layer with Layer > New > Layer or Shift+Ctrl+N, then use the selection rectangle tool and fill an area using Edit > Fill with the foreground color #bb3322 (RGB 187, 51, 34). Below that, on another layer, make a second, bigger area and fill it with a linear gradient from white to #fafafa (RGB 250, 250, 250).

You could give both layers a stroke, so the shapes are more easily differentiated from the background. Here we used Layer Style > Stroke with Size: 1 pixel. For the upper layer we used a white color, for the lower layer the color #cfcfcf (RGB 207, 207, 207). If you want, you can enhance the smaller area with a gradient from #bb3322 (RGB 187, 51, 34) to #aa4433 (RGB 170, 68, 51) and adorn it with circles and lines.

Content and background

After inserting a logo and some content, you could continue adjusting the background a little. Since we used sky-blue, it would be appropriate to insert a cloud photo and set its blending mode to Screen. Using a layer mask you can define where the cloud structures should be visible. On another layer, I used the polygon lasso tool to select a shadow shape and filled it with #ddeeff (RGB 221, 238, 255).

Once you’ve deselected (Ctrl+D) it, apply Gaussian Blur to the shadow to take the sharpness out. And since we’re working with a cloudy sky in the background, we could also create a fitting storm of leaves on a new layer using the „maple leaves“ brush and the color #88cc44 (RGB 136, 204, 68).

2. Paper stack

Stacked background

Fill the background layer with the color #ffcc00 (RGB 255, 204, 0). Using the Rounded Rectangle tool with its options set to a radius of about 5 pixels, draw a white shape above. To separate it from the background a little, apply a Layer Style > Drop Shadow with Opacity: 10%, Angle: 120 degrees, Distance: 1 pixel and Size: 6 pixels, then apply Layer Style > Inner Glow with Opacity: 20%, Distance: 0 and Size: 2 pixels.

Duplicate the layer several times using Layer > New > Layer via Copy or Ctrl+J and use Edit > Transform > Rotate to position each copy a little differently in order to create the illusion of a stack of images. Above that you can present content like text, images and a logo.

3. Content area

Small space

After filling the background with #a2b2b2 (RGB 162, 178, 178), use the rectangle selection tool to select an area on a new layer and fill that with the foreground color #bbf8f8 (RGB 187, 248, 248). Use the pencil tool, the color #88cccc (RGB 136, 204, 204) and a 1 pixel diameter to draw a line of pixels on another layer, then copy it multiple times, reduce it down to a single layer, and you’re ready to use it as a pattern for the area we just created.

To quickly adjust this pattern to the shape of the layer below, click on Layer > Create Clipping Mask in the menu. You could also draw a hard „shadow“ in another layer using #999999 (RGB 153, 153, 153).

Large content

Make a selection on a new layer and fill it with a gradient from #44aa99 (RGB 68, 170, 153) to #88ddcc (RGB 136, 221, 204). Above that, use the Elliptical Marquee tool and hold the Shift key to select several overlapping circles, then fill them on a new layer using #66cccc (RGB 102, 204, 204). Set this layer’s blending mode to „Screen“ and the opacity to about 40%. If you like, you can insert further graphical elements or some text.

This newly created gradient layer gets treated with a Layer Style > Inner Glow with the options Choke: 50% and Size: 8 pixels. On a new layer, use the polygon lasso to select a triangular area and fill it with the color #e4fcfd (RGB 228, 252, 253) to make it seem like a speech balloon (see screenshot). Below that you could add icons and a logo.

4. Content & menu

Two areas

Two separate areas for the content are a nice and easy way to arrange things, so – like in this example – you could present the menu on a narrower area, and the actual content on a slightly wider one. Both areas were created with the Rounded Rectangle tool, using the foreground color #373737 (RGB 55, 55, 55) for one side and #eaeafa (RGB 234, 234, 250) for the other. Both layers receive a „Drop Shadow“ with Opacity: 35%, Angle: 120 degrees, Distance: 0 and Size: 5 pixels, „Inner Shadow“ with Opacity: 10%, Distance: 0 and Size: 3 pixels as well as „Stroke“ with Size: 1 pixel and the color #b7b7b7 (RGB 183, 183, 183).

The area to the left got an additional „Gradient Overlay“ with a gradient from #333333 (RGB 51, 51, 51) to #444444 (RGB 68, 68, 68). Again, this area can present some content. By the way, the FRESH text is right on top of the menu layer, and its shape has been adjusted to the layer below using Layer > Create Clipping Mask.

5. Smallest website

Minimalist

There’s almost always a way to make things smaller, but at some point it becomes hard to read or even place content. But as a little „selection field“ for more content, such a shape has its own appeal. You could use the rectangle selection to pick an area, then fill it with #fafafa (RGB 250, 250, 250) on a new layer. Applying a Layer Style > Drop Shadow with Opacity: 20%, Distance: 1 pixel and Size: 5 pixels makes the shape pop out of the background a bit.

Above that on another layer, use the color #f6f6f6 (RGB 246, 246, 246) and the brush tool to spray a little color at the upper and lower edge, then adjust the layer to the shape below using a clipping mask. Finally insert the content.

Screen resolutions are no concern for these layouts. All content gets fully displayed even on the smallest monitor. And using this technique, it takes little time to whip up something like that.