Backgrounds In Web Design: Examples And Best Practices

Advertisement

Web design has come a long way since its beginning, especially in terms of styling. Take a look at a website from 10 years ago and compare it to one from today. The differences are enormous. One of the major changes you will notice is the background. Today, backgrounds are one of the core features that determine how visually interesting a website is.

The background holds the theme of the website, and there are a vast amount of possibilities when designing a website background. This article goes over the best practices and popular trends of backgrounds in the current stage of innovative Web design.

You may also be interested in the following related posts:

The Basic Background Structures

Before talking about how to design a good background, we need to go over basic background set ups. While not the only structures out there, these three are the most often used.

Body Background
The body background is the most “distant” background. It is usually an image, illustration, texture/pattern or other graphical element.

Content Background
The other level of the structure is the content background. This is the background of the text, images and other base data or information.

Option 1: Content and Body Background Layered

The first structure is multiple layers of backgrounds. On the bottom is the body background. Then layered on top of that is the content background.

This is one of many styles that use a layered approach. The background is a large image, and containers of content are layered on top of the background. The core content has a solid background, but the titles have a semi-transparent background.

Screenshot243

The design above shows a layout in which content elements are separated from each other. Here below is the more common form of a layered structure. The wrapper and content have a set width background, while beyond the set width the bottom layer is visible.

Screenshot4

Option 2: Content Directly on Body Illustration or Texture

The next structural technique is to lay the content directly on a background. This is generally done with body backgrounds consisting of illustrations, textures and images. This technique is trickier, especially with images, but it can work nicely if you get the color balance perfect. This means a contrast between the background and text that allows the text to be easily readable and scannable.

The website below lays the content, text and images directly on the illustrated background. Because of the contrast between the white text and blue background, the content is legible. The images have a strong border that separates them from the background and brings the image forward.

Screenshot5

Option 3: The Body and Content Background as One

The most simple and basic structure is one in which the content background is the body background. This is usually done with a single color or a few different colors, but nothing too complex.

The website below shows this structure used with a single-color background.

Screenshot6

Wrapper/Header Backgrounds

Websites have so many places to implement good background design. Two of those places are the header and behind the top of the wrapper. Here are a few pointers on how to work with backgrounds in those two areas.

Standard Header Background

Illustrations, images, textures and colors are good to use for a header background. This is an easy way to liven up the website without interrupting the core content in the wrapper.

Provide a Separator That Flows
When designing a header that is separate from the rest of the layout, you need to use a good transition. Sometimes, the contrast between the header and the content background colors or styles will do the trick. In other cases, the two elements need to work together in harmony, instead of against each other.

Here is one example of a header that flows nicely into the content background. Instead of a sharp and immediate transition with the image, the graphic fades out:

Screenshot7

The next one is a very different approach than the transition effect but works just as nicely. The large amount of unused space may seem pointless, but it actually helps provide a separation between the top navigation and content.

Screenshot8

Flowing Illustrated Wrappers

Using illustration, or any graphic element for that matter, is a very good technique for adding a little more personality and feeling to a website. On top of that, it helps make the design more memorable and plays into the overall theme of the website. Using illustrations in the background of the wrapper in a standard layout, then allowing them to flow over, is an excellent and beautiful technique.

Match the Edge of the Graphic to the Body Color
The transition from the wrapper graphic to the plain background is important. It is crucial to match the color on the very edge of the graphic to the color of the website’s body background.

Keep the Style Consistent with the Rest of the Design
Consistency is mentioned often in Web design, and that’s because it is one of the more important characteristics a Web design can have. When making an illustration for the wrapper of a website, it should carry the same style as the rest of the website. The color palette should be similar too.

For example, if you are using a hand-drawn style for elements such as typography and borders, then the illustration should also have that same hand-drawn style. The website below shows this by using a hand-drawn illustration along with hand-drawn fonts.

Screenshot9

Allow Some Graphic to Bleed into the Content Area
To create a smoother layout with an illustrated wrapper, you should not only put graphics behind the content container but allow some of the illustration to flow over and into the content container. The website shown below is a perfect example.

Screenshot10

Extend the Graphics throughout the Layout
While just the wrapper background may be enough, you may also want to consider continuing the illustration through the rest of the background. Take a look at the beautiful illustration on Web Designer Depot below. Not only is there illustration behind the top of the wrapper, but there are graphics dispersed throughout the rest of the background.

Screenshot11

Also, the header illustration is continued at the bottom of the wrapper. This keeps the great theme alive throughout the page.

Screenshot12

Full Body Backgrounds

Full body backgrounds are a bit trickier, as they can easily throw off the rest of the design if done incorrectly. Here are some good techniques to help you work around any problems with full body backgrounds and help enhance the visual experience.

Don’t Take Away from the Content
As said above, you have so many possibilities when designing a background, but there is a fine line between a beautiful background and one that detracts too much from the content.

You simply have to pay attention to contrast and the number of graphical elements in the background. If the body background is too busy, it won’t look so good. If the background color is too bright, it will grab the user’s attention before the core content does.

Use Highlights or Bevels to Separate Colors
One heavily used Web 2.0 technique is highlights (essentially, bevels) to separate different colors in a background — or an element, for that matter. For now, we’ll simply focus on background highlights.

So how do you use bevels? These are simply two 1-pixel lines used to divide colors. Look at the image below. You will notice that when the background color switches, a subtle highlight is used. This makes for a very nice and clean layout while adding dimension to the website.

Screenshot13

Below is a closer look at the highlight. The background color of the top container is darker than that of the bottom container. Then, to transition between these containers, there are two lines. The top is a darker color and the bottom is a lighter color. This creates that bevel-like effect that looks amazing when used in transitions.

Screenshot14

The bevel is great for colors of slight contrast, and it can also be used with opposite colors if the darker color in the bevel lies closer to the lighter color in the background. The other side of this is the highlight. The highlight works best with colors of high contrast. It is simply a 1-pixel line used for transition, like the bevel.

This technique is also used on the Blog Action Day website to separate the green, gray and darker colors. Notice how between the light gray at the top and the green is a 1-pixel white line. Also, below that is a light-green 1-pixel line that separates the green and dark gray.

Screenshot15

Mix of Fixed and Liquid Graphics: Parallax Effect
Most websites will just use a static background without layered images. If you really want to take an extra step, you could create a collaboration of fluid and fixed layered graphics.

The website below uses this technique. The large light-blue clouds in the far background are a set distance from the left, so they move when the browser is re-sized. The layer in the foreground, the houses and trees, is static and does not move.

Screenshot16

This technique almost creates a parallax effect. I say “almost” because parallax effects usually have many layers to create a movement effect. The most well-known example of a website that has a good CSS-based parallax effect is Silverback.

The Silverback website has about three layers. Each layer in fact moves, but they are all set at different scroll percentages, meaning that they don’t move the same amount when the browser is adjusted. Notice how each layer has different colors and shapes. Also, notice how the top layer is slightly blurred to give the effect more depth.

Screenshot17

Use a Low-Contrast Pattern or Texture
Very subtle textures that are only noticeable on closer inspection add a little more detail to a design. A low-contrast pattern, meaning a pattern that stays within a small color range, does this great. It looks very nice and does not distract the user from other elements.

Creattica Daily uses this very technique. A subtle repeating pattern is used in the background but it stays within a controlled color range.

Screenshot18

Another clean design is the Product Planner website, which has a similar pattern and shows the same technique of slight contrast. This texture provides a more compelling visual experience to help engage the user.

Screenshot19

Combine Texture and Illustration
Some websites use just one or another, but why not combine techniques? This creates an even more engaging and unique visual experience. The website below, Web Design Ledger, mixes illustration and a wood texture. The illustration is subtle, though, and not a huge contrast to the wood texture.

Screenshot20

Add Dimension
Yet another awesome way to take a website design to the next level is by adding dimension through lighting and illustration techniques. Dimension enhances the visual experience and shows true skill.

This website uses 3-D lighting effects beautifully. The dimension in the background, and every element, looks stunning and really grabs the user’s attention. This level of dimension is sure to leave a good impression and make the website more memorable.

Screenshot21

Full Body Images

Use a Fixed Image and Content Background
Working with image backgrounds can be a little tricky because you can’t repeat them. Therefore, you must find another way to work the image into the layout.

Below is a perfect example of this technique from Nike. It uses a very large image in the background, but the background is fixed. The content container and content background scroll, but the body background image does not. On top of that, it uses an image that flows in all resolutions, and the image is not scaled.

Screenshot22

