: Best approach to deal with left out, right and left , side spaces around website When the site isn't as wide as the screen is the sides are filled with something that doesn't grab attention

@Alves566

I tend to use subtle patterns a lot:
subtlepatterns.com/
They're free to use, but you are required to credit them if you use them in a commercial project.

The nice thing is they're mostly tileable patterns and as such wont cause huge page loads as you mention.

I find (as with the example from cockypup) too much detail in the background distracts from the page itself, these help (with a subtle border left & right) to make the main content 'pop out'

Hope it helps.

Vote Up Vote Down

@Ogunnowo857

I just saw this site and thought you might find interesting the way they used the space around the main content of the site.
www.thewynwoodwalls.com
The site is devoted to graffiti and they are using the space we are discussing to show graffiti art.

Although the application is distracting (IMO) and very specific to the site's content, I think it is interesting that their approach was "lets use the side areas to show content that is relevant to the main topic of the page". As opposed to be just decoration, it becomes part of the information offered by the site. It communicates as opposed to just decorate or facilitate.

This idea could be distilled as a pattern. The extra content does not necessarily need to be a wallpaper, it could be any kind of secondary (i.e. additional, non essential) information.

Vote Up Vote Down

@Shakeerah625

This is a very broad question - the use of 'empty' space either side of the main site wrapper varies from site to site, depending on the function or purpose of the website. Also, depending on how the site is constructed (e.g. is it responsive?) it could potentially be a lot of work to make the site margins work the way you want them to, or point the user to the content that you want.

I've built several websites with large photographic backgrounds (utilising handy CSS scaling methods like background-size: cover; - love that rule!) to fill the space or communicate brand values, such as colour palettes; these can be very attractive and are a lot less monotonous than using flat colours, but often impact on loading times.

I've seen a lot of sites (e.g. www.pcgamer.com/uk/ ) that utilise in-margin advertising to fill the perceived 'empty' space in the site margins - depending on what kind of site you're building (e.g. e-commerce), this could be appropriate or useful, but they can be irritating for the user if they accidentally click on an advert when trying to click something else, so like most other considerations there is a UX decision to be made in using this method.

I hope these examples help - I guess I would advise not to make your margins too distracting, or to make them overly purposeful. IMO a bit of empty or 'dead' space can really help a design to breathe.

Vote Up Vote Down