7 Examples of Texture In Web Design

While the recent trend towards “flat” design emphasizes solid color blocks and clean lines, the ability to use texture effectively is still a necessary and powerful tool in the designer’s toolbox. Your use of texture can range from subtle to bold, from colorful to monochromatic, from a slight accent to a focal element  – there are virtually endless ways to use texture creatively in your designs. Texture can be used to add personality to your designs, produce a more immersive environment, and refine the visual experience.

Here are some examples of texture use to give you inspiration:

Jib

texture01Jib is a design and advertising agency based out of Toronto. Their homepage uses a light wood grain texture to give the site a slight retro feel. This little bit of texture is subtle, but it completely transforms the feel of the site, giving the visitor the impression of age and authority.

You’ll notice that the wood grain spreads across the entire background. While it can be risky using the same texture across an entire page, in this case it works well with the designer’s color choices. It should go without saying, but always pay attention to how your texture choices interact with other elements of your design.

Italiokitchen

texture02Here’s another example of wood grain, but used as an accent instead rather than as a background texture for the entire page. The contrast of these two examples shows how important it is to consider context when deciding how you’re going to apply texture to your design. You can make nearly any textural element work, provided you keep in mind context.

Marc Thomas

texture03Texture doesn’t have to be something subtle you use to subtly alter the look and feel of your site – it can be the focal point of your design. This splash page is pretty much just a name, background, and call to action button, but the texture is what makes it work.

Here the design is enhanced by the map in the background that functions as a textural backdrop, and the little dots that give the site an “old-school” movie projector feel.

Lab Fiftyfive

texture04This example shows how you can use abstract background elements to accent a simple design. The hint of texture in the background gives this simple business card style layout a much needed element of depth.

This site would also be a great illustration of the power of typography, but perhaps that’s a discussion for another time.

Mode 87

texture05The old “photo as a background” technique is often overused, but there are certainly times when it works well. Here, the background photo is blurred, turning it into a more abstract background than if it were clearly defined. The background blurring also drives focus to the foreground element, which also gives the viewer the impression that they’re at a concert, but completely focused on their phone.

While background images aren’t strictly considered “textures”, a background image to one designer might be applied like a textural element to another. Don’t be afraid to try things that are out of the box.

Arkleus

texture06The use of noise here transforms just another background photo into a something else entirely. Note how the combination of noise texture and dark colors here gives the site a mysterious feel – perfect for a launch site.

I Shot Him

texture07What about incorporating real life texture into your designs? Here’s a great reminder that texture isn’t a design “technique” – it’s a very real part of how we interact with our visual world. We’re surrounded by texture everywhere we look – but a great designer can manipulate that texture to create works of beauty, whether in the real or digital world.

It’s easy to get stuck in a design rut where you constantly go back to design elements that have worked for you in the past, but an important part of growing as a designer is to expand your comfort zone and continuously try new things. Hopefully these examples gave you a few new ideas of how you can incorporate texture into your own designs.

This guest article was written by Simon. He is currently working for Jangomail a cool provider.

110 Best CSS3 Tutorials and Examples

I have been publishing articles about CSS3 for a while now. CSS3 opens the door for a lot of unique techniques for websites, that is why CSS3 has acquired an important place in web design. Earlier web designers were forced to use Photoshop for various things like gradient, shadows, etc, and jQuery/JavaScript for simple animations. There was no method to implement these functionalities using CSS. But then CSS3 came with its fantastic features. In this article, I have collected a huge list of the best CSS3 examples and tutorials on the Internet. For CSS Tools, check out this.

45 Best Online CSS Tools and Resources

CSS is the language used to design websites and is used by various kinds of people ranging from ultra professionals to newbies. Below I am sharing 45 of the best CSS Tools or CSS Resources, tools which can reduce a lot of your work or help you in writing the CSS. Many of these are specifically for CSS3 too. Browse them out to know more, do drop by if you also know a ‘good’ online CSS tool.

Prefixr: Make CSS Cross-Browser Compatible in Seconds.


Prefixr: Make CSS Cross-Browser Compatible in Seconds.

CSS3 PIE: CSS3 decorations for IE


CSS3 PIE: CSS3 decorations for IE

CSS3 Layers Builder


CSS3 Layers Builder

Typetester: Compare fonts for the screen


Typetester: Compare fonts for the screen

CSS-Tricks: Button Maker


CSS-Tricks: Button Maker

CSS3 Button maker 1.0


CSS3 Button maker 1.0

CSS3 Linear Gradient Buttons Generator


CSS3 Linear Gradient Buttons Generator

CSS3 Gradient Generator


CSS3 Gradient Generator

CSS3Gen: CSS3 Generator, Tools and Snippets


CSS3Gen: CSS3 Generator, Tools and Snippets

CSS3 Generator


CSS3 Generator

CSS3 Generator


CSS3 Generator

CSS3.0 Maker, Generator


CSS3.0 Maker, Generator

CSS3 Multi-Column Generator


CSS3 Multi-Column Generator

CSS3 Playground


CSS3 Playground

CSS3 Menu


CSS3 Menu

CSS3 Please: Cross-Browser CSS3 Rule Generator


CSS3 Please: Cross-Browser CSS3 Rule Generator

Cascader: Tool that helps developers separate inlined CSS from HTML files


Cascader: Tool that helps developers separate inlined CSS from HTML files

Drawter.com: DrawAble Markup Language


Drawter.com: DrawAble Markup Language

Grid Designer


Grid Designer

CSS Border Radius Generator


CSS Border Radius Generator

CSS33 Drop Shadow Generator


CSS33 Drop Shadow Generator

Sprite Cow: Generate CSS for sprite sheets


Sprite Cow: Generate CSS for sprite sheets

CSS3 3D Transforms


CSS3 3D Transforms

CSS3 Transforms


CSS3 Transforms

Styleneat: CSS Organizer


Styleneat: CSS Organizer

Impressive Webs: CSS3 Click Chart


Impressive Webs: CSS3 Click Chart

CSS Type Set


CSS Type Set

CSS Drive: CSS Compressor


CSS Drive: CSS Compressor

CSS Compressor


CSS Compressor

CSS Portal: Online CSS Editor


CSS Portal: Online CSS Editor

WHATFONT TOOL


WHATFONT TOOL

WhatTheFont


WhatTheFont

Font Dragr: Web App for Testing Custom Fonts


Font Dragr: Web App for Testing Custom Fonts

FontStruct: Build, Share and Download Fonts


FontStruct: Build, Share and Download Fonts

myFontbook.com: Font Viewer


myFontbook.com: Font Viewer

Font Squirrel: @FONT-FACE GENERATOR


Font Squirrel: @FONT-FACE GENERATOR

Google Web Fonts


Google Web Fonts

FFFFALLBACK: A Simple Tool for Bulletproof Web Typography


FFFFALLBACK: A Simple Tool for Bulletproof Web Typography

PXtoEM.com: PX to EM Conversion


PXtoEM.com: PX to EM Conversion

I Like Your Colors


I Like Your Colors

CSS3 Selectors Test


CSS3 Selectors Test

Clean CSS: Optmize and Format CSS


Clean CSS: Optmize and Format CSS

HEX 2 RGBA Color Calculator


HEX 2 RGBA Color Calculator

jsFiddle: Online Editor for the Web


jsFiddle: Online Editor for the Web

CSSDesk: Online CSS Sandbox


CSSDesk: Online CSS Sandbox

Immaculate Portfolio Template v1.0 Now Available

I have made another free template “Immaculate”. This one is a single page website template, with smooth scrolling, has 6 skins included in it, working ajax contact form, useful shortcodes and a lot more. This one also uses HTML5 and CSS3 and is fast loading while being cross browser compatible. You should definitely head over to its release page at https://priteshgupta.com/templates/immaculate/.

You are free(And recommended ;-)) to share and use it. You are free to use it for your personal as well as commercial projects as it is released under New BSD License. If you have any issues related to it, you can contact me via the contact form at https://priteshgupta.com/contact/.

Here is a small preview of one of the skin of the template, go to the Release Page for full details.
Immaculate
You can see the live preview here and download it from here.

Elegant Press Website Template Version 1.0 Now Available

So I have finally completed my website template “Elegant Press”, it has been made using HTML5 and CSS3, it is cross (modern)browser compatible, has web fonts, jQuery plugins, etc. Overall, its awesome and totally free! Its licensed under New BSD License, read more about it here, you should surely give it a try. You can see its release page at https://priteshgupta.com/templates/elegant-press/, you can download it for free from there.

Feel free to share and use it. You are free to use it for your personal as well as commercial projects as it is released under New BSD License. If you have any issues related to it, you can contact me via the contact form at https://priteshgupta.com/contact/. Please note this theme is not made for older browsers and looks funny on them, but who cares?

Here is a small preview, go to the release page for full details.
Elegant Press
You can see the live preview here and download it from here.

Typography Resources

You must have already seen many websites with fancy fonts and advanced CSS text effects. Web Fonts and Web Typography has totally evolved in last 2 years. Using Web Typography now you don’t need to have images for “cool” text effects and it has replaced heavy designs. Now you just need to code a little for a beautiful text line rather than creating its image on Photoshop. And with Web Fonts libraries, using typographies by designers and developers has been made even easier. In this article I will share few good Web Fonts Directory and links to Typography resources.

