Backgrounds in design are helpful in visually explaining what content is important, and what’s not. They set hierarchy in elements, and can be effective in “setting the stage” for the rest of the site.
One thing to keep in mind is that backgrounds should be true to the very definition of the word – it belongs in the background, and should always compliment or emphasize the content, not overpower it. Restraint is key.
For the purpose of simplicity, I’ve narrowed down three possible styles for backgrounds: images, patterns, and colours.
One way to add great sub-detail in a design is using a subtle repeating pattern. They are quite easy to make, and are great to use in website backgrounds, in borders – the possibilities vary. Be wary that any horizontal lines will lead to weird flickering on the screen when scrolling vertically – this is super annoying and seizure-inducing (maybe), so please don’t use horizontal lines with a vertically-scrolling site.
Creating repeating patterns is quick and easy:
- Open a new document – make it 2px wide by 1px high
- Hide the locked Background layer
- Make a new layer
- Select the Pencil tool, set the brush size to 1px, and apply the Pencil tool to one of the two pixels in the document
- Press Cmd + A to select all (or go to the menu and choose Select > All)
- Go to Edit > Define Pattern, and give it a name
Here are some examples of patterns I made quickly – they can be super simple to more complex shapes and designs. Practice makes perfect, but experimentation reigns supreme (but don’t go too crazy).
I know this article is specifically about patterns in backgrounds, but I’d like to make this a general thing to consider when using patterns in web design. Overuse is very, very easy. The key is to not get carried away. Whether it’s applying a pattern to a text dropshadow, multiple patterns overlaid on top of each other, or over a button. As I said earlier, restraint is key. Here’s something that will make eyes bleed:
That wonderful photo you took in Sicily from that trip a few years back – remember that? The ocean was crashing against the salt-licked rocks, the sun setting just over the horizon. Good times. Too bad you only had an extremely ghetto Motorola camera-phone at your disposal, so the image is the size of my computer mouse. I’m not going to go into a long diatribe about this, because it’s pretty simple: use a relatively good quality image (around at least 800px or so). That way, if you are stretching it to fit the browser window, people with big screens won’t be seeing huge pixels. And unless it is a seamless background, please please PLEASE don’t tile the image. Please.
Colour. Spelled the Canadian way.
This is a pretty blatantly obvious one: try to use subtle-ish colours for your backgrounds, because anything garish will compete with the content. And that’s just stupid.
There are different effects you can achieve with the use of colour:
Anything that resembles a Geocities theme circa 1997. Also, no marquees anything that effing blinks. No animated GIFs. In fact you’d actually have to go out of your way to somehow mess up choosing a coloured background.
Before I get into the details regarding form styles and best practices, I want to emphasize one thing before we begin. Do not forget that your job as a designer is two fold: to clearly communicate to the user what information they need to provide, and assist them in delivering that information to you. Indicate clearly with a label/tooltip that the user needs to choose a ridiculous combination of letters and numbers, rather than waiting for them to fail first. Leave the checkbox to sign up for your mailing list unselected by default. Don’t be a jabroni.
To simplify things, there are three main elements we need to consider for form styling: inputs (fields, textarea, etc.), selection (dropdowns, checkboxes), and buttons.
Text inputs should be dead simple, and clearly labelled. A label is necessary, whether it is placed beside/below/on top of the input field, the default placeholder text within the field, or included in very near proximity to the field. There should never be any confusion about what information the user is supposed to enter. Icons are optional, but not necessary unless they enhance the understanding of what a field is for.
There are two main types of styling for these fields that work best, in my opinion.
The first is completely clean and simple: just a straight up border around the field, or a plain shape with no border. A great live example of this is on Elliot Jay Stocks’ website. Check that out – it’s hella tidy. One thing to note is the good use of interaction: you’ll notice when you select a field and it is :active, the border changes to a darker shade. It’s also cool to add a subtle outer glow, but that’s purely a style choice depending on the scenario. Here is just one example of proper interaction:
The second has a relatively tight inner-shadow, and usually includes a subtle border. The border should never be lighter than the darkest part of the inner-shadow, otherwise your field will look stupid and blurry. On darker backgrounds, having the form colour change on selection is also good practice. Here’s an example of a very simple inner-shadow:
For another great example of how simple interaction can take a form field from boring to awesome can be seen on the 2011 Build Conference website’s mailing list signup in the footer (courtesy of designer-friend Kyle Meyer).
Two rules: no gradients that are light at top and dark on bottom, and no sloppy inner-shadows.
The first field is totally confusing, since it looks like a bevelled button. It just doesn’t look like something I can enter text into. The second field is getting there and has the right idea, but the inner shadow is way too gradual and unnaturally lit.
Selection & Buttons
There’s not much to say except that when a user hovers over a dropdown or checkbox, don’t make the gradient reverse. Customizing styling for form objects is cool but for elements like dropdowns, checkboxes, and submit buttons, using the OS-defaults is a perfectly fine practice. If you are customizing the submit/send/whatever buttons, just follow the basic button conventions I covered earlier.
I’m also quite aware of the hilarious irony that my own blog commenting form leaves something to be desired. I’m not a developer, so I got lazy with it. I’m fixing it, promise.
Not everything benefits from having a texture applied to it. I’m guilty of using texture in my work, but for the most part I try to only use it in places where I feel the design or design element will benefit from having a tactile feel to it.
A common request I get is to demonstrate how I use textures in my designs. I won’t tell you where to use them and on what elements, because it’s purely subjective. However for those using Photoshop that want to get simple, pretty textures, here you go:
- In a new document, structure it so the layer you would like to apply texture to is below a new blank layer. Since Photoshop is a raster program, and we’ll be using brush sets, this is the quickest/dirtiest way to get textures done.
- Download these two brush sets from friend Liam McKay, and please make a donation – even if it’s only $5. Set 1 Set 2.
- Open the Photoshop brush files, and they will automatically be added to your Brush tool.
- Select the Brush tool (B), and choose an appropriate-looking texture of your fancy.
- With the blank layer selected, apply the brush texture with a dark grey. Set the blending mode to “Multiply”.
- Right click on the layer, and choose “Create clipping mask” – this will ensure that the texture only appears on the layer below it, rather than the whole document.
- Create a new layer, choose a similar brush texture, make the active colour white, and apply the brush to the document.
- Right click on the layer, and choose “Create clipping mask”.
- Now you have two texture layers, one dark and one light. Experiment and adjust the opacity of each texture layer to get the effect you want.
Simple, right? Just be careful not to “TEXTURE ALL THE THINGS.”
The next part of this series will be on Typography. If you have any suggestions for elements and styles you would like to see, sound off in the comments and I’ll be sure to consider them for the series.