Parallax and Textured Web Design

Parallax and Textured Web Design

Parallax Effects

Website design is evolving as quickly as the imaginations of the innovative designers who are driving it. A website design with a creative edge captures mind share – which increases the likelihood of it being profitable. One website design element that’s been around for a while and has recently been gaining momentum is parallax scrolling.

To begin to understand this design element, it can be helpful to understand the meaning of the word parallax. It is a noun the describes the illusion of an object changing position, in relation to the position of another fixed object, even though the only thing moving is the position of the viewer. Hold up your right index finger at arm’s length and cover your view of that finger by holding your left index finger between it and your nose. Without moving either finger, move your head. Now you can see both fingers, as if one has changed position. This is a parallax effect.

In web design, parallax can be incorporated by layering imagery that moves at differing speeds on the screen, creating the effect of varying depths – a close visual cousin to 3D. You may have already seen it:  Some visual elements of the web page remain fixed as you scroll or move your mouse over particular areas, while other elements go mobile, lending the illusion of foreground, background, and 3D motion.

There are a number of ways to implement parallax scrolling, including applications such as The Sprite, The Layering, The Raster, and The Repeating Pattern Methods – all of which can be applied by Impulse.

Web design that acts like a simple brochure is fading out of vogue and so is web design that is flat and without dimension – even if that dimension is nothing more than a cleverly portrayed illusion.

The graphic and web designers at Impulse in York have been employing texture in website design for years, and have learned to use it sparingly, for a dramatic effect.

Before we get into the dos and don’ts of texture, it’s important to differentiate texture from pattern. A pattern is a design with repetition, often consisting of small elements that cover a large area. Texture is generally a larger decoration, with an irregular design and a natural or realistic feel (like marble or tree bark).

Too much texture in web design can over-stimulate your visitors and discourage them from clicking through or staying to absorb all that you have to say. Here’s how to harness the power of texture, frugally:

  • Don’t use texture on texture. Instead, make the background or foreground that touches the texture simple…and any writing within the texture simplistic, too.
  • Use texture to emphasise important elements of your webpage, like titles, call-to-actions, buttons, and icons.
  • Highlight branding essentials with texture, to make them more memorable.
  • Create contrast for content or other important elements using texturised backgrounds or borders.
  • Maintain legibility by ensuring that any words placed over texture are highly readable.
  • Repeat identical textures throughout the website when possible. This will cut down on loading time.
  • If using more than one texture, make sure they don’t compete with one another. If they aren’t complementary, make different choices or stick with just one texture.
  • Don’t choose a texture just because it makes your webpage attractive; choose it because it contributes to, or helps to define, your brand.

Stay tuned for more on innovative and unique web design in York. Impulse will be back with techniques for acquiring exclusive and never-before-dreamt-of textures and parallax effects for your web design.

To create powerful websites for your business call 01904 430 666 or get in touch with us via the contact form below.