Finding Web Fonts

With Web Font libraries it has become very easier for designers and developers to find opensource fonts and use them in their websites. There are many good websites to find Web Fonts, I am including “Free” in parenthesis for sites which provide opensource fonts. Some of them are:

Google Web Fonts (Free)

Google Web Fonts

Adobe Web Fonts

Adobe Web Fonts

Open Font Library (Free)

Open Font Library - Open Font Library

Typekit

Open Font Library - Typekit

WebINK

WebINK Web Fonts

Font Squirrel (Free)

Font Squirrel   Handpicked free fonts for graphic designers with commercial-use licenses.

Fonts Live

Fonts Live - Expertly Crafted Web Fonts from Monotype Imaging

Fontdeck

Fontdeck web fonts  Real fonts for your website

Fonts.com Web Fonts

Fonts.com Web Fonts

Fontspring

Desktop and  font-face fonts   Fontspring

exljbris Font Foundry (Free)

exljbris Font Foundry

Webtype

Webtype

CSS3 Text Effects

There are already many tutorials written for various kinds of advanced CSSTtext Effects, you can visit here to see a list of 22 Advanced CSS Text Effects. Please be careful that these text effects might not be compatible with all web browsers. Though all web browsers support typographies very efficiently, and the WOFF is supported by all the major web browsers lately(Firefox 3.6 and later, Google Chrome 6.0 and later, Opera 11.10 and later and Internet Explorer 9).

Further Reading: There is a great article on Steven Snell’s Blog for Web Typography resources, dont forget to read it here.

Using Website Templates: Free vs Premium

Often Web Designers try to provide quick web design services to clients and for a low price to live up the competition. It is recommended in this case to use website templates to save time as well work within the client’s budget. There are ample of templates available for websites online, these templates are free as well as paid(premium). Templates can vary from client to client according to their website specifications/requirements. It is a myth that paid templates are better than free ones. While it is not always true.

Free Templates

In a free Website template you get a well put up website layout, with good CSS and minimal codes. Free Website Templates might not be heavy on JavaScript like jQuery plugins, or at times dont even include a simple image slider or any JavaScript at all. But this doesnt makes it an unfavorable option. You can add jQuery plugins like prettyPhoto for image galleries/lightboxes and you can use Google Web Fonts for typographies. These small customizations take your Free Template to Premium Template standards and are very easy to be implemented on your Template. You can customize these templates to a large extent and change the glance of the template according to your creativity. This would be an example of free website templates site, there are many more, may be many better ones too. But I personally like this one because, the website templates here are clean, well laid out and not messed up, that is minimal. It gives the web designer a good opportunity to work, and be artistic. Thats why for me free templates work as good as paid templates. Though be careful when using these templates, they at times have Copyright/Licensing restrictions.

Premium Templates

Premium Templates are like a ready made websites, most of them already have required scripts like JavaScript for Image Galleries, etc in place, where you just need to edit or add little HTML, they even have the best suited typographies already in them. Some of them have PHP forms also in place for Contact Pages. If time is an important element of your website, then you should go with Premium Templates as they generally require lesser customization, everything is styled in best possible manner with best possible appearance of the website and they have all functionalities needed by a standard website, most of them even provide support too which can help you if you are stuck somewhere. Customizing Premium Templates like changing color scheme, design, background etc is not difficult, they usually have PSDs included in them and at times come with various layout options and color schemes.

Going with Templates

Templates might be an easy way out, good in appearance, saves time, etc, but this doesn’t makes them the best option. Thousands of websites are made everyday, but good Templates are not that many. What happens generally is that those few templates gets used again and again in many websites, which takes away the exclusive feeling of your website. At times the client even mention not to use Templates at all, and fooling them is completely unethical. To overcome these, you should customizing the Template as much as you can, remember over customizing will just end you up in an ugly website. Just make sure your website stands apart in the crowd.

Conclusion

All in all, both the types of templates are good. Free templates just require little more of work than premium templates. Premium Website Templates are like completely cooked dish, and in Free Templates you need to cook little more at times, but you save $ also. In Premium Templates, you generally just need to fit content into it, style a little, and done. Also, if you want to show your real creative and artistic skills, then you can drop the template idea, and can create the whole website yourself, or just borrow a framework layout from your WYSIWYG editor like Dreamweaver.

UPDATE: Check out my free website template Elegant Press at https://priteshgupta.com/templates/elegant-press/.