Texture in Web Design

The following  answers summarize a tutorial on Smashing Magazine’s web site, called The Whys And The Hows Of Textures In Web Design, by Jon Savage and Simon Hartman. 

• Texture is seen a lot being misused, making a website look not as attractive... Instead the website looks "dirty" or "grungy". In reality the texture was just over used and misused! 
•  Textures are bigger and don't repeat, whereas patterns are repetitive small images, and can be tillable...
• Texture can direct the attention of users to certain elements, directing them as a "call to action". It also can separate your context from the rest of the website, highlighting certain things like the title, backgrounds of menu's...
• It can guide the  eye and create divisions in your work. While also creating a good contrast and layout that allows users to process the information, completing the website's style.
• Texture can give a website the "wow" factor, making it memorable and more appealing. It gives your website more of a style and brand,  by adding an emphasis.

Tips

1. Maintain Legibility: Make sure your texture is not to dramatic, in which your text in unreadable, or had to make out.
   
   
2. Don’t Beat a Dead Horse: Don't use texture in bulk because it will be distracting and less appealing.
   
   
3. Practice Means Improvement: Play around with different textures to see what you like best.
   
   
4. If It Serves No Purpose, Take it Out: Make sure your texture is there for a reason, that is benefiting your website, not there because "I couldn't decide", or " i through it in there".. Have a reason to different texture elements.
   
   
   
5. Consider the Effect You Are Trying to Achieve: Picture the end in mine, with the mood your trying to create. Keep the texture to just create the effect, not over-due and kill the mood.
   
6. Collect Resources so you Don’t Have to Search Later: Create a folder with all of your resources like free brushes and styles so you will always have them for backup and future use.
   
   
   
7. Learn Masks: When designing, keep in mind that hiding different layers is benifitial  and time saving.
   
   
   
8. Don’t Sacrifice Quality for Loading Time:  Do not use a poor texture in order for quicker loading time.  Try repeating small tiles of textured patterns.
   
   
9. Choose Textures Logically : Pick your texture based on your website's point and goal, make it relevant that they match.  (you wouldn't put random bubbles background on youtube...)

What are 3 different ways you can come up with your own original texture images? 

1. Take pictures yourself to upload. (bark, wood, dirt...texture is everywhere..)
2. Use a scanner to scan materials you have..(Paper bags, mouse pads, wrinkled paper.)
3. Use tools on the internet! Photoshop has filter effects even in the program. Take a simple layer and merge with multiple. You can take a solid color and add a filter effected to create texture.

GOOD EXAMPLES!

Uinta Brewing

Leaders

Jarritos

Jabberwocky

Jabberwocky project

For this project we had to take the html and css of a page and redesign it only by changing the css. This is an assignment based on Css zen Gardens, where all of the pages you see on that website have the same content (html) and have been designed with CSS styles. 

The original site looked like this below

This is the page we had to redesign with CSS

The page began as a basic layout. The divs containing the header,body,  links, explanations.... and so on. Also it contains all of the text needed. Now we just had to rearrange and decorate. The first process was having a simple sketch to have an idea to grasp and reference.

Want to see the site yourself?

Pictures below or come to the site!

Jabberwocky site 

My Page

This is my sketch of what I wanted to create

This is what my design looked like finished