Apply a Slight Vignette
Another good technique for implementing images is the vignette effect. This helps to bring more focus to the content in the center and looks very nice with large image backgrounds. It is important to only use a slight vignette though. You will notice the background above does in fact have a subtle vignette.

Here is another website that uses this technique with images. The vignette pushes the eye towards the content and helps intensify the image itself. Also, take a look at the very heavy grunge use. This really captures the mood of the website.

Screenshot23

Find a Balance in Contrast
Images are excellent, but a problem occurs when the colors in the images have deeper contrast than the content and content background. This immediately pulls the user’s eye from the content to the image, which is obviously a problem for readability.

I will use this same example from Kraft once more. If you look very closely, you will notice that the image actually isn’t very rich in color. This isn’t because it is a bad image, but because it needs to be a little dull to…

Additionally, notice that the image is focused on the sundae. The content is around the sundae, in the areas where the image goes out of focus. The lack of focus behind the content helps bring the eye up to the content in the foreground even more. This of course was achieved by the photographer, but it can be done easily with a simple lens blur effect in Photoshop.

Screenshot243

Create Seamless Tiles or Repeat Backgrounds

The easiest way to make a good background is to use a repeat. This doesn’t require large images, but you need to be aware of many factors when creating a background that repeats. To make this easier to explain, I will use Brad Colbow’s website as a case study, because it seamlessly tiles an image.

Use Large Images to Repeat
To make a really good background, you should use large images. The background image use by Brad Colbow is about 1000 pixels, then it repeats. Take a look at the image below. The red lines show where the image ends and repeats.

Screenshot25

Line Up Edges Perfectly
More important than anything, the edges of the images must line up perfectly. The area where the image meets must be the exact same color, meaning when you create your background image, the right and left side need to match up. If using shapes, they must join cleanly.

Take a look at the example below. The first screenshot is the exact image (scaled) used in the background of the website. Then, below that is a screenshot that shows how the image meets when it is set to repeat. The edges of the background image match perfectly. Notice how the cloud flows without any breaks or interruptions, and the water color on both the right and left edge are the same.

Screenshot26

Screenshot27

Remove Noticeable Objects That Repeat
If you are tiling a background image, and an object in the image noticeably repeats, remove it. You want a background pattern that flows without interruption and that looks like one image instead of multiple tiled images. Now, this guideline isn’t so important to Brad Colbow’s website because it uses a very large image, and repeating objects are hard to spot when the image being repeated is so large. This is more something to pay attention to if you are repeating a small image.

Place a Graphic in One Section, But Not Another
Another way to mask a repeating image is to place an element in one section of the background but not another. What does that mean? Well, take the example of Brad Colbow’s website once more.

This image shows an island that Brad incorporates into the background. The inland graphic does not repeat with the rest of the background. This provides more variation and makes it harder to notice that the background is in fact a repeating image.

Screenshot28

Content/Wrapper Background Techniques

Content backgrounds can be somewhat of a challenge, too. The background has to be subtle or it will ruin the content. Here are a few ways to liven up content backgrounds without going over the top.

A Simple Gradient

Believe it or not, small details can have a huge impact on a website design. One small detail commonly used in layouts is a gradient. Gradients are very simple, yet if used correctly can bring a boring design to life.

Look at the screenshot below, then try to imagine it without the gradient background. It would be very boring and bland. Such a simple effect can go a long way.

Screenshot29

A Subtle Texture

Textures are another awesome background technique. Textures help add to the theme of a website. For example, a grungy texture is perfect for a rock-and-roll music website because it reinforces the theme. When using textures as backgrounds, it is very important not to go over the top. The texture should be subtle enough that the text is still legible.

Here below is a decent example of texture use. The body background is very heavily textured. The content background is consistent with this style but not as heavily textured as the body.

Screenshot30

Fade the Wrapper to Body Background

This may sound confusing at first, but it is actually a relatively simple technique and looks very nice if you can do it correctly. To see it in use, look at the screenshot of ZenSender below. At the top, a layered wrapper background is used on the body background structure. Then, about halfway down, the wrapper background fades out and transitions to a single body background. This is just yet another technique to consider.

Screenshot31

Style the Borders of the Wrapper/Modules

It is difficult to style the actual background of the wrapper without taking away too much from the content, but you can style the borders and edges of the wrapper to stay consistent with the body background. The website below has a very nice texture and pattern that styles the edges of content elements.

Screenshot32

Use Semi-Transparent Content Backgrounds in Layered Designs

One final technique for styling content wrapper backgrounds in a layered structure is using transparency. Transparency allows visibility of the background while separating the background from the text. It is important to use a text color that contrasts well with the background color, and don’t make the background too transparent.

The website shown below finds a perfect balance with semi-transparent content backgrounds. The body image can be clearly seen, but the text is still legible and the body image doesn’t distract the user’s eye.

Screenshot33

Showcase of Help Elements

365 Days of Astronomy34
A beautiful background with a fancy wrapper background illustration.

Screenshot35

TN Vacation36
A very nice mixture of grunge style and image collage.

Screenshot37

Squared Eye38
Good background pattern and colors, and nice header design.

Screenshot39

Grace of Alexandria40
A good example of a pattern that adds to the theme of the design.

Screenshot41

IconDock42
Besides the beautiful illustration, this website has a great wood texture. The texture graphic is static, so there are no scroll issues.

Screenshot43

Old Loft44
Here is an extremely good example of content being laid directly on an illustration.

Screenshot45

Studiobanks46
Good background pattern with a perfect color.

Screenshot47

HutchHouse48
A fun illustrated background that captures the user’s attention.

Screenshot49

280 Slides50
Good color combination and gradients to liven up the design.

Screenshot51

JUNECLOUD52
An illustrated header and a pattern to separate it.

Screenshot53

Andrew Greig54
Colorful header and good use of the bevel to separate the containers.

Screenshot55

GOTOCHINA56
A very nice image that fades out, and good use of semi-transparent elements.

Screenshot57

eWedding58
The low-contrast shapes in the body background complement the rest of the design perfectly.

Screenshot59

Bellingham Real Estate60
Good header graphics and a beautifully textured wrapper background.

Screenshot61

Duplika62
An excellent and vibrant body background.

Screenshot63

ANidea64
A funky but powerful body background with wrapper styling that works with the background.

Screenshot65

Flash Gaming Summit66
This website uses a colorful static body background.

Screenshot67

Twiistup68
A vibrant and intense static background beneath separate content elements.

Screenshot69

Design Disease70
Fun and light, the content is laid directly over the background in this design.

Screenshot71

RapidWeaver72
Beautiful wrapper background that fades to a plain white background.

Screenshot73

Sony CES 200974
A powerful background with individual modules laid over it.

Screenshot75

Mediocore76
This is an awesome background with some good dimension.

Screenshot77

Chris Merritt78
Some lighting effects with a unique pattern layered on top to create a cool visual effect.

Screenshot79

Robyn80
This background uses an illustration and soft colors to make a visually pleasing experience.

Screenshot81

Advanced Wellness82
The colors in the navigation background immediately grab the user but still work with the rest of the design.

Screenshot83

August84
The background image isn’t overly distracting, and it fades out nicely.

Screenshot85

Further Resources

You may also be interested in the following related posts:

(al)

