Auto Draft

Showcase of Fresh Texture-Based Web Designs

Aug 3

/* */ if(window.OA_zones === undefined) { var OA_zones = []; } OA_zones['Content Ad'] = 11; /* // */

Over the past few months, the use of extreme textured images in web design is starting to die down. It was used so excessively that is was almost everywhere we looked when browsing the web. Other developments, such as the use of minimalism in web design and various other styles have slowly pushed the dramatic use of texture out of the window.











It does however still play a big part in the world of designing for the web, as this showcase presents. Although there are still some pretty excessive use of texture in a few of the following designs (but hey, it does look good!), the majority of them use texture as a subtle touch-up to their backgrounds, headers or footers, adding that minor but ever-so-important touch of visual interest — why have a plain white background when you can add a tiny speck of texture that just makes your design pop?

This showcase presents thirty-eight fresh examples of texture in web design, from creative design agencies, modern restaurants and even plastic film packaging companies. Let us know your favourite design!

Living For Art

Jasmin’s Living For Art portfolio uses a very delicate crumpled paper texture in the background of his web design, making the sharp, white typography pop from the page.

Progressive One

The Progressive One design uses a texture and pattern combination to pull of this great dark-themed website, making superb use of contrast to make the site easy to view.

In Safe Hands

In Safe Hands is a very light and simple site, with a strong illustrated style, featuring a vector style logo. The background uses a very light texture, only very slightly darker than the main background color. This helps add a little more interest to the design, keeping it fresh and modern.

Grafitio

Grafitio is one of the heavier-textured designs in this showcase, which is very suitable for the type of site it is and makes it incredibly easy to remember. Heavy texture is used throughout the whole design, but is especially heavy on the left-hand side of the site and in the header, bringing out the best in the logo and navigation. Texture is also used for the area beneath the header, making it seem like the design is in fact produced using real-life elements such as paper.

Aggressive Panhandler

Aggressive Panhandler, in my opinion, manages to pull off textured design, sleek design and minimalism design all in one go. The design uses some great newspaper style typography, with sleek sidebar headers and all topped off with some nice textures used in both the content background and main background.

No Creativity Blog

The No Creativity Blog is quite an odd design, but works perfectly well, making use of scaled-down textures to create a collage style background, fitting in nicely with the digital header collage.

Urban Influence

Urban Influence don’t actually use texture in their design, but do however make use of it in their image slider in the header. Using texture in these images really helps add some depth to the site, and makes it much more visually appealing. The images also make use of bright attention-grabbing colors that only help to add more interest to the design, and also helps to bring out the gorgeous oranges, blues and browns used throughout the design in the headers and active links.

Clickfarm Interactive

Clickfarm Interactive I’m sure would just be a drop-dead beautiful design without the texture – with it, it’s even more amazing! The texture used in the background image brings the clean content background out from the rest of the design, and overall just complets that “farm” look.

Douglas Menezes Blog

Douglas Menezes Blog design is probably one you’ve seen before, known for its dramatic use of opposite color’s and geometrical shapes. The texture makes this design go bang though. As the texture has been applied to the design using the Overlay Blending Mode (or a blending mode very similar to) in Photoshop, it adds some different shades to the color’s, making it indescribably excellent.

No Sleep For Sheep

Dark designs are sometimes hard to pull off, especially when trying to embed strong, heavy texture. No Sleep For Sheep, as well having an interesting name, have a really interesting design, making use of a blue grungy texture to act as the sky behind the silhouettes of a curvy hill and plenty of sheep.

Maverick Ads

Maverick Ads have gone for a elegant grunge look, using swirls and curvy line vector-style elements alongside textured stone images to produce an interesting and unique style.

Creative Spaces

Creative Spaces have a rather strange but very creative design, featuring floating objects, walls with clouds, a human with a deer head and several great uses of texture, including a grainy stone texture for the walls, and real wooden flooring to make the design seem as (strangely) real as possible.

Crush Lovely

Crush Lovely is a very simple, sleek and modern design, but makes great use of a subtle noisy texture background to make the clean objects and bright images pop from your screens.

Five Points Interactive

