Oct

4

2011

Backgrounds

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.

Patterns

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:

  1. Open a new document – make it 2px wide by 1px high
  2. Hide the locked Background layer
  3. Make a new layer
  4. Select the Pencil tool, set the brush size to 1px, and apply the Pencil tool to one of the two pixels in the document
  5. Press Cmd + A to select all (or go to the menu and choose Select > All)
  6. Go to Edit > Define Pattern, and give it a name
RIGHT

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).

WRONG

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:

An Image

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.

RIGHT

There are different effects you can achieve with the use of colour:

WRONG

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.

Form Fields

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.

Inputs

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.

RIGHT

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).

WRONG

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.

Texture

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:

  1. 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.
  2. Download these two brush sets from friend Liam McKay, and please make a donation – even if it’s only $5. Set 1 Set 2.
  3. Open the Photoshop brush files, and they will automatically be added to your Brush tool.
  4. Select the Brush tool (B), and choose an appropriate-looking texture of your fancy.
  5. With the blank layer selected, apply the brush texture with a dark grey. Set the blending mode to “Multiply”.
  6. 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.
  7. Create a new layer, choose a similar brush texture, make the active colour white, and apply the brush to the document.
  8. Right click on the layer, and choose “Create clipping mask”.
  9. 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.


  1. Colin Harman says:

    A friend of mine said regarding texture: “Texture should make me want to touch it, but not make me afraid to use it as toilet paper.”

  2. Tom says:

    Really enjoying this series Tyler. Quick, easy, light read of all the basics we should know but it really helps to be reminded of regularly – thanks!

  3. Bob says:

    Excellent tips! Thanks for sharing!

  4. Francesco says:

    Really useful article, thanks!

  5. Great post, lots of good details to keep in mind while designing UI.

  6. Javier Lo says:

    A very nice read it is -Yoda Like Voice-

  7. [...] The UI Guide (Part 2: Backgrounds, Forms, and Texture) (galp.in) [...]

  8. Vanessa says:

    Awh, went to check out those textures and the site isn’t working. Sad face.

    Good read + very informative, even though I’m reading this a month after it was posted. :x

  9. Ekologist says:

    Good read + very informative, even though I’m reading this a month after it was posted.
    +1

  10. Stephanie says:

    Keep writing your UI guide! It’s fantastic. I’d love to continue reading.

  11. if you have any questions or would like to inquire about this position please email us at traveljobsmedicalconnections.

  12. All of this is evocative of the later games, and the forms are there

  13. It helps to know that your articles should be good enough to make online users read them and patronize them.

  14. Want good and best practices on web form design take a look at “Web Form Design” by “Luke Wroblewski”
    Great book for UI practices on forms; of course this book a slightly out dated and some of it is common sense. So buyer beware … it’s still good information and i’ll always keep it in my library for a reference.

    http://www.amazon.com/Web-Form-Design-ebook/dp/B004VFUP2I/ref=sr_1_2?ie=UTF8&qid=1325021312&sr=8-2

  15. Kate says:

    Absolutely amazing articles – clear, concise and up to the point. I really like your writing style – engaging and easy to grasp. That’s be great to read more on design from you. Maybe even a book ;)

    Thanks for informative posts. Time very well spent.

    Sincerely,
    Kate

  16. [...] The UI Guide | Part 2: Backgrounds, Forms, and Texture » Galpin Industries – Pixels Straight From C… 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. [...]

  17. [...] The UI Guide | Part 2: Backgrounds, Forms, and Texture » Galpin Industries – Pixels Straight From C… 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. [...]

  18. las artes says:

    method allows you to simulate a click on a form field. Checkboxes get toggled, radios selected, and so on. Unfortunately Mozilla and Opera haven’t added this method to file upload fields. I wonder why, adding it is not really a security risk since the worst that can happen is that the file selection window pops up.

  19. Sugel says:

    comScore handpicks its users based on age, location, income, etc., which gives it a broad representation of web traffic and demographics, something other traffic ranking services don’t. Because of the expensive way in which the data is gathered, comScore’s traffic and rankings aren’t publicly available besides a top 100 list. Users, and marketers alike, have to pay for the data. What you get though, is of high quality.

  20. We’ve made lots of small tweaks to the default theme to make it tighter and brighter overall. No detail was overlooked: the focus style is now stronger for keyboard navigation, and contrast has been adjusted for platforms like WP7 that don’t support gradients.

  21. vclick events don’t have pageX/pageY defined on them ( Issue 3815 ) – Modified createVirtualEvent() so that it uses the mouseHook properties if the original event type starts with “mouse” or “click”. The original regex was only looking for “mouse”.

  22. Arti says:

    Hey Tyler,

    Thanks for this awesome read! Love your simple explanations and I’m a newb, so I really get a lot of value out of these.

    Firstly, there is a difference between how to use something (that psd tuts tells you) and the challenges designers actually face everyday with hours of photoshop tweaking. I’m trying to get my hands dirty from user experience to interaction to UI design not coming from a design background. I don’t have one thing to start from though. Keep at it coz I love reading this stuff.

    There is a wealth of info online but if you can recommend me sites/tools/etc for designers specifically that you used when you first got started is what I’m looking for. Any good sites for best practices on psd/illustrator stuff (other than psd tuts) for beginners you can point me to?

    p.s Sorry for the long comment!

  23. zhuaiygbm says:

    Happen to an expert. When you are awfully obviously informed about the work or services you put up for sale, customers are much more likely to loop to you in the event they prerequisite some help. Evermore pressurize foolproof that you do not recumbent to your customers nigh your conception, as they see fit come up with pass‚ and you transfer lose credibility.

    If you from artistic talent, you can start a task providing graphics design services to particular businesses. Many state businesses like to livelihood with unsolicited designers measure than larger companies because they pocket more springiness and signed service from the independents. This is the same area where you keep an advancement upon the larger companies.

    Do not think too little of the power of word-of-mouth marketing for your home business. Again room charge cards on you, and pass more than undivided along to anyone who seems interested or knows someone who may be interested in your products or services. Hardly any sexual motion could afford an occasion to come by a client or customer.

    As you upon developing your inaugural nursing home business intend, persuade secure that you are also creating a well-crafted backup plan. In any transaction there are things that could happen and well-spring your charge to take a leak awry. You craving to make safe that you accept a backup direct in the interest of these issues so you aren’t heraldry sinister unprepared.

    In combining to being your own boss and vocation all the shots, Owning and operating a responsibility from your haunt is an opening to tangible the duration you inadequacy while getting paid to trace the things that you are most passion about. Be modelled after the par‘nesis in this article to use to advantage a healthier placid business.

  24. mercadee says:

    Wayfinding Sans This type family, designed by Ralf Herrmann, sets a new standard for legibility in signage and wayfinding. Herrmann started this project with extensive field studies, driving tens of thousands of miles to explore the legibilty of road signage typefaces in dozens of countries around the world. The results of these explorations, along with an extensive study of relevant scientific legibilty research, formed the theoretical framework for creating an “ultimate” signage typeface. Wayfinding Sans includes 400 glyphs in one style, with arrows. To get the font, a tweet or Facebook update is required.

  25. Need more traffic? See this crazy web traffic service that can get thousands of targeted visitors from search engines to your galp.in website hands free!

    You’ve probably already know that creating great content is only half the battle when it comes to running a successful website. The second half of the equation is DRIVING TRAFFIC!

    With this service, you can forget about the tedious process of driving traffic because they do everything for you so you can focus on more important things, like dealing with the flood of traffic to your site!

    So here’s how it works: Promotional post about your site is posted on up to 100’000 other websites on internet, that way creating backlinks to your site from other sites, when search engines index these backlinks your website is noticed as extremely popular so search engines have no choice, but to skyrocket your site on first page for your site targeted keywords, so your customers can easy find your website and visit your site.

    And that’s not all! this service is SUPER AFFORDABLE and will direct thousands of new visitors to your site in just days, GUARANTEED!

    You can check it out here:
    http://xrumer-services.org
    Best,

    Alex

  26. backlinks says:

    Most powerful&cost effective SEO and website traffic service in world get up to 100’000 forum backlinks now!

    Your galp.in website will get incredible online web traffic using best backlink blast available.

    We are able post your custom message up to 100’000 forums around the web, so your site get thousands of backlinks
    and as a result your web page will be ranked #1 positions in search engines and your website will get great amount of free, targeted online web traffic from search engines in shortest time.

    Most affordable and most powerful service for web traffic and backlinks in the world!

    Are you ready to for massive traffic flood to your site? If yes then Order now: http://mass-backlinks.com

  27. qeNWzNGAMVAvDaqcTd 1520

  28. certainly like your web site but you have to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very troublesome to tell the reality however I will surely come again again.

  29. Google says:

    Google…

    Every the moment inside a even though we pick blogs that we read. Listed beneath are the most recent sites that we pick…

  30. Affiliate Beast Mode plugin…

    [...]very couple of websites that happen to become comprehensive beneath, from our point of view are undoubtedly well worth checking out[...]…

  31. software reviews…

    [...]one of our guests not long ago proposed the following website[...]…

  32. the four hour work week…

    [...]check below, are some absolutely unrelated websites to ours, on the other hand, they are most trustworthy sources that we use[...]…

  33. Best Electronic Cigarette…

    [...]Here are a number of the internet sites we advocate for our visitors[...]…

  34. Mike Dillard says:

    Mike Dillard…

    [...]the time to study or take a look at the content or web sites we have linked to beneath the[...]…

  35. Remove tinnitus…

    [...]the time to study or visit the content material or websites we have linked to below the[...]…

  36. Irish Jewelry from Ireland…

    Hey very cool website!! Man .. Beautiful .. Amazing .. I will bookmark your site and take the feeds also…I’m happy to find numerous useful info here in the post, we need develop more techniques in this regard, thanks for sharing. . . . . ….

  37. Mike Dillard says:

    Mike Dillard…

    [...]The details talked about inside the write-up are a number of the ideal offered [...]…

  38. facebook fans…

    [...]just beneath, are a lot of completely not connected web sites to ours, however, they’re surely really worth going over[...]…

  39. Writing Service…

    As I web site possessor I believe the content matter here is rattling great , appreciate it for your efforts. You should keep it up forever! Good Luck….