Designing web pages involves a lot of steps and concepts. Among other things, certain disciplines are essential to web design such as animation, authoring, graphic-design, human-computer interaction, information architecture, corporate identity, search engine optimization, marketing, photography, etc. These things are necessary whether the website be static or dynamic. A significant building block of any website is its layout. Layout involves the dimensions of content and how media is delivered in a stream. For the consumer or computer user, layout simply means the visual content they see once in a certain website. There are several ways to measure content layout, the most popular being pixel, em and percent.

In the context of web design, the issue of form vs function is an important guideline. Some web designers may decide to focus on the aesthetics of a web site and neglect functions such as copyright, search engine optimization, navigation, ease of use, readability of text, etc. A website may look great with beautiful graphics and moving images, but it may not be good at generating sales and leads because of too many things on the screen. With that said, a good web designer should be able to design something that aim to achieve both form and function to provide the best possible result for its owner.

Create your design patterns in just 3 easy steps:
1. Load a random image or upload your own image onto the website;
2. Resize and drag the box to change the pattern;
3. Save your design. You can either link to it from your social profile, or download the pattern directly to your computer.

You can also view many other users’ designs in their gallery, vote patterns and sort them according to their popularity, view numbers, etc. All designs can be used publicly under the Creative Commons license for non-commercial use.

• http://repper.studioludens.com/

• http://www.slicejobs.com/

If you are looking for free high quality grunge background textures for your web design, digital artwork, 3D rendering and print projects, Grunge Textures is the ultimate texture resource where offers more than 1,300 high resolution weathered and worn surface textures in their texture gallery. Textures are listed in categories and you can also easily search or browser them by random, popular and latest. Each image includes additional info such as size, user rating, number of views and related tags. The downloaded grunge textures are high quality JPG files.

• http://www.grungetextures.com/

Pattern Tap is a collection of user interface design solutions from all over the web. You can easily browse, submit and mark patterns you like by categories for example 404 error page, buttons, backgrounds, layout, pagination, navigation, distinction or headers. It’s best for you to learn and get inspiration from other great and quality design solutions. Pattern Tap is here to satisfy and encourage the inspiration needs of your interface design and to be the design tap for your next inspiration need.

• http://patterntap.com/

Design-A-Pattern is a cool online pattern maker that you can create an unique background pattern with totally 24 stylish and trendy images. The pattern maker was developed by graphic designer Ryen Anderson. It’s pretty simple and ease to use. First choose as many as you want favorite images form the toolbox, and then move over them around the canvas to make your prefer pattern design. Click the “background” button to preview the pattern on the browser immediately. When you are satisfied with the design, go ahead to export and download the pattern in JPG format. You can use these patterns as your computer desktop wallpaper or even Twitter background to refresh your visitors.

• http://www.ryenanderson.com/

ColorSchemeDesigner.com, an light, fast and usable online color scheme generator that generates complimenting and harmonious shades of a color, just got a new version with a brand new interface as well as the engine. The V3 also offer more features and improvements like rapidly increased precision and color space conversions, better preview, enhanced scheme creation system, unique scheme IDs and permanent url of the scheme.

Color Scheme Designer Features

• 6 options to create palettes based on color theory including mono, complement, triad, tetrad, analogic accent analogic;
• The main color on the interactive color wheel will be displayed in RGB values. We can move the color by dragging or inserting values or Hue Angle;
• Dynamically updated the preview on the right without having to refresh the page;
• Adjust Scheme feature can calibrate contrast and saturation settings;
• Able to preview your layout in a web palette in shades of lighter or darker;
• Preview your palette with different algorithms for some people who have visual impairment;
• Export your palette to XHTML+CSS, XML, text, PhotoShop ACO or GIMP GPL;
• Each pallet has an unique ID with its own link that you can go back to edit later.
• http://colorschemedesigner.com/

CheckMyColours is a convenient handy online color tool that allows you to verify whether it’s sufficient contrast between the background color and font color to ensure better web standard accessibility. There is a detail information on the complete report includes foreground, background, contrast ratio, brightness difference and color difference. You only have to enter a url that you want to check and then the web application will make the verification based on the algorithm proposed by the World Wide Web Consortium.

Below is the the testing result of Blog Reign, how about yours? Have you checked the color contrast for your websites already?

Testing done on 422 elements
Luminosity Contrast Ratio: 3 failures
Brightness difference: 0 failures
Color difference: 6 failures

• http://www.checkmycolours.com/

BGPatterns is web-based creating application for designers and developers to quickly design tiled pattern backgrounds and textures. You can select a wide range of awesome background pattern graphics that you can use to custom a personal patterns. There is a simple RGB color picker at color section to match your current website design. Under the image section, the image scale, location and opacity is adjustable as well. for canvas section, 5 different canvas styles are available to select and resize, You can also fine tune the texture opacity. And last the rotate section is used to rotate the background image pattern. After you tweak the colors, canvas, image or rotate, you are able to a preview you design immediately. Click to the “Apply background” under the previewed image, your design would be applied to the browser accordingly to see how it looks actually. Of course, if you satisfied your pattern, directly download the JPG image or save to “My Patterns”.

BGPatterns is free for anyone to use and design your very own patterns. Register an account and vote for your favorite patterns. Besides, please check out Favorite Striped Background Online Generators for more impressive background generators on the web as well.

• http://www.bgpatterns.com/

1. Stripe Generator 2.0

http://www.stripegenerator.com/

Stripe Generator 2.0 is the top one stripe generator machine for quickly create Web 2.0 style diagonal, horizontal, vertical stripe background with multiple colors and gradient for your design. It’s a very easy to use tool with different customizable parameters like stripe color, stripes spacing, orientation, colors etc. You can choose up to 5 different color palette for your stripes. Once you register a free account, you can share your stripe design with other designers. Easily browse through the stripe gallery of design community to make inspiration.

2. Tartan Maker

http://www.tartanmaker.com/

Tartan Maker is a free handy tool for create awesome tartan patterns. The maker also was developed by Pop Minds, the same developer of Stripe Generator 2.0. The color, orientation and yarn size can be modified as well as it supports the RGB color code to create a custom tartan patterns. You can also go to full screen to preview your tartan design immediately.

3. Stripe Mania

http://www.stripemania.com/

You can use Stripe Mania to create seamless diagonal stripes for your designs. the UI is similar with Stripe Generator 2.0, you are able to choose the size of the stripes and the spacing between those. You can even add color gradient effect for all of your stripes.

4. Striped BGs

http://www.stripedbgs.com/

Striped Backgrounds makes free striped backgrounds with 5 colors. Just fill in the RGB color codes below each stripe and see the effect immediately. It supports a “randomize” feature, just a click and easy get randomly generated striped backgrounds.

5. Stripe Designer

http://www.stripedesigner.com/

This is a great tool for designers to make some quick simple stripes. Gives a quick preview and you can export as a pattern for practically any popular graphics application.

Unlike other traditional methods of choosing color palettes on computers are limited to flattened two-dimensional viewers. ColoRotate is a decent free online tool for you to create, browse and share color palettes in a coolest visuals three-dimensional color space and design the color palette that fits your needs.

The default setup for ColorRotate is a 3D diamond shape, which you use to set the tint, hue, and the blending for your palette. If you prefer a more traditional appearance, you can switch it over to a series of sliders. You can also create a completely new palette scheme or browse through popular user-created palettes to modify them.

If you create an account, you can save your palettes, but even without an account you can export palettes in .ACT format, which allows for import into Adobe products. There’s also an entire “learn about color” section of the site, giving a good overview of the theory and science behind color and color combinations.

• http://www.colorotate.org/