App Trends: Dark App Site Design

Web Design is an amazing asset to showcase your app. It also gives the public a place to connect outside of the App Store. A trend in those site designs has been dark websites. The reasoning for this? The dark sites show up well on your computer, it also puts emphasis on the app instead of the site design and allows the rest to blend into the background. Here are several examples of them.

How To: Dark Background with Noise

This is a simple tutorial to show how many sites now are using a “noise” background to add a nice texture. This is very simple tutorial that requires Photoshop. The source files are not for download because this tut is only a few steps long to show you, the idea of making a noise background.

1. Open a new document. For this tut I am using a 600×200px doc. Make sure your color space is setup for RGB.

2. Fill the canvas with your select color. For this tut we are using #343434 which is a nice dark grey that would show up well in a browser.

3. Go to Edit > Fill or Shift + F5 to fill the canvas. This just filled the canvas with the color that we had chosen in the step before.

4. We are now going to go to Filter > Add Noise This will pull up a dialog box which then you can send the amount of noise you want.

5. The point of adding noise is not to go overboard but give it a nice subtle pattern where, we can make a nice background image. The amount is very small set at 99%. Make sure the distribution is Gaussian and also make sure Monochromatic is checked. If it is not the noise will be in color and will overpower your backgound instead  of being in the black and white.

6. I then like to add a tiny bit of gaussian blur. This makes the noise a bit “blended” into the background color. I do this so you can’t focus on the edges of the pixels because its pretty distracting if left 100% in focus.

That wraps up how to make a dark noise background. You can experiment with different colors, blurs and noise levels.

**NOTE: **I also would recommend putting a dark gradient or a nice layer mask that makes the noise layer fade in from one side to another. This again makes another subtle background statement. You can also try making a repeating background by making a square pattern and then defining that pattern and using fill again to “fill with pattern” instead of just filling with color.

Examples:

Scraplr

Spiffing Apps

Flowchat

Eddit – Snow Report

Simply Tweet

Tweetie

iPhone App Template Site

Go Squared

Parking App

Birdbrain App

Teehanlax Labs

Beak – Twitter Client

JQTouch