3 Simple Design Techniques

Sometimes a design needs something extra to make it stand out. The smallest details can transform a design from average to outstanding. Drop shadows, gradients, and textures are three simple techniques for bettering a design. I’ll explain each of them the following article.

Drop Shadows

Drop shadows are among the first effects new designers learn how to create. There are two types of drop shadows — inner and outer. Drop shadows add depth to graphic elements by giving the semblance that they’re raised or lowered into the page.

Outer and inner drop shadows.

Outer (left) and inner drop shadows.

Inner drop shadows are popularly used on typography to create an embossed or letterpress effect, where characters physically hit paper on a printing press.

Inner shadow letterpress effect.

Inner shadow letterpress effect.

When to exploit drop shadows. Add a drop shadow when a graphic is surrounded by a large number of negative — white — space, or while you desire a graphic to seem layered. Drop shadows also are useful for giving photographs a physical feel.

When to not use drop shadows. Many new designers are likely to use drop shadows for all designs. But drop shadows shouldn’t be applied to each element on a website. Instead, they need to be used sparingly to make sure graphics stand out. Mainly, you’ll want to keep drop shadows subtle. Watch out to not make shadow edges too hard. Keep the gap between your drop shadow effect and your shadowed image to a minimum.

Example of a distant, hard drop shadow.

Example of , hard drop shadow.

Gradients

Gradients are a staple for any designer trying to add depth to a design. A subtle gradient may give a flat button or boring background the additional detail it must make it stand out on a page. Linear and radial gradients are the 2 simplest gradient types. Both can be utilized to feature depth to a design.

The two most common gradients are linear and radial.

The two most typical gradients are linear (left) and radial.

When to exploit gradients. Linear gradients can be utilized to feature a subtle horizon line to product photos. When one end of the gradient is transparent, radial gradients can focus viewer’s attention to a particular area of a photograph. Gradients also are useful for creating raised buttons and sunken mouse-click states. Gradients may be extensively utilized to create highlight effects on photos or other elements.

Gradients can be used to create highlight effects.

Gradients can be utilized to create highlight effects, equivalent to the head of this horizontal bar, that’s lighter.

When to not use gradients. Clone of drop shadows, gradients shouldn’t be overused. Too many gradients will make a design look overly busy, confusing the viewer. Instead, use gradients with other solid colors with the intention to highlight specific areas of a design.

Textures

In “Using Texture to enhance Design,” a prior article, I addressed how textures can be utilized to both draw viewers’ attention and create a feeling of depth. Textures is also added to backgrounds, photographs, buttons, logos, and illustrations with varying results. That you would be able to generate textures in image editing programs like Photoshop, otherwise you can use photographs of textures from the physical world.

When to make use of textures. Like drop shadows and gradients, adding a texture to a design element is an effective strategy to make it stand out. Textures can be added to pictures for a dated effect. Adding textures to illustrations could make them more eye-catching. Grunge-themed sites use textures to create a gritty feel — though sites will not have a grunge theme to effectively use textures.

Textures can make illustrations stand out more.

Textures could make illustrations stand out more. The correct side of this image features a texture.

When to not use textures. Again, textures won’t improve every design and may be used with purpose. Avoid high contrast textures that distract from site content. Avoid texturing too many elements in a design. Instead, balance textured and non-textured elements or use textures consistently only on specific elements like backgrounds or photographs.

Final Thoughts

These three simple techniques are powerful additions to any design arsenal. It’s difficult to search out a domain today that doesn’t use no less than certainly one of them. However, a design may be compelling without using any. Experiment with drop shadows, gradients, and textures. In case you commit to use them, do it consistently across your design — whether it’s an internet site or a chain of banner ads. Note how other sites use these three techniques, and learn.