I will admit that I am addicted to using textures in images and that I shamelessly shoot pictures (often with my cell phone camera) of anything I see that piques my interest. This sometimes annoys my friends as I stop walking to shoot a picture of a weird crack in the sidewalk or paint peeling off the underbelly of an airplane at a naval museum. I actually have a pretty large stockpile of these images, but am always excited to find new resources. As such, the spotlighted websites for this week have to do with free texture resources and articles about design trends in the textural sphere.
All about grunge:
Sven Lennartz wrote an article for Smashing Magazine in early 2008 about grunge style in which he suggests that it is perhaps a reaction against glossy Web 2.0 styling trends. He goes on to state, "Will it establish itself as a trend? Probably not." I have to differ with his opinion here since I think the grunge look is actually quite pervasive, and probably was even two years ago. It comes in various forms, some subtle, some not so much. It incorporates anything from "dirty" textures to wallpaper textures, ink splatters, broken borders (and sometimes layers combinations of several or all of these textures). I see it on websites and in print designs quite frequently. Some of the more subtle uses look quite pretty and a little less dirty, but have unmistakable elements. I also see it in certain fashions (just look at the clothing and accessories in a Hot Topic store for lots of examples. Not a trend? I have seen lots of MySpace users employ extremely grotesque versions of grunge style, and to me that use by non-designers signals that the style has truly permeated the web.
Despite the misguided assessment of the scope of grunge, the Smashing Magazine article showcases a lot of really great resources for finding grungy icons, borders, and backgrounds. It may be becoming a bit clichéd as a style, but I do think that when handled lightly it is still a style that can be very effective in adding interest to a website. And yes, I am on the grunge bandwagon as I included homemade ink spatters as button elements in my personal website.
Check out Smashing Magazine for great grunge resources here:
http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/#comments
Another resource for grunge backgrounds is the Grunge Textures website. This website is actually a perfect example of the subtle use of grunge elements to add interest to a page without overwhelming viewers. The main page showcases some intense textures such as bright graffiti and hard, cracked mud. Each of the nine textures link to categories of elements, such as metal, mud, wood, and so forth. The genius here is that from page to page the website features great bold textures, often in thumbnail batches, that do not compete with the website's own grunge styling. This is because the background looks like paper with a very light speckled pattern; the top and bottom edges of the main content block look like torn paper and reveal a header and footer that has a more pronounced, but still subtle, paint peeling pattern. Beyond the textures, the color scheme is a neutral monochromatic palette in shades of brown and tan. This creates a neutral space to showcase the bright and often chaotic texture graphics featured on the website. Grunge lettering at the top of the page helps to solidify the message that grunge resources are the content. Overall the site is fascinating because the grunge styling really does directly communicate the content and message of the website.
The backgrounds at Grunge Textures are all free for use in a variety of media (I love shared resources on the web!):
http://www.grungetextures.com/
The Texture King website offers more free resources and has a category called "grunge" that showcases some truly beautiful stains, weathered sidewalks, paint splatters, and the unforgettable image #6, which I believe is a mold-spotted concrete surface. Besides the specific grunge category, many — probably most — of the other categories would also make good grungy backgrounds. Dirt, concrete, rust, paint, and stone are all begging to be incorporated into this look.
Much like the Grunge Textures website, Texture King displays a grunge design employed with considerable restraint. The main content and header areas are white with gray and sparingly-used orange text. All the edges are crisp and clean which creates a nice contrast with the grunge elements of the background area. The area behind the page contains these grunge pieces, which are rendered in various shades of white and light gray. The pattern consists of small, lightly colored diagonal lines that look a bit like small tire imprints. This creates visual interest and draws your eye across and down the main content area of the page. A slight staining effect is visible at the top edges of this background area, and doubles as a drop shadow effect. The combination of clean lines and small grunge touches really makes this site inviting to view and presents a neutral surface in which the downloadable textures can shine.
Check out the free stock textures at Texture King here:
http://www.textureking.com/
graffittied walls, and paint peeling off metal rails when you check out this site.
As for the design, this site definitely has a rougher look and the logo text, black background, and featured artworks scream metal band to me. This is probably an appropriate association. I do like the gallery display as you can see 30 attractive thumbnails simultaneously and the black background creates a nice neutral space for showcasing these images. Two features really stand out however, and make this gallery fantastic. First, each thumbnail is a rollover trigger that automatically displays a slightly larger image. This is great because you can see more details without committing to actually clicking on anything. Once you do click, however (and you get a choice of large, medium, or small preview), a fantastic feature opens up. On the detail page is a larger view of the image, along with a color swatch detailing the common colors in the image. You can download the swatch just like on a color picker website. This is fantastic because it makes using similar colors pulled from a base image extremely easy; what better way to create harmony in a web design. I really love this feature because it saves the step of uploading the image into a color website in order to generate such a swatch. Awesome.
Not so awesome, however, is that the website is left justified, leaving all the empty space visible on the right hand side of my browser. Now, you may be thinking this is nit picky, that I can just resize my browser if it bothers me, and so forth. This is technically true, but we judge websites all the time on these seemingly small details and they do take away from the overall design effects. See how much space I spent writing about this issue here? It is also the last thing I mentioned and probably went a long way towards eclipsing the good features I mentioned just before it. It is bothersome to see something that is unbalanced for no good reason and it isn't that hard to center your website — just do it.
Check out Urban Dirty here:
http://urbandirty.com/
And to end, there are a few more resources to mention. The following websites also offers free textures — some of them good, some of them about as obnoxious as I've seen (but I guess there's a good use for everything). Two Flickr pages, Seamless Free Textures and Best Textures (the latter is actually a group of around 3,500 contributors) offer a lot of choices. Since Fickr groups are somewhat less manageable than dedicated sites, Best Textures has some general images (like portraits) incorporated into the mix. I guess some people forgot how to read… Anyway, regardless of these little slips, both pages offer a lot of resources, as in over 8,000 texture images in one place. They are free, of course, and to me this represents the best of the Internet. Communities of people that design things because they can and then contribute to the broader world by making resources available to anyone. I really love it.
Deviant Art is an online store that showcases artist's works and has a feature that allows users to browse resources that were created by various users by general categories, such as texture. I'm not certain that all of these resources are free, however, so this site is probably best reserved for inspiration purposes. I saw some interesting ideas there and many would be easy enough to replicate and more importantly, change up into something unique.
Check out these three websites here:
http://browse.deviantart.com/resources/textures/
http://www.flickr.com/groups/564994@N20/
http://www.flickr.com/photos/torley/collections/72157594588432564/
No comments:
Post a Comment