Five Points Interactive use the much-loved notepad-style design, using real paper textures and watercolor textures alongside beautiful floral patterns and paperclip images to pull together a lovely theme.

Michela Chiucini

Michela Chiucini’s design is another one that uses scanned in textures to produce a life-like theme as if it had been put together using physical objects you would see and touch almost everyday. The use of cardboard texture is used for the footer design, setting a lovely backdrop for a list of recent articles and a Flickr feed.

CSS Tinderbox

This newspaper-style design features some great vintage-looking typography and images, and is very minimal, mainly depending on it’s strong typography to attract and keep viewers. It does use a pretty subtle paper texture though, which helps draw out the typography, and adds a lot of visual interest to the design.

Blackwave Creative

Blackwave Creative’s site would look perfectly great without any use of texture, however it does really suit the design, and helps to bring out the typographic navigation bar at the top of the design, as well as some other elements such as the curling piece of paper pinned to the header.

The Man In The Sea

The Man In The Sea have yet another minimal and simple design, making use of some sweet typography and columns to add some unique visual interest to the design. The use of heavy texture merging into a much more subtle texture in the header/main background makes the rest of the design look even better, especially as it is greyscale, making the strong orange typography even more beautiful.

Maxim Design

Maxim Design (again) use a pretty strong, greyscale textured background to help the large distorted header typography stand out.

Gnutoff

Gnutoff have a very unique and slightly odd design with a lot of empty space in the middle of the page. The design is very limited in terms of color, sticking to just black and red for the images and typography in combination with a washed out yellow textured background with red splotches.

Street Youth Couture

Street Youth Couture’s website is possibly the only one here that may use texture a little excessively, however it does suit there grungy look and graffiti-style logo very well, and therefore is just about pulled off. The greyscale, low opacity brick texture looks great behind that large logo and distorted, grungy typographic navigation menu.

Giraffe

Giraffe (a big restaurant chain in the UK) is one of my favorite website designs in this showcase. The restaurant focus on great food and the music culture, therefore leading to a magnificent design making good use of a strong and very colorful color palette, great effects and of course that subtle texture throughout the site in the background and various vintage-style images.

Fundo Los Paltos

Fundo Los Paltos’ design is very nature inspired, with some great header images, a colorful logo and some silhouette-style branches over hanging the top of the design. A soft-grunge texture is used in the background to complement these features, and it works great!

Papini Plast

Papini Plast uses a repeating, subtle paper texture, adding some lovely depth to the overall design and helping to bring out those awesome images.

Cesky Culibrk

Yet another newspaper style design, and this one also uses a crumpled paper texture to make the newspaper look like a real-life newspaper you’d buy from the shop. The newspaper itself is also placed on top of a texture, giving the whole design more depth and the ability to use more realistic highlights and shadows.

Agencia De Publicidade Brasilia

Agencia De Publicidade Brasilia uses a subtle and slightly noisy crumpled paper texture in the background of their very blue design to add a bit of interest and to help those clean-cut vector shapes stand out from the background.

Digital Vision Queenstown

Digital Vision Queenstown’s web design uses some sleek navigation and buttons in their design, as well as a couple of other web trends. A lined paper texture has been used in the background to produce some low-opacity vertical stripes in combination with a noisy texture to help bring out that gorgeous grey typography.

The Bold Italic

The Bold Italic design has a very popular vintage-style trend going on, using a bunch of low opacity textures built upon each other to produce one awesome looking theme. The use of bold typography and a black and white portrait photograph really tops it all off!

DNA to Darwin

DNA to Darwin is another vintage style design, but focusing on a completely different (older) decade to the website featured directly above this one. This theme uses sepia style photographs, washed our color’s and a similar style of texture in the background to make them all fit into the design nicely. There was no such thing as white back in the day of Charles Darwin!

Design Swap

DesignSwap’s main trend used in their design is “vintage”, making use of large, bold typography with hard, subtle drop-shadows to make the headings very appealing. All of these great features themselves are set on a lovely creme-colored, noisy textured background, helping to finish the design off nicely.

Slavik Dizajn

SlavikDesign use a grungy red/brown texture in their background to help bring out their clean and bright typography and content area.

