Textures are used in web design to avoid the cold/fake/digital appearance of flat solid colours, to instead add an element of realism and that sense of something real. You don’t have to go full-on with concrete, paper or wood textures to achieve this though, just adding a subtle overlay of dust or noise can really enhance your design to give that tactile appearance. This post showcases 20 inspiring examples of website designs that perfectly achieve that realistic feeling with the help of subtle textures.
Supercharged
The Supercharged website is a perfect example of subtle texture use with a mix of a grungy style background texture with a delicate scattering of splatters.
Kyle Steed
Kyle Steed’s website uses subtle textures in the header to frame the hand drawn illustration and lettering. Combined with the green-grey background it gives the feeling of a chalkboard, which fits in perfectly with the hand-drawn theme.
Resumebaking
A grainy paper texture can be seen on the Resumebaking website, which is a great link to the website’s topic of resumes. Despite now being completely digital the texture helps relate to the old paper based resumes everyone knows.
iPhone Icon Design
Even if it’s just for visual decoration a texture can really help transform a website design. Without the pattern/texture background file the iPhone Icon Design website would be sat on a plain background.
Jared Johnson
Jared Johnson takes the texture use up a notch in the header of his website, but maintains enough subtly to avoid the texture overpowering the main content of the page. The stained grainy texture gives the impression of an old book cover.
Amazee Labs
We’ve already seen how the hand-drawn illustrative style fits perfectly with a grainy paper effect background. The Amazee Labs is another great example, with almost every illustrated element having some kind of distressed treatment.
One Design Company
A subtle texture should be like a Ninja; You know it’s there, but you can’t see it. One Design Company’s website is a fab example of this. The texture in the background is almost unnoticeable, but if it wasn’t present there would be something missing from the design.
Review App
Just like the background here on Line25, the design used on the Review App includes both a cool grid pattern and a subtle texture. The use of just a pattern or just a texture would look pretty cool, but both together really looks great.
Marie Catribs
Marie Catribs’ website is yet another example of the hand-drawn/paper theme, but this time with much more of a grainy texture from recycled paper or cardboard. Combined with the torn paper effect it gives the Marie Catribs site an awesome low-fi theme.
Cheese Survival Kit
Even the smoothest of surfaces in real life have some kind of grain or texture, this is why adding a film of noise to your flat colours in your digital designs helps add that touch of realism. The Cheese Survival Kit website showcases this with subtle noise on both the black and white backgrounds.
FeedStitch
Sometimes textures are used purely for visual decoration, but in the case of the FeedStitch website the texture helps continue the theme of the design. A fabric texture in the background relates perfectly to the thread/stitching theme used to describe their service.
Foundation Six
The Foundation Six website is one of my all time favourites. The mix of subtle textures throughout the page, sexy serif typography, subtle highlights and clever shading effects all combine to produce a design you could reach out and touch.
Analog
The paper grain and the American Typewriter font of the Analog website definitely relate to the analogue theme of the design. Without these features the design wouldn’t be quite as appealing to the eye.
TheWP.co
The header design of TheWP.co would probably still work perfectly well without the subtle texture use, but its inclusion adds that extra touch of visual eye candy that makes the design much more pleasing.
Oink
While some of the designs featured have used faux-textures from noise filters, the Oink website uses an actual paper scan in its background. Manufactured textures might be quick and easy, but they’ll never match the detail of a real life texture scan.
Cast Iron Design Company
The whole design of the Cast Iron Design Company is based on the retro/vintage theme, which is one design style that just wouldn’t work without the help of some kind of aged texture effects.
GiveBeyond.me
The GiveBeyond.me website includes all kinds of interesting textures, all of which are so subtle you have to lean close to your monitor to really appreciate the finest details. The mix of the background texture and all the texture overlays on the type and illustrations really enhances the design.
GiftRocket
GiftRocket, like Amazee Labs is a website blessed with the textural/illustrative talent of Mike Kus. Check out Mike’s portfolio for more examples of his trademark style.
Moody International
For business websites the use of textures can help develop a friendly and approachable character. Often accountancy websites are built with bland colours and strict lines, but the Moody International website breaks the mould with tangible textures and colourful illustrations.
Dan Ogborn
The concrete stye background texture and the distress scratches across Dan Ogborn’s website help achieve that cool raw design theme, especially with the yellow focal points and burly slab-serif typography.
0 件のコメント:
コメントを投稿