Big, Bold Backgrounds
Posted by Andrew Faulkner on October 10th, 2007.
Andrew Faulkner has posted 211 articles.
RSS Feed for Andrew Faulkner
It’s one of the simplest things one could possibly add to a site. It’s extremely easy to achieve in CSS and it doesn’t present many problems at all for the designer who’s laying out a webpage. What am I talking about, then? Big background images (normally) on the body tag of course.
A bit of background to the post
After seeing the ground-breaking Johuaink design (pictured) in early 2006, I imagined that many more designers would start using large, graphic-intense images on the background of their website and that the trend would escalate and break into mainstream websites. For the most part however, this hasn’t happened.
Before we go into that though, let’s have some eye-candy and marvel at the brilliant work below.
Give me images!
What do these backgrounds bring to design?
The examples I’ve shown all do one thing for me - framing the content but not affecting the content. Nothing new there as a simple wrapper could do the same. But think about it this way. It is often a mistake in my view to get too creative within the content on a site, thus distracting the reader with over-the-top visuals. The designers in question have used the area around their content to show their creative prowess to the world but not ‘littered’ the content with unnecessary graphic elements. Result? An aesthetically pleasing site that’s designed around its content.
Why aren’t there more?
The above obviously isn’t an exhaustive list of sites with big backgrounds. But I did struggle to find them. Since Joshuaink, I expected a bigger use of this trend by designers around the globe. So the question on my lips is why might the usage be so low? The only reasons I can think of are:
- Bandwidth/Connection Speed: With such large images, this goes against one of the most important factors when building efficient site - speed. Speed of download could be lowered significantly by a large background image. Also, it’s likely to ramp up the monthly bandwidth usage meaning more cash to pay out to the host.
- Talent: Maybe such ornate backgrounds require top-notch designers? I don’t doubt the talent is out there for a second. I do however think it would be hard to find the time within the constraints of a project to design such beautiful graphics.
I’d love to hear why you think there are a lack of sites with large images.
Not quite in the mainstream
I came across just over a dozen examples of big backgrounds, but only a few (all listed above) were outside the design community. Is this simply a trend in its early stages, yet to be adopted into the mainstream? Is it due to constraints of the Internet/Client and that designers break their own rules in their websites? Let me know your thoughts.
Over to you…
I’d love it if you suggest some more examples, especially outside the world of design. Drop a comment below.
Make A Comment
( 60 so far )
60 Responses to Big, Bold Backgrounds
I don’t have the raw artistic & illustration talent that some have, so making those ornate backgrounds that look great is difficult for me. Personally, I’ve found that getting rid of background images and making things as simple as possible with a maximum amount of whitespace and making the site thin and letting content be the focus works best. I also don’t like backgrounds behind text as it can affect legibility. Not dissing ornate backgrounds. Some of those sites, the n.design studio one in particular, look fantastic.
I’ve asked myself the same question many times. Looking back on Joshua’s site. I remember thinking that this is the sort of design I wanted to do. I don’t think it’s much of a load time issue anymore as it is a bandwidth issue. I don’t know one person who doesn’t have more than 2 - 3 Mbits internet connection and most of these graphics are under or around 150k.I think that they should start popping up more often. If the client agrees with the cost. Do it.
I would go with talent. I was very inspired by Web Designers Wall recently and I tried a big background and failed miserably. It’s tough to pull off because the graphic has to carry the site and it’s hard to creat an amazing graphic. Good list.
Nick La is so damn talented! Props to both his Web Designers Wall and N. Design Studio blogs… amazing. :)
I put it down to time. It’s hard to find the time to design a visual amazing design such as those. They a\re however my favourite types but time and skill just don’t like me too much lol.
Love it! I think that a background like these can be extremely effective, but (stern face) we must be careful not to over use them and ensure that they do "add" something to the site in a positive way. By this I mean we don’t make the backgrounds more important than the content held within them. What messages does your background send? Why is that important? Will that help you with the sites goals, ect.
Design with a purpose not for the sake of it…
I’ve allways liked backgrounds of the new MTV.com, check them out and hit refresh!
I’ve always liked those sorts of background. Talent is the major drawback though. I would love to have a frame like that to adorn my site, but I just can’t do it (though I’ve tried a little, it’s certainly nowhere near the examples you have shown here) and I definitely can’t afford to pay someone to do it for me either.It’s a tough thing to do, but do it well and your site will be remembered.
While you can reach the point of over doing backgrounds… I personally love these backgrounds. To me… they break all of the sameness of the web up and create a pleasing EXTRA sort of appeal. I guess if the WHOLE OF YOUR FOCUS is the content, great cut the backgrounds… to me the overall VISUAL PRESENTATION is part of the content. I don’t read Sports Illustrated cause the content is so great — it is — but it’s a combination of the pictures and the content. Again… tastefulness must be exercised so the background doesn’t OVERWHLEM everything. Sidenote, the WINDOWS OS is bloated and sure I could actually get work done is DOS — but (haven’t gone to VISTA yet) I much more enjoy the overall experience of working on a computer using WINDOWS XP.
I can dig a big bold background. On one hand you’ve got minimal, on the other maximalism.Don’t you just love a high-fiber diet sometimes, splash on more graphic sugar!
I love the style of these, and other similar sites, with the bold backgrounds. It really makes the site memorable, but when you come across a beautiful site and want to show the graphic designer at work cause you think they might like it, how do you Google "rainbow exploding Chinese take-out box website layout" or "header photo Polaroid design." When a site’s look/feel stands out that strongly it does make it more memorable, but does it make it easier to remember how to get to it? Is the site getting lost in the design, not the content, but the site overall identity?
The statistics I’ve seen suggest that around 70 to 80% of internet users in the United States have broadband connections. If that’s your target market, then go ahead and splurge on a big, beautiful background…But that’s still 20 to 30% of your potential audience that might get frustrated with your site. That’s a pretty significant number, especially for a consumer-oriented site. If you’re trying to reach an international audience, that number could be much higher. And even broadband users might not want to wait for a 200K image — people are *very* impatient these days!Personally, I design my sites primarily for functionality. I try to get the content to the consumer as quickly and easily as possible. Aesthetics are important of course, but for me the drawbacks of a massive background image outweigh the advantages.
I definitely think its a lack of skills. If I could build something as beautiful as some of those I would spend the hours doing it……then again, I don’t have many spare hours for my website. :\
http://www.mtv.com/ MTV’s latest website uses it, that’s pretty mainstream…
on my own blog, I use it not for header but for the footer :http://www.fairytells.net
here’s one more
Yes mate. Always been a big fan of the simplicity of the Joshuaink layout and the jewel like complexity of the background. When we redesdined the Kyan site earlier this year this was a definite influence… <a href="http://kyanmedia.com/">http://kyanmedia.com</a>
here is another one.
From a design point of view, what width do you shoot for on one of these, or do you use some other kind of trickery to prevent it from doing a repeat-x on really large screens?I love the effect you can get from these. Gorgeous design.
This borrows heavily from the arts & crafts movement (collages, murals, layering, etc) so it’s not necessarily something "new" — just hasn’t been explored fully on the web yet. It seems as if the web keeps choosing a well-established graphic design technique used in print (like fundamentals of grid design, typography, whitespace) and then focuses on it for a while, until an intrepid designer gets bored and uses new inspiration and a new trend appears. These are simply inspired graphic design choices. It’s just not common within our web realm because the number of us who have actual fine art or illustrative leanings (never mind formal training on such) on top of being interested in the web are few.Tho, I have to say, it gives that extra almost-tangible feeling when visiting a website, because of all the textures and layers, as opposed to what we’re used to: cool gradients, and metallic metaphors. Hence, why it’s fresh. :)
Oh, just another thing… I don’t think it’s necessarily about "talent" as much as it is about knowledge. People who have a keen interest in art and design history, whether this is through school or just a hobby, just tend to recognize other possibilities because their visual vocabulary has increased.That being said, talent can be attributed to someone who can see beyond the obvious to apply this visual vocabulary. :-)
[…] » Big, Bold Backgrounds » fadtastic - a multi-author web design trends journal (tags: css design web backgrounds) […]
Hi Andrew, I think it is purely illustration art to do these backgrounds. It is a shame that is hidden behind the main content. But realistically it depends of the budget as well.You can do a beatifull website with less as well, does not mean that it is less effective.
[…] » Big, Bold Backgrounds » fadtastic - a multi-author web design trends journal (tags: css design web background inspiration webdev development) […]
[…] Big, Bold Backgrounds […]
great article! we love working with wide designs and adding something exciting to the background. several sites we’ve designed have wider content backgrounds as part of the website design…http://www.hendrickmotorsports.coma mix of wider backgrounds with centered, focused content images that are still behind/around the main text content
I’d absolutely love a background like they have at Web Designer Wall/n.design or Malene Hald, but I sure couldn’t make it myself. I’d guess that (talent) is what holds back a whole lot of us.Also, there’s that cookie-cutter, bland, tired trend with the shiny/rounded/plain thing going on. For some reason, everyone seems to think that’s the best thing evar. I think it’s overused and boring.
I should add that my site is graphics-intensive, and I do get people complaining about it being "slow" to load (usually 56K users, and only using IE6 & older). So there probably are designers who simply won’t do such things because they know the effects. My solution (of sorts) has been to have other themes available for people on slower connections. It seems to work for me.
[…] Big Bold Backgrounds Some GORGEOUS websites, and a question: why don’t more designers do sites like these? (I think it’s a lack of artistic ability, plus fear of slow-loading websites.) (tags: design webdesign backgrounds graphics inspiration trends) […]
Visual overkill. I love art myself, but when I’m trying to read information or watch a video, the last thing I need is a bazzillion flowers blaring in my eyes. Thanks but no thanks.
Actually, I used the Johuaink design on one of my blogs for a few weeks before deciding it was too busy. PNG transparencies also don’t work too well in IE6 (still the most popular browser unfortunately) and there was a disgusting blue time to the content background image. I just think it’s overkill to have a design like this. This is not print, it’s the web, and there are too many people that do not have broadband. Or worse, pay by bandwidth used. Nice designs, but no thanks.
I agree with Neo — it’s pointless and distracting.
"it’s pointless"
Going back to my comment - I would dis-agree that its pointless. If it helps to add to the key messages of the site then I think its worth while
If we said it was "pointless" then you could add this to any design element.
Here’s a site we worked on with a very extensive background - made to match their album cover: The Junction
[…] has a nice roundup of web site designs with big, bold backgrounds. This is certainly a trend lately, and I think it will continue since the only real strike against […]
Nice collection of designs and good article. I have seen rips of Johuaink being sold in website auctions like sitepoint and private forums. So a good design will always be popular I suppose. I figure if people are ripping off your design and then selling it as their own, you’re probably doing something right!
"Visual overkill. I love art myself, but when I’m trying to read information or watch a video, the last thing I need is a bazzillion flowers blaring in my eyes. Thanks but no thanks."perfectly missing the point. surely one is allowed to do what one believes is good design on his/her PERSONAL website. if you want to watch a video, head over to mainstream youtube.
when you are living in a 3rd world country where at least a small % of your users are using dial up this is totally impracticle
I recently redesigned my own website, and one of the requirements for it was that the background added some personality: So I went for a very illustration based background image. (Only at the top though)I would love to hear what you guys think of the redesign: There is a blog post entitled ‘Welcome to the Doodle Bush Edition’, you can drop your comments there. Awesome. Thanks.Oh the URL is http://www.squawkdesign.com….
The result can be great if it’s well used like http://www.cobahair.co.uk/.Otherwise, big backgrounds are just useless decoration.
Correction, sorry.The result can be great if it’s well used like http://www.cobahair.co.ukOtherwise, big backgrounds are just useless decoration.
[…] Web sayfalarında geniş zeminli resimlerin kullanımı. Bağlantı […]
Seems to me the trend is increasing. Of course, for me, maybe its like owning that new car when you suddenly realize that everyone is driving the same car. But I see big backgrounds…. everywhere. Check out <a href="http://www.worldofwarcraft.com">World of Warcraft</a>’s main site. It’s done entirely in XML - and if you examine how they do the background, you’ll see it is several images floated left and right, some of it hooked on certain elements. Maybe not entirely semantic (if you’re a purist), but quite a nice effect and it doesn’t require one giant image download, but gives the same feel. I also like <a href="http://www.2advanced.com">2 Advanced</a>’s site, which although it is in flash (uh-oh - I’m in trouble now!), look at how bee-yoo-tee-ful and wide they are. When you visit different sections, the backgrounds change. Of course, 2 Advanced is a one of the top web firms in the country, but hey, what better to go visit their site and see why they keep getting all the big clients. As a result of all this inspiration, I’ve started adding flat file images to all my new clients websites. It allows the site to stay thin (800w) for small business clients who’s customers may not have the latest monitors, but doesn’t look super-thin on wide-screen monitors. I’m just finishing up a site for a dance studio (<a href="http://www.dancezonebrevard.com">The Dance Zone</a>) and you can see I added two dancing girls that infringe on the main page, but expand widely off to the left and right so that the page doesn’t look too thin. Because the girls are just one-color (grey), the background image is can be saved easily as a gif and isn’t very large (16k). I highly recommend trying it when you design new projects. A great way to make a simple website (for a small business or quick blog) and make it look quite professional.
Even though I don’t feel I have the ability for such gran pieces of artwork, it’s not what’s stopping me from using this style of design. Large pieces of artwork are very limiting to the site’s design. I prefer a cross between elastic and liquid in my own work, something that generally doesn’t play very nicely with large images. p. s. Whatever javascript tomfoolery this form uses is breaking my browser’s behavior and doesn’t seem to work very well with css off, either.
[…] here to […]
[…] sourced here […]
[…] am going to take a look at few site designs with big, bold backgrounds to see if that is an option for another blog I am working […]
[…] are some websites that you probably just visit for the eye candy. I know I do I bumped into this post by Andrew Faulkner, who happened to list some of my favorite […]
[…] had a great post a few weeks ago about Big, bold backgrounds and this is my version, with […]
about 3 years ago it will slow down loading website. Now we (web designers) can use it. THX
[…] […]
[…] For more designs that feature large background images, see Fadtastic’s Big, Bold Backgrounds. […]
[…] Puedes ver algunos diseños con grandes imágenes de fondo en Big, Bold Backgrounds […]
[…] Ejemplo: Webdesignerwall es un conocido sitio que hace uso de un fondo bastante grande. La estructura del sitio es bastante común, 2 columnas, pero la imagen de fondo le da a la página un toque que se aleja de lo estándar. Puedes ver algunos diseños con grandes imágenes de fondo en Big, Bold Backgrounds […]
[…] Big, Bold Backgrounds from Fadtastic […]
Nice backgrounds, I this get inspiration from a real picture is a great source for a web designer
Excellent design…. now a days these type of styles are in, in the markte…
기존 릴게임의 지루함을 탈피한 새로운 방식의
명품 바다이야기로 회원여러분에게 인사 드립니다.
즐거운 겜이 될수 있도록 회원 한분 한분께 최선을
다하는 새로운 백경이 되도록 노력하겠습니다.
5단계 예시!
화려한 그래픽!
환상의 사운드!
최고의 환수율!
♠게 임 하 기 클 릭
http://back.ch9.kr/
1만코인 무료지급 해드립니다.
delete is 123456
Related In Some Way, Shape Or Form
The above post has obviously kept you amused. Why not discover similar material:
The posts Joe Dizon on starting your web standards journey., Beautiful sites with no (or very few) images, Trends Past and Present, About fadtastic.net, The Return Of Cream, are related to this post.
Or why not take time out to find out about the author of the post.
Sponsors
Recent Comments
- fegeralto:
Привет. Рекламку у тебя можно разместить недорого? Отпишись. Думаю всем интересно будет. - nevkursi:
Film online ;) - Nick:
Mate, all your pictures are not working. Nick
Search
Topics
Authors
- Abhijit Nadgouda
- Al Newkirk
- Andrew Faulkner
- Andrew Whitacre
- Anshul
- Chris Moseley
- Darren Hoyt
- Dean Hunt
- Derek Brown
- Ezekiel Bruni
- Gavin McFarland
- Jason Spector
- Johan
- Terry Ng
- Marc Bernstein
- Matt Davies
- Michael Murphy
- Mike Bishop
- Phil Renaud
- P.J. Onori
- Ron Scott
- Steve Rose
- Steven Teskey
- Tadeusz Szewczyk
- Tammie Lister
- Ted Goas
RSS Feeds
- Complete Feed
Everything from fadtastic. - Articles
Just the articles. No news/blog. - Reviews
Our book, brand and service reviews. - Blog/Site News
The 'FadBlog.' Site updates and news.
9rules