Pixel Creation

PixelCreation is yet another site that use paper and cardboard textures in their design to produce what looks like a hand-crafted website, using real cardboard and everyday elements to create a friendly and fun environment for their site.

WeGraphics

WeGraphics use the ever popular subtle-noise texture in their background to help bring their content to life. Unlike others however, they also use another texture at the same time, making some areas of the clean textured background lighter in some places, and darker in others, creating more depth and visual interest.

David Hellmann

Guess what? You’re right! David Hellmann’s design is one more that uses grainy cardboard textures to create an interesting textured background for his web design. This works tremendously well with the other colors in the design, as well as that collage-style look with the wonky thumbnail images in his portfolio section.

14 Styles

14 Styles do something a little different. Their site is very clean and actually quite minimalist compared to most here, making use of white space in the main content area and clean typographic elements. The header features a nice blue/grey checkered pattern, and is complete with some noisy texture graphics to just give it that little bit of extra “oomph!”.

The Tate Movie Project

The Tate Movie Project site is a very new one, and uses a bunch of really cool, interactive elements, including the header which is one big clickable-experience to get the users interacting and spending more time on the site. The site features loads of textures in a bunch of different places, such as the main background, the content background, and each little element within the sites content.

New Adventures in Web Design Conference

The official website of the New Adventures in Web Design Conference (held in England early next year) uses some superb CSS effects to create interactive elements, and pulls the whole vintage-style look off with some superb grainy card and paper textures used in the main background of the site.

DesignGiveaways

DesignGiveaways is a very clean and minimal site, using a very subtle but noisy tile-able texture in the main background of the site, helping the main content area and menu stand out more.

If you enjoyed this post, you’ll probably like (and want to check out) some of the previous posts from the Smashing archive:

• 
  Showcase of Beautiful Textured Web Designs
  


• 
  100 Beautiful Free Textures
  


• 
  Textures in Modern Web Design
  


• 
  Textures and Patterns Design Showcase
  

Fantastic Information Architecture and Data Visualization Resources

Jan 15

Information architecture can be a daunting subject for designers who’ve never tried it before. Also, creating successful infographics and visualizations takes skill and practice, along with some advance planning. But anyone with graphic design skills can learn to create infographics that are effective and get data across in a user-friendly manner.

Below are a collection of resources to get you going down the information architecture and data visualization path. Whether you just want to become more familiar with infographics and data visualizations for occasional use or are thinking of making it a career, the resources below will surely come in handy. There are also some beautiful examples and more roundups to see even more fantastic graphics.

1. Information Architecture Design Sites

Information architecture can be so complex, it’s no wonder there are entire sites dedicated to it. The sites below range from sites of individual information architects who share resources with their colleagues, to professional organizations, to design sites that include extensive information architecture resources.

Info Design Patterns

Stunning Abstract Black and White Photography

Jan 14

Abstract black and white photography is a popular form of art that lets you focus on your imagination and allows you to give attention to texture and context. With Abstract Black And White Photography, you can get an amazing charm and feel that mainly focuses on the feelings behind photos. We hope you like the abstract beauty of the remarkable photos presented below.

Abstract Black & White Photos

1999 CROWD

Gorgeous Typography Examples in Advertising Design

Jan 13

Typography, the art of arranging type, type design and modifying type glyphs, is often considered as a major part of promotional material and marketing. If you use typography properly, you can not meaningfully convey the message, but also strengthen the brand of your company.

Typography has always been very inspiring and nowadays many artists experiment with type treatments to achieve inspiring, unusual and beautiful results. So, without a further ado, let’s take a look at 50 tremendous print ads that use the power of typography to communicate with potential customers.

Typography Examples in Advertising Design

Complot Creativity School – Typography Course: H

How to Make Yourself Stand Out as a Freelancer

Jan 11

The cybersea is full of freelancers all out to make their mark and their money to keep their freelance fires burning. With an abundance of opportunity pouring in to the market, getting yourself out there and making sure you are heard and seen will help you sway those opportunities more your way. But with so many others striving to do that same thing, how is it you can rise above the multitudes to still be singled out? Not to mention trying rise above the agencies that are further populating the waters, and complicating the issue.

Creative and Unusual Layouts and Navigation Designs

Jan 8

/* */ if(window.OA_zones === undefined) { var OA_zones = []; } OA_zones['Content Ad'] = 11; /* // */

In this article, we’ll showcase website layouts and navigation structures that really
break the mold. The designers of these websites have seen dozens of clone websites out there but have sought their own way. The unusual website layouts and navigation that results can either be very successful and innovative or disorienting for visitors. You decide. When you browse the showcase, think not so much about functionality as about you design and develop the way you do.

Unusual Layouts

Breaking industry conventions is not always easy. Still, many designers push on to find fresh ideas and ways to innovate. Have you ever driven down a street where the homes perhaps have different-colored paint on the shutters but essentially look the same? The Internet can be the same, with designers cloning the same layouts day in and day out. But it is amazing what can be accomplished by a simple shift in the placement of website elements, while keeping the website familiar and easy to use.

Unusual Layout Best Practices

There are no “standards” for designing your own unusual layouts, only guidelines to keep you on track. The style is defined by freedom from conventional standards and by placing items where visitors are not trained to find them. Here are some ways to achieve an unusual layout:

Let your content articulate the design. Try even five or more columns without aligning everything perfectly. Prioritize usability, with layout as a secondary consideration. Let things flow naturally.

Let your users view content horizontally or vertically, without making additional content hard to find. Bring an element of surprise and excitement when presenting crucial content.

Keep in mind that
users tend to focus on faces. Guide them with visual imagery to help them find content. Also, make sure the layout does not disorient visitors. The experience should be new and delightful.

Unusual Navigation

Developing a unique navigation scheme that does everything but conform can be a huge task, almost the Mount Everest of Web design. Not many people take on the challenge, and not many who do succeed. In this section, we cover both the victories and defeats. Unusual navigation requires a balance between innovation and practicality. If you lean too far towards innovation, the navigation can become frustrating and even unusable. The goal is to make the navigation intuitive enough for the website to be perfectly usable.

Unusual Navigation Best Practices

Unusual navigation has no set rules. Just think differently and try something that does not look, feel or function like your everyday website. And follow these guidelines:

Let your navigation float freely within the content, rather than using the typical “Z pattern” that helps users scan. Make sure the navigation is still clear and self-explanatory, even if it doesn’t sit in the usual location at the top. Make it intuitive yet simple, maybe with just a few symbols that expand into many options.

Use imagery instead of, or in addition to, text. Allow users to use the mouse buttons and click wheel as alternatives (with instructions, of course). Also allow
keyboard navigation as an alternative (instructions again, please).

Finally, include arrows that visitors can use to cycle through the main sections without using the main navigation. Allow users to drag items to reveal new content, while maintaining usability and accessibility.

When Unusual Becomes Unusable

Not all unusual designs are as intuitive as their designers would like to believe. SOme can be more of a nuisance than a convenience. MIT offer some
usability guidelines for websites, which are not detailed but still useful as a quick checklist. If your website’s purpose and content are not immediately understood, you may want to rethink your design. Your content’s structure does not have to be conventional, but it should be logical. Few things are more frustrating to a user than not knowing how to navigate content.

Think of your website like a brand new vehicle. It has some things you are used to: a steering wheel, gears, a seat, etc. When you first sit in it, you immediately recognize certain items, but not others. If the gear shift has been moved from between the seats to behind the steering wheel, you might be confused at first. Not knowing how to shift detracts from the vehicle’s functionality. So, the vehicle’s controls should be clearly labeled and feel natural to use. The relocation of the gear shift is one of the more drastic advancements in the usability of automobiles in recent years and feels quite different from the “layout” of typical car.

While creativity, uniqueness and pushing boundaries always benefit the Web community as a whole, usability is far more important. Your layout and navigation must be intuitive and easy to use to be successful.

Robert Hartland is a professional designer and photographer with over seven years of experience. He owns his own clothing company
Envee Apparel, a creative theme-based lifestyle t-shirt company and accepts freelance work through his portfolio web site
Aether Design.