Any good example of electric waves incorporated in a web design?

The client I work with has undergone an internal branding exercise. The result is that all of their documentation standards have been updated to include a common header. The header contains a black background with an orange electric wave as a prominent design feature.

I’ve now been asked to incorporate this into their intranet design. Can anyone please provide me with any examples of web design elements incorporating an electric wave? The designs can be either prominent or subtle.

I’m basically struggling to design around this without it looking dated. Any inspiration would be appreciated.


It’s hard to say much without seeing the specific design, but off the top of my head, I can think of two possible approaches:

  • If the header is meant to stand out from the rest of the design, you might just treat it that way, drawing a clear distinction between the header and the rest of the design. Basically, just treat the header essentially like a solid black bar as far as the rest of the design is concerned.

    For an example, here’s a mock header bar based on the wallpaper you linked to:

    Sample image 1

    Hopefully, your actual header design isn’t quite that dazzling. Still, you’ll note that, even though the bar doesn’t match the design of this page in any way, it doesn’t clash too badly (even here in the middle of the page), precisely because the high contrast and simple shape set it off from the rest of the page.

  • The other option, for dealing with a design element that would be glaring and incompatible if used on its own, would be to tone it down, neutralize it and try to capture the shape of the element without necessarily including its color scheme. You could even try to work the element subtly into the background, instead of using it overtly.

    As another quick-and-dirty example, here’s what I got by taking a piece of the same wallpaper, desaturating and inverting it and playing with the lightness curve:

    Sample image 2

    It’s still recognizably the same “wave”, but much subtler and less clashing now. You could easily work something like it into the background of your page design.

Source : Link , Question Author : Brian Scott , Answer Author : Ilmari Karonen

Leave a Comment