↑ Back to topShare on Twitter

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

  1. 1

    Mostly it’s already known by designers and developers that backgrounds are one of the most important aspects in the overall design and feel of a web page. However, Designers try to impress visitors with appealing design elements, Code tweaks, jQuery combination etc…Background images are one of those , unfortunately they are often overlooked or misused.

    This Write-up comes in handy for design seekers and trend followers. Thanks Matt, for sharing such a quality article about design and inspiration.

    DKumar M.

    3
  2. 2

    Another list of sites….
    why not name this article “March 2009 Inspiration”?
    What I do not understand is that all the above is old news..
    Something new on this site is needed.
    The lists are getting dry

    -9
  3. 3

    adamz, where do you see a list here?! it’s an extensive and useful article, go complaining somewhere else.

    5
  4. 4

    Adam, I can see where you’re coming from. The lists are a cool way to grab a bunch of info quickly though. I’m all for lists AND other types of articles.

    EDIT: You know what? I take that back. On second glance, there is a ridiculous amount of content here. Explanations, examples, technique, AND a giant list of inspiration. Nice article.

    4
  5. 5

    I enjoyed it.. thanks for another good read

    2
  6. 6

    The image on GOTOCHINA doesn’t fade out, the sky just isn’t visible through all the smog. As I looked at it, I could feel my throat getting scratchy.

    2
  7. 7

    Thanks I personally really like big backgrounds because you can make something really special out of it!

    1
  8. 8

    @adamz While I agree that articles that are basically lists aren’t generally as enriching, this post is not one of those. There is a lot of content here. Tips, observation and evaluation of trends (good) on a specific part of web design (even better).

    Cheers to Matt on the great post!

    2
  9. 9

    Sergio Ordoñez

    March 31, 2009 9:36 am

    @Adamz: I partly agree with you, I have nothing again lists, but starts to be a bit boring seeing the same sites again and again.

    -2
  10. 10

    Adamz has a fair point. I’d go a step further and ask why it’s always the same sites in the list. Silverback and WebDesignerDepot are nice, but it’s a big web out there …

    2
  11. 11

    Another great article!

    1
  12. 12

    @MATHIZ
    I agree, bandwith not so much.

    I am inspired by the madness that use to be my spice cupboard alway a great place to find new color combinations from spilled spice.

    He who controls the spice!

    these list are great when my idea engine is broken re-vamps the mind. bookstores are great too, but it’s like a foggy dream when I leave.

    Yes new topics are needed I think SM has grown enough to extend it’s reach or at the very least new unknown “45 ????????” topics.

    0
  13. 13

    Great article! I’m in the process of developing a hand-drawn website and this article will be of great value in setting up all the pieces.

    Thanks!
    twitter: @delanotho

    0
  14. 14

    excellent!

    0
  15. 15

    Again (sorry to echo previous comments) it would be nice to have some more trawling done and show some different sites, there are plenty out there.

    Then again, you get what you pay for and this is free, so we can’t really complain.

    But then again, you’re also providing a service, so pull your fingers out and show us some new sites!

    haha! one leg either side of the fence – that’s how to be politically correct.

    1
  16. 16

    Nice article, would have lied to see that CarFreaks.net is there.

    0
  17. 17

    I agree with adamz. Just a bunch of same sites we see in every “X inspirational webdesigns” article. If there was some tutorial or explanation how to approach different backgrounding techniques – it would be very helpful.

    0
  18. 18

    I love these examples, I need to try out some of these techniques myself.

    0
  19. 19

    I was just in desparate need of some inspiration for a site background I’m working on. This came at exactly the right time and gave me a great idea, thanks!

    0
  20. 20

    i love u smashing! whenever i need something,,,tada, it’s here :) smashing just read in my mind.

    0
  21. 21

    Dang. What an overwhelming list of beautiful websites. Great post!

    0
  22. 22

    although I’ve seen a lot of these sites, its still a nice roundup

    0
  23. 23

    Best article of its kind I’ve seen, thanks.

    0
  24. 24

    Great list!.
    Do you happen to have a tutorial on how they achieve these backgrounds?. It would be nice to have a step by step.

    0
  25. 25

    Thanks. Nice inspiring overview .

    0
  26. 26

    Great article! Love attention to backgrounds.

    0
  27. 27

    Nice Resources! I also really like that background, I think they did a good job in implementing a fiting large bg pic with some grunge paper design.
    By the way I just love smashing magazine, keep the good work up!
    cheers
    Fab

    0
  28. 28

    I am a beginner designer, and these techniques finally spell out a lot of ideas that seem pretty common when I think about each of the websites I see everyday. I especially was amazed by GOTOCHINA. The design is spectacular, and I liked how the navigation at the bottom faded out when it “realized” you were viewing the page for an extended period of time.

    Thanks Smashing for writing this!

    0
  29. 29

    Excellent article. Backgrounds are a fundamental part of any site design and the article does a good job of covering many different techniques that help improve content readability while at the same time increasing aesthetic appeal, all reinforced through numerous examples. Perhaps follow up articles on how to effectively implement many of these techniques would be a good idea for those users who may not know how they are done.

    0
  30. 30

    Thanks for another inspiring article – some of my best ideas from Smashing!

    0
  31. 31

    Mundi Biggest Travel Search in Latino America, made this today! Also with a background image ;P check this out!

    0
  32. 33

    Great article! Love it!

    0
  33. 34

    Awesome!!! just what I need for my Web Design 2 Final. Very detailed explanations of details that makes a nice website. Thank you Smashteam

    0
  34. 35

    Great. Nice post …

    0
  35. 36

    I wish that the illustrations had been links to full screens. I suspect that a number will not be topnotch as to legibility.

    I found many to be too busy. My personal preference is for simplicity and a clearly stated message. I think this attitude comes with age – with which I am too well provided.

    How would it be to submit them , one at a time, for critique? We don’t always see what others do. ===gm===

    0
  36. 37

    Thanks for the artikel, it will help me a lot…I’m still learning, I need to know. I can understand when a few of readers her are bored beause they knew these things already but there are still a lot of people like me who have to learn.

    0
  37. 38

    Thank you very much for this article, very interesting!
    Sometimes backgrounds are underrated… :)

    0
  38. 39

    thanks a lot for great source of backgrounded websites inspiration!

    0
  39. 40

    After 11 years creating websites it takes a lot for me to go “Whoa nice!”

    The Dragon website is a seriously clever and unique way of really making the site memorable and the content easy to find/read. The 3D, while simple, is stunning and the gap makes the separation of links and content really concise.

    Top marks guys!

    0
  40. 41

    A really really nice article, but more in terms of inspirational design that learning. Much of what was documented is already common practice and known by designers the world over.

    However, a very good article none the less.

    TIm

    0
  41. 42

    This one is nice too : http://www.thegreatbeardedreef.com/
    Isn’t it ?

    0
  42. 43

    Great Collections!

    0
  43. 44

    great article.. learnt lot out of it.

    0
  44. 45
  45. 46

    yessssss!

    0
  46. 47

    Almost thought it was an April Fools joke to see Squared Eye on the front page of SM! Ha, it was posted yesterday, so no chance of that. Really glad to see you’re enjoying our choice of backgrounds. One thing that our unique article setup allows us is to choose unique CSS for those pages (like: Branding Squared Eye), so that when I write the next article on the similarities between Craft Brewing and Craft Web Design, I can actually fill the background with beer :P

    Things are getting more fun on the web!

    0
  47. 48

    Good article – lots to think about.

    0
  48. 49

    Thanks for the post. I found a lot of the information to be helpful, and inspiring. Great list of websites to reference again and again. I will be visiting smashing regularly for more great tips.

    0
  49. 50

    Inspirational.

    0
  50. 51

    Best Article on web design I’ve read in a long time.

    0
  51. 52

    Hi folks,

    a couple of days ago i wrote a short blog post on how to achive full ‘body’ backgrounds with mootools:

    http://web.rhizom.nl/03/mootools-supersize-background/

    there also links to other solutions…

    regards Volkan

    0
  52. 53
  53. 54

    The background of this website is white! Just kidding, love this resource, and will be sharing it!

    0
  54. 55

    Great ideas — thanks for the write-up!

    0
  55. 56

    I love this kind of articles. Thanks !

    0
  56. 57

    Great article! Thanks :)

    0
  57. 58

    Muito bom artigo.

    0
  58. 59

    alekos karalazos

    April 1, 2009 12:43 pm

    Great post. Thanks!

    0
  59. 60

    You can add backgrounds to the actual HTML element using CSS. This allows you to use another layer for stacking backgrounds. Using transparency, adding backgrounds to the HTML, body and wrapper can get some very nice effects.

    0
  60. 61

    Matheus Siqueira

    April 2, 2009 12:25 am

    there’s an awesome site that uses background images in an incredible way:

    http://flyingkebab.com

    0
  61. 62

    This is really helpful – I miss posts like these to water my wooly, dry brain. :) Great work, guys!

    1
  62. 63

    Nice article..
    A good background can change the perspective of a website dramatically.
    I use a custom created, simple texture as my site’s background. And it works well.. :)

    0
  63. 64

    Great article! You should add the CannonballCannonball Communications site, it’s background is awesome.

    0
  64. 65

    nice compilation…. thanks.

    0
  65. 66

    great article. thanks

    0
  66. 67

    Clueless newbie, here.

    Could anyone point me to a primer/tutorial on what’s involved in getting backgrounds like this into a new design? (I know that’s not the point of the article, but would be grateful for a good place to learn about this.)

    Thanks.

    0
  67. 68

    Love the article, love the designs. I also would love to see tutorials on how to put these backgrounds into a blog design. Thank you! I am also a newbie.

    0
  68. 69

    nice article.full of inspiration .thanks

    0
  69. 70

    Nince article! Congratulations Matt.

    0
  70. 71

    Love the references, great post!

    0
  71. 72

    nice:)
    th.

    0
  72. 73

    It seems that “web 2.0″ has really taken over – most of these websites feature articles about inspirational websites that are, in fact, websites that feature articles about inspirational websites… and it’s remarkable how much they all look alike (just with different colors). Reading these articles one might get the impression that creativity is blossoming, when in fact, web design is really stuck in a trend that is in it’s fifth or sixth year of repeating and copycat malaise. Maybe the best thing Smashing Magazine could do would be to have an article that lists websites that don’t look like this.

    2
  73. 74

    Talk about being a clueless newbie…I understand how to a seasoned designer this article may be old news, however to someone just starting out like myself, the designs were very inspirational. I also noticed a few requests from others like myself for tutorials. If anyone has gotten a response or can help please point me in the right direction!
    thanks…

    0
  74. 75

    very good :)

    1
  75. 76
  76. 77

    Good resources

    0
  77. 78

    Squared Eye logo and background looks a lot like an illustration from a children’s book.
    LINK

    0
  78. 79

    mNf9VX comment3 ,

    0
  79. 80

    Arul Anchalan.A

    July 21, 2009 3:42 am

    Good Collections!

    0
  80. 81

    In response to Bird Yoshikawa and all other creative freedom fighters: To be creative with website design is good to a point. The 5 year trend “copycat” is for a reason. If we were alien in our design it would reflect on the business. Society does not want to do business with what they do not understand. I strongly advise we as artists to constrain our creativity and stay within these trends. Personally I will look at the demographic first and research the competition. Then I have an idea of how creative will be accepted. Remember, we create for the market and not ourselves. If you are not inspired by these designs, you have hit your limit of what is accepted by those markets. I believe they did well and everything is easily understood. Keep it simple and make it stick. Visually we are trained to be comfortable with branding. Straying too far from the farm and creating an alien will alienate you as well. Suddenly your creative power is weak.

    0
    • 82

      Hey Jesse, who said you could dictate who follows this website? Sorry folks, if you think of web design as creative expression, you’re not welcome at Smashing Magazine. SM is a place where we sharpen our pencils, and sell Cornflakes® to a public that shouldn’t think too much. Time is money, everyone! And money is your only purpose.

      2
  81. 83

    amazing post! I found so many ideas! There are so much inspiration for future work :)

    0
  82. 84

    nice post…

    0
  83. 85

    Hello,
    dear your working is very good and cool dear. It’s very good keep it up carry on i like it.

    0
  84. 86

    thanks to share wonderful template.If you have more templates please send me.

    0
  85. 87

    One word = AWESOME! =)

    1
  86. 88

    Lots of options. Good to know!

    0
  87. 89

    It’s really amazing work, I am inspired by your work and obviously this blog is perfect. thank you

    0
  88. 90

    I want to design some like these

    0
  89. 91

    never seen a post as complete before ! wonderful job, i’m going to stay a while here, thx

    0
  90. 92

    Anyone know of any resources or tutorials for how to have graphics bleed over into the content as suggested in the above example for this url (http://www.webdesignerdepot.com/)

    And can someone give me a brief explanation?

    “Extend the Graphics throughout the Layout
    While just the wrapper background may be enough, you may also want to consider continuing the illustration through the rest of the background. Take a look at the beautiful illustration on Web Designer Depot below. Not only is there illustration behind the top of the wrapper, but there are graphics dispersed throughout the rest of the background.”

    0
  91. 93

    Excellent guide and practice.

    1
  92. 94

    Very helpful! I have a client that is using a bright red background in places (the color of their logo) with quite a bit of white body copy (small font size). While their is definite contrast, I found it difficult to read and aggravating on my eyes. Any thoughts or research on this?

    -1
  93. 95

    Nice post!
    Some of the webpages have been updated now but the pictures still work and I love how you brake it down.

    I’ve started a company and working with designs to wordpress for companies, but not being a designer I have alot to learn when it comes to that part of running my company.
    Going to bring in a designer further on but feel that I want to learn as much as possible about it so posts with this kind of content for free is an immense help.

    Thanks alot!

    -2
  94. 96

    Anita Clark Realtor

    January 6, 2012 2:14 am

    Nearly 3 years later much of this information is still a fantastic resource for anyone looking to create a web presence.

    1
  95. 97

    Hi!

    Thanks for all the example designs. Would it be ok if I use a background for my own project or would that voilate any rules?

    I will return to this page to read responses but I am also leaving my normal mail here if you like to respond, I could not find other way to contact then this

    Thanks!
    //Richard

    0
  96. 98

    hey this are cool pics

    0

↑ Back to top