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.

Screen shot 2009-11-06 at 1.35.54 AM1. Open a new document. For this tut I am using a 600×200px doc. Make sure your color space is setup for RGB.

Screen shot 2009-11-06 at 1.36.12 AM

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.

Photoshop1

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.

Snap

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.

Photoshop

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.

Photoshop2

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

Screen shot 2009-11-06 at 2.00.40 AM

Spiffing Apps

Screen shot 2009-11-06 at 2.05.47 AM

Flowchat

Screen shot 2009-11-06 at 2.01.07 AM

Eddit – Snow Report

Screen shot 2009-11-06 at 2.02.05 AMSimply Tweet

Screen shot 2009-11-06 at 2.05.19 AM

TweetieScreen shot 2009-11-06 at 2.04.48 AM

iPhone App Template Site

Screen shot 2009-11-06 at 2.04.04 AMGo Squared

Screen shot 2009-11-06 at 2.03.06 AMParking App

Screen shot 2009-11-06 at 2.02.27 AM

Birdbrain App

Screen shot 2009-11-06 at 3.03.18 AM

Teehanlax Labs

Screen shot 2009-11-06 at 3.05.30 AM

Beak – Twitter Client

Screen shot 2009-11-06 at 3.06.51 AM

JQTouch

Screen shot 2009-11-06 at 2.12.49 PM

Designer, Maker of Things | Creative Director – @boomtownroi

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote