Web Design Gone Grunge

August 5, 2008

Grunge Style In Modern Web Design

Most design trends come unexpectedly, evolve over time, become pointless and finally disappear from the design landscape. This holds particularly for web design, which is — just as every other creative field — prone for over-hyping and over-usage of trends. Being used excessively (sometimes properly, but mostly without any reasonable purpose), trends lose their ability to communicate information, express something unique or innovative and consequently lose their visual appeal.

Web 2.0 style is an excellent example for this evolution in design. In the last months of 2007 we’ve observed a clear example of design abuse, as glossy buttons, colorful reflections, 3D-effects, rounded corners and xx-large font sizes could be found almost everywhere (and we’ve presented some examples a year ago). However, currently we’ve been observing a new step in this evolution. Web 2.0 elements start to disappear; they become more subtle, more user-centric, more content-oriented and less loud. Is it a sign for coming changes?

What is the Grunge style?

As Web 2.0 style passes way, it’s time for something new. Few weeks ago we’ve written about the hand-drawing style in modern web-design. And as Web 2.0 style is all about glossy and shiny look, another option would be something rather crude, radical and provoking. Such as the grunge style — dirty look with irregular, nasty, sometimes even ugly and crooked visual elements. Will it establish itself as a trend? Probably not. However, it may be used once some creative and unconventional design approach is needed.

Below we’ve collected everything you would ever need for a perfect design in a grunge style — design examples, free fonts, icons, textures, brushes and even few tutorials.

Examples of Grunge Style

Grunge doesn’t necessarily stand for dirty. Grunge designs may have subtle dirty elements, providing the content with the dominant position it deserves. Let’s take a look at some examples how it might look like. All screenshots are linked and lead to the sites from which they have been taken.

Texture Screenshot
Web 2.0 meets Grunge.

Texture Screenshot
Notice the clear, rigid structure of the site blocks, supported by the grunge style.

Texture Screenshot
Visually appealing design with grunge elements.

Texture Screenshot
Not that visually appealing, however unique and unusual. Wood in use.

Texture Screenshot
Grunge can be used not only in personal web-sites, but also in galleries and blogs.

Grungy Free Fonts

5 Excellent Free Grunge Fonts
A selection of free “grunge” or “eroded” typefaces.

Texture Screenshot

Bleeding Cowboys Font
Free for personal use. PC / Mac OS X.

Texture Screenshot

Grungy Icons

Stretched, torn and dirty: grunge icons at its best. They don’t necessarily fit to all designs, however it’s nice to have them ready to hand once you might need them.

RSS Grunge Icons
A set with Feed-Icons in blue, red and green. Sizes: 128 x 128, 64 x 64 and 32 x 32 px. In .png-format. One of the icons has an ornament embedded into it — you can see it in the right hand side of the screenshot.

Icons Screenshot

Grungy Olive Icons
This set by designed by Dryicons fits not only to grungy cloth and weapons. 28 icons in the .png-format. 16 x 16, 24 x 24, 32 x 32, 48 x 48 and 128 x 128 px. Released under the Creative Commons Attribution 3.0 license. You can do with them almost everything you might ever need to.

Icons Screenshot

Grungy Asphalt Icons
Another set, in a different color.

Icons Screenshot

Litho System
A bright and well-worn system replacement icon set. This collection contains 99 individual icons with large resources for Vista & Leopard.

Icons Screenshot

Grungy Textures

The Best Textures Flickr Group offers excellent textures, among them also pretty colorful grunge textures. More than 900 images offered in a variety of sizes.

Texture Screenshot

Torley Textures presents 11 sets with quite impressive images in the size 512×512 — available in the .png-format.

Texture Screenshot

DeviantArt: Textures is probably one of the largest sources for textures. For instance you can find excellent textures by searching for rust, grunge or wood. The choice is enormous, so you better take a portion of patience with you: advertisements are annoying, but the search is worth it.

Texture Screenshot
Example: Flaky Old Gold

W-Enter Textures
Three excellent collections of grungy textures. Preview (links on that page don’t work, use this link to download the textures)

Texture Screenshot

Texture Screenshot

Textures Download
A number of textures: walls, dirty, wood, graffiti, metal, plastic, stone, sand and cloth. Feel free to use these (mostly dirty) textures for any project, personal or professional. Click any thumbnail and use your mouse to “save image as…”

Texture Screenshot

Garden Grunge Macro Photos
This is what the photographer Neil Creek explored in his garden under the macro-objective.

Texture Screenshot

Urbandirty collects the dirty of cities. Virtually, of course, in form of textures. No, this is not beautiful, but real. The collection includes 291 photos in three sizes. Released under the Creative Commons License.

Texture Screenshot

Free Grunge textures from TextureKing
A growing collection of grungy textures, available for free download. 319 textures.

Texture Screenshot

10 Grunge, Rusty and Dirty Tileable Textures
This is a collection of ten 1000×1000 pixels seamless textures. These textures were created using Filter Forge plugin. And they are free.

Texture Screenshot

Grunge Textures
Craig Jewells texture set contains 211 photos on Flickr. Different themes: rock, wood, rust, floors and more.

Texture Screenshot

24 Free High-Res Textures
By Bittbox. There is also a set of Photoshop brushes made from these grungy textures. There are 12 brushes in the set, and they are all 2500px. Available for CS3, CS1, and in PNG formats.

Texture Screenshot

Grunge Textures
Huge choice, (mostly) high quality. For instance in categories Asphalt, Brick, Concrete, Drains, Vents, & Grates, Graffiti & Vandalism, Metal, Mud, Clay & Earth, Old Machinery, Paper & Cardboard, Peeling Paint, Rusted Metal, Spills & Splatter, Stone, Trash & Garbage and Wood Textures. Hotlist displays the most popular textures.

Texture Screenshot

Grungy Paper Textures

Scanned Scrapbook Papers Set 1 with 14 themes, Set 2 with 12 themes.

Texture Screenshot
Set 2

Lovelamp presents 7 textures which look like wallpapers (real wallpapers, not desktop wallpapers).

Texture Screenshot

PapierScans offers more paper scans; 12 images in high resolution.

Texture Screenshot

4 Free High-Resolution Grungy Paper Textures
The full-size images are in the 2005×3000px resolution.

Texture Screenshot

Grungy Brushes, Corners etc.

Jenn B’s Typographic Grunge Brushes
A random collection of grungy, decayed typographic brushes.

Texture Screenshot

Grunge Brushes
Photoshop set.

Texture Screenshot

50 Free Vector Grunge Corners
Formats: AI, EPS, SVG, PNG, Ill8. Source grunge is also included to let you play around with.

Texture Screenshot

RisingSun Brushes
This set contains brushes of the size 1280×1024px.

Texture Screenshot

Grunge Brushes
Photoshop set.

Texture Screenshot

Dumpster Brushes
8 Photoshop brushes created from photos of old dumpsters. All brushes are over 800px.

Texture Screenshot

Vector Ink & Paint Splatters
Vector images that would make a niece background touch or even a nice finishing touch to top off a grungy piece of art.

Texture Screenshot

XiconTexturesX
15 icon with two large scratchy / grungy textures in .pat (Photoshop Patterns Format).

Texture Screenshot

Grungy Tutorials

Grunge Photoshop Tutorials
An overview of grungy Adobe Photoshop tutorials.

Texture Screenshot

Grungy Cover Design Tutorial
Learn how to create a nice grungy cover design with grungy textures.

Texture Screenshot

(source)

Advertisements

Recycle Your Spam!

August 5, 2008

Are you sick of spam? (and no, not the lunch meat!)  Now is your chance to do something USEFUL with this most USELESS of communication! Simply email a piece of spam to this website and then watch as the latest “special offer” from a  Viagra dealer turns in to a beautiful work of art!  You can then, if you choose, make the resulting masterpiece you wallpaper.

To start – forward your junk mail (only 1 mail at a time) to spam@spamrecycling.com – making sure that you remove any personal details from it such as name and address first.

A couple of seconds later you’ll be sent a link back by the service, asking you to customise the recycling process of your very own spam mail to help turn it into something pretty.

Beautiful and smooth flash environment, this site will at least give you something to do with spam, and spare time!

(source)

Internet Blog Maps

June 6, 2008
clipped from www.sciencephoto.com

Internet blog map
Computer generated map showing relationships between internet weblogs (blogs). Blogs are internet sites where entries are made in journal style and shown in reverse chronological order. Blogs usually feature a large number of links to other sites. The blogging community is known as the blogosphere. This map shows blogs as nodes (white spots) and lines represent the links between them. Popular blogs have larger size nodes. The map reveals the blogging community as divided into two regions. The upper half, mainly socio-political blogs, is denser and more expansive than the lower half, which contains technical and gadgetry blogs.
clipped from www.sciencephoto.com

Internet blog map
This map shows blogs as nodes (coloured spots) and lines represent the links between them. Nodes within the centre are blogs based on technical discussion and gadgetry. Nodes at the outer part of the sphere are non- technical blogs that link to the centre. Colours represent the URL, where blogs hosted at the same domain have the same colour.

Credit:
MATTHEW HURST / SCIENCE PHOTO LIBRARY

blog it

Data Visualization: Paths of air traffic over North America visualized in color and form.

June 6, 2008
clipped from www.aaronkoblin.com

Flight Patterns
The paths of air traffic over North America visualized in color and form.

Links

Animation
Original project website
Buy Prints

Flight Patterns

Flight Patterns

Flight Patterns

Flight Patterns

Awards/Festivals

National Science Foundation 1st Pl. Science Visualization
Japan Media Arts Festival
Ars Electronica
SIGGRAPH
Coachella
Golden Horse Taiwan
iDat Singapore
Media Art Fiesland
Boston Cyber Arts
TED
MediaMatic

Todays Art
This work was originally developed as a series of expirments for the project “Celestial Mechanics” by collegues Scott Hessels and Gabriel Dunne at UCLA. FAA data was parsed and plotted using the Processing programming environment. The frames were composited with Adobe After Effects and/or Maya.
blog it

Geekffiti: When geeks and graffiti combine

February 29, 2008

There is a lot of geeky graffiti out there.  Some are just scribbles on a wall (programmer art being as it is), and some definitely qualify as artwork.      Just take a look at these….

Please wait… and wait, and wait, and wait.

Please wait… and wait, and wait, and wait.

Picture courtesy of Couch media.Yes, we’re waiting, but the **** thing isn’t moving!

read more | digg story


Twitter, Art, and Building Bridges

July 15, 2007

OK… so this is a first. I’m writing about a website. Well, a couple actually. This should be interesting.

So, I’m a Chris Pirillo fan. Yep, I’m a hard-core endorser of Pirillo’s Picks, and Chris Pirillo Live. Chris led me to check out www.Twitter.com, which, along with www.Twittermosaic.com, is what I’m writing about.

What is Twitter.com? You mean you don’t know? OMG! Where the hell have you been?

Twitter is: “A global community of friends and strangers answering one simple question: What are you doing?” You can answer on your phone, IM, or right here on the web!”

Yep, it’s that simple… what are you doing? right now? wherever you are …

It’s the craziest thing. It’s like “express blogging”. More than that, people will start following what you have to say. Now that REALLY blew me away. I’ve been on just a couple months, I’ve posted 1,800 lines of… “express blogs”, one-liners, comments, observations… you name it, I think I’ve probably touched on it. I’m up to 63 followers. People follow my meandering on the web, on their IM’s, on their phones. Of course, for the most part, I follow them back. The thing is, when someone adds me, I take a look at their profiles, and most of the time, they sound a lot like me… or at the very least, they sound like someone I would want to be freinds with. There are some very interesting individuals on there.

That would lead me to twittermosaic.com.

One day I get this new follower, named twitter_mosaics. I check out his bio and “twits”… seems interesting enough, so I add him. One day, he posts a link to a site called twittermosaic.com. I check it out, and am amazed to find the most amazing artistic renderings! Actual mosaics… not just plain mosaics, but beautiful artwork mosaics compiled of nothing but the icons of his twitter followers. I was really knocked over when I got to checking them out and found myself in one of the mosaics! (see Cactus followers)

This week, I was humbled and delighted to find myself in yet another of his fantastic renderings called “Blue Marble, Negative” ( See The Blue Marble, Negative)

It makes me feel like I’m part of history, in some way. Not only that, but as I scan through the icons, I find other Twitter friends there too. It’s almost like a snapshot in time. Twitter asks “what are you doing”, and http://www.twittermosaic.com answers with “these guys were twittering”. It’s a really, really cool thing to look at something that is outside, and larger, than yourself.

As for building bridges….

ok, so I mentioned “followers” and “following” in return. While I’m certainly not going to “name name’s” here, I have to say that I’m making some really good freinds on Twitter. Sure, they started out as “interesting folks”, but some of them are so much more than that. I’m making friends with people all over the globe. From housewives, to CEO’s…. we are all just people. Somehow, we find in each other that “one thing” that connects us. That’s all it takes… and the next thing you know, you find one more thing… then another, and another… and soon enough you aren’t just Twittering to the masses… you are sending direct messages… or you are looking forward to checking Twitter periodically just to see what your “freinds” had to say that day. Just like the things I write, some people make observations, some ask questions, some just say what they did for lunch, or what their dinner plans are. Some people make statements, some people make wishes, and some people make no sense whatsoever at times. The bottom line is, that eventually, you feel like you are part of something. You are part of that “global community” Twitter told you about on the welcome page. It’s a nice feeling.

I’m already making plans to see a new friend in person during my next trip to California. She ’s a really cool lady, and then I found out she makes her own glass beads, which has been an interest of mine as well. I’m going to check out her studio, and take a lesson or two from her while there. Just another bridge I built… from Arkansas to California…. and I built it on Twitter.com.

So check it out. … and if you want to check me out, you’ll find me there as twila_zoned. Throw me a “Twit” sometime!

http://twitter.com/twila